Method arguments (old arch)

info

You may notice, that JS specs contain codegen-related methods, classes, types, etc. to make things more future-proof.

That's because:

• those elements are available since RN older versions (even from v0.65)
• those elements are falling back to "old architecture" implementation (e.g. codegenNativeComponent)
• it introduces type safety for exposed native parts on JS side
• it's much easier to keep single specification on JS side - when old arch will be dropped, there'll be no need to change anything on JS side

So to make it easier, let's use them, to get you more familiar with it 👍

Boolean argument

JS Spec

src/NativeMyAwesomeModule.ts

import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

// ...

export interface Spec extends TurboModule {
  myMethod(enabled: boolean, checked?: boolean): void
}

// TurboModuleRegistry uses NativeModules['MyAwesomeModule'] on old arch
export default TurboModuleRegistry.getEnforcing<Spec>('MyAwesomeModule');

iOS Spec

ios/NativeMyAwesomeModule.mm

RCT_EXPORT_METHOD(myMethod:(BOOL) enabled
                   checked:(NSNumber *) checked)
{
    // ...
}

Android Spec

Kotlin

android/src/main/newarch/com/myawesomeapp/NativeMyAwesomeModule.kt

import com.facebook.react.bridge.ReactMethod

// ...

@ReactMethod
fun myMethod(enabled: Boolean, checked: Boolean?) {
    // ...
}

Java

android/src/main/newarch/com/myawesomeapp/NativeMyAwesomeModule.java

import androidx.annotation.Nullable;

import com.facebook.react.bridge.ReactMethod;

// ...

@ReactMethod
public void myMethod(boolean enabled, @Nullable Boolean checked) {
    // ...
}

Number argument

JS Spec

src/NativeMyAwesomeModule.ts

import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

// ...

export interface Spec extends TurboModule {
  myMethod(count: number, optionalCount?: number): void
}

// TurboModuleRegistry uses NativeModules['MyAwesomeModule'] on old arch
export default TurboModuleRegistry.getEnforcing<Spec>('MyAwesomeModule');

iOS Spec

ios/NativeMyAwesomeModule.mm

RCT_EXPORT_METHOD(myMethod:(double) count
             optionalCount:(NSNumber *) optionalCount)
{
    // ...
}

Android Spec

Kotlin

android/src/main/newarch/com/myawesomeapp/NativeMyAwesomeModule.kt

import com.facebook.react.bridge.ReactMethod

// ...

@ReactMethod
fun myMethod(count: Double, optionalCount: Double?) {
    // ...
}

Java

android/src/main/newarch/com/myawesomeapp/NativeMyAwesomeModule.java

import androidx.annotation.Nullable;

import com.facebook.react.bridge.ReactMethod;

// ...

@ReactMethod
public void myMethod(double count, @Nullable Double optionalCount) {
    // ...
}

String argument

JS Spec

src/NativeMyAwesomeModule.ts

import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

// ...

export interface Spec extends TurboModule {
  myMethod(name: string, label?: number): void
}

// TurboModuleRegistry uses NativeModules['MyAwesomeModule'] on old arch
export default TurboModuleRegistry.getEnforcing<Spec>('MyAwesomeModule');

iOS Spec

ios/NativeMyAwesomeModule.mm

RCT_EXPORT_METHOD(myMethod:(NSString *) name
                     label:(NSString * _Nullable) label)
{
    // ...
}

Android Spec

Kotlin

android/src/main/newarch/com/myawesomeapp/NativeMyAwesomeModule.kt

import com.facebook.react.bridge.ReactMethod

// ...

@ReactMethod
fun myMethod(name: String, label: String?) {
    // ...
}

Java

android/src/main/newarch/com/myawesomeapp/NativeMyAwesomeModule.java

import androidx.annotation.Nullable;

import com.facebook.react.bridge.ReactMethod;

// ...

@ReactMethod
public void myMethod(String name, @Nullable String label) {
    // ...
}

Array argument

JS Spec

src/NativeMyAwesomeModule.ts

import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

// ...

export interface Spec extends TurboModule {
  myMethod(data: number[], optionalData?: string[]): void
}

// TurboModuleRegistry uses NativeModules['MyAwesomeModule'] on old arch
export default TurboModuleRegistry.getEnforcing<Spec>('MyAwesomeModule');

iOS Spec

ios/NativeMyAwesomeModule.mm

RCT_EXPORT_METHOD(myMethod:(NSArray *) data
              optionalData:(NSArray * _Nullable) optionalData)
{
    // ...
}

Android Spec

Kotlin

android/src/main/newarch/com/myawesomeapp/NativeMyAwesomeModule.kt

import com.facebook.react.bridge.ReactMethod
import com.facebook.react.bridge.ReadableArray

// ...

@ReactMethod
fun myMethod(data: ReadableArray, optionalData: ReadableArray?) {
    // ...
}

Java

android/src/main/newarch/com/myawesomeapp/NativeMyAwesomeModule.java

import androidx.annotation.Nullable;

import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.ReadableArray;

// ...

@ReactMethod
public void myMethod(ReadableArray data, @Nullable ReadableArray optionalData) {
    // ...
}

Object argument

JS Spec

src/NativeMyAwesomeModule.ts

import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

// ...

export interface Spec extends TurboModule {
  myMethod(config: { flag: boolean, option: string }, optionalConfig?: { count: number }): void
}

// TurboModuleRegistry uses NativeModules['MyAwesomeModule'] on old arch
export default TurboModuleRegistry.getEnforcing<Spec>('MyAwesomeModule');

iOS Spec

ios/NativeMyAwesomeModule.mm

RCT_EXPORT_METHOD(myMethod:(NSDictionary *) config
            optionalConfig:(NSDictionary *) optionalConfig)
{
    // ...
}

Android Spec

Kotlin

android/src/main/newarch/com/myawesomeapp/NativeMyAwesomeModule.kt

import com.facebook.react.bridge.ReactMethod
import com.facebook.react.bridge.ReadableMap

// ...

@ReactMethod
fun myMethod(config: ReadableMap, optionalConfig: ReadableMap?) {
    // ...
}

Java

android/src/main/newarch/com/myawesomeapp/NativeMyAwesomeModule.java

import androidx.annotation.Nullable;

import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.ReadableMap;

// ...

@ReactMethod
public void myMethod(ReadableMap config, @Nullable ReadableMap optionalConfig) {
    // ...
}