Improve camera transitions and related map callbacks

docs/Camera.md

@@ -7,7 +7,7 @@
 | ---- | :--: | :-----: | :------: | :----------: |
 | allowUpdates | `bool` | `true` | `false` | If false, the camera will not send any props to the native module. Intended to be used to prevent unnecessary tile fetching and improve performance when the map is not visible. Defaults to true. |
 | animationDuration | `number` | `2000` | `false` | The duration a camera update takes (in ms) |
-| animationMode | `enum` | `'easeTo'` | `false` | The animationstyle when the camara updates. One of: `flyTo`, `easeTo`, `linearTo`, `moveTo` |
+| animationMode | `enum` | `'easeTo'` | `false` | The animation style when the camara updates. One of:<br/>`flyTo`: A complex flight animation, affecting both position and zoom.<br/>`easeTo`: A standard damped curve.<br/>`linearTo`: An even linear transition.<br/>`none`: An instantaneous change (v10 only).<br/>`moveTo`: An instantaneous change (<v10). |
 | defaultSettings | `shape` | `none` | `false` | Default view settings applied on camera |
 | &nbsp;&nbsp;centerCoordinate | `array` | `none` | `false` | Center coordinate on map [lng, lat] |
 | &nbsp;&nbsp;padding | `shape` | `none` | `false` | Padding around edges of map in points |

docs/docs.json

@@ -421,7 +421,7 @@
         "required": false,
         "type": "enum",
         "default": "'easeTo'",
-        "description": "The animationstyle when the camara updates. One of: `flyTo`, `easeTo`, `linearTo`, `moveTo`"
+        "description": "The animation style when the camara updates. One of:\n`flyTo`: A complex flight animation, affecting both position and zoom.\n`easeTo`: A standard damped curve.\n`linearTo`: An even linear transition.\n`none`: An instantaneous change (v10 only).\n`moveTo`: An instantaneous change (<v10)."
       },
       {
         "name": "defaultSettings",

example/src/examples/V10/CameraAnimation.js

@@ -1,5 +1,5 @@
-import React, {useState} from 'react';
-import {Button, SafeAreaView, StyleSheet} from 'react-native';
+import React, {useMemo, useState} from 'react';
+import {Button, SafeAreaView, Text, View} from 'react-native';
 import {
   MapView,
   Camera,
@@ -21,30 +21,68 @@ const styles = {
     circleRadius: 6,
     circleColor: colors.primary.blue,
   },
+  sheet: {
+    paddingTop: 10,
+    paddingHorizontal: 10,
+  },
+  section: {
+    paddingVertical: 10,
+  },
   buttonRow: {
     flex: 0,
     flexDirection: 'row',
-    justifyContent: 'space-between',
+    justifyContent: 'space-around',
   },
 };
 
+const zeroPadding = {
+  paddingTop: 0,
+  paddingBottom: 0,
+  paddingLeft: 0,
+  paddingRight: 0,
+};
+
+const randPadding = () => {
+  const randNum = () => {
+    const items = [0, 150, 300];
+    return items[Math.floor(Math.random() * items.length)];
+  };
+
+  return {
+    paddingTop: randNum(),
+    paddingBottom: randNum(),
+    paddingLeft: randNum(),
+    paddingRight: randNum(),
+  };
+};
+
 const CameraAnimation = props => {
   const initialCoordinates = {
     latitude: 40.759211,
     longitude: -73.984638,
   };
 
-  const [animationMode, setAnimationMode] = useState('flyTo');
+  const [animationMode, setAnimationMode] = useState('moveTo');
   const [coordinates, setCoordinates] = useState(initialCoordinates);
+  const [padding, setPadding] = useState(zeroPadding);
 
-  const onPress = _animationMode => {
-    setAnimationMode(_animationMode);
+  const coordinatesDisplay = useMemo(() => {
+    const lon = coordinates.longitude.toFixed(4);
+    const lat = coordinates.latitude.toFixed(4);
+    return `Lon ${lon} | Lat ${lat}`;
+  }, [coordinates]);
+
+  const paddingDisplay = useMemo(() => {
+    return `L ${padding.paddingLeft} | R ${padding.paddingRight} | T ${padding.paddingTop} | B ${padding.paddingBottom}`;
+  }, [padding]);
 
-    const offset = Math.random() * 0.2;
+  const changePosition = _animationMode => {
+    setAnimationMode(_animationMode);
     setCoordinates({
-      latitude: initialCoordinates.latitude + offset,
-      longitude: initialCoordinates.longitude + offset,
+      latitude: initialCoordinates.latitude + Math.random() * 0.2,
+      longitude: initialCoordinates.longitude + Math.random() * 0.2,
     });
+    setPadding(randPadding());
   };
 
   const position = [coordinates.longitude, coordinates.latitude];
@@ -64,18 +102,41 @@ const CameraAnimation = props => {
           centerCoordinate={position}
           animationMode={animationMode}
           zoomLevel={12}
+          padding={padding}
+          animationDuration={800}
         />
 
         <ShapeSource id="source" shape={shape}>
           <CircleLayer id="layer" style={styles.circle} />
         </ShapeSource>
       </MapView>
 
-      <SafeAreaView style={styles.buttonRow}>
-        <Button title="Flight" onPress={() => onPress('flyTo')} />
-        <Button title="Move" onPress={() => onPress('moveTo')} />
-        <Button title="Ease" onPress={() => onPress('easeTo')} />
-        <Button title="Linear" onPress={() => onPress('linearTo')} />
+      <SafeAreaView>
+        <View style={styles.sheet}>
+          <View style={styles.section}>
+            <View style={styles.buttonRow}>
+              <Button title="Flight" onPress={() => changePosition('flyTo')} />
+              <Button title="Ease" onPress={() => changePosition('easeTo')} />
+              <Button
+                title="Linear"
+                onPress={() => changePosition('linearTo')}
+              />
+              <Button
+                title="Instant"
+                onPress={() => changePosition('moveTo')}
+              />
+              <Button
+                title="Padding"
+                onPress={() => {
+                  setAnimationMode('easeTo');
+                  setPadding(randPadding());
+                }}
+              />
+            </View>
+            <Text>Position ({coordinatesDisplay})</Text>
+            <Text>Padding ({paddingDisplay})</Text>
+          </View>
+        </View>
       </SafeAreaView>
     </Page>
   );

ios/RCTMGL-v10/MGLModule.swift

@@ -36,9 +36,10 @@ class MGLModule : NSObject {
       "CameraModes":
         [
           "Flight": "flight",
-          "None": "none",
-          "Linear": "linear",
           "Ease": "ease",
+          "Linear": "linear",
+          "None": "none",
+          "Move": "move", // Allows backward compatibility with <v10.
         ],
       "EventTypes":
         [