Replace mixin API with member methods

index.ios.js

@@ -8,76 +8,75 @@ var { NativeModules, requireNativeComponent, findNodeHandle } = ReactNative;
 
 var { MapboxGLManager } = NativeModules;
 
-var MapMixins = {
-  addPackForRegion(mapRef, options) {
-    MapboxGLManager.addPackForRegion(findNodeHandle(this.refs[mapRef]), options);
-  },
-  getPacks(mapRef, callback) {
-    MapboxGLManager.getPacks(findNodeHandle(this.refs[mapRef]), callback);
-  },
-  removePack(mapRef, packName, callback) {
-    MapboxGLManager.removePack(findNodeHandle(this.refs[mapRef]), packName, callback);
-  },
-  setDirectionAnimated(mapRef, heading) {
-    MapboxGLManager.setDirectionAnimated(findNodeHandle(this.refs[mapRef]), heading);
-  },
-  setZoomLevelAnimated(mapRef, zoomLevel) {
-    MapboxGLManager.setZoomLevelAnimated(findNodeHandle(this.refs[mapRef]), zoomLevel);
-  },
-  setCenterCoordinateAnimated(mapRef, latitude, longitude) {
-    return MapboxGLManager.setCenterCoordinateAnimated(findNodeHandle(this.refs[mapRef]), latitude, longitude);
-  },
-  setCenterCoordinateZoomLevelAnimated(mapRef, latitude, longitude, zoomLevel) {
-    MapboxGLManager.setCenterCoordinateZoomLevelAnimated(findNodeHandle(this.refs[mapRef]), latitude, longitude, zoomLevel);
-  },
-  setCameraAnimated(mapRef, latitude, longitude, fromDistance, pitch, heading, duration) {
-    MapboxGLManager.setCameraAnimated(findNodeHandle(this.refs[mapRef]), latitude, longitude, fromDistance, pitch, heading, duration);
-  },
-  addAnnotations(mapRef, annotations) {
-    MapboxGLManager.addAnnotations(findNodeHandle(this.refs[mapRef]), annotations);
-  },
-  updateAnnotation(mapRef, annotation) {
-    MapboxGLManager.updateAnnotation(findNodeHandle(this.refs[mapRef]), annotation);
-  },
-  selectAnnotationAnimated(mapRef, selectedIdentifier) {
-    MapboxGLManager.selectAnnotationAnimated(findNodeHandle(this.refs[mapRef]), selectedIdentifier);
-  },
-  removeAnnotation(mapRef, selectedIdentifier) {
-    MapboxGLManager.removeAnnotation(findNodeHandle(this.refs[mapRef]), selectedIdentifier);
-  },
-  removeAllAnnotations(mapRef) {
-    MapboxGLManager.removeAllAnnotations(findNodeHandle(this.refs[mapRef]));
-  },
-  setVisibleCoordinateBoundsAnimated(mapRef, latitudeSW, longitudeSW, latitudeNE, longitudeNE, paddingTop, paddingRight, paddingBottom, paddingLeft) {
-    MapboxGLManager.setVisibleCoordinateBoundsAnimated(findNodeHandle(this.refs[mapRef]), latitudeSW, longitudeSW, latitudeNE, longitudeNE, paddingTop, paddingRight, paddingBottom, paddingLeft);
-  },
-  setUserTrackingMode(mapRef, userTrackingMode) {
-    MapboxGLManager.setUserTrackingMode(findNodeHandle(this.refs[mapRef]), userTrackingMode);
-  },
-  getCenterCoordinateZoomLevel(mapRef, callback) {
-    MapboxGLManager.getCenterCoordinateZoomLevel(findNodeHandle(this.refs[mapRef]), callback);
-  },
-  getDirection(mapRef, callback) {
-    MapboxGLManager.getDirection(findNodeHandle(this.refs[mapRef]), callback);
-  },
-  getBounds(mapRef, callback) {
-    MapboxGLManager.getBounds(findNodeHandle(this.refs[mapRef]), callback);
-  },
-  mapStyles: MapboxGLManager.mapStyles,
-  userTrackingMode: MapboxGLManager.userTrackingMode,
-  userLocationVerticalAlignment: MapboxGLManager.userLocationVerticalAlignment,
-  unknownResourceCount: MapboxGLManager.unknownResourceCount
-};
-
-var MapView = React.createClass({
+var Mapbox = React.createClass({
   statics: {
-    Mixin: MapMixins,
     metricsEnabled: MapboxGLManager.metricsEnabled,
     setMetricsEnabled(enabled: boolean) {
-      MapView.metricsEnabled = enabled;
+      Mapbox.metricsEnabled = enabled;
       MapboxGLManager.setMetricsEnabled(enabled);
-    }
+    },
+
+    mapStyles: MapboxGLManager.mapStyles,
+    userTrackingMode: MapboxGLManager.userTrackingMode,
+    userLocationVerticalAlignment: MapboxGLManager.userLocationVerticalAlignment,
+    unknownResourceCount: MapboxGLManager.unknownResourceCount
   },
+
+  addPackForRegion(options) {
+    MapboxGLManager.addPackForRegion(findNodeHandle(this), options);
+  },
+  getPacks(callback) {
+    MapboxGLManager.getPacks(findNodeHandle(this), callback);
+  },
+  removePack(packName, callback) {
+    MapboxGLManager.removePack(findNodeHandle(this), packName, callback);
+  },
+  setDirectionAnimated(heading) {
+    MapboxGLManager.setDirectionAnimated(findNodeHandle(this), heading);
+  },
+  setZoomLevelAnimated(zoomLevel) {
+    MapboxGLManager.setZoomLevelAnimated(findNodeHandle(this), zoomLevel);
+  },
+  setCenterCoordinateAnimated(latitude, longitude) {
+    return MapboxGLManager.setCenterCoordinateAnimated(findNodeHandle(this), latitude, longitude);
+  },
+  setCenterCoordinateZoomLevelAnimated(latitude, longitude, zoomLevel) {
+    MapboxGLManager.setCenterCoordinateZoomLevelAnimated(findNodeHandle(this), latitude, longitude, zoomLevel);
+  },
+  setCameraAnimated(latitude, longitude, fromDistance, pitch, heading, duration) {
+    MapboxGLManager.setCameraAnimated(findNodeHandle(this), latitude, longitude, fromDistance, pitch, heading, duration);
+  },
+  addAnnotations(annotations) {
+    MapboxGLManager.addAnnotations(findNodeHandle(this), annotations);
+  },
+  updateAnnotation(annotation) {
+    MapboxGLManager.updateAnnotation(findNodeHandle(this), annotation);
+  },
+  selectAnnotationAnimated(selectedIdentifier) {
+    MapboxGLManager.selectAnnotationAnimated(findNodeHandle(this), selectedIdentifier);
+  },
+  removeAnnotation(selectedIdentifier) {
+    MapboxGLManager.removeAnnotation(findNodeHandle(this), selectedIdentifier);
+  },
+  removeAllAnnotations(mapRef) {
+    MapboxGLManager.removeAllAnnotations(findNodeHandle(this));
+  },
+  setVisibleCoordinateBoundsAnimated(latitudeSW, longitudeSW, latitudeNE, longitudeNE, paddingTop, paddingRight, paddingBottom, paddingLeft) {
+    MapboxGLManager.setVisibleCoordinateBoundsAnimated(findNodeHandle(this), latitudeSW, longitudeSW, latitudeNE, longitudeNE, paddingTop, paddingRight, paddingBottom, paddingLeft);
+  },
+  setUserTrackingMode(userTrackingMode) {
+    MapboxGLManager.setUserTrackingMode(findNodeHandle(this), userTrackingMode);
+  },
+  getCenterCoordinateZoomLevel(callback) {
+    MapboxGLManager.getCenterCoordinateZoomLevel(findNodeHandle(this), callback);
+  },
+  getDirection(callback) {
+    MapboxGLManager.getDirection(findNodeHandle(this), callback);
+  },
+  getBounds(callback) {
+    MapboxGLManager.getBounds(findNodeHandle(this), callback);
+  },
+
   _onRegionChange(event: Event) {
     if (this.props.onRegionChange) this.props.onRegionChange(event.nativeEvent.src);
   },
@@ -120,6 +119,7 @@ var MapView = React.createClass({
   _onOfflineDidRecieveError(event: Event) {
     if (this.props.onOfflineDidRecieveError) this.props.onOfflineDidRecieveError(event.nativeEvent.src);
   },
+
   propTypes: {
     showsUserLocation: PropTypes.bool,
     rotateEnabled: PropTypes.bool,
@@ -179,6 +179,7 @@ var MapView = React.createClass({
     onOfflineDidRecieveError: PropTypes.func,
     onChangeUserTrackingMode: PropTypes.func
   },
+
   getDefaultProps() {
     return {
       centerCoordinate: {
@@ -190,7 +191,7 @@ var MapView = React.createClass({
       rotateEnabled: true,
       scrollEnabled: true,
       showsUserLocation: false,
-      styleURL: this.Mixin.mapStyles.streets,
+      styleURL: MapboxGLManager.mapStyles.streets,
       zoomEnabled: true,
       zoomLevel: 0,
       attributionButtonIsHidden: false,
@@ -198,6 +199,7 @@ var MapView = React.createClass({
       compassIsHidden: false
     };
   },
+
   render() {
     return (
       <MapboxGLView
@@ -220,6 +222,6 @@ var MapView = React.createClass({
   }
 });
 
-var MapboxGLView = requireNativeComponent('RCTMapboxGL', MapView);
+var MapboxGLView = requireNativeComponent('RCTMapboxGL', Mapbox);
 
-module.exports = MapView;
+module.exports = Mapbox;

ios/example.js

@@ -2,7 +2,6 @@
 
 import React, { Component } from 'react';
 var Mapbox = require('react-native-mapbox-gl');
-var mapRef = 'mapRef';
 import {
   AppRegistry,
   StyleSheet,
@@ -11,8 +10,9 @@ import {
   View
 } from 'react-native';
 
+const accessToken = 'your-mapbox.com-access-token';
+
 var MapExample = React.createClass({
-  mixins: [Mapbox.Mixin],
   getInitialState() {
     return {
       center: {
@@ -95,19 +95,19 @@ var MapExample = React.createClass({
     StatusBar.setHidden(true);
     return (
       <View style={styles.container}>
-        <Text onPress={() => this.setDirectionAnimated(mapRef, 0)}>
+        <Text onPress={() => this._map && this._map.setDirectionAnimated(0)}>
           Set direction to 0
         </Text>
-        <Text onPress={() => this.setZoomLevelAnimated(mapRef, 6)}>
+        <Text onPress={() => this._map && this._map.setZoomLevelAnimated(6)}>
           Zoom out to zoom level 6
         </Text>
-        <Text onPress={() => this.setCenterCoordinateAnimated(mapRef, 48.8589, 2.3447)}>
+        <Text onPress={() => this._map && this._map.setCenterCoordinateAnimated(48.8589, 2.3447)}>
           Go to Paris at current zoom level {parseInt(this.state.currentZoom)}
         </Text>
-        <Text onPress={() => this.setCenterCoordinateZoomLevelAnimated(mapRef, 35.68829, 139.77492, 14)}>
+        <Text onPress={() => this._map && this._map.setCenterCoordinateZoomLevelAnimated(35.68829, 139.77492, 14)}>
           Go to Tokyo at fixed zoom level 14
         </Text>
-        <Text onPress={() => this.addAnnotations(mapRef, [{
+        <Text onPress={() => this._map && this._map.addAnnotations([{
           coordinates: [40.73312,-73.989],
           type: 'point',
           title: 'This is a new marker',
@@ -122,7 +122,7 @@ var MapExample = React.createClass({
         }])}>
           Add new marker
         </Text>
-        <Text onPress={() => this.updateAnnotation(mapRef, {
+        <Text onPress={() => this._map && this._map.updateAnnotation({
           coordinates: [40.714541341726175,-74.00579452514648],
           'type': 'point',
           title: 'New Title!',
@@ -136,54 +136,54 @@ var MapExample = React.createClass({
         })}>
           Update marker2
         </Text>
-        <Text onPress={() => this.selectAnnotationAnimated(mapRef, 'marker1')}>
+        <Text onPress={() => this._map && this._map.selectAnnotationAnimated('marker1')}>
           Open marker1 popup
         </Text>
-        <Text onPress={() => this.removeAnnotation(mapRef, 'marker2')}>
+        <Text onPress={() => this._map && this._map.removeAnnotation('marker2')}>
           Remove marker2 annotation
         </Text>
         <Text onPress={() => this.removeAllAnnotations(mapRef)}>
           Remove all annotations
         </Text>
-        <Text onPress={() => this.setVisibleCoordinateBoundsAnimated(mapRef, 40.712, -74.227, 40.774, -74.125, 100, 0, 0, 0)}>
+        <Text onPress={() => this._map && this._map.setVisibleCoordinateBoundsAnimated(40.712, -74.227, 40.774, -74.125, 100, 0, 0, 0)}>
           Set visible bounds to 40.7, -74.2, 40.7, -74.1
         </Text>
-        <Text onPress={() => this.setUserTrackingMode(mapRef, this.userTrackingMode.follow)}>
+        <Text onPress={() => this._map && this._map.setUserTrackingMode(Mapbox.userTrackingMode.follow)}>
           Set userTrackingMode to follow
         </Text>
-        <Text onPress={() => this.getCenterCoordinateZoomLevel(mapRef, (location)=> {
+        <Text onPress={() => this._map && this._map.getCenterCoordinateZoomLevel((location)=> {
             console.log(location);
           })}>
           Get location
         </Text>
-        <Text onPress={() => this.getDirection(mapRef, (direction)=> {
+        <Text onPress={() => this._map && this._map.getDirection((direction)=> {
             console.log(direction);
           })}>
           Get direction
         </Text>
-        <Text onPress={() => this.getBounds(mapRef, (bounds)=> {
+        <Text onPress={() => this._map && this._map.getBounds((bounds)=> {
             console.log(bounds);
           })}>
           Get bounds
         </Text>
-        <Text onPress={() => this.addPackForRegion(mapRef, {
+        <Text onPress={() => this._map && this._map.addPackForRegion({
             name: 'test',
             type: 'bbox',
             bounds: [0, 0, 0, 0],
             minZoomLevel: 0,
             maxZoomLevel: 0,
             metadata: {},
-            styleURL: this.mapStyles.emerald
+            styleURL: Mapbox.mapStyles.emerald
           })}>
           Create offline pack
         </Text>
-        <Text onPress={() => this.getPacks(mapRef, (err, packs)=> {
+        <Text onPress={() => this._map && this._map.getPacks((err, packs)=> {
             if (err) console.log(err);
             console.log(packs);
           })}>
           Get offline packs
         </Text>
-        <Text onPress={() => this.removePack(mapRef, 'test', (err, info)=> {
+        <Text onPress={() => this._map && this._map.removePack('test', (err, info)=> {
             if (err) console.log(err);
             if (info) {
               console.log('Deleted', info.deleted);
@@ -194,16 +194,16 @@ var MapExample = React.createClass({
           Remove pack with name 'test'
         </Text>
         <Mapbox
+          ref={map => { this._map = map; }}
           style={styles.container}
           direction={0}
           rotateEnabled={true}
           scrollEnabled={true}
           zoomEnabled={true}
           showsUserLocation={true}
-          ref={mapRef}
-          accessToken={'your-mapbox.com-access-token'}
-          styleURL={this.mapStyles.emerald}
-          userTrackingMode={this.userTrackingMode.none}
+          accessToken={accessToken}
+          styleURL={Mapbox.mapStyles.emerald}
+          userTrackingMode={Mapbox.userTrackingMode.none}
           centerCoordinate={this.state.center}
           zoomLevel={this.state.zoom}
           onRegionChange={this.onRegionChange}
@@ -227,4 +227,4 @@ var styles = StyleSheet.create({
   }
 });
 
-AppRegistry.registerComponent('your-app-name', () => MapExample);
+AppRegistry.registerComponent('YourAppName', () => MapExample);