Skip to main content

JS specification

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

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

export interface Spec extends TurboModule {
  getConstants(): { PORTRAIT: string; LANDSCAPE: string }
  addListener(eventName: string): void
  removeListeners(count: number): void
}

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

Each module that emits events needs to declare two methods in its spec - addListener and removeListeners.

If a module exports some constants, it needs to declare getConstants method in its spec, that returns an object with all registered constants. In this case, the module declares two constants: PORTRAIT & LANDSCAPE.

The module is available under the ScreenOrientationModule 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 ScreenOrientationModule } from './NativeScreenOrientationModule';

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