How to call a native view method from JavaScript

Question

I have an Android class that extends SimpleViewManager class and encapsulates a MapView. Setting props from React Native JavaScript class works like a charm (using the @ReactProp annotation). However, i'd like to be able to call a method on the view, something like the following:

public void centerToMyLocation(MapView view) {
    view.getController().setCenter(myLocation);
}

I've tried using the @ReactMethod annotation, getting a ref for the MapView in JavaScript and then call the centerToMyLocation method on that object. But it doesn't work (I get mapViewRef.centerToMyLocation is not a function error).

How can I call the method from a JavaScript class where I render the native MapView component?

score 11 · Accepted Answer · answered Aug 31 '16 at 06:33

Ok, the following worked for me:

Add a ref to the native component in the render method of the JavaScript class.
Use findNodeHandle method from react-native package, passing the obtained ref as an argument. The findNodeHandle method returns a react ID, save it.
Use UIManager.dispatchViewManagerCommand method from react-native, passing the react ID as the first argument. Second argument is a command id. Third argument are additional arguments (can be null).
Override receiveCommand method in your ViewManager native class, which exposes the component. In this method, handle the command.

Example JS:

componentDidMount() {
    this.mapViewHandle = findNodeHandle(this.mapViewRef);
}

center() {
    UIManager.dispatchViewManagerCommand(this.mapViewHandle, 0, null);
}

render() {
    return (
        <MapView
            ref={(mv) => this.mapViewRef = mv} />
    );
}

Example Java:

@Override
public void receiveCommand(MapView view, int commandId, @Nullable ReadableArray args) {
    super.receiveCommand(view, commandId, args);
    if (commandId == 0) {
        if (mMyLocation != null) {
            view.getController().setCenter(mMyLocation);
        }
    }
}

The missing piece was `findNodeHandle` for me, thanks! – user1112789 Feb 28 '17 at 18:35 — user1112789, Feb 28 '17 at 18:35

score 2 · Answer 2 · answered Feb 06 '18 at 22:00

2

Here's another way to do it:

You just have to create a sibling UI Native Module to accompany the UI Native Component as seen in this SO answer

That should be an easier and more future proof way to do it.

answered Feb 06 '18 at 22:00

SudoPlz

20,996
12
82
123

How to call a native view method from JavaScript

2 Answers2