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.
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.