Add region is changing event payload (rnmapbox#1551)

* WIP iOS add payload

* iOS region is changing payload complete. Rename example.

* Add flow-bin to repo

* Add payload to Android, fix flow version mismatch

* Use correct iOS change

android/rctmgl/src/main/java/com/mapbox/rctmgl/components/mapview/RCTMGLMapView.java

@@ -1469,6 +1469,7 @@ private void handleMapChangedEvent(String eventType) {
             // payload events
             case EventTypes.REGION_WILL_CHANGE:
             case EventTypes.REGION_DID_CHANGE:
+            case EventTypes.REGION_IS_CHANGING:
                 event = new MapChangeEvent(this, makeRegionPayload(), eventType);
                 break;
             default:

example/.flowconfig

@@ -66,4 +66,4 @@ suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
 
 [version]
-^0.92.0
+^0.95.1

example/package.json

@@ -49,7 +49,8 @@
     "fs-extra": "^4.0.3",
     "minimatch": "^3.0.4",
     "node-watch": "^0.6.0",
-    "rimraf": "^2.6.3"
+    "rimraf": "^2.6.3",
+    "flow-bin": "^0.95.1"
   },
   "jest": {
     "preset": "react-native"

example/src/App.js

@@ -27,7 +27,7 @@ import FlyTo from './components/FlyTo';
 import FitBounds from './components/FitBounds';
 import SetUserTrackingModes from './components/SetUserTrackingModes';
 import SetUserLocationVerticalAlignment from './components/SetUserLocationVerticalAlignment';
-import ShowRegionDidChange from './components/ShowRegionDidChange';
+import ShowRegionChange from './components/ShowRegionChange';
 import CustomIcon from './components/CustomIcon';
 import YoYo from './components/YoYo';
 import EarthQuakes from './components/EarthQuakes';
@@ -101,7 +101,7 @@ const Examples = [
     'Set User Location Vertical Alignment',
     SetUserLocationVerticalAlignment,
   ),
-  new ExampleItem('Show Region Did Change', ShowRegionDidChange),
+  new ExampleItem('Show Region Change', ShowRegionChange),
   new ExampleItem('Custom Icon', CustomIcon),
   new ExampleItem('Yo Yo Camera', YoYo),
   new ExampleItem('Clustering Earthquakes', EarthQuakes),

example/src/components/FitBounds.js

@@ -10,6 +10,7 @@ class FitBounds extends React.Component {
   static propTypes = {...BaseExamplePropTypes};
 
   houseBounds = [[-74.135379, 40.795909], [-74.135449, 40.795578]];
+
   townBounds = [[-74.12641, 40.797968], [-74.143727, 40.772177]];
 
   constructor(props) {

example/src/components/ShowRegionDidChange.js → example/src/components/ShowRegionChange.js

@@ -9,7 +9,14 @@ import BaseExamplePropTypes from './common/BaseExamplePropTypes';
 import TabBarPage from './common/TabBarPage';
 import Bubble from './common/Bubble';
 
-class ShowRegionDidChange extends React.Component {
+const isValidCoordinate = geometry => {
+  if (!geometry) {
+    return false;
+  }
+  return geometry.coordinates[0] !== 0 && geometry.coordinates[1] !== 0;
+};
+
+class ShowRegionChange extends React.Component {
   static propTypes = {
     ...BaseExamplePropTypes,
   };
@@ -33,8 +40,8 @@ class ShowRegionDidChange extends React.Component {
 
     this.onRegionDidChange = this.onRegionDidChange.bind(this);
     this.onRegionWillChange = this.onRegionWillChange.bind(this);
-    this.onDidFinishLoadingMap = this.onDidFinishLoadingMap.bind(this);
     this.onOptionPress = this.onOptionPress.bind(this);
+    this.onRegionIsChanging = this.onRegionIsChanging.bind(this);
   }
 
   async onOptionPress(optionIndex, optionData) {
@@ -47,18 +54,6 @@ class ShowRegionDidChange extends React.Component {
     }
   }
 
-  async onDidFinishLoadingMap() {
-    const visibleBounds = await this.map.getVisibleBounds();
-    console.log('Visible Bounds', visibleBounds); // eslint-disable-line no-console
-  }
-
-  isValidCoordinate(geometry) {
-    if (!geometry) {
-      return false;
-    }
-    return geometry.coordinates[0] !== 0 && geometry.coordinates[1] !== 0;
-  }
-
   onRegionWillChange(regionFeature) {
     this.setState({reason: 'will change', regionFeature});
   }
@@ -67,10 +62,14 @@ class ShowRegionDidChange extends React.Component {
     this.setState({reason: 'did change', regionFeature});
   }
 
+  onRegionIsChanging(regionFeature) {
+    this.setState({reason: 'is changing', regionFeature});
+  }
+
   renderRegionChange() {
     if (
       !this.state.regionFeature ||
-      !this.isValidCoordinate(this.state.regionFeature.geometry)
+      !isValidCoordinate(this.state.regionFeature.geometry)
     ) {
       return (
         <Bubble>
@@ -118,6 +117,7 @@ class ShowRegionDidChange extends React.Component {
           onDidFinishLoadingMap={this.onDidFinishLoadingMap}
           onRegionWillChange={this.onRegionWillChange}
           onRegionDidChange={this.onRegionDidChange}
+          onRegionIsChanging={this.onRegionIsChanging}
         />
 
         {this.renderRegionChange()}
@@ -126,4 +126,4 @@ class ShowRegionDidChange extends React.Component {
   }
 }
 
-export default ShowRegionDidChange;
+export default ShowRegionChange;

ios/RCTMGL/RCTMGLMapViewManager.m

@@ -486,7 +486,8 @@ - (void)mapView:(MGLMapView *)mapView regionWillChangeWithReason:(MGLCameraChang
 
 - (void)mapViewRegionIsChanging:(MGLMapView *)mapView
 {
-    [self reactMapDidChange:mapView eventType:RCT_MAPBOX_REGION_IS_CHANGING];
+    NSDictionary *payload = [self _makeRegionPayload:mapView animated:false];
+    [self reactMapDidChange:mapView eventType:RCT_MAPBOX_REGION_IS_CHANGING andPayload:payload];
 }
 
 - (void)mapView:(MGLMapView *)mapView regionDidChangeWithReason:(MGLCameraChangeReason)reason animated:(BOOL)animated

package.json

@@ -75,7 +75,8 @@
     "react": "16.8.3",
     "react-docgen": "2.18.0",
     "react-native": "0.59.0",
-    "react-test-renderer": "16.8.3"
+    "react-test-renderer": "16.8.3",
+    "flow-bin": "^0.95.1"
   },
   "jest": {
     "preset": "react-native",