View commands

Commands declaration

To add commands to native component, JS spec needs to commands object made with codegenNativeCommands method:

src/MyAwesomeViewNativeComponent.ts

import * as React from 'react';
import type { HostComponent, ViewProps } from 'react-native';
import type { Double } from 'react-native/Libraries/Types/CodegenTypes';
import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';

export interface MyAwesomeViewProps extends ViewProps {}

export interface MyAwesomeViewNativeCommands {
  doAwesomeJob: (viewRef: React.ElementRef<<HostComponent<MyAwesomeViewProps>>>, arg: Double) => void
}

export const MyAwesomeViewCommands = codegenNativeCommands<MyAwesomeViewNativeCommands>({
  supportedCommands: [ 'doAwesomeJob' ],
});

export default codegenNativeComponent<MyAwesomeViewProps>('MyAwesomeView') as HostComponent<MyAwesomeViewProps>;

Commands implementation in native code

iOS

ios/MyAwesomeViewComponentView.mm

#import <react/renderer/components/MyAwesomeView/RCTComponentViewHelpers.h>

// ...

@interface MyAwesomeViewComponentView () <RCTMyAwesomeViewViewProtocol>
@end

// ...

- (void)handleCommand:(const NSString *)commandName args:(const NSArray *)args
{
    RCTMyAwesomeViewHandleCommand(self, commandName, args);
}

- (void)doAwesomeJob:(double)arg
{
    // ...
}

To implement commands for iOS native component, it has to extend code-generated protocol and implement - handleCommand:args: method, as well as method declared in JS spec (via code-generated protocol).

Android

Kotlin

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

import com.facebook.react.bridge.ReadableArray
import com.facebook.react.module.annotations.ReactModule
import com.facebook.react.uimanager.ViewGroupManager
import com.facebook.react.uimanager.ViewManagerDelegate
import com.facebook.react.viewmanagers.MyAwesomeViewManagerDelegate
import com.facebook.react.viewmanagers.MyAwesomeViewManagerInterface

// ...

@ReactModule(name = MyAwesomeView.NAME)
class MyAwesomeViewManager : ViewGroupManager<MyAwesomeView>(), MyAwesomeViewManagerInterface<MyAwesomeView> {
    private val mDelegate = MyAwesomeViewManagerDelegate(this)

    override fun getDelegate(): ViewManagerDelegate<MyAwesomeView> = mDelegate

    override fun receiveCommand(root: MyAwesomeView, commandId: String?, args: ReadableArray?) {
        mDelegate.receiveCommand(root, commandId, args)
    }

    override fun doAwesomeJob(view: MyAwesomeView, arg: Double) {
        // ...
    }

    // ...
}

Java

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

import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.module.annotations.ReactModule;
import com.facebook.react.uimanager.ViewGroupManager;
import com.facebook.react.uimanager.ViewManagerDelegate;
import com.facebook.react.viewmanagers.MyAwesomeViewManagerDelegate;
import com.facebook.react.viewmanagers.MyAwesomeViewManagerInterface;

// ...

@ReactModule(name = MyAwesomeView.NAME)
public class MyAwesomeViewManager extends ViewGroupManager<MyAwesomeView> implements MyAwesomeViewManagerInterface<MyAwesomeView> {
    private final MyAwesomeViewManagerDelegate mDelegate = new MyAwesomeViewManagerDelegate(this);

    @Override
    public ViewManagerDelegate<MyAwesomeView> getDelegate() {
        return mDelegate;
    }

    @Override
    public void receiveCommand(MyAwesomeView root, String commandId, ReadableArray args) {
        mDelegate.receiveCommand(root, commandId, args);
    }

    @Override
    public void doAwesomeJob(MyAwesomeView view, double arg) {
        // ...
    }

    // ...
}

To implement command for Android native component, it has to implement receiveCommand method in view manager class, where command are forwarded to code-generated view manager delegate. Additionally, view manager should implement method declared in JS spec (via code-generated ManagerInterface interface).