Method types (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 👍

Void method

Void methods can take multiple arguments and do not return any value.

JS Spec

src/NativeMyAwesomeModule.ts

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

// ...

export interface Spec extends TurboModule {
  myAwesomeVoidMethod(): void
  myAwesomeVoidMethodWithArguments(numArg: number, objArg: { firstObjProp: string, secondObjProp?: boolean }): void
}

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

iOS Spec

ios/NativeMyAwesomeModule.mm

RCT_EXPORT_METHOD(myAwesomeVoidMethod)
{
    // ...
}

RCT_EXPORT_METHOD(myAwesomeVoidMethodWithArguments:(NSNumber *) numArg 
                                            objArg:(NSDictionary *) objArg)
{
    // ...
}

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 myAwesomeVoidMethod() {
    // ...
}

@ReactMethod
fun myAwesomeVoidMethodWithArguments(numArg: Double, objArg: ReadableMap) {
    // ...
}

Java

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

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

// ...

@ReactMethod
public void myAwesomeVoidMethod() {
    // ...
}

@ReactMethod
public void myAwesomeVoidMethodWithArguments(double numArg, ReadableMap objArg) {
    // ...
}

Sync method

Sync methods can take multiple arguments and synchronously return the value.

JS Spec

src/NativeMyAwesomeModule.ts

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

// ...

export interface Spec extends TurboModule {
  myAwesomeSyncMethod(): number
  myAwesomeSyncMethodWithArguments(numArg: number, objArg: { firstObjProp: string, secondObjProp?: boolean }): number
}

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

iOS Spec

ios/NativeMyAwesomeModule.mm

RCT_EXPORT_SYNCHRONOUS_TYPED_METHOD(double, myAwesomeSyncMethod)
{
    // ...
    return 42;
}

RCT_EXPORT_SYNCHRONOUS_TYPED_METHOD(double, myAwesomeSyncMethodWithArguments:(NSNumber *) numArg 
                                                                      objArg:(NSDictionary *) objArg)
{
    // ...
    return 42;
}

Android Spec

Kotlin

android/src/main/newarch/NativeMyAwesomeModule.kt

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

// ...

@ReactMethod(isBlockingSynchronousMethod = true)
fun myAwesomeSyncMethod(): Double {
    // ...
    return 42
}

@ReactMethod(isBlockingSynchronousMethod = true)
fun myAwesomeSyncMethodWithArguments(numArg: Double, objArg: ReadableMap): Double {
    // ...
    return 42
}

Java

android/src/main/newarch/NativeMyAwesomeModule.java

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

// ...

@ReactMethod(isBlockingSynchronousMethod = true)
public double myAwesomeSyncMethod() {
    // ...
    return 42;
}

@ReactMethod(isBlockingSynchronousMethod = true)
public double myAwesomeSyncMethodWithArguments(double numArg, ReadableMap objArg) {
    // ...
    return 42;
}

Promise method

Promise methods can take multiple arguments and asynchronously return the value.

JS Spec

src/NativeMyAwesomeModule.ts

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

// ...

export interface Spec extends TurboModule {
  myAwesomePromiseMethod(): Promise<boolean>
  myAwesomePromiseMethodWithArguments(numArg: number, objArg: { firstObjProp: string, secondObjProp?: boolean }): Promise<boolean>
}

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

iOS Spec

ios/NativeMyAwesomeModule.mm

RCT_EXPORT_METHOD(myAwesomePromiseMethod:(RCTPromiseResolveBlock) resolve
                                  reject:(RCTPromiseRejectBlock) reject)
{
    // ...
    resolve(@(YES));
}

RCT_EXPORT_METHOD(myAwesomePromiseMethodWithArguments:(NSNumber *) numArg 
                                               objArg:(NSDictionary *) objArg
                                              resolve:(RCTPromiseResolveBlock) resolve
                                               reject:(RCTPromiseRejectBlock) reject)
{
    // ...
    resolve(@(YES));
}

Android Spec

Kotlin

android/src/main/newarch/NativeMyAwesomeModule.kt

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

// ...

@ReactMethod
fun myAwesomePromiseMethod(promise: Promise) {
    // ...
    promise.resolve(true)
}

@ReactMethod
fun myAwesomePromiseMethodWithArguments(numArg: Double, objArg: ReadableMap, promise: Promise) {
    // ...
    promise.resolve(true)
}

Java

android/src/main/newarch/NativeMyAwesomeModule.java

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

// ...

@ReactMethod
public void myAwesomePromiseMethod(Promise promise) {
    // ...
    promise.resolve(true);
}

@ReactMethod
public void myAwesomePromiseMethodWithArguments(double numArg, ReadableMap objArg, Promise promise) {
    // ...
    promise.resolve(true);
}

Callback method

Callback methods can take multiple arguments including callback arguments which are used to communicate from native to JS world. Callbacks should be put as last arguments in the method.

JS Spec

src/NativeMyAwesomeModule.ts

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

// ...

export interface Spec extends TurboModule {
  myAwesomeCallbackMethod(myResultCallback: () => void): void
  myAwesomeCallbackMethodWithArguments(numArg: number, objArg: { firstObjProp: string, secondObjProp?: boolean }, myResultCallback: () => void): void
}

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

iOS Spec

ios/NativeMyAwesomeModule.mm

RCT_EXPORT_METHOD(myAwesomeCallbackMethod:(RCTResponseSenderBlock) myResultCallback)
{
    // ...
    myResultCallback(@[nil]);
}

RCT_EXPORT_METHOD(myAwesomeCallbackMethodWithArguments:(NSNumber *) numArg 
                                                objArg:(NSDictionary *) objArg
                                      myResultCallback:(RCTResponseSenderBlock) myResultCallback)
{
    // ...
    myResultCallback(@[nil]);
}

Android Spec

Kotlin

android/src/main/newarch/NativeMyAwesomeModule.kt

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

// ...

@ReactMethod
fun myAwesomeCallbackMethod(myResultCallback: Callback) {
    // ...
    callback.invoke(null)
}

@ReactMethod
fun myAwesomeCallbackMethodWithArguments(numArg: Double, objArg: ReadableMap, myResultCallback: Callback) {
    // ...
    callback.invoke(null)
}

Java

android/src/main/newarch/NativeMyAwesomeModule.java

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

// ...

@ReactMethod
public void myAwesomeCallbackMethod(Callback myResultCallback) {
    // ...
    callback.invoke(null);
}

@ReactMethod
public void myAwesomeCallbackMethodWithArguments(double numArg, ReadableMap objArg, Callback myResultCallback) {
    // ...
    callback.invoke(null);
}