Fixed MapView's draggable annotation

Reviewed By: javache Differential Revision: D3384947 fbshipit-source-id: 801a0998c8db788a731d27ae5956193ff23aa198
facebook · Jun 7, 2016 · 993a928833ec2480d280eccbabbb335a357c1fa2 · 993a928
1 parent 4959b21
commit 993a928833ec2480d280eccbabbb335a357c1fa2
Unified Split

Showing with 51 additions and 9 deletions.

+51 −6 Examples/UIExplorer/MapViewExample.js

+0 −3 Libraries/Components/MapView/MapView.js
diff --git a/Examples/UIExplorer/MapViewExample.js b/Examples/UIExplorer/MapViewExample.js
@@ -252,6 +252,56 @@ var AnnotationExample = React.createClass({

 });

+var DraggableAnnotationExample = React.createClass({
+
+  createAnnotation(longitude, latitude) {
+    return {
+      longitude,
+      latitude,
+      draggable: true,
+      onDragStateChange: (event) => {
+        if (event.state === 'idle') {
+          this.setState({
+            annotations: [this.createAnnotation(event.longitude, event.latitude)],
+          });
+        }
+        console.log('Drag state: ' + event.state);
+      },
+    };
+  },
+
+  getInitialState() {
+    return {
+      isFirstLoad: true,
+      annotations: [],
+      mapRegion: undefined,
+    };
+  },
+
+  render() {
+    if (this.state.isFirstLoad) {
+      var onRegionChangeComplete = (region) => {
+        //When the MapView loads for the first time, we can create the annotation at the
+        //region that was loaded.
+        this.setState({
+          isFirstLoad: false,
+          annotations: [this.createAnnotation(region.longitude, region.latitude)],
+        });
+      };
+    }
+
+    return (
+      <MapView
+        style={styles.map}
+        onRegionChangeComplete={onRegionChangeComplete}
+        region={this.state.mapRegion}
+        annotations={this.state.annotations}
+      />
+    );
+  },
+
+});
+
 var styles = StyleSheet.create({
  map: {
    height: 150,
@@ -338,12 +388,7 @@ exports.examples = [
  {
    title: 'Draggable pin',
    render() {
-      return <AnnotationExample style={styles.map} annotation={{
-        draggable: true,
-        onDragStateChange: (event) => {
-          console.log('Drag state: ' + event.state);
-        },
-      }}/>;
+      return <DraggableAnnotationExample/>;
    }
  },
  {
diff --git a/Libraries/Components/MapView/MapView.js b/Libraries/Components/MapView/MapView.js
@@ -437,9 +437,6 @@ const MapView = React.createClass({
      onAnnotationDragStateChange = (event: Event) => {
        const annotation = findByAnnotationId(event.nativeEvent.annotationId);
        if (annotation) {
-          // Update location
-          annotation.latitude = event.nativeEvent.latitude;
-          annotation.longitude = event.nativeEvent.longitude;
          // Call callback
          annotation.onDragStateChange &&
            annotation.onDragStateChange(event.nativeEvent);