react-nativereact-native-native-ui-componentreact-native-native-module

How to implement a React Native UI component method in Android


It's clear to me that for react-native native modules we can use the @ReactMethod to export a method and call it from JSX, but how do we do the same thing in react-native native UI components?

In the documentation I only see @ReactProp being mentioned. If @ReactMethod is not working, how do I access a property of my native UI component from JSX then? (On iOS this can be done on native ui components with RCT_EXPORT_METHOD but on Android is something similar possible?)

Thank you.


Solution

  • Ok I ended up creating a Module, and passing a UI Component reference on its constructor:

    Here's my UI component:

    public class RCTACCalendarManager extends ViewGroupManager<RCTACCalendar> {
        public static final String REACT_CLASS = "RCTACCalendar";
        private RCTACCalendar mCalendarInstance;
    
        public RCTACCalendarManager(ReactApplicationContext reactContext) {
            super();
        }
    
        @Override
        public String getName() {
            return REACT_CLASS;
        }
    
        @Override
        public RCTACCalendar createViewInstance(ThemedReactContext context) {
            mCalendarInstance = new RCTACCalendar(context);
            return mCalendarInstance;
        }
    
        public RCTACCalendar getCalendarInstance() { // <-- returns the View instance
            return mCalendarInstance;
        }
    }
    

    Here's the Module I created for that component:

    public class RCTACCalendarModule extends ReactContextBaseJavaModule {
        private RCTACCalendar mCalendarInstance;
    
        public RCTACCalendarModule(ReactApplicationContext reactContext, RCTACCalendarManager calManager) {
            super(reactContext);
            if (calManager != null) {
                mCalendarInstance = calManager.getCalendarInstance();
            }
        }
    
        @Override
        public String getName() {
            return "ACCalendarManager";
        }
    
        @ReactMethod
        public void mySuperDuperFunction(Promise promise) {
            if (mCalendarInstance != null) {
                mCalendarInstance.mySuperDuperFunction(promise); // <-- Magic
            }
        }
    }
    

    and here's how I combine those two together in my Package declaration:

    public class RCTACCalendarPackage implements ReactPackage {
        private RCTACCalendarManager mCalManager;
    
        @Override
        public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
            if (mCalManager == null) {
                mCalManager = new RCTACCalendarManager(reactContext);
            }
            return Arrays.<NativeModule>asList(new RCTACCalendarModule(reactContext, mCalManager));
        }
    
        @Override
        public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
            if (mCalManager == null) {
                mCalManager = new RCTACCalendarManager(reactContext);
            }
            return Arrays.<ViewManager>asList(mCalManager);
        }
    }
    

    It works like a charm.