Skip to main content

JS specification

When all boilerplate is ready, let's navigate to src/NativeSaveFilePickerModule.ts. To declare module spec, let's paste following content:

src/NativeSaveFilePickerModule.ts
import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  saveFileWithCallback(
    filename: string,
    callback: (result: {
      success: boolean,
      cancelled: boolean,
      error?: { code: number, message: string }
    }) => void
    ): void
  saveFileWithPromise(filename: string): Promise<boolean>
}

export default TurboModuleRegistry.getEnforcing<Spec>('SaveFilePickerModule');

To showcase how you can use callback and promise methods, we'll declare the same method with different types of response.

Both methods will rely on the filename argument, which will be the name of the file from the platform application assets.

In the first method, we put the callback argument that, when invoked back, will get the result object with the success, cancelled flags and optional error object

The second method returns the promise will the value of the success (true - success, false - cancel).

The module is available under the SaveFilePickerModule name

You can run codegen to generate native classes and interfaces, and also check if specification is defined in correct way:

  • on iOS: run yarn codegen:ios, the code-generated classes should be available under your app's <rootDir>/ios/build/generated/ios directory

  • on Android: yarn codegen:android, the code-generated classes should be available under the package's <rootDir>/<packageDir>/android/build/generated/source/codegen directory

After that, let's finalize JS part with exporting module from index.ts

src/index.ts
export { default as SaveFilePickerModule } from './NativeSaveFilePickerModule';

JS part finished! Let's jump to iOS implementation.