diff --git a/android/build.gradle b/android/build.gradle index 4fc3e0d..cc5f31d 100644 --- a/android/build.gradle +++ b/android/build.gradle @@ -30,7 +30,7 @@ repositories { } dependencies { - compile 'com.facebook.react:react-native:0.14.+' + compile 'com.facebook.react:react-native:0.17.+' compile('com.mapbox.mapboxsdk:mapbox-android-sdk:2.3.0@aar') { transitive = true } diff --git a/android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLManager.java b/android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLManager.java index e0c01aa..997524d 100644 --- a/android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLManager.java +++ b/android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLManager.java @@ -13,7 +13,10 @@ import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableMap; import com.facebook.react.bridge.WritableMap; import com.facebook.react.uimanager.ReactProp; +import com.facebook.react.modules.core.DeviceEventManagerModule; +import com.mapbox.mapboxsdk.annotations.Marker; import com.mapbox.mapboxsdk.constants.Style; +import com.facebook.react.bridge.LifecycleEventListener; import android.graphics.RectF; import com.mapbox.mapboxsdk.geometry.CoordinateBounds; import com.facebook.react.uimanager.SimpleViewManager; @@ -51,6 +54,8 @@ public class ReactNativeMapboxGLManager extends SimpleViewManager { public static final String PROP_CENTER_COORDINATE = "centerCoordinate"; public static final String PROP_DEBUG_ACTIVE = "debugActive"; public static final String PROP_DIRECTION = "direction"; + public static final String PROP_ONOPENANNOTATION = "onOpenAnnotation"; + public static final String PROP_ONLONGPRESS = "onLongPress"; public static final String PROP_ONREGIONCHANGE = "onRegionChange"; public static final String PROP_ONUSER_LOCATION_CHANGE = "onUserLocationChange"; public static final String PROP_ROTATION_ENABLED = "rotateEnabled"; @@ -219,7 +224,9 @@ public class ReactNativeMapboxGLManager extends SimpleViewManager { location.putDouble("zoom", view.getZoomLevel()); event.putMap("src", location); ReactContext reactContext = (ReactContext) view.getContext(); - reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(view.getId(), "topChange", event); + reactContext + .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class) + .emit("onRegionChange", event); } } }); @@ -241,7 +248,49 @@ public class ReactNativeMapboxGLManager extends SimpleViewManager { locationMap.putString("provider", location.getProvider()); event.putMap("src", locationMap); ReactContext reactContext = (ReactContext) view.getContext(); - reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(view.getId(), "topSelect", event); + reactContext + .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class) + .emit("onUserLocationChange", event); + } + }); + } + + @ReactProp(name = PROP_ONOPENANNOTATION, defaultBoolean = true) + public void onMarkerClick(final MapView view, Boolean value) { + view.setOnMarkerClickListener(new MapView.OnMarkerClickListener() { + @Override + public boolean onMarkerClick(@Nonnull Marker marker) { + WritableMap event = Arguments.createMap(); + WritableMap markerObject = Arguments.createMap(); + markerObject.putString("title", marker.getTitle()); + markerObject.putString("subtitle", marker.getSnippet()); + markerObject.putDouble("latitude", marker.getPosition().getLatitude()); + markerObject.putDouble("longitude", marker.getPosition().getLongitude()); + markerObject.putDouble("id", marker.getId()); + event.putMap("src", markerObject); + ReactContext reactContext = (ReactContext) view.getContext(); + reactContext + .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class) + .emit("onOpenAnnotation", event); + return false; + } + }); + } + + @ReactProp(name = PROP_ONLONGPRESS, defaultBoolean = true) + public void onMapLongClick(final MapView view, Boolean value) { + view.setOnMapLongClickListener(new MapView.OnMapLongClickListener() { + @Override + public void onMapLongClick(@Nonnull LatLng location) { + WritableMap event = Arguments.createMap(); + WritableMap loc = Arguments.createMap(); + loc.putDouble("latitude", view.getCenterCoordinate().getLatitude()); + loc.putDouble("longitude", view.getCenterCoordinate().getLongitude()); + event.putMap("src", loc); + ReactContext reactContext = (ReactContext) view.getContext(); + reactContext + .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class) + .emit("onLongPress", event); } }); } diff --git a/index.android.js b/index.android.js index cc9df30..7e0de25 100644 --- a/index.android.js +++ b/index.android.js @@ -1,7 +1,8 @@ 'use strict' var React = require('react-native'); -var { NativeModules, requireNativeComponent } = React; +var { NativeModules, requireNativeComponent, DeviceEventEmitter } = React; +var Subscribable = require('Subscribable'); var MapMixins = { setDirectionAnimated(mapRef, heading) { @@ -79,6 +80,8 @@ var ReactMapView = requireNativeComponent('RCTMapbox', { tilt: React.PropTypes.number, compassIsHidden: React.PropTypes.bool, onRegionChange: React.PropTypes.func, + onOpenAnnotation: React.PropTypes.func, + onLongPress: React.PropTypes.func, onUserLocationChange: React.PropTypes.func, // Fix for https://github.com/mapbox/react-native-mapbox-gl/issues/118 scaleY: React.PropTypes.number, @@ -117,25 +120,32 @@ var ReactMapView = requireNativeComponent('RCTMapbox', { }); var ReactMapViewWrapper = React.createClass({ + mixins: [Subscribable.Mixin], statics: { Mixin: MapMixins }, - propTypes: { - onRegionChange: React.PropTypes.func, - onUserLocationChange: React.PropTypes.func + componentWillMount: function() { + this.addListenerOn(DeviceEventEmitter,'onRegionChange', this.handleOnChange); + this.addListenerOn(DeviceEventEmitter,'onUserLocationChange', this.handleUserLocation); + this.addListenerOn(DeviceEventEmitter,'onOpenAnnotation', this.handleOnOpenAnnotation); + this.addListenerOn(DeviceEventEmitter,'onLongPress', this.handleOnLongPress); }, handleOnChange(event) { - if (this.props.onRegionChange) this.props.onRegionChange(event.nativeEvent.src); + if (this.props.onRegionChange) this.props.onRegionChange(event); }, handleUserLocation(event) { - if (this.props.onUserLocationChange) this.props.onUserLocationChange(event.nativeEvent.src); + if (this.props.onUserLocationChange) this.props.onUserLocationChange(event); + }, + handleOnOpenAnnotation(event) { + if (this.props.onOpenAnnotation) this.props.onOpenAnnotation(event); + }, + handleOnLongPress(event) { + if (this.props.onLongPress) this.props.onLongPress(event); }, render() { return ( + {...this.props} /> ); } });