Custom events in React Native Android native UI component

Question

I'd like to use OpenStreetMap tiles in my React Native app on Android, so I'm trying to wrap the OSMDroid native UI component as described here. For the most part it's working fine, but I'm having trouble figuring out how to correctly handle events, specifically onScroll and onZoom.

With OSMDroid, you set a DelayedMapListener to handle the events, which is pretty straightforward. I've confirmed that events are being handle correctly Java-side up until the point where the JS code should be triggered. However, they're not triggering my JavaScript code.

Based on the documentation, I've implemented the event handlers in Java in the createViewInstance method of my view manager:

map.setMapListener(new DelayedMapListener(new MapListener() {
    public boolean onScroll(ScrollEvent event) {
        WritableMap eventData = Arguments.createMap();

        // Fill in eventData; details not important

        ReactContext reactContext = (ReactContext)map.getContext();
        reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
            map.getId(),
            "topChange",
             eventData);

        return true;
    }

    public boolean onZoom(ZoomEvent event) {
        // Basically the same as above
    }
}, 100));

The relevant part of my JS code is basically identical to the code in the documentation linked above:

class OSMDroidMapView extends Component {
    constructor(props) {
        super(props);
        this._onChange = this._onChange.bind(this);
    }

    _onChange(event: Event) {
        console.log(event);
        // Handle event data
    }

    render() {
        return <OSMDroidMapView {...this.props} onChange={this._onChange}/>
    }
}

There are no errors or any signs that anything is wrong. The Java event handler code is called correctly. There's just no sign of anything happening in the JS code when an event occurs. Does anyone know how to do this correctly? I feel like I must be missing some basic concept here.

Possible duplicate of Creating Custom UI component for android on React Native. How to send data to JS? — user6169399
– user6169399, Commented Sep 12, 2016 at 9:34
I have tried to put together a comprehensive Android -> RN event solution on that related post. — Richard Le Mesurier
– Richard Le Mesurier, Commented May 26, 2017 at 17:54

Bertrand · Accepted Answer · 2016-04-25 13:47:34Z

9

To send custom events to Javascript you can use RCTDeviceEventEmitter:

In the Native side:

import com.facebook.react.modules.core.DeviceEventManagerModule;

...

public boolean onScroll(ScrollEvent event) {
    WritableMap eventData = Arguments.createMap();

    // Fill in eventData; details not important

    ReactContext reactContext = (ReactContext)map.getContext();
    reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit("YouCustomEventName", eventData);

    return true;
}

Inside your JS module you just have to register a listener using DeviceEventEmitter:

class OSMDroidMapView extends Component {
    constructor(props) {
        super(props);
        this._onChange = this._onChange.bind(this);
    }

    componentWillMount() {
        DeviceEventEmitter.addListener('YouCustomEventName', this._onChange);
    }

    componentWillUnmount() {
        DeviceEventEmitter.removeListener('YouCustomEventName', this._onChange);
    }

    _onChange(event: Event) {
        console.log(event);
        // Handle event data
    }

    render() {
        return <OSMDroidMapView {...this.props} onChange={this._onChange}/>
    }
}

Hope it helps.

answered Apr 25, 2016 at 13:47

Bertrand

13.6k5 gold badges41 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

seemann Over a year ago

This will trigger the event for everyone that os listening to it, not call a callback of an specific instance.

Thibaut Over a year ago

(ReactContext)map.getContext(); what is this ? AndroidStudio throws an error on this line

Hibbem Over a year ago

map is your custom Android UI component here

Collectives™ on Stack Overflow

Custom events in React Native Android native UI component

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related