React-native-mapbox-gl: [Android] onRegionChange is not getting called when map is panned or zoomed

[Dacello]

The functionality works fine on iOS, but on android, onRegionChange never seems to fire off when you drag or zoom the map. I've done some digging and have confirmed that onMapChanged does get called within ReactNativeMapboxGLManager.java when you drag & zoom (https://github.com/mapbox/react-native-mapbox-gl/blob/master/android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLManager.java#L233), but it doest seem to be triggering the event within React.

[Dacello]

BTW i am using the latest version: "react-native-mapbox-gl": "^4.1.1"

[KevinHu2014]

same problem on "react-native-mapbox-gl": "^4.1.1"

[Dacello]

FWIW, you can get around this by directly listening to DeviceEventEmitter from within react.
http://facebook.github.io/react-native/releases/0.26/docs/native-modules-android.html#sending-events-to-javascript
Just add this to your map view component:

  componentDidMount() {
    DeviceEventEmitter.addListener('onRegionChange', this.props.onRegionChange);
  }

  componentWillUnmount() {
    DeviceEventEmitter.removeAllListeners()
  }

[Dacello]

@mmelchio yea this is only necessary for android, since the iOS api works as expected. In my case, I am passing a prop down from the top level that specifies the platform, so I can have different functionality based on that. Something like:

  // HACK: there is a bug with react-native-mapbox-gl for android
  // where events that are triggered on the Java side are not sent back to React
  // however the events are still firing on the Java side, and it turns out that
  // we can directly listen to these events with DeviceEventEmitter. However,
  // for iOS, we will just pass onRegionChange to the mapbox as a prop
  componentDidMount() {
    if (this.props.platform === 'android') {
      DeviceEventEmitter.addListener('onRegionChange', this.props.onRegionChange)
    }
  }

  componentWillUnmount() {
    DeviceEventEmitter.removeAllListeners()
  }

  // only use this event handler for ios, since it works as expected
  onRegionChange = (region)=> {
    if (this.props.platform === 'ios') { this.props.onRegionChange(region) }
  };

And then Im passing the this.onRegionChange to `onRegionChange prop sent to the Mapbox component.

<Mapbox
    onRegionChange={this.onRegionChange}
    styleURL={mapboxStyleURL}
    accessToken={mapboxAPItoken} />

[mmelchio]

@Dacello thanks for your fast reply. I just deleted my comment. I made a simple mistake. It works!
Thanks again.

[jayfunk]

@Dacello Were you able to find if the Java bindings to React were just missing something or is there a fundamental issue upstream somewhere?

[Dacello]

@jayfunk from what I can tell, there is a fundamental issue upstream.
If you look at the event handlers in ReactNativeMapboxGLManager.java, they are doing:

                            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                            .emit("onRegionChange", event);

I think this should correctly emit the event to the react context, unless maybe the react context is wrong?

https://github.com/mapbox/react-native-mapbox-gl/blob/master/android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLManager.java#L228

[dapetcu21]

Fixed by #365