From 273a2c2fab393c24c8d54ede7cc08cb74944b278 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Mon, 11 Apr 2022 16:39:32 -0500
Subject: [PATCH 01/36] Enable setting camera bounds (iOS)

---
 ios/RCTMGL-v10/RCTMGLCamera.swift | 62 +++++++++++++++++++------------
 1 file changed, 39 insertions(+), 23 deletions(-)

diff --git a/ios/RCTMGL-v10/RCTMGLCamera.swift b/ios/RCTMGL-v10/RCTMGLCamera.swift
index eb78331ef..dd87956a2 100644
--- a/ios/RCTMGL-v10/RCTMGLCamera.swift
+++ b/ios/RCTMGL-v10/RCTMGLCamera.swift
@@ -60,7 +60,7 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
       map.location.addLocationConsumer(newConsumer: self)
     }
   }
-  
+    
   @objc func setStop(_ dictionary: [String:Any]?) {
     guard let dictionary = dictionary else {
       // Seems to be normal when followUserLocation is set
@@ -80,39 +80,55 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
       default:
         fatalError("Unexpected geometry: \(String(describing: centerFeature?.geometry))")
       }
-      //camera.center = centerFeature
     }
     
-    var duration : Double? = nil
-    var zoom : Double? = nil
-    var pitch : Double? = nil
-    var bearing : Double? = nil
-    var heading : Double? = nil
-    
-    if let durationParam = dictionary["duration"] as? Double {
-      duration = durationParam
+    if let feature : String = dictionary["bounds"] as? String {
+      let collection : Turf.FeatureCollection? = try!
+        JSONDecoder().decode(Turf.FeatureCollection.self, from: feature.data(using: .utf8)!)
+      let features = collection?.features
+      
+      let ne: CLLocationCoordinate2D
+      switch features?.first?.geometry {
+        case .point(let point):
+          ne = point.coordinates
+        default:
+          fatalError("Unexpected geometry: \(String(describing: features?.first?.geometry))")
+      }
+      
+      let sw: CLLocationCoordinate2D
+      switch features?.last?.geometry {
+        case .point(let point):
+          sw = point.coordinates
+        default:
+          fatalError("Unexpected geometry: \(String(describing: features?.last?.geometry))")
+      }
+      
+      withMapView { map in
+        let bounds = CoordinateBounds(southwest: sw, northeast: ne)
+        let c = map.mapboxMap.camera(for: bounds, padding: .zero, bearing: 0, pitch: 0)
+        camera.center = c.center
+        camera.zoom = c.zoom
+      }
     }
-    
-    if let zoomParam = dictionary["zoom"] as? Double {
-      zoom = zoomParam;
-      camera.zoom = CGFloat(zoomParam)
+        
+    if let zoom = dictionary["zoom"] as? Double {
+      camera.zoom = CGFloat(zoom)
     }
   
-    if let pitchParam = dictionary["pitch"] as? Double {
-      pitch = pitchParam
-      camera.pitch = CGFloat(pitchParam)
+    if let pitch = dictionary["pitch"] as? Double {
+      camera.pitch = CGFloat(pitch)
     }
   
-    if let headingParam = dictionary["heading"] as? Double {
-      heading = headingParam
-      camera.bearing = CLLocationDirection(headingParam)
+    if let heading = dictionary["heading"] as? Double {
+      camera.bearing = CLLocationDirection(heading)
     }
 
-    if let bearingParam = dictionary["bearing"] as? Double {
-      bearing = bearingParam
-      camera.bearing = CLLocationDirection(bearingParam)
+    if let bearing = dictionary["bearing"] as? Double {
+      camera.bearing = CLLocationDirection(bearing)
     }
     
+    let duration = dictionary["duration"] as? Double
+
     withMapView { map in
       if let duration = duration {
         map.camera.fly(to: camera, duration: self.toTimeInterval(duration))

From 8f51b009970ed83d5c2d8164b8524eda4633e714 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 12 Apr 2022 10:13:11 -0500
Subject: [PATCH 02/36] Implement camera easing, organize dict value extraction
 (iOS)

---
 ios/RCTMGL-v10/RCTMGLCamera.swift | 42 +++++++++++++++++++++++++------
 1 file changed, 34 insertions(+), 8 deletions(-)

diff --git a/ios/RCTMGL-v10/RCTMGLCamera.swift b/ios/RCTMGL-v10/RCTMGLCamera.swift
index dd87956a2..503c5c450 100644
--- a/ios/RCTMGL-v10/RCTMGLCamera.swift
+++ b/ios/RCTMGL-v10/RCTMGLCamera.swift
@@ -1,5 +1,6 @@
 import MapboxMaps
 import Turf
+import Foundation
 
 protocol RCTMGLMapComponent {
   func addToMap(_ map: RCTMGLMapView)
@@ -39,6 +40,11 @@ open class RCTMGLMapComponentBase : UIView, RCTMGLMapComponent {
 }
 
 class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
+  // See MGLModule.swift:constantsToExport.
+  enum Mode: String, CaseIterable {
+    case flight, move, ease, linear
+  }
+  
   @objc
   var followUserLocation : Bool = false {
     didSet {
@@ -55,16 +61,15 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
       if let locationModule = RCTMGLLocationModule.shared {
         map.location.overrideLocationProvider(with: locationModule.locationProvider)
       }
-      map.location
       map.location.locationProvider.requestWhenInUseAuthorization()
       map.location.addLocationConsumer(newConsumer: self)
     }
   }
-    
+  
   @objc func setStop(_ dictionary: [String:Any]?) {
     guard let dictionary = dictionary else {
       // Seems to be normal when followUserLocation is set
-      //return Logger.log(level: .error, message: "stop called with nil")
+      // return Logger.log(level: .error, message: "stop called with nil")
       return
     }
     
@@ -127,13 +132,34 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
       camera.bearing = CLLocationDirection(bearing)
     }
     
-    let duration = dictionary["duration"] as? Double
+    let duration: TimeInterval? = {
+      if let d = dictionary["duration"] as? Double {
+        return self.toTimeInterval(d)
+      }
+      return nil
+    }()
+    
+    let mode: Mode = {
+      if let m = dictionary["mode"] as? String, let m = Mode(rawValue: m) {
+        return m
+      }
+      return .flight
+    }()
 
     withMapView { map in
-      if let duration = duration {
-        map.camera.fly(to: camera, duration: self.toTimeInterval(duration))
-      } else {
-        map.camera.fly(to: camera)
+      switch mode {
+        case .flight:
+          if let duration = duration {
+            map.camera.fly(to: camera, duration: duration)
+          } else {
+            map.camera.fly(to: camera)
+          }
+        case .move:
+          map.camera.ease(to: camera, duration: duration ?? 0, curve: .easeInOut, completion: nil)
+        case .ease:
+          map.camera.ease(to: camera, duration: duration ?? 0, curve: .easeInOut, completion: nil)
+        case .linear:
+          map.camera.ease(to: camera, duration: duration ?? 0, curve: .linear, completion: nil)
       }
     }
   }

From 3188450d7aa734482d24f74f7504914ac4d08d04 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 12 Apr 2022 14:59:28 -0500
Subject: [PATCH 03/36] Add remaining camera animation mode types (iOS)

---
 ios/RCTMGL-v10/MGLModule.swift | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/ios/RCTMGL-v10/MGLModule.swift b/ios/RCTMGL-v10/MGLModule.swift
index ac8a74f49..475aa58aa 100644
--- a/ios/RCTMGL-v10/MGLModule.swift
+++ b/ios/RCTMGL-v10/MGLModule.swift
@@ -35,6 +35,9 @@ class MGLModule : NSObject {
         ["Update": RCT_MAPBOX_USER_LOCATION_UPDATE],
       "CameraModes":
         [
+          "Flight": "flight",
+          "None": "none",
+          "Linear": "linear",
           "Ease": "ease",
         ],
       "EventTypes":

From 015ed222af4315e7a27b3f06167cdbe748bd3035 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 12 Apr 2022 15:03:33 -0500
Subject: [PATCH 04/36] Clarify comment

---
 ios/RCTMGL-v10/RCTMGLCamera.swift | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ios/RCTMGL-v10/RCTMGLCamera.swift b/ios/RCTMGL-v10/RCTMGLCamera.swift
index 503c5c450..2c427f403 100644
--- a/ios/RCTMGL-v10/RCTMGLCamera.swift
+++ b/ios/RCTMGL-v10/RCTMGLCamera.swift
@@ -40,7 +40,7 @@ open class RCTMGLMapComponentBase : UIView, RCTMGLMapComponent {
 }
 
 class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
-  // See MGLModule.swift:constantsToExport.
+  // See MGLModule.swift:constantsToExport:CameraModes.
   enum Mode: String, CaseIterable {
     case flight, move, ease, linear
   }

From f856b4625b6870464e60e2f46638a00b5181173b Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 12 Apr 2022 15:03:56 -0500
Subject: [PATCH 05/36] Add camera animation example

---
 example/src/examples/V10/CameraAnimation.js | 84 +++++++++++++++++++++
 example/src/scenes/Home.js                  |  2 +
 2 files changed, 86 insertions(+)
 create mode 100644 example/src/examples/V10/CameraAnimation.js

diff --git a/example/src/examples/V10/CameraAnimation.js b/example/src/examples/V10/CameraAnimation.js
new file mode 100644
index 000000000..a5ab71474
--- /dev/null
+++ b/example/src/examples/V10/CameraAnimation.js
@@ -0,0 +1,84 @@
+import React, {useState} from 'react';
+import {Button, SafeAreaView, StyleSheet} from 'react-native';
+import {
+  MapView,
+  Camera,
+  ShapeSource,
+  CircleLayer,
+  Logger,
+} from '@rnmapbox/maps';
+
+import Page from '../common/Page';
+import colors from '../../styles/colors';
+
+Logger.setLogLevel('verbose');
+
+const styles = {
+  map: {
+    flex: 1,
+  },
+  circle: {
+    circleRadius: 6,
+    circleColor: colors.primary.blue,
+  },
+  buttonRow: {
+    flex: 0,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+};
+
+const CameraAnimation = props => {
+  const initialCoordinates = {
+    latitude: 40.759211,
+    longitude: -73.984638,
+  };
+
+  const [animationMode, setAnimationMode] = useState('flyTo');
+  const [coordinates, setCoordinates] = useState(initialCoordinates);
+
+  const onPress = _animationMode => {
+    setAnimationMode(_animationMode);
+
+    const offset = Math.random() * 0.2;
+    setCoordinates({
+      latitude: initialCoordinates.latitude + offset,
+      longitude: initialCoordinates.longitude + offset,
+    });
+  };
+
+  const position = [coordinates.longitude, coordinates.latitude];
+
+  const shape = {
+    type: 'Feature',
+    geometry: {
+      type: 'Point',
+      coordinates: position,
+    },
+  };
+
+  return (
+    <Page {...props}>
+      <MapView style={styles.map}>
+        <Camera
+          centerCoordinate={position}
+          animationMode={animationMode}
+          zoomLevel={12}
+        />
+
+        <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>
+    </Page>
+  );
+};
+
+export default CameraAnimation;
diff --git a/example/src/scenes/Home.js b/example/src/scenes/Home.js
index ff933b691..2c659288a 100644
--- a/example/src/scenes/Home.js
+++ b/example/src/scenes/Home.js
@@ -68,6 +68,7 @@ import CacheManagement from '../examples/CacheManagement';
 // V10
 import SkyAndTerran from '../examples/V10/SkyAndTerran';
 import QueryTerrainElevation from '../examples/V10/QueryTerrainElevation';
+import CameraAnimation from '../examples/V10/CameraAnimation';
 
 const styles = StyleSheet.create({
   exampleList: {
@@ -119,6 +120,7 @@ const Examples = [
   new ExampleGroup('V10', [
     new ExampleItem('Sky and Terrain', SkyAndTerran),
     new ExampleItem('Query Terrain Elevation', QueryTerrainElevation),
+    new ExampleItem('Camera Animation', CameraAnimation),
   ]),
   new ExampleGroup('Map', [
     new ExampleItem('Show Map', ShowMap),

From cccab0a54fea153977ec8cd9f8a179328ced98c6 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 12 Apr 2022 15:07:17 -0500
Subject: [PATCH 06/36] Adjust import order

---
 ios/RCTMGL-v10/RCTMGLCamera.swift | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ios/RCTMGL-v10/RCTMGLCamera.swift b/ios/RCTMGL-v10/RCTMGLCamera.swift
index 2c427f403..39ad5196e 100644
--- a/ios/RCTMGL-v10/RCTMGLCamera.swift
+++ b/ios/RCTMGL-v10/RCTMGLCamera.swift
@@ -1,6 +1,6 @@
+import Foundation
 import MapboxMaps
 import Turf
-import Foundation
 
 protocol RCTMGLMapComponent {
   func addToMap(_ map: RCTMGLMapView)

From fdabbac2b7a739b9a6a19c75fe455eb10b69cbda Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 13 Apr 2022 12:27:59 -0500
Subject: [PATCH 07/36] Refactor to enable animating padding and simplify
 camera creation (iOS)

---
 ios/RCTMGL-v10/RCTMGLCamera.swift | 71 ++++++++++++++++++++-----------
 1 file changed, 45 insertions(+), 26 deletions(-)

diff --git a/ios/RCTMGL-v10/RCTMGLCamera.swift b/ios/RCTMGL-v10/RCTMGLCamera.swift
index 39ad5196e..d71732b82 100644
--- a/ios/RCTMGL-v10/RCTMGLCamera.swift
+++ b/ios/RCTMGL-v10/RCTMGLCamera.swift
@@ -72,22 +72,41 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
       // return Logger.log(level: .error, message: "stop called with nil")
       return
     }
+        
+    var zoom: CGFloat = 11
+    if let z = dictionary["zoom"] as? Double {
+      zoom = CGFloat(z)
+    }
+    
+    var pitch: CGFloat = 0
+    if let p = dictionary["pitch"] as? Double {
+      pitch = CGFloat(p)
+    }
     
-    var camera = CameraOptions()
+    var heading: CLLocationDirection = 0
+    if let h = dictionary["heading"] as? Double {
+      heading = CLLocationDirection(h)
+    }
     
-    if let feature : String = dictionary["centerCoordinate"] as? String {
+    let padding = UIEdgeInsets(
+      top: dictionary["paddingTop"] as? Double ?? 0,
+      left: dictionary["paddingLeft"] as? Double ?? 0,
+      bottom: dictionary["paddingBottom"] as? Double ?? 0,
+      right: dictionary["paddingRight"] as? Double ?? 0
+    )
+
+    var center: LocationCoordinate2D?
+    if let feature: String = dictionary["centerCoordinate"] as? String {
       let centerFeature : Turf.Feature? = try!
         JSONDecoder().decode(Turf.Feature.self, from: feature.data(using: .utf8)!)
         
       switch centerFeature?.geometry {
       case .point(let centerPoint):
-        camera.center = centerPoint.coordinates
+        center = centerPoint.coordinates
       default:
         fatalError("Unexpected geometry: \(String(describing: centerFeature?.geometry))")
       }
-    }
-    
-    if let feature : String = dictionary["bounds"] as? String {
+    } else if let feature: String = dictionary["bounds"] as? String {
       let collection : Turf.FeatureCollection? = try!
         JSONDecoder().decode(Turf.FeatureCollection.self, from: feature.data(using: .utf8)!)
       let features = collection?.features
@@ -110,28 +129,14 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
       
       withMapView { map in
         let bounds = CoordinateBounds(southwest: sw, northeast: ne)
-        let c = map.mapboxMap.camera(for: bounds, padding: .zero, bearing: 0, pitch: 0)
-        camera.center = c.center
-        camera.zoom = c.zoom
+        let camera = map.mapboxMap.camera(for: bounds, padding: padding, bearing: heading, pitch: pitch)
+        if let _center = camera.center, let _zoom = camera.zoom {
+          center = _center
+          zoom = _zoom
+        }
       }
     }
-        
-    if let zoom = dictionary["zoom"] as? Double {
-      camera.zoom = CGFloat(zoom)
-    }
-  
-    if let pitch = dictionary["pitch"] as? Double {
-      camera.pitch = CGFloat(pitch)
-    }
-  
-    if let heading = dictionary["heading"] as? Double {
-      camera.bearing = CLLocationDirection(heading)
-    }
 
-    if let bearing = dictionary["bearing"] as? Double {
-      camera.bearing = CLLocationDirection(bearing)
-    }
-    
     let duration: TimeInterval? = {
       if let d = dictionary["duration"] as? Double {
         return self.toTimeInterval(d)
@@ -145,8 +150,17 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
       }
       return .flight
     }()
-
+    
     withMapView { map in
+      let camera = CameraOptions(
+        center: center,
+        padding: padding,
+        anchor: .zero,
+        zoom: zoom,
+        bearing: heading,
+        pitch: pitch
+      )
+      
       switch mode {
         case .flight:
           if let duration = duration {
@@ -161,6 +175,11 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
         case .linear:
           map.camera.ease(to: camera, duration: duration ?? 0, curve: .linear, completion: nil)
       }
+      
+      let paddingAnimator = map.camera.makeAnimator(duration: duration ?? 0, curve: .easeInOut) { (transition) in
+        transition.padding.toValue = padding
+      }
+      paddingAnimator.startAnimation()
     }
   }
   

From ce4c0420020c143619131a4110126baf375780bc Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 13 Apr 2022 12:29:03 -0500
Subject: [PATCH 08/36] Add rand animated padding, fix rand coordinates

---
 example/src/examples/V10/CameraAnimation.js | 51 +++++++++++++++++----
 1 file changed, 41 insertions(+), 10 deletions(-)

diff --git a/example/src/examples/V10/CameraAnimation.js b/example/src/examples/V10/CameraAnimation.js
index a5ab71474..77cae73ec 100644
--- a/example/src/examples/V10/CameraAnimation.js
+++ b/example/src/examples/V10/CameraAnimation.js
@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import {Button, SafeAreaView, StyleSheet} from 'react-native';
+import {Button, SafeAreaView, StyleSheet, Text, View} from 'react-native';
 import {
   MapView,
   Camera,
@@ -26,6 +26,14 @@ const styles = {
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
+  info: {
+    padding: 10,
+  },
+};
+
+const randPadding = () => {
+  const items = [50, 100, 150, 200];
+  return items[Math.floor(Math.random() * items.length)];
 };
 
 const CameraAnimation = props => {
@@ -36,14 +44,24 @@ const CameraAnimation = props => {
 
   const [animationMode, setAnimationMode] = useState('flyTo');
   const [coordinates, setCoordinates] = useState(initialCoordinates);
+  const [padding, setPadding] = useState({
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+  });
 
   const onPress = _animationMode => {
     setAnimationMode(_animationMode);
-
-    const offset = Math.random() * 0.2;
     setCoordinates({
-      latitude: initialCoordinates.latitude + offset,
-      longitude: initialCoordinates.longitude + offset,
+      latitude: initialCoordinates.latitude + Math.random() * 0.2,
+      longitude: initialCoordinates.longitude + Math.random() * 0.2,
+    });
+    setPadding({
+      paddingTop: randPadding(),
+      paddingBottom: randPadding(),
+      paddingLeft: randPadding(),
+      paddingRight: randPadding(),
     });
   };
 
@@ -64,6 +82,7 @@ const CameraAnimation = props => {
           centerCoordinate={position}
           animationMode={animationMode}
           zoomLevel={12}
+          padding={padding}
         />
 
         <ShapeSource id="source" shape={shape}>
@@ -71,11 +90,23 @@ const CameraAnimation = props => {
         </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.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')} />
+        </View>
+        <View style={styles.info}>
+          <Text>
+            {`Coordinates: Lon ${coordinates.longitude.toFixed(
+              4,
+            )} | Lat ${coordinates.latitude.toFixed(4)}`}
+          </Text>
+          <Text>
+            {`Padding: L ${padding.paddingLeft} | R ${padding.paddingRight} | ${padding.paddingTop} | B ${padding.paddingBottom}`}
+          </Text>
+        </View>
       </SafeAreaView>
     </Page>
   );

From dc81d44c123a7cae63d36bdb353ef90c888d5ac9 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 15 Apr 2022 12:53:11 -0500
Subject: [PATCH 09/36] Add padding options, improve display

---
 example/src/examples/V10/CameraAnimation.js | 104 +++++++++++++-------
 1 file changed, 68 insertions(+), 36 deletions(-)

diff --git a/example/src/examples/V10/CameraAnimation.js b/example/src/examples/V10/CameraAnimation.js
index a5073ab6c..bd0d3f035 100644
--- a/example/src/examples/V10/CameraAnimation.js
+++ b/example/src/examples/V10/CameraAnimation.js
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useMemo, useState} from 'react';
 import {Button, SafeAreaView, Text, View} from 'react-native';
 import {
   MapView,
@@ -21,19 +21,38 @@ const styles = {
     circleRadius: 6,
     circleColor: colors.primary.blue,
   },
+  sheet: {
+    padding: 10,
+  },
+  section: {
+    paddingVertical: 10,
+  },
   buttonRow: {
     flex: 0,
     flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  info: {
-    padding: 10,
+    justifyContent: 'space-around',
   },
 };
 
+const zeroPadding = {
+  paddingTop: 0,
+  paddingBottom: 0,
+  paddingLeft: 0,
+  paddingRight: 0,
+};
+
 const randPadding = () => {
-  const items = [50, 100, 150, 200];
-  return items[Math.floor(Math.random() * items.length)];
+  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 => {
@@ -44,25 +63,32 @@ const CameraAnimation = props => {
 
   const [animationMode, setAnimationMode] = useState('flyTo');
   const [coordinates, setCoordinates] = useState(initialCoordinates);
-  const [padding, setPadding] = useState({
-    paddingTop: 0,
-    paddingBottom: 0,
-    paddingLeft: 0,
-    paddingRight: 0,
-  });
-
-  const onPress = _animationMode => {
+  const [padding, setPadding] = useState(zeroPadding);
+
+  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} | ${padding.paddingTop} | B ${padding.paddingBottom}`;
+  }, [padding]);
+
+  const changePosition = _animationMode => {
     setAnimationMode(_animationMode);
     setCoordinates({
       latitude: initialCoordinates.latitude + Math.random() * 0.2,
       longitude: initialCoordinates.longitude + Math.random() * 0.2,
     });
-    setPadding({
-      paddingTop: randPadding(),
-      paddingBottom: randPadding(),
-      paddingLeft: randPadding(),
-      paddingRight: randPadding(),
-    });
+  };
+
+  const changePadding = kind => {
+    if (kind === 'zero') {
+      setPadding(zeroPadding);
+    } else if (kind === 'random') {
+      setPadding(randPadding());
+    }
   };
 
   const position = [coordinates.longitude, coordinates.latitude];
@@ -91,21 +117,27 @@ const CameraAnimation = props => {
       </MapView>
 
       <SafeAreaView>
-        <View 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')} />
-        </View>
-        <View style={styles.info}>
-          <Text>
-            {`Coordinates: Lon ${coordinates.longitude.toFixed(
-              4,
-            )} | Lat ${coordinates.latitude.toFixed(4)}`}
-          </Text>
-          <Text>
-            {`Padding: L ${padding.paddingLeft} | R ${padding.paddingRight} | ${padding.paddingTop} | B ${padding.paddingBottom}`}
-          </Text>
+        <View style={styles.sheet}>
+          <View style={styles.section}>
+            <Text>Move ({coordinatesDisplay})</Text>
+            <View style={styles.buttonRow}>
+              <Button title="Flight" onPress={() => changePosition('flyTo')} />
+              <Button title="Move" onPress={() => changePosition('moveTo')} />
+              <Button title="Ease" onPress={() => changePosition('easeTo')} />
+              <Button
+                title="Linear"
+                onPress={() => changePosition('linearTo')}
+              />
+            </View>
+          </View>
+
+          <View style={styles.section}>
+            <Text>Padding ({paddingDisplay})</Text>
+            <View style={styles.buttonRow}>
+              <Button title="Zero" onPress={() => changePadding('zero')} />
+              <Button title="Random" onPress={() => changePadding('random')} />
+            </View>
+          </View>
         </View>
       </SafeAreaView>
     </Page>

From 724be192dc51b2ff1b6dfa6ab4ab39bfbd06263a Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 15 Apr 2022 12:59:56 -0500
Subject: [PATCH 10/36] Adjust padding

---
 example/src/examples/V10/CameraAnimation.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/example/src/examples/V10/CameraAnimation.js b/example/src/examples/V10/CameraAnimation.js
index bd0d3f035..416e2829e 100644
--- a/example/src/examples/V10/CameraAnimation.js
+++ b/example/src/examples/V10/CameraAnimation.js
@@ -22,7 +22,8 @@ const styles = {
     circleColor: colors.primary.blue,
   },
   sheet: {
-    padding: 10,
+    paddingTop: 10,
+    paddingHorizontal: 10,
   },
   section: {
     paddingVertical: 10,

From a647b71d6d1fb6fb11aad32c0a65440f134d5e0e Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 15 Apr 2022 13:12:23 -0500
Subject: [PATCH 11/36] Store camera animator reference to allow stopping
 existing animation

---
 ios/RCTMGL-v10/RCTMGLCamera.swift | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/ios/RCTMGL-v10/RCTMGLCamera.swift b/ios/RCTMGL-v10/RCTMGLCamera.swift
index c8e90e866..c1f03cd41 100644
--- a/ios/RCTMGL-v10/RCTMGLCamera.swift
+++ b/ios/RCTMGL-v10/RCTMGLCamera.swift
@@ -17,7 +17,7 @@ struct CameraUpdateItem {
   var mode: Mode
   var duration: TimeInterval?
 
-  func execute(map: RCTMGLMapView) {
+  func execute(map: RCTMGLMapView, cameraAnimator: inout BasicCameraAnimator?) {
     if let duration = duration, duration == 0.0 {
       map.mapboxMap.setCamera(to: camera)
       return
@@ -38,10 +38,13 @@ struct CameraUpdateItem {
         map.camera.ease(to: camera, duration: duration ?? 0, curve: .linear, completion: nil)
     }
 
-    let paddingAnimator = map.camera.makeAnimator(duration: duration ?? 0, curve: .easeInOut) { (transition) in
+    if let cameraAnimator = cameraAnimator {
+      cameraAnimator.stopAnimation()
+    }
+    cameraAnimator = map.camera.makeAnimator(duration: duration ?? 0, curve: .easeInOut) { (transition) in
       transition.padding.toValue = camera.padding
     }
-    paddingAnimator.startAnimation()
+    cameraAnimator?.startAnimation()
   }
 }
 
@@ -59,12 +62,12 @@ class CameraUpdateQueue {
     queue.append(stop)
   }
   
-  func execute(map: RCTMGLMapView) {
+  func execute(map: RCTMGLMapView, cameraAnimator: inout BasicCameraAnimator?) {
     guard let stop = dequeue() else {
       return
     }
     
-    stop.execute(map: map)
+    stop.execute(map: map, cameraAnimator: &cameraAnimator)
   }
 }
 
@@ -106,15 +109,16 @@ open class RCTMGLMapComponentBase : UIView, RCTMGLMapComponent {
 
 class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
   var defaultStop : [String:Any]? = nil
-  
+    
   @objc var stop : [String:Any]? = nil {
     didSet {
       _updateCamera()
     }
   }
   
-  let cameraUpdateQueue : CameraUpdateQueue = CameraUpdateQueue()
-  
+  var cameraAnimator: BasicCameraAnimator?
+  let cameraUpdateQueue = CameraUpdateQueue()
+
   @objc
   var followUserLocation : Bool = false {
     didSet {
@@ -151,7 +155,7 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
     }
 
     if let map = map {
-      cameraUpdateQueue.execute(map: map)
+      cameraUpdateQueue.execute(map: map, cameraAnimator: &cameraAnimator)
     }
   }
   
@@ -281,7 +285,7 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
     var updateItem = toUpdateItem(stop: stop)
     updateItem.mode = .move
     updateItem.duration = 0
-    updateItem.execute(map: map)
+    updateItem.execute(map: map, cameraAnimator: &cameraAnimator)
   }
   
   func initialLayout() {

From 4670f4dc57930ed2f51113d8cd830021e4c76ef8 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 15 Apr 2022 14:59:30 -0500
Subject: [PATCH 12/36] Move padding out of camera to prevent wonky movement

---
 ios/RCTMGL-v10/RCTMGLCamera.swift | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/ios/RCTMGL-v10/RCTMGLCamera.swift b/ios/RCTMGL-v10/RCTMGLCamera.swift
index c1f03cd41..2b98d0001 100644
--- a/ios/RCTMGL-v10/RCTMGLCamera.swift
+++ b/ios/RCTMGL-v10/RCTMGLCamera.swift
@@ -16,6 +16,7 @@ struct CameraUpdateItem {
   var camera: CameraOptions
   var mode: Mode
   var duration: TimeInterval?
+  var padding: UIEdgeInsets?
 
   func execute(map: RCTMGLMapView, cameraAnimator: inout BasicCameraAnimator?) {
     if let duration = duration, duration == 0.0 {
@@ -42,7 +43,7 @@ struct CameraUpdateItem {
       cameraAnimator.stopAnimation()
     }
     cameraAnimator = map.camera.makeAnimator(duration: duration ?? 0, curve: .easeInOut) { (transition) in
-      transition.padding.toValue = camera.padding
+      transition.padding.toValue = padding
     }
     cameraAnimator?.startAnimation()
   }
@@ -251,14 +252,14 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
     let result = CameraUpdateItem(
       camera: CameraOptions(
         center: center,
-        padding: padding,
         anchor: .zero,
         zoom: zoom,
         bearing: heading,
         pitch: pitch
       ),
       mode: mode,
-      duration: duration
+      duration: duration,
+      padding: padding
     )
     return result
   }

From 9a7ad4234afb7d9bb581e5bd06ff3c77bbb48be8 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 15 Apr 2022 14:59:59 -0500
Subject: [PATCH 13/36] Add missing text

---
 example/src/examples/V10/CameraAnimation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/example/src/examples/V10/CameraAnimation.js b/example/src/examples/V10/CameraAnimation.js
index 416e2829e..14be7f015 100644
--- a/example/src/examples/V10/CameraAnimation.js
+++ b/example/src/examples/V10/CameraAnimation.js
@@ -73,7 +73,7 @@ const CameraAnimation = props => {
   }, [coordinates]);
 
   const paddingDisplay = useMemo(() => {
-    return `L ${padding.paddingLeft} | R ${padding.paddingRight} | ${padding.paddingTop} | B ${padding.paddingBottom}`;
+    return `L ${padding.paddingLeft} | R ${padding.paddingRight} | T ${padding.paddingTop} | B ${padding.paddingBottom}`;
   }, [padding]);
 
   const changePosition = _animationMode => {

From 984774e70fae24188db975cf2a07d9fee8fc5107 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Mon, 18 Apr 2022 11:27:04 -0500
Subject: [PATCH 14/36] Pair camera and padding easing, refactor and clarify
 easing modes

---
 docs/Camera.md                    |  2 +-
 docs/docs.json                    |  2 +-
 ios/RCTMGL-v10/MGLModule.swift    |  4 ++--
 ios/RCTMGL-v10/RCTMGLCamera.swift | 35 ++++++++++++++-----------------
 javascript/components/Camera.js   | 15 ++++++++-----
 5 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/docs/Camera.md b/docs/Camera.md
index 5a2e245f6..644dad2bb 100644
--- a/docs/Camera.md
+++ b/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/>`moveTo`: An instantaneous change. |
 | 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 |
diff --git a/docs/docs.json b/docs/docs.json
index 2b13910b5..eb3d2d00d 100644
--- a/docs/docs.json
+++ b/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`moveTo`: An instantaneous change."
       },
       {
         "name": "defaultSettings",
diff --git a/ios/RCTMGL-v10/MGLModule.swift b/ios/RCTMGL-v10/MGLModule.swift
index 475aa58aa..7944b3cf2 100644
--- a/ios/RCTMGL-v10/MGLModule.swift
+++ b/ios/RCTMGL-v10/MGLModule.swift
@@ -36,9 +36,9 @@ class MGLModule : NSObject {
       "CameraModes":
         [
           "Flight": "flight",
-          "None": "none",
-          "Linear": "linear",
           "Ease": "ease",
+          "Linear": "linear",
+          "None": "none",
         ],
       "EventTypes":
         [
diff --git a/ios/RCTMGL-v10/RCTMGLCamera.swift b/ios/RCTMGL-v10/RCTMGLCamera.swift
index 2b98d0001..7b484d276 100644
--- a/ios/RCTMGL-v10/RCTMGLCamera.swift
+++ b/ios/RCTMGL-v10/RCTMGLCamera.swift
@@ -9,40 +9,37 @@ protocol RCTMGLMapComponent {
 
 /// See `MGLModule.swift:constantsToExport:CameraModes.`
 enum Mode: String, CaseIterable {
-  case flight, move, ease, linear
+  case flight, ease, linear, none
 }
 
 struct CameraUpdateItem {
   var camera: CameraOptions
+  var padding: UIEdgeInsets?
   var mode: Mode
   var duration: TimeInterval?
-  var padding: UIEdgeInsets?
 
   func execute(map: RCTMGLMapView, cameraAnimator: inout BasicCameraAnimator?) {
-    if let duration = duration, duration == 0.0 {
-      map.mapboxMap.setCamera(to: camera)
-      return
-    }
-  
     switch mode {
       case .flight:
-        if let duration = duration {
-          map.camera.fly(to: camera, duration: duration)
-        } else {
-          map.camera.fly(to: camera)
-        }
-      case .move:
-        map.camera.ease(to: camera, duration: duration ?? 0, curve: .easeInOut, completion: nil)
+        map.camera.fly(to: camera, duration: duration)
       case .ease:
         map.camera.ease(to: camera, duration: duration ?? 0, curve: .easeInOut, completion: nil)
+        changePadding(map: map, cameraAnimator: &cameraAnimator, curve: .easeInOut)
       case .linear:
         map.camera.ease(to: camera, duration: duration ?? 0, curve: .linear, completion: nil)
+        changePadding(map: map, cameraAnimator: &cameraAnimator, curve: .linear)
+      case .none:
+        map.mapboxMap.setCamera(to: camera)
     }
-
+  }
+  
+  /// Padding is not currently animatable on the camera, so we create a separate animator instead.
+  /// If this changes, remove this and set `camera.padding` directly.
+  func changePadding(map: RCTMGLMapView, cameraAnimator: inout BasicCameraAnimator?, curve: UIView.AnimationCurve) {
     if let cameraAnimator = cameraAnimator {
       cameraAnimator.stopAnimation()
     }
-    cameraAnimator = map.camera.makeAnimator(duration: duration ?? 0, curve: .easeInOut) { (transition) in
+    cameraAnimator = map.camera.makeAnimator(duration: duration ?? 0, curve: curve) { (transition) in
       transition.padding.toValue = padding
     }
     cameraAnimator?.startAnimation()
@@ -257,9 +254,9 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
         bearing: heading,
         pitch: pitch
       ),
+      padding: padding,
       mode: mode,
-      duration: duration,
-      padding: padding
+      duration: duration
     )
     return result
   }
@@ -284,7 +281,7 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
     }
     
     var updateItem = toUpdateItem(stop: stop)
-    updateItem.mode = .move
+    updateItem.mode = .none
     updateItem.duration = 0
     updateItem.execute(map: map, cameraAnimator: &cameraAnimator)
   }
diff --git a/javascript/components/Camera.js b/javascript/components/Camera.js
index 4dd55ea03..1a30c30c2 100644
--- a/javascript/components/Camera.js
+++ b/javascript/components/Camera.js
@@ -112,7 +112,11 @@ class Camera extends React.Component {
     animationDuration: PropTypes.number,
 
     /**
-     * The animationstyle when the camara updates. One of: `flyTo`, `easeTo`, `linearTo`, `moveTo`
+     * The animation style when the camara updates. One of:
+     * `flyTo`: A complex flight animation, affecting both position and zoom.
+     * `easeTo`: A standard damped curve.
+     * `linearTo`: An even linear transition.
+     * `moveTo`: An instantaneous change.
      */
     animationMode: PropTypes.oneOf(['flyTo', 'easeTo', 'linearTo', 'moveTo']),
 
@@ -191,9 +195,9 @@ class Camera extends React.Component {
 
   static Mode = {
     Flight: 'flyTo',
-    Move: 'moveTo',
     Ease: 'easeTo',
     Linear: 'linearTo',
+    None: 'moveTo',
   };
 
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -606,12 +610,13 @@ class Camera extends React.Component {
     switch (config.animationMode) {
       case Camera.Mode.Flight:
         return MapboxGL.CameraModes.Flight;
-      case Camera.Mode.Move:
-        return MapboxGL.CameraModes.None;
+      case Camera.Mode.Ease:
+        return MapboxGL.CameraModes.Ease;
       case Camera.Mode.Linear:
         return MapboxGL.CameraModes.Linear;
+      case Camera.Mode.None:
       default:
-        return MapboxGL.CameraModes.Ease;
+        return MapboxGL.CameraModes.None;
     }
   }
 

From e9257285d9b1e4e1887688e42e626329323b577e Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Mon, 18 Apr 2022 11:28:24 -0500
Subject: [PATCH 15/36] Make position and padding update together, start with
 instant transition

---
 example/src/examples/V10/CameraAnimation.js | 25 ++++++---------------
 1 file changed, 7 insertions(+), 18 deletions(-)

diff --git a/example/src/examples/V10/CameraAnimation.js b/example/src/examples/V10/CameraAnimation.js
index 14be7f015..c79259319 100644
--- a/example/src/examples/V10/CameraAnimation.js
+++ b/example/src/examples/V10/CameraAnimation.js
@@ -62,7 +62,7 @@ const CameraAnimation = props => {
     longitude: -73.984638,
   };
 
-  const [animationMode, setAnimationMode] = useState('flyTo');
+  const [animationMode, setAnimationMode] = useState('moveTo');
   const [coordinates, setCoordinates] = useState(initialCoordinates);
   const [padding, setPadding] = useState(zeroPadding);
 
@@ -82,14 +82,7 @@ const CameraAnimation = props => {
       latitude: initialCoordinates.latitude + Math.random() * 0.2,
       longitude: initialCoordinates.longitude + Math.random() * 0.2,
     });
-  };
-
-  const changePadding = kind => {
-    if (kind === 'zero') {
-      setPadding(zeroPadding);
-    } else if (kind === 'random') {
-      setPadding(randPadding());
-    }
+    setPadding(randPadding());
   };
 
   const position = [coordinates.longitude, coordinates.latitude];
@@ -120,24 +113,20 @@ const CameraAnimation = props => {
       <SafeAreaView>
         <View style={styles.sheet}>
           <View style={styles.section}>
-            <Text>Move ({coordinatesDisplay})</Text>
             <View style={styles.buttonRow}>
               <Button title="Flight" onPress={() => changePosition('flyTo')} />
-              <Button title="Move" onPress={() => changePosition('moveTo')} />
               <Button title="Ease" onPress={() => changePosition('easeTo')} />
               <Button
                 title="Linear"
                 onPress={() => changePosition('linearTo')}
               />
+              <Button
+                title="Instant"
+                onPress={() => changePosition('moveTo')}
+              />
             </View>
-          </View>
-
-          <View style={styles.section}>
+            <Text>Position ({coordinatesDisplay})</Text>
             <Text>Padding ({paddingDisplay})</Text>
-            <View style={styles.buttonRow}>
-              <Button title="Zero" onPress={() => changePadding('zero')} />
-              <Button title="Random" onPress={() => changePadding('random')} />
-            </View>
           </View>
         </View>
       </SafeAreaView>

From 3e857a42d4b7e4a9054233c0b4a91d72b4d02c38 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Mon, 18 Apr 2022 14:31:13 -0500
Subject: [PATCH 16/36] Default to nil values for camera, use nil anchor
 instead of .zero

---
 ios/RCTMGL-v10/RCTMGLCamera.swift | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/ios/RCTMGL-v10/RCTMGLCamera.swift b/ios/RCTMGL-v10/RCTMGLCamera.swift
index 146c31cd7..25318b0e1 100644
--- a/ios/RCTMGL-v10/RCTMGLCamera.swift
+++ b/ios/RCTMGL-v10/RCTMGLCamera.swift
@@ -176,17 +176,17 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
   }
   
   func toUpdateItem(stop: [String:Any]) -> CameraUpdateItem {    
-    var zoom: CGFloat = 11
+    var zoom: CGFloat?
     if let z = stop["zoom"] as? Double {
       zoom = CGFloat(z)
     }
     
-    var pitch: CGFloat = 0
+    var pitch: CGFloat?
     if let p = stop["pitch"] as? Double {
       pitch = CGFloat(p)
     }
     
-    var heading: CLLocationDirection = 0
+    var heading: CLLocationDirection?
     if let h = stop["heading"] as? Double {
       heading = CLLocationDirection(h)
     }
@@ -232,7 +232,12 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
       
       withMapView { map in
         let bounds = CoordinateBounds(southwest: sw, northeast: ne)
-        let camera = map.mapboxMap.camera(for: bounds, padding: padding, bearing: heading, pitch: pitch)
+        let camera = map.mapboxMap.camera(
+          for: bounds,
+          padding: padding,
+          bearing: heading ?? map.cameraState.bearing,
+          pitch: pitch ?? map.cameraState.pitch
+        )
         if let _center = camera.center, let _zoom = camera.zoom {
           center = _center
           zoom = _zoom
@@ -257,7 +262,8 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
     let result = CameraUpdateItem(
       camera: CameraOptions(
         center: center,
-        anchor: .zero,
+        padding: nil,
+        anchor: nil,
         zoom: zoom,
         bearing: heading,
         pitch: pitch

From 9f09cda9ee70da0fc266d7d26b019db261d1a947 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Mon, 18 Apr 2022 14:31:47 -0500
Subject: [PATCH 17/36] Set shorter duration

---
 example/src/examples/V10/CameraAnimation.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/example/src/examples/V10/CameraAnimation.js b/example/src/examples/V10/CameraAnimation.js
index c79259319..7ce6b8fc9 100644
--- a/example/src/examples/V10/CameraAnimation.js
+++ b/example/src/examples/V10/CameraAnimation.js
@@ -103,6 +103,7 @@ const CameraAnimation = props => {
           animationMode={animationMode}
           zoomLevel={12}
           padding={padding}
+          animationDuration={800}
         />
 
         <ShapeSource id="source" shape={shape}>

From e6592a731843a22ad7f2733eb0b5a201021b9682 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Mon, 18 Apr 2022 14:43:00 -0500
Subject: [PATCH 18/36] Simplify CameraUpdateItem interface, handle padding
 anim fix inside method

---
 ios/RCTMGL-v10/RCTMGLCamera.swift | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/ios/RCTMGL-v10/RCTMGLCamera.swift b/ios/RCTMGL-v10/RCTMGLCamera.swift
index 25318b0e1..6cb97c4f2 100644
--- a/ios/RCTMGL-v10/RCTMGLCamera.swift
+++ b/ios/RCTMGL-v10/RCTMGLCamera.swift
@@ -16,22 +16,27 @@ enum Mode: String, CaseIterable {
 
 struct CameraUpdateItem {
   var camera: CameraOptions
-  var padding: UIEdgeInsets?
   var mode: Mode
   var duration: TimeInterval?
-
+  
   func execute(map: RCTMGLMapView, cameraAnimator: inout BasicCameraAnimator?) {
+    var _camera = camera
+
     switch mode {
       case .flight:
-        map.camera.fly(to: camera, duration: duration)
+        _camera.padding = nil
+        map.camera.fly(to: _camera, duration: duration)
+        changePadding(map: map, cameraAnimator: &cameraAnimator, curve: .linear)
       case .ease:
-        map.camera.ease(to: camera, duration: duration ?? 0, curve: .easeInOut, completion: nil)
+        _camera.padding = nil
+        map.camera.ease(to: _camera, duration: duration ?? 0, curve: .easeInOut, completion: nil)
         changePadding(map: map, cameraAnimator: &cameraAnimator, curve: .easeInOut)
       case .linear:
-        map.camera.ease(to: camera, duration: duration ?? 0, curve: .linear, completion: nil)
+        _camera.padding = nil
+        map.camera.ease(to: _camera, duration: duration ?? 0, curve: .linear, completion: nil)
         changePadding(map: map, cameraAnimator: &cameraAnimator, curve: .linear)
       case .none:
-        map.mapboxMap.setCamera(to: camera)
+        map.mapboxMap.setCamera(to: _camera)
     }
   }
   
@@ -42,7 +47,7 @@ struct CameraUpdateItem {
       cameraAnimator.stopAnimation()
     }
     cameraAnimator = map.camera.makeAnimator(duration: duration ?? 0, curve: curve) { (transition) in
-      transition.padding.toValue = padding
+      transition.padding.toValue = camera.padding
     }
     cameraAnimator?.startAnimation()
   }
@@ -262,13 +267,12 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
     let result = CameraUpdateItem(
       camera: CameraOptions(
         center: center,
-        padding: nil,
+        padding: padding,
         anchor: nil,
         zoom: zoom,
         bearing: heading,
         pitch: pitch
       ),
-      padding: padding,
       mode: mode,
       duration: duration
     )

From 6f0b59483ca6e826b17fa1810f3045603fbfef04 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Mon, 18 Apr 2022 15:04:15 -0500
Subject: [PATCH 19/36] Use low-level animator for padding only in fly(to:)

---
 ios/RCTMGL-v10/RCTMGLCamera.swift | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/ios/RCTMGL-v10/RCTMGLCamera.swift b/ios/RCTMGL-v10/RCTMGLCamera.swift
index 6cb97c4f2..c91d60790 100644
--- a/ios/RCTMGL-v10/RCTMGLCamera.swift
+++ b/ios/RCTMGL-v10/RCTMGLCamera.swift
@@ -20,28 +20,23 @@ struct CameraUpdateItem {
   var duration: TimeInterval?
   
   func execute(map: RCTMGLMapView, cameraAnimator: inout BasicCameraAnimator?) {
-    var _camera = camera
-
     switch mode {
       case .flight:
+        var _camera = camera
         _camera.padding = nil
         map.camera.fly(to: _camera, duration: duration)
         changePadding(map: map, cameraAnimator: &cameraAnimator, curve: .linear)
       case .ease:
-        _camera.padding = nil
-        map.camera.ease(to: _camera, duration: duration ?? 0, curve: .easeInOut, completion: nil)
-        changePadding(map: map, cameraAnimator: &cameraAnimator, curve: .easeInOut)
+        map.camera.ease(to: camera, duration: duration ?? 0, curve: .easeInOut, completion: nil)
       case .linear:
-        _camera.padding = nil
-        map.camera.ease(to: _camera, duration: duration ?? 0, curve: .linear, completion: nil)
-        changePadding(map: map, cameraAnimator: &cameraAnimator, curve: .linear)
+        map.camera.ease(to: camera, duration: duration ?? 0, curve: .linear, completion: nil)
       case .none:
-        map.mapboxMap.setCamera(to: _camera)
+        map.mapboxMap.setCamera(to: camera)
     }
   }
   
-  /// Padding is not currently animatable on the camera, so we create a separate animator instead.
-  /// If this changes, remove this and set `camera.padding` directly.
+  /// Padding is not currently animatable on the camera's `fly(to:)` method, so we create a separate animator instead.
+  /// If this changes, remove this and call `fly(to:)` with an unmodified `camera`.
   func changePadding(map: RCTMGLMapView, cameraAnimator: inout BasicCameraAnimator?, curve: UIView.AnimationCurve) {
     if let cameraAnimator = cameraAnimator {
       cameraAnimator.stopAnimation()

From 5836bd6a3c7de13e99e47901e7c709b39dbe4880 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Mon, 18 Apr 2022 15:04:45 -0500
Subject: [PATCH 20/36] Add option to change only padding

---
 example/src/examples/V10/CameraAnimation.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/example/src/examples/V10/CameraAnimation.js b/example/src/examples/V10/CameraAnimation.js
index 7ce6b8fc9..589e9eabd 100644
--- a/example/src/examples/V10/CameraAnimation.js
+++ b/example/src/examples/V10/CameraAnimation.js
@@ -125,6 +125,13 @@ const CameraAnimation = props => {
                 title="Instant"
                 onPress={() => changePosition('moveTo')}
               />
+              <Button
+                title="Padding"
+                onPress={() => {
+                  setAnimationMode('easeTo');
+                  setPadding(randPadding());
+                }}
+              />
             </View>
             <Text>Position ({coordinatesDisplay})</Text>
             <Text>Padding ({paddingDisplay})</Text>

From b8193b7a5b7c971a5adf5f21ac96a875949fe532 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 19 Apr 2022 15:25:23 -0500
Subject: [PATCH 21/36] Re-enable 'moveTo' animation mode for backward
 compatibility

---
 docs/Camera.md                    |  2 +-
 docs/docs.json                    |  2 +-
 ios/RCTMGL-v10/MGLModule.swift    |  1 +
 ios/RCTMGL-v10/RCTMGLCamera.swift |  4 +++-
 javascript/components/Camera.js   | 18 ++++++++++++++----
 5 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/docs/Camera.md b/docs/Camera.md
index 644dad2bb..b546aa27e 100644
--- a/docs/Camera.md
+++ b/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 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/>`moveTo`: An instantaneous change. |
+| 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 |
diff --git a/docs/docs.json b/docs/docs.json
index eb3d2d00d..c0e642018 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -421,7 +421,7 @@
         "required": false,
         "type": "enum",
         "default": "'easeTo'",
-        "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`moveTo`: An instantaneous change."
+        "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",
diff --git a/ios/RCTMGL-v10/MGLModule.swift b/ios/RCTMGL-v10/MGLModule.swift
index 7944b3cf2..6544d83fc 100644
--- a/ios/RCTMGL-v10/MGLModule.swift
+++ b/ios/RCTMGL-v10/MGLModule.swift
@@ -39,6 +39,7 @@ class MGLModule : NSObject {
           "Ease": "ease",
           "Linear": "linear",
           "None": "none",
+          "Move": "move", // Allows backward compatibility with <v10.
         ],
       "EventTypes":
         [
diff --git a/ios/RCTMGL-v10/RCTMGLCamera.swift b/ios/RCTMGL-v10/RCTMGLCamera.swift
index c91d60790..4b856fe88 100644
--- a/ios/RCTMGL-v10/RCTMGLCamera.swift
+++ b/ios/RCTMGL-v10/RCTMGLCamera.swift
@@ -11,7 +11,7 @@ protocol RCTMGLMapComponent {
 
 /// See `MGLModule.swift:constantsToExport:CameraModes.`
 enum Mode: String, CaseIterable {
-  case flight, ease, linear, none
+  case flight, ease, linear, none, move
 }
 
 struct CameraUpdateItem {
@@ -32,6 +32,8 @@ struct CameraUpdateItem {
         map.camera.ease(to: camera, duration: duration ?? 0, curve: .linear, completion: nil)
       case .none:
         map.mapboxMap.setCamera(to: camera)
+      default:
+        map.mapboxMap.setCamera(to: camera)
     }
   }
   
diff --git a/javascript/components/Camera.js b/javascript/components/Camera.js
index 1a30c30c2..9a1e7c20f 100644
--- a/javascript/components/Camera.js
+++ b/javascript/components/Camera.js
@@ -116,9 +116,16 @@ class Camera extends React.Component {
      * `flyTo`: A complex flight animation, affecting both position and zoom.
      * `easeTo`: A standard damped curve.
      * `linearTo`: An even linear transition.
-     * `moveTo`: An instantaneous change.
+     * `none`: An instantaneous change (v10 only).
+     * `moveTo`: An instantaneous change (<v10).
      */
-    animationMode: PropTypes.oneOf(['flyTo', 'easeTo', 'linearTo', 'moveTo']),
+    animationMode: PropTypes.oneOf([
+      'flyTo',
+      'easeTo',
+      'linearTo',
+      'none',
+      'moveTo',
+    ]),
 
     /**
      * Default view settings applied on camera
@@ -197,7 +204,8 @@ class Camera extends React.Component {
     Flight: 'flyTo',
     Ease: 'easeTo',
     Linear: 'linearTo',
-    None: 'moveTo',
+    None: 'none',
+    Move: 'moveTo',
   };
 
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -615,8 +623,10 @@ class Camera extends React.Component {
       case Camera.Mode.Linear:
         return MapboxGL.CameraModes.Linear;
       case Camera.Mode.None:
-      default:
         return MapboxGL.CameraModes.None;
+      case Camera.Mode.Move:
+      default:
+        return MapboxGL.CameraModes.Move;
     }
   }
 

From 206fd4500404509a5710e48d8ec24e87239987b3 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 20 Apr 2022 15:38:40 -0500
Subject: [PATCH 22/36] Improve returned map state object, reorganize classes
 and add extension methods

---
 ios/RCTMGL-v10/RCTMGLMapView.swift | 330 ++++++++++++++---------------
 1 file changed, 163 insertions(+), 167 deletions(-)

diff --git a/ios/RCTMGL-v10/RCTMGLMapView.swift b/ios/RCTMGL-v10/RCTMGLMapView.swift
index abe5b53d9..63e32fe73 100644
--- a/ios/RCTMGL-v10/RCTMGLMapView.swift
+++ b/ios/RCTMGL-v10/RCTMGLMapView.swift
@@ -2,111 +2,6 @@ import MapboxMaps
 import Turf
 import MapKit
 
-class PointAnnotationManager : AnnotationInteractionDelegate {
-  weak var selected : RCTMGLPointAnnotation? = nil
-  
-  func annotationManager(_ manager: AnnotationManager, didDetectTappedAnnotations annotations: [Annotation]) {
-    guard annotations.count > 0 else {
-      fatalError("didDetectTappedAnnotations: No annotations found")
-    }
-    
-    for annotation in annotations {
-      if let pointAnnotation = annotation as? PointAnnotation,
-         let userInfo = pointAnnotation.userInfo {
-        
-        if let rctmglPointAnnotation = userInfo[RCTMGLPointAnnotation.key] as? WeakRef<RCTMGLPointAnnotation> {
-          if let pt = rctmglPointAnnotation.object {
-            if let selected = selected {
-              selected.onDeselect()
-            }
-            pt.onSelect()
-            selected = pt
-          }
-        }
-      }
-      /*
-      
-         let rctmglPointAnnotation = userInfo[RCTMGLPointAnnotation.key] as? WeakRef<RCTMGLPointAnnotation>,
-         let rctmglPointAnnotation = rctmglPointAnnotation.object {
-        rctmglPointAnnotation.didTap()
-      }*/
-    }
-  }
-  
-  func handleTap(_ tap: UITapGestureRecognizer,  noAnnotationFound: @escaping (UITapGestureRecognizer) -> Void) {
-    let layerId = manager.layerId
-    let annotations = manager.annotations
-    guard let mapFeatureQueryable = mapView?.mapboxMap else {
-      noAnnotationFound(tap)
-      return
-    }
-    let options = RenderedQueryOptions(layerIds: [layerId], filter: nil)
-//    var handled = false
-    mapFeatureQueryable.queryRenderedFeatures(
-        at: tap.location(in: tap.view),
-        options: options) { [weak self] (result) in
-
-        guard let self = self else { return }
-
-        switch result {
-
-        case .success(let queriedFeatures):
-
-            // Get the identifiers of all the queried features
-            let queriedFeatureIds: [String] = queriedFeatures.compactMap {
-                guard case let .string(featureId) = $0.feature.identifier else {
-                    return nil
-                }
-                return featureId
-            }
-
-            // Find if any `queriedFeatureIds` match an annotation's `id`
-            let tappedAnnotations = self.manager.annotations.filter { queriedFeatureIds.contains($0.id) }
-
-            // If `tappedAnnotations` is not empty, call delegate
-            if !tappedAnnotations.isEmpty {
-              self.annotationManager(
-                self.manager,
-                didDetectTappedAnnotations: tappedAnnotations)
-              
-            } else {
-              noAnnotationFound(tap)
-            }
-
-        case .failure(let error):
-          noAnnotationFound(tap)
-          Logger.log(level:.warn, message:"Failed to query map for annotations due to error: \(error)")
-          
-        }
-    }
-  }
-  
-  var manager : MapboxMaps.PointAnnotationManager
-  weak var mapView : MapView? = nil
-  
-  init(annotations: AnnotationOrchestrator, mapView: MapView) {
-    manager = annotations.makePointAnnotationManager()
-    manager.delegate = self
-    self.mapView = mapView
-  }
-  
-  func remove(_ annotation: PointAnnotation) {
-    manager.annotations.removeAll(where: {$0.id == annotation.id})
-  }
-  
-  func add(_ annotation: PointAnnotation) {
-    manager.annotations.append(annotation)
-    manager.syncSourceAndLayerIfNeeded()
-  }
-}
-
-public func dictionaryFrom(_ from: Turf.Feature?) throws -> [String:Any]? {
-  let data = try JSONEncoder().encode(from)
-  let value = try JSONSerialization.jsonObject(with: data) as? [String:Any]
-  return value
-}
-
-
 @objc(RCTMGLMapView)
 open class RCTMGLMapView : MapView {
   var reactOnPress : RCTBubblingEventBlock?
@@ -119,9 +14,9 @@ open class RCTMGLMapView : MapView {
   
   var onStyleLoadedComponents: [RCTMGLMapComponent]? = []
   
-  var _pendingInitialLayout = true
-  var _isUserInteraction = false
-  var _isAnimatingFromUserInteraction = false
+  private var isPendingInitialLayout = true
+  private var isGestureActive = false
+  private var isAnimatingFromGesture = false
 
   var layerWaiters : [String:[(String) -> Void]] = [:]
   
@@ -136,9 +31,7 @@ open class RCTMGLMapView : MapView {
   var mapView : MapView {
     get { return self }
   }
-    
-  // -- react native properties
-  
+
   @objc func setReactStyleURL(_ value: String?) {
     if let value = value {
       if let _ = URL(string: value) {
@@ -169,12 +62,12 @@ open class RCTMGLMapView : MapView {
     self.reactOnMapChange = value
     
     self.mapView.mapboxMap.onEvery(.cameraChanged, handler: { cameraEvent in
-      let event = RCTMGLEvent(type:.cameraChanged, payload: self._makeRegionPayload());
+      let event = RCTMGLEvent(type:.cameraChanged, payload: self.buildStateObject());
       self.fireEvent(event: event, callback: self.reactOnMapChange!)
     })
 
     self.mapView.mapboxMap.onEvery(.mapIdle, handler: { cameraEvent in
-      let event = RCTMGLEvent(type:.mapIdle, payload: self._makeRegionPayload());
+      let event = RCTMGLEvent(type:.mapIdle, payload: self.buildStateObject());
       self.fireEvent(event: event, callback: self.reactOnMapChange!)
     })
   }
@@ -198,46 +91,30 @@ open class RCTMGLMapView : MapView {
     self.mapView.gestures.options.pitchEnabled = value
   }
 
-  func fireEvent(event: RCTMGLEvent, callback: @escaping RCTBubblingEventBlock) {
+  private func fireEvent(event: RCTMGLEvent, callback: @escaping RCTBubblingEventBlock) {
     callback(event.toJSON())
   }
   
-  func _toArray(bounds: CoordinateBounds) -> [[Double]] {
-    return [
-      [
-        Double(bounds.northeast.longitude),
-        Double(bounds.northeast.latitude)
-      ],
-      [
-        Double(bounds.southwest.longitude),
-        Double(bounds.southwest.latitude)
-      ]
-    ]
-  }
-    
-  func toJSON(geometry: Turf.Geometry, properties: [String: Any]? = nil) -> [String: Any] {
-    let geojson = Feature(geometry: geometry);
-  
-    var result = try! dictionaryFrom(geojson)!
-    if let properties = properties {
-      result["properties"] = properties
-    }
-    return result
-  }
+  private func buildStateObject() -> [String: [String: Any]] {
+    let cameraOptions = CameraOptions(cameraState: cameraState)
+    let bounds = mapView.mapboxMap.coordinateBounds(for: cameraOptions)
     
-  func _makeRegionPayload() -> [String: Any] {
-    return toJSON(
-      geometry: .point(Point(mapView.cameraState.center)),
-      properties: [
-        "zoomLevel" : Double(mapView.cameraState.zoom),
+    return [
+      "properties": [
+        "center": Point(mapView.cameraState.center).coordinates.toArray(),
+        "bounds": [
+          "ne": bounds.northeast.toArray(),
+          "sw": bounds.southwest.toArray()
+        ],
+        "zoom" : Double(mapView.cameraState.zoom),
         "heading": Double(mapView.cameraState.bearing),
-        "bearing": Double(mapView.cameraState.bearing),
         "pitch": Double(mapView.cameraState.pitch),
-        "visibleBounds": _toArray(bounds: mapView.mapboxMap.cameraBounds.bounds),
-        "isUserInteraction": _isUserInteraction,
-        "isAnimatingFromUserInteraction": _isAnimatingFromUserInteraction
+      ],
+      "gestures": [
+        "isGestureActive": isGestureActive,
+        "isAnimatingFromGesture": isAnimatingFromGesture
       ]
-    )
+    ]
   }
     
   @objc open override func insertReactSubview(_ subview: UIView!, at atIndex: Int) {
@@ -275,7 +152,7 @@ open class RCTMGLMapView : MapView {
     setupEvents()
   }
   
-  func setupEvents() {
+  public func setupEvents() {
     self.mapboxMap.onEvery(.mapLoadingError, handler: {(event) in
       if let data = event.data as? [String:Any], let message = data["message"] {
         Logger.log(level: .error, message: "MapLoad error \(message)")
@@ -319,7 +196,7 @@ open class RCTMGLMapView : MapView {
   }
   
   func layerAdded (_ layer: Layer) {
-      // V10 TODO
+      // TODO
   }
   
   func waitForLayerWithID(_ layerId: String, _  callback: @escaping (_ layerId: String) -> Void) {
@@ -348,8 +225,8 @@ open class RCTMGLMapView : MapView {
   @objc public override func layoutSubviews() {
     super.layoutSubviews()
     if let camera = reactCamera {
-      if (_pendingInitialLayout) {
-        _pendingInitialLayout = false;
+      if (isPendingInitialLayout) {
+        isPendingInitialLayout = false;
 
         camera.initialLayout()
       }
@@ -360,8 +237,8 @@ open class RCTMGLMapView : MapView {
   public override func updateConstraints() {
     super.updateConstraints()
     if let camera = reactCamera {
-      if (_pendingInitialLayout) {
-        _pendingInitialLayout = false;
+      if (isPendingInitialLayout) {
+        isPendingInitialLayout = false;
 
         camera.initialLayout()
       }
@@ -369,8 +246,6 @@ open class RCTMGLMapView : MapView {
   }
 }
 
-// MARK: - Touch
-
 extension RCTMGLMapView: GestureManagerDelegate {
   func touchableSources() -> [RCTMGLSource] {
     return sources.filter { $0.isTouchable() }
@@ -434,7 +309,7 @@ extension RCTMGLMapView: GestureManagerDelegate {
               Logger.log(level:.error, message: "doHandleTap, no hits found when it should have")
               return
             }
-            let features = hitFeatures.map { try! dictionaryFrom($0.feature) }
+            let features = hitFeatures.map { $0.feature.toJSON() }
             let location = self.mapboxMap.coordinate(for: tapPoint)
             let event = RCTMGLEvent(
               type: (source is RCTMGLVectorSource) ? .vectorSourceLayerPress : .shapeSourceLayerPress,
@@ -460,7 +335,7 @@ extension RCTMGLMapView: GestureManagerDelegate {
                 "screenPointX": .number(Double(tapPoint.x)),
                 "screenPointY": .number(Double(tapPoint.y))
               ]
-              let event = try! RCTMGLEvent(type:.tap, payload: dictionaryFrom(geojson)!)
+              let event = RCTMGLEvent(type:.tap, payload: geojson.toJSON())
               self.fireEvent(event: event, callback: reactOnPress)
             }
           }
@@ -480,38 +355,34 @@ extension RCTMGLMapView: GestureManagerDelegate {
         "screenPointX": .number(Double(position.x)),
         "screenPointY": .number(Double(position.y))
       ]
-      let event = try! RCTMGLEvent(type:.longPress, payload: dictionaryFrom(geojson)!)
+      let event = RCTMGLEvent(type:.longPress, payload: geojson.toJSON())
       self.fireEvent(event: event, callback: reactOnLongPress)
     }
   }
   
   public func gestureManager(_ gestureManager: GestureManager, didBegin gestureType: GestureType) {
-    _isUserInteraction = true
+    isGestureActive = true
   }
   
   public func gestureManager(_ gestureManager: GestureManager, didEnd gestureType: GestureType, willAnimate: Bool) {
-    _isUserInteraction = false
+    isGestureActive = false
     if willAnimate {
-      _isAnimatingFromUserInteraction = true
+      isAnimatingFromGesture = true
     }
   }
   
   public func gestureManager(_ gestureManager: GestureManager, didEndAnimatingFor gestureType: GestureType) {
-    _isUserInteraction = false
-    _isAnimatingFromUserInteraction = false
+    isGestureActive = false
+    isAnimatingFromGesture = false
   }
 }
 
-// MARK: - queryTerrainElevation
-
 extension RCTMGLMapView {
   func queryTerrainElevation(coordinates: [NSNumber]) -> Double? {
     return self.mapboxMap.elevation(at: CLLocationCoordinate2D(latitude: coordinates[1].doubleValue, longitude: coordinates[0].doubleValue))
   }
 }
 
-
-// MARK: - onMapReady
 extension RCTMGLMapView {
   func onMapStyleLoaded(block: @escaping (MapboxMap) -> Void) {
     guard let mapboxMap = mapboxMap else {
@@ -528,7 +399,6 @@ extension RCTMGLMapView {
   }
 }
 
-// MARK: - setSourceVisibility
 extension RCTMGLMapView {
   func setSourceVisibility(_ visible: Bool, sourceId: String, sourceLayerId: String?) -> Void {
     let style = self.mapboxMap.style
@@ -553,3 +423,129 @@ extension RCTMGLMapView {
     }
   }
 }
+
+class PointAnnotationManager : AnnotationInteractionDelegate {
+  weak var selected : RCTMGLPointAnnotation? = nil
+  
+  func annotationManager(_ manager: AnnotationManager, didDetectTappedAnnotations annotations: [Annotation]) {
+    guard annotations.count > 0 else {
+      fatalError("didDetectTappedAnnotations: No annotations found")
+    }
+    
+    for annotation in annotations {
+      if let pointAnnotation = annotation as? PointAnnotation,
+         let userInfo = pointAnnotation.userInfo {
+        
+        if let rctmglPointAnnotation = userInfo[RCTMGLPointAnnotation.key] as? WeakRef<RCTMGLPointAnnotation> {
+          if let pt = rctmglPointAnnotation.object {
+            if let selected = selected {
+              selected.onDeselect()
+            }
+            pt.onSelect()
+            selected = pt
+          }
+        }
+      }
+      /*
+      
+         let rctmglPointAnnotation = userInfo[RCTMGLPointAnnotation.key] as? WeakRef<RCTMGLPointAnnotation>,
+         let rctmglPointAnnotation = rctmglPointAnnotation.object {
+        rctmglPointAnnotation.didTap()
+      }*/
+    }
+  }
+  
+  func handleTap(_ tap: UITapGestureRecognizer,  noAnnotationFound: @escaping (UITapGestureRecognizer) -> Void) {
+    let layerId = manager.layerId
+    guard let mapFeatureQueryable = mapView?.mapboxMap else {
+      noAnnotationFound(tap)
+      return
+    }
+    let options = RenderedQueryOptions(layerIds: [layerId], filter: nil)
+    mapFeatureQueryable.queryRenderedFeatures(
+        at: tap.location(in: tap.view),
+        options: options) { [weak self] (result) in
+
+        guard let self = self else { return }
+
+        switch result {
+
+        case .success(let queriedFeatures):
+
+            // Get the identifiers of all the queried features
+            let queriedFeatureIds: [String] = queriedFeatures.compactMap {
+                guard case let .string(featureId) = $0.feature.identifier else {
+                    return nil
+                }
+                return featureId
+            }
+
+            // Find if any `queriedFeatureIds` match an annotation's `id`
+            let tappedAnnotations = self.manager.annotations.filter { queriedFeatureIds.contains($0.id) }
+
+            // If `tappedAnnotations` is not empty, call delegate
+            if !tappedAnnotations.isEmpty {
+              self.annotationManager(
+                self.manager,
+                didDetectTappedAnnotations: tappedAnnotations)
+              
+            } else {
+              noAnnotationFound(tap)
+            }
+
+        case .failure(let error):
+          noAnnotationFound(tap)
+          Logger.log(level:.warn, message:"Failed to query map for annotations due to error: \(error)")
+          
+        }
+    }
+  }
+  
+  var manager : MapboxMaps.PointAnnotationManager
+  weak var mapView : MapView? = nil
+  
+  init(annotations: AnnotationOrchestrator, mapView: MapView) {
+    manager = annotations.makePointAnnotationManager()
+    manager.delegate = self
+    self.mapView = mapView
+  }
+  
+  func remove(_ annotation: PointAnnotation) {
+    manager.annotations.removeAll(where: {$0.id == annotation.id})
+  }
+  
+  func add(_ annotation: PointAnnotation) {
+    manager.annotations.append(annotation)
+    manager.syncSourceAndLayerIfNeeded()
+  }
+}
+
+extension CLLocationCoordinate2D {
+  func toArray() -> [Double] {
+    return [Double(longitude), Double(latitude)]
+  }
+}
+
+extension Point {
+  func toJSON() -> [String: Any] {
+    do {
+      let data = try JSONEncoder().encode(self)
+      let value = try JSONSerialization.jsonObject(with: data) as? [String: Any]
+      return value ?? [:]
+    } catch {
+      return [:]
+    }
+  }
+}
+
+extension Feature {
+  func toJSON() -> [String: Any] {
+    do {
+      let data = try JSONEncoder().encode(self)
+      let value = try JSONSerialization.jsonObject(with: data) as? [String: Any]
+      return value ?? [:]
+    } catch {
+      return [:]
+    }
+  }
+}

From 369d3c40fe7be2c916cb11af8bfcf047c027102e Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 20 Apr 2022 15:40:19 -0500
Subject: [PATCH 23/36] Point to new map state type

---
 docs/docs.json                   | 4 ++--
 javascript/components/MapView.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/docs.json b/docs/docs.json
index 0027df28b..7db71b339 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -3101,7 +3101,7 @@
             "name": "region",
             "description": "A payload containing the map center, bounds, and other properties.",
             "type": {
-              "name": "RegionPayload"
+              "name": "MapState"
             },
             "optional": false
           }
@@ -3118,7 +3118,7 @@
             "name": "region",
             "description": "A payload containing the map center, bounds, and other properties.",
             "type": {
-              "name": "RegionPayload"
+              "name": "MapState"
             },
             "optional": false
           }
diff --git a/javascript/components/MapView.js b/javascript/components/MapView.js
index 17e1aef34..bdfa433cf 100644
--- a/javascript/components/MapView.js
+++ b/javascript/components/MapView.js
@@ -210,7 +210,7 @@ class MapView extends NativeBridgeComponent(React.Component) {
      *
      * Called when the currently displayed map area changes.
      *
-     * @param {RegionPayload} region - A payload containing the map center, bounds, and other properties.
+     * @param {MapState} region - A payload containing the map center, bounds, and other properties.
      */
     onCameraChanged: PropTypes.func,
 
@@ -219,7 +219,7 @@ class MapView extends NativeBridgeComponent(React.Component) {
      *
      * Called when the currently displayed map area stops changing.
      *
-     * @param {RegionPayload} region - A payload containing the map center, bounds, and other properties.
+     * @param {MapState} region - A payload containing the map center, bounds, and other properties.
      */
     onMapIdle: PropTypes.func,
 

From 3f8b8901ac992494c13e57afeffd9c4228957f0c Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 20 Apr 2022 15:40:50 -0500
Subject: [PATCH 24/36] Declare v10-only map state type

---
 index.d.ts | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/index.d.ts b/index.d.ts
index f6b0ffa7e..fb458d432 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -441,6 +441,9 @@ export type LogoPosition =
   | { bottom: number; left: number }
   | { bottom: number; right: number };
 
+/**
+ * <v10.
+ */
 export interface RegionPayload {
   zoomLevel: number;
   heading: number;
@@ -450,6 +453,26 @@ export interface RegionPayload {
   pitch: number;
 }
 
+/**
+ * v10 only.
+ */
+export interface MapState {
+  properties: {
+    center: GeoJSON.Position;
+    bounds: {
+      ne: GeoJSON.Position;
+      sw: GeoJSON.Position;
+    };
+    zoom : number;
+    heading: number;
+    pitch: number;
+  };
+  gestures: {
+    isGestureActive: boolean;
+    isAnimatingFromGesture: boolean;
+  };
+}
+
 export interface MapViewProps extends ViewProps {
   animated?: boolean;
   userTrackingMode?: MapboxGL.UserTrackingModes;

From 7c950928d86924b0ff2fda0f89ee04ca7628885a Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 20 Apr 2022 15:41:23 -0500
Subject: [PATCH 25/36] Use updated map state shape to display center and
 bounds

---
 .../src/examples/V10/MapGestureHandlers.js    | 41 +++++++++++++------
 1 file changed, 29 insertions(+), 12 deletions(-)

diff --git a/example/src/examples/V10/MapGestureHandlers.js b/example/src/examples/V10/MapGestureHandlers.js
index 145a2be3a..b5b7113e1 100644
--- a/example/src/examples/V10/MapGestureHandlers.js
+++ b/example/src/examples/V10/MapGestureHandlers.js
@@ -32,10 +32,13 @@ const styles = {
 
 const MapGestureHandlers = props => {
   const [lastCallback, setLastCallback] = useState('');
-  const [region, setRegion] = useState({});
+  const [mapState, setMapState] = useState({});
   const [features, setFeatures] = useState([]);
 
-  const properties = region?.properties;
+  const properties = mapState?.properties;
+  const center = properties?.center;
+  const bounds = properties?.bounds;
+  const gestures = mapState?.gestures;
 
   const buildShape = feature => {
     return {
@@ -50,6 +53,11 @@ const MapGestureHandlers = props => {
     setFeatures(prev => [...prev, _feature]);
   };
 
+  const display = position => {
+    if (!position) return '';
+    return `${position[1].toFixed(3)}, ${position[0].toFixed(3)}`;
+  };
+
   return (
     <Page {...props}>
       <MapView
@@ -60,13 +68,13 @@ const MapGestureHandlers = props => {
         onLongPress={_feature => {
           addFeature(_feature, 'longPress');
         }}
-        onCameraChanged={_region => {
+        onCameraChanged={_state => {
           setLastCallback('onCameraChanged');
-          setRegion(_region);
+          setMapState(_state);
         }}
-        onMapIdle={_region => {
+        onMapIdle={_state => {
           setLastCallback('onMapIdle');
-          setRegion(_region);
+          setMapState(_state);
         }}>
         <Camera
           centerCoordinate={[-73.984638, 40.759211]}
@@ -101,20 +109,29 @@ const MapGestureHandlers = props => {
 
           <Divider style={styles.divider} />
 
+          <Text style={styles.fadedText}>center</Text>
+          <Text>{display(center)}</Text>
+
+          <Divider style={styles.divider} />
+
+          <Text style={styles.fadedText}>bounds</Text>
+          <Text>NE: {display(bounds?.ne)}</Text>
+          <Text>NE: {display(bounds?.sw)}</Text>
+
+          <Divider style={styles.divider} />
+
           <Text style={styles.fadedText}>lastCallback</Text>
           <Text>{lastCallback}</Text>
 
           <Divider style={styles.divider} />
 
-          <Text style={styles.fadedText}>isUserInteraction</Text>
-          <Text>{properties?.isUserInteraction ? 'Yes' : 'No'}</Text>
+          <Text style={styles.fadedText}>isGestureActive</Text>
+          <Text>{gestures?.isGestureActive ? 'Yes' : 'No'}</Text>
 
           <Divider style={styles.divider} />
 
-          <Text style={styles.fadedText}>isAnimatingFromUserInteraction</Text>
-          <Text>
-            {properties?.isAnimatingFromUserInteraction ? 'Yes' : 'No'}
-          </Text>
+          <Text style={styles.fadedText}>isAnimatingFromGesture</Text>
+          <Text>{gestures?.isAnimatingFromGesture ? 'Yes' : 'No'}</Text>
         </View>
       </SafeAreaView>
     </Page>

From 57d234bd86d6cf90310674544d58feac2180a1da Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 20 Apr 2022 15:42:50 -0500
Subject: [PATCH 26/36] Rename

---
 .../examples/V10/{MapGestureHandlers.js => MapHandlers.js}    | 4 ++--
 example/src/scenes/Home.js                                    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename example/src/examples/V10/{MapGestureHandlers.js => MapHandlers.js} (98%)

diff --git a/example/src/examples/V10/MapGestureHandlers.js b/example/src/examples/V10/MapHandlers.js
similarity index 98%
rename from example/src/examples/V10/MapGestureHandlers.js
rename to example/src/examples/V10/MapHandlers.js
index b5b7113e1..b2dd1fa01 100644
--- a/example/src/examples/V10/MapGestureHandlers.js
+++ b/example/src/examples/V10/MapHandlers.js
@@ -30,7 +30,7 @@ const styles = {
   },
 };
 
-const MapGestureHandlers = props => {
+const MapHandlers = props => {
   const [lastCallback, setLastCallback] = useState('');
   const [mapState, setMapState] = useState({});
   const [features, setFeatures] = useState([]);
@@ -138,4 +138,4 @@ const MapGestureHandlers = props => {
   );
 };
 
-export default MapGestureHandlers;
+export default MapHandlers;
diff --git a/example/src/scenes/Home.js b/example/src/scenes/Home.js
index 9dcad55b3..fb5e667b1 100644
--- a/example/src/scenes/Home.js
+++ b/example/src/scenes/Home.js
@@ -69,7 +69,7 @@ import CacheManagement from '../examples/CacheManagement';
 import SkyAndTerran from '../examples/V10/SkyAndTerran';
 import QueryTerrainElevation from '../examples/V10/QueryTerrainElevation';
 import CameraAnimation from '../examples/V10/CameraAnimation';
-import MapGestureHandlers from '../examples/V10/MapGestureHandlers';
+import MapHandlers from '../examples/V10/MapHandlers';
 
 const styles = StyleSheet.create({
   exampleList: {
@@ -122,7 +122,7 @@ const Examples = [
     new ExampleItem('Sky and Terrain', SkyAndTerran),
     new ExampleItem('Query Terrain Elevation', QueryTerrainElevation),
     new ExampleItem('Camera Animation', CameraAnimation),
-    new ExampleItem('Map Gesture Handlers', MapGestureHandlers),
+    new ExampleItem('Map Gesture Handlers', MapHandlers),
   ]),
   new ExampleGroup('Map', [
     new ExampleItem('Show Map', ShowMap),

From af78115294370b795720faab86743535ad1e35fa Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 20 Apr 2022 15:43:24 -0500
Subject: [PATCH 27/36] Edit syntax

---
 example/src/examples/V10/MapHandlers.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/example/src/examples/V10/MapHandlers.js b/example/src/examples/V10/MapHandlers.js
index b2dd1fa01..c25c54564 100644
--- a/example/src/examples/V10/MapHandlers.js
+++ b/example/src/examples/V10/MapHandlers.js
@@ -54,7 +54,9 @@ const MapHandlers = props => {
   };
 
   const display = position => {
-    if (!position) return '';
+    if (!position) {
+      return '';
+    }
     return `${position[1].toFixed(3)}, ${position[0].toFixed(3)}`;
   };
 

From b03da22f8aa11d598074e18f6ea3c38a596aa62d Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 20 Apr 2022 15:44:48 -0500
Subject: [PATCH 28/36] Edit title

---
 example/src/scenes/Home.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/example/src/scenes/Home.js b/example/src/scenes/Home.js
index fb5e667b1..e834fbd55 100644
--- a/example/src/scenes/Home.js
+++ b/example/src/scenes/Home.js
@@ -122,7 +122,7 @@ const Examples = [
     new ExampleItem('Sky and Terrain', SkyAndTerran),
     new ExampleItem('Query Terrain Elevation', QueryTerrainElevation),
     new ExampleItem('Camera Animation', CameraAnimation),
-    new ExampleItem('Map Gesture Handlers', MapHandlers),
+    new ExampleItem('Map Handlers', MapHandlers),
   ]),
   new ExampleGroup('Map', [
     new ExampleItem('Show Map', ShowMap),

From 5eb367656ab7c9973ecb0465f0de480ae3feb971 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 20 Apr 2022 16:06:46 -0500
Subject: [PATCH 29/36] Fix callback types

---
 index.d.ts | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index fb458d432..513c028f5 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -510,12 +510,8 @@ export interface MapViewProps extends ViewProps {
   onRegionDidChange?: (
     feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
   ) => void;
-  onCameraChanged?: (
-    feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
-  ) => void;
-  onMapIdle?: (
-    feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
-  ) => void;
+  onCameraChanged?: (state: MapState) => void;
+  onMapIdle?: (state: MapState) => void;
   onUserLocationUpdate?: (feature: MapboxGL.Location) => void;
   onWillStartLoadingMap?: () => void;
   onDidFinishLoadingMap?: () => void;

From 38fc84a743cabe22960c161539660cdd5a479525 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 22 Apr 2022 11:25:33 -0500
Subject: [PATCH 30/36] Ensure all camera props are passed on any change

---
 ios/RCTMGL-v10/RCTMGLCamera.swift |  3 +++
 javascript/components/Camera.js   | 27 ++++++++++-----------------
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/ios/RCTMGL-v10/RCTMGLCamera.swift b/ios/RCTMGL-v10/RCTMGLCamera.swift
index 4b856fe88..cbe24ab5d 100644
--- a/ios/RCTMGL-v10/RCTMGLCamera.swift
+++ b/ios/RCTMGL-v10/RCTMGLCamera.swift
@@ -199,6 +199,8 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
       bottom: stop["paddingBottom"] as? Double ?? 0,
       right: stop["paddingRight"] as? Double ?? 0
     )
+    
+    print("stop: \(stop)")
 
     var center: LocationCoordinate2D?
     if let feature: String = stop["centerCoordinate"] as? String {
@@ -240,6 +242,7 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
           bearing: heading ?? map.cameraState.bearing,
           pitch: pitch ?? map.cameraState.pitch
         )
+
         if let _center = camera.center, let _zoom = camera.zoom {
           center = _center
           zoom = _zoom
diff --git a/javascript/components/Camera.js b/javascript/components/Camera.js
index 9a1e7c20f..b535a25de 100644
--- a/javascript/components/Camera.js
+++ b/javascript/components/Camera.js
@@ -264,8 +264,8 @@ class Camera extends React.Component {
     }
 
     const cameraConfig = {
-      bounds: undefined,
-      centerCoordinate: undefined,
+      bounds: n.bounds,
+      centerCoordinate: n.centerCoordinate,
       padding: n.padding,
       zoomLevel: n.zoomLevel,
       pitch: n.pitch,
@@ -284,21 +284,14 @@ class Camera extends React.Component {
     const pitchChanged = this._hasNumberChanged(c.pitch, n.pitch);
     const headingChanged = this._hasNumberChanged(c.heading, n.heading);
 
-    let shouldUpdate = false;
-
-    if (n.bounds && boundsChanged) {
-      cameraConfig.bounds = n.bounds;
-      shouldUpdate = true;
-    } else if (n.centerCoordinate && centerCoordinateChanged) {
-      cameraConfig.centerCoordinate = n.centerCoordinate;
-      shouldUpdate = true;
-    }
-
-    if (paddingChanged || zoomChanged || pitchChanged || headingChanged) {
-      shouldUpdate = true;
-    }
-
-    if (shouldUpdate) {
+    if (
+      boundsChanged ||
+      centerCoordinateChanged ||
+      paddingChanged ||
+      zoomChanged ||
+      pitchChanged ||
+      headingChanged
+    ) {
       this._setCamera(cameraConfig);
     }
   }

From e00bb884fbe0cffff6c87f113f1dc62d78aecbb1 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 22 Apr 2022 11:26:44 -0500
Subject: [PATCH 31/36] Allow setting bounds or center, add padding options

---
 example/src/examples/V10/CameraAnimation.js | 166 +++++++++++++++-----
 1 file changed, 126 insertions(+), 40 deletions(-)

diff --git a/example/src/examples/V10/CameraAnimation.js b/example/src/examples/V10/CameraAnimation.js
index 589e9eabd..013036ecb 100644
--- a/example/src/examples/V10/CameraAnimation.js
+++ b/example/src/examples/V10/CameraAnimation.js
@@ -1,5 +1,5 @@
 import React, {useMemo, useState} from 'react';
-import {Button, SafeAreaView, Text, View} from 'react-native';
+import {Button, SafeAreaView, View} from 'react-native';
 import {
   MapView,
   Camera,
@@ -7,6 +7,8 @@ import {
   CircleLayer,
   Logger,
 } from '@rnmapbox/maps';
+import bbox from '@turf/bbox';
+import {Text, Divider} from 'react-native-elements';
 
 import Page from '../common/Page';
 import colors from '../../styles/colors';
@@ -25,14 +27,20 @@ const styles = {
     paddingTop: 10,
     paddingHorizontal: 10,
   },
-  section: {
-    paddingVertical: 10,
+  content: {
+    padding: 10,
   },
   buttonRow: {
     flex: 0,
     flexDirection: 'row',
     justifyContent: 'space-around',
   },
+  divider: {
+    marginVertical: 10,
+  },
+  fadedText: {
+    color: 'gray',
+  },
 };
 
 const zeroPadding = {
@@ -42,6 +50,13 @@ const zeroPadding = {
   paddingRight: 0,
 };
 
+const evenPadding = {
+  paddingTop: 40,
+  paddingBottom: 40,
+  paddingLeft: 40,
+  paddingRight: 40,
+};
+
 const randPadding = () => {
   const randNum = () => {
     const items = [0, 150, 300];
@@ -56,85 +71,156 @@ const randPadding = () => {
   };
 };
 
+const toPosition = coordinate => {
+  return [coordinate.longitude, coordinate.latitude];
+};
+
 const CameraAnimation = props => {
-  const initialCoordinates = {
+  const initialCoordinate = {
     latitude: 40.759211,
     longitude: -73.984638,
   };
 
   const [animationMode, setAnimationMode] = useState('moveTo');
-  const [coordinates, setCoordinates] = useState(initialCoordinates);
+  const [coordinates, setCoordinates] = useState([initialCoordinate]);
   const [padding, setPadding] = useState(zeroPadding);
 
-  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 changePosition = _animationMode => {
+  const move = (_animationMode, shouldCreateMultiple = false) => {
     setAnimationMode(_animationMode);
-    setCoordinates({
-      latitude: initialCoordinates.latitude + Math.random() * 0.2,
-      longitude: initialCoordinates.longitude + Math.random() * 0.2,
+
+    const items = Array(shouldCreateMultiple ? 10 : 1).fill(0);
+    const _coordinates = items.map(_ => {
+      return {
+        latitude: initialCoordinate.latitude + Math.random() * 0.2,
+        longitude: initialCoordinate.longitude + Math.random() * 0.2,
+      };
     });
-    setPadding(randPadding());
+    setCoordinates(_coordinates);
   };
 
-  const position = [coordinates.longitude, coordinates.latitude];
+  const features = useMemo(() => {
+    return coordinates.map(p => {
+      return {
+        type: 'Feature',
+        geometry: {
+          type: 'Point',
+          coordinates: toPosition(p),
+        },
+      };
+    });
+  }, [coordinates]);
 
-  const shape = {
-    type: 'Feature',
-    geometry: {
-      type: 'Point',
-      coordinates: position,
-    },
-  };
+  const centerOrBounds = useMemo(() => {
+    if (coordinates.length === 1) {
+      return {
+        centerCoordinate: toPosition(coordinates[0]),
+      };
+    } else {
+      const positions = coordinates.map(toPosition);
+      const lineString = {
+        type: 'Feature',
+        geometry: {
+          type: 'LineString',
+          coordinates: positions,
+        },
+      };
+      const _bbox = bbox(lineString);
+      return {
+        bounds: {
+          ne: [_bbox[0], _bbox[1]],
+          sw: [_bbox[2], _bbox[3]],
+        },
+      };
+    }
+  }, [coordinates]);
+
+  const locationDisplay = useMemo(() => {
+    if (coordinates.length > 1) {
+      const ne = centerOrBounds.bounds?.ne.map(n => n.toFixed(3));
+      const sw = centerOrBounds.bounds?.sw.map(n => n.toFixed(3));
+      return `ne ${ne} | sw ${sw}`;
+    } else if (coordinates.length === 1) {
+      const lon = coordinates[0].longitude.toFixed(4);
+      const lat = coordinates[0].latitude.toFixed(4);
+      return `lon ${lon} | lat ${lat}`;
+    }
+  }, [coordinates, centerOrBounds]);
 
   return (
     <Page {...props}>
       <MapView style={styles.map}>
         <Camera
-          centerCoordinate={position}
-          animationMode={animationMode}
+          {...centerOrBounds}
           zoomLevel={12}
           padding={padding}
           animationDuration={800}
+          animationMode={animationMode}
         />
 
-        <ShapeSource id="source" shape={shape}>
-          <CircleLayer id="layer" style={styles.circle} />
-        </ShapeSource>
+        {features.map(f => {
+          const id = JSON.stringify(f.geometry.coordinates);
+          return (
+            <ShapeSource key={id} id={`source-${id}`} shape={f}>
+              <CircleLayer id={`layer-${id}`} style={styles.circle} />
+            </ShapeSource>
+          );
+        })}
       </MapView>
 
       <SafeAreaView>
         <View style={styles.sheet}>
-          <View style={styles.section}>
+          <View style={styles.content}>
+            <Text style={styles.fadedText}>centerCoordinate</Text>
+            <View style={styles.buttonRow}>
+              <Button title="Flight" onPress={() => move('flyTo', false)} />
+              <Button title="Ease" onPress={() => move('easeTo', false)} />
+              <Button title="Linear" onPress={() => move('linearTo', false)} />
+              <Button title="Instant" onPress={() => move('moveTo', false)} />
+            </View>
+
+            <Divider style={styles.divider} />
+
+            <Text style={styles.fadedText}>bounds</Text>
+            <View style={styles.buttonRow}>
+              <Button title="Flight" onPress={() => move('flyTo', true)} />
+              <Button title="Ease" onPress={() => move('easeTo', true)} />
+              <Button title="Linear" onPress={() => move('linearTo', true)} />
+              <Button title="Instant" onPress={() => move('moveTo', true)} />
+            </View>
+
+            <Divider style={styles.divider} />
+
+            <Text style={styles.fadedText}>padding</Text>
             <View style={styles.buttonRow}>
-              <Button title="Flight" onPress={() => changePosition('flyTo')} />
-              <Button title="Ease" onPress={() => changePosition('easeTo')} />
               <Button
-                title="Linear"
-                onPress={() => changePosition('linearTo')}
+                title="Zero"
+                onPress={() => {
+                  setPadding(zeroPadding);
+                }}
               />
               <Button
-                title="Instant"
-                onPress={() => changePosition('moveTo')}
+                title="Even"
+                onPress={() => {
+                  setPadding(evenPadding);
+                }}
               />
               <Button
-                title="Padding"
+                title="Random"
                 onPress={() => {
-                  setAnimationMode('easeTo');
                   setPadding(randPadding());
                 }}
               />
             </View>
-            <Text>Position ({coordinatesDisplay})</Text>
-            <Text>Padding ({paddingDisplay})</Text>
+
+            <Divider style={styles.divider} />
+
+            <Text style={styles.fadedText}>info</Text>
+            <Text>position: {locationDisplay}</Text>
+            <Text>padding: {paddingDisplay}</Text>
           </View>
         </View>
       </SafeAreaView>

From 5d69cf7046f76295d2d83a189e493c90f0f300cb Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 22 Apr 2022 11:27:28 -0500
Subject: [PATCH 32/36] Add turf/bbox

---
 example/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/example/package.json b/example/package.json
index b9f2989e1..c31375f0e 100644
--- a/example/package.json
+++ b/example/package.json
@@ -20,6 +20,7 @@
     "@mapbox/mapbox-sdk": "^0.13.0",
     "@react-native-community/masked-view": "^0.1.7",
     "@turf/along": "^6.5.0",
+    "@turf/bbox": "^6.5.0",
     "@turf/bbox-polygon": "^6.5.0",
     "@turf/distance": "^6.5.0",
     "@turf/helpers": "^6.5.0",

From 4392295d30d007bb81e4d79c14507ccd9891f163 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 22 Apr 2022 11:40:20 -0500
Subject: [PATCH 33/36] Refactor move method for clarity and to move bounds
 around more

---
 example/src/examples/V10/CameraAnimation.js | 26 ++++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/example/src/examples/V10/CameraAnimation.js b/example/src/examples/V10/CameraAnimation.js
index 013036ecb..b62f4c2f5 100644
--- a/example/src/examples/V10/CameraAnimation.js
+++ b/example/src/examples/V10/CameraAnimation.js
@@ -89,17 +89,31 @@ const CameraAnimation = props => {
     return `L ${padding.paddingLeft} | R ${padding.paddingRight} | T ${padding.paddingTop} | B ${padding.paddingBottom}`;
   }, [padding]);
 
-  const move = (_animationMode, shouldCreateMultiple = false) => {
+  const move = (_animationMode, shouldCreateMultiple) => {
     setAnimationMode(_animationMode);
 
-    const items = Array(shouldCreateMultiple ? 10 : 1).fill(0);
-    const _coordinates = items.map(_ => {
-      return {
+    if (shouldCreateMultiple) {
+      const _centerCoordinate = {
         latitude: initialCoordinate.latitude + Math.random() * 0.2,
         longitude: initialCoordinate.longitude + Math.random() * 0.2,
       };
-    });
-    setCoordinates(_coordinates);
+      const _coordinates = Array(10)
+        .fill(0)
+        .map(_ => {
+          return {
+            latitude: _centerCoordinate.latitude + Math.random() * 0.2,
+            longitude: _centerCoordinate.longitude + Math.random() * 0.2,
+          };
+        });
+      setCoordinates(_coordinates);
+    } else {
+      setCoordinates([
+        {
+          latitude: initialCoordinate.latitude + Math.random() * 0.2,
+          longitude: initialCoordinate.longitude + Math.random() * 0.2,
+        },
+      ]);
+    }
   };
 
   const features = useMemo(() => {

From ecd04e13f76360f30f9642b011fba92042a95d75 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 22 Apr 2022 14:19:21 -0500
Subject: [PATCH 34/36] Implement min and max zoom level handling, organize
 RN-derived props

---
 docs/Camera.md                       |  4 +--
 docs/docs.json                       |  4 +--
 ios/RCTMGL-v10/RCTMGLCamera.swift    | 50 ++++++++++++++++------------
 ios/RCTMGL-v10/RCTMGLCameraManager.m |  2 ++
 javascript/components/Camera.js      |  6 ++--
 5 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/docs/Camera.md b/docs/Camera.md
index b546aa27e..c52100eb8 100644
--- a/docs/Camera.md
+++ b/docs/Camera.md
@@ -43,8 +43,8 @@
 | &nbsp;&nbsp;paddingBottom | `number` | `none` | `false` | Bottom padding in points (deprecated; use root `padding` property instead) |
 | onUserTrackingModeChange | `func` | `none` | `false` | Callback that is triggered on user tracking mode changes |
 | zoomLevel | `number` | `none` | `false` | Zoom level of the map |
-| minZoomLevel | `number` | `none` | `false` | The minimun zoom level of the map |
-| maxZoomLevel | `number` | `none` | `false` | The maximun zoom level of the map |
+| minZoomLevel | `number` | `none` | `false` | The minimum zoom level of the map |
+| maxZoomLevel | `number` | `none` | `false` | The maximum zoom level of the map |
 | maxBounds | `shape` | `none` | `false` | Restrict map panning so that the center is within these bounds |
 | &nbsp;&nbsp;ne | `array` | `none` | `true` | northEastCoordinates - North east coordinate of bound |
 | &nbsp;&nbsp;sw | `array` | `none` | `true` | southWestCoordinates - South west coordinate of bound |
diff --git a/docs/docs.json b/docs/docs.json
index 7db71b339..e7a46f608 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -723,14 +723,14 @@
         "required": false,
         "type": "number",
         "default": "none",
-        "description": "The minimun zoom level of the map"
+        "description": "The minimum zoom level of the map"
       },
       {
         "name": "maxZoomLevel",
         "required": false,
         "type": "number",
         "default": "none",
-        "description": "The maximun zoom level of the map"
+        "description": "The maximum zoom level of the map"
       },
       {
         "name": "maxBounds",
diff --git a/ios/RCTMGL-v10/RCTMGLCamera.swift b/ios/RCTMGL-v10/RCTMGLCamera.swift
index cbe24ab5d..841219870 100644
--- a/ios/RCTMGL-v10/RCTMGLCamera.swift
+++ b/ios/RCTMGL-v10/RCTMGLCamera.swift
@@ -95,8 +95,6 @@ open class RCTMGLMapComponentBase : UIView, RCTMGLMapComponent {
     }
   }
   
-  // MARK: - RCTMGLMapComponent
-
   func waitForStyleLoad() -> Bool {
     return false
   }
@@ -116,28 +114,31 @@ open class RCTMGLMapComponentBase : UIView, RCTMGLMapComponent {
 }
 
 class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
-  var defaultStop : [String:Any]? = nil
-    
-  @objc var stop : [String:Any]? = nil {
+  var cameraAnimator: BasicCameraAnimator?
+  let cameraUpdateQueue = CameraUpdateQueue()
+
+  // Properties set on RCTMGLCamera in React Native.
+  
+  @objc var defaultStop: [String: Any]?
+  
+  @objc var stop: [String: Any]? {
     didSet {
       _updateCamera()
     }
   }
   
-  var cameraAnimator: BasicCameraAnimator?
-  let cameraUpdateQueue = CameraUpdateQueue()
+  @objc var minZoomLevel: NSNumber?
 
-  @objc
-  var followUserLocation : Bool = false {
+  @objc var maxZoomLevel: NSNumber?
+
+  @objc var followUserLocation : Bool = false {
     didSet {
       _updateCameraFromTrackingMode()
     }
   }
-
-  func toTimeInterval(_ duration: Double) -> TimeInterval {
-    return duration*0.001
-  }
   
+  // Update methods.
+
   func _updateCameraFromJavascript() {
     guard !followUserLocation else {
       return
@@ -177,7 +178,7 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
     }
   }
   
-  func toUpdateItem(stop: [String:Any]) -> CameraUpdateItem {    
+  private func toUpdateItem(stop: [String: Any]) -> CameraUpdateItem {
     var zoom: CGFloat?
     if let z = stop["zoom"] as? Double {
       zoom = CGFloat(z)
@@ -199,8 +200,6 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
       bottom: stop["paddingBottom"] as? Double ?? 0,
       right: stop["paddingRight"] as? Double ?? 0
     )
-    
-    print("stop: \(stop)")
 
     var center: LocationCoordinate2D?
     if let feature: String = stop["centerCoordinate"] as? String {
@@ -252,7 +251,7 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
 
     let duration: TimeInterval? = {
       if let d = stop["duration"] as? Double {
-        return self.toTimeInterval(d)
+        return toSeconds(d)
       }
       return nil
     }()
@@ -263,6 +262,14 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
       }
       return .flight
     }()
+    
+    if let z1 = minZoomLevel, let z2 = CGFloat(exactly: z1), zoom! < z2 {
+      zoom = z2
+    }
+
+    if let z1 = maxZoomLevel, let z2 = CGFloat(exactly: z1), zoom! > z2 {
+      zoom = z2
+    }
 
     let result = CameraUpdateItem(
       camera: CameraOptions(
@@ -279,10 +286,6 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
     return result
   }
   
-  @objc func setDefaultStop(_ stop: [String:Any]?) {
-    self.defaultStop = stop
-  }
-
   func _updateCamera() {
     if let _ = map {
       if followUserLocation {
@@ -324,3 +327,8 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
     }
   }
 }
+
+/// Converts milliseconds to seconds.
+private func toSeconds(_ ms: Double) -> TimeInterval {
+  return ms * 0.001
+}
diff --git a/ios/RCTMGL-v10/RCTMGLCameraManager.m b/ios/RCTMGL-v10/RCTMGLCameraManager.m
index c47136d3f..6c44dea64 100644
--- a/ios/RCTMGL-v10/RCTMGLCameraManager.m
+++ b/ios/RCTMGL-v10/RCTMGLCameraManager.m
@@ -6,6 +6,8 @@ @interface RCT_EXTERN_MODULE(RCTMGLCameraManager, RCTViewManager)
 
 RCT_EXPORT_VIEW_PROPERTY(stop, NSDictionary)
 RCT_EXPORT_VIEW_PROPERTY(defaultStop, NSDictionary)
+RCT_EXPORT_VIEW_PROPERTY(minZoomLevel, NSNumber)
+RCT_EXPORT_VIEW_PROPERTY(maxZoomLevel, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(followUserLocation, BOOL)
 
 @end
diff --git a/javascript/components/Camera.js b/javascript/components/Camera.js
index b535a25de..7d1f9f520 100644
--- a/javascript/components/Camera.js
+++ b/javascript/components/Camera.js
@@ -136,12 +136,12 @@ class Camera extends React.Component {
     ...SettingsPropTypes,
 
     /**
-     * The minimun zoom level of the map
+     * The minimum zoom level of the map
      */
     minZoomLevel: PropTypes.number,
 
     /**
-     * The maximun zoom level of the map
+     * The maximum zoom level of the map
      */
     maxZoomLevel: PropTypes.number,
 
@@ -648,8 +648,8 @@ class Camera extends React.Component {
         followHeading={this.props.followHeading}
         followZoomLevel={this.props.followZoomLevel}
         stop={this._createStopConfig(props)}
-        maxZoomLevel={this.props.maxZoomLevel}
         minZoomLevel={this.props.minZoomLevel}
+        maxZoomLevel={this.props.maxZoomLevel}
         maxBounds={this._getMaxBounds()}
         defaultStop={this._createDefaultCamera()}
         {...callbacks}

From acf6039d279c0606604df1e7cdef1c918398a269 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 22 Apr 2022 14:20:12 -0500
Subject: [PATCH 35/36] Add zoom level constraints

---
 example/src/examples/V10/CameraAnimation.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/example/src/examples/V10/CameraAnimation.js b/example/src/examples/V10/CameraAnimation.js
index b62f4c2f5..f9bd24623 100644
--- a/example/src/examples/V10/CameraAnimation.js
+++ b/example/src/examples/V10/CameraAnimation.js
@@ -49,13 +49,14 @@ const zeroPadding = {
   paddingLeft: 0,
   paddingRight: 0,
 };
-
 const evenPadding = {
   paddingTop: 40,
   paddingBottom: 40,
   paddingLeft: 40,
   paddingRight: 40,
 };
+const minZoomLevel = 8;
+const maxZoomLevel = 16;
 
 const randPadding = () => {
   const randNum = () => {
@@ -170,6 +171,8 @@ const CameraAnimation = props => {
         <Camera
           {...centerOrBounds}
           zoomLevel={12}
+          minZoomLevel={minZoomLevel}
+          maxZoomLevel={maxZoomLevel}
           padding={padding}
           animationDuration={800}
           animationMode={animationMode}

From 55c4af0fcff73f432c821b1dc280af86436f7d32 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 22 Apr 2022 16:57:55 -0500
Subject: [PATCH 36/36] Fix camera tests

---
 __tests__/components/Camera.test.js | 10 ++++++----
 setup-jest.js                       |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/__tests__/components/Camera.test.js b/__tests__/components/Camera.test.js
index 162c58c95..14a6bbffa 100644
--- a/__tests__/components/Camera.test.js
+++ b/__tests__/components/Camera.test.js
@@ -942,6 +942,7 @@ describe('Camera', () => {
           defaultSettings: {
             centerCoordinate: [-111.8678, 40.2866],
             zoomLevel: 16,
+            animationMode: 'moveTo',
           },
         };
 
@@ -950,7 +951,7 @@ describe('Camera', () => {
             '{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-111.8678,40.2866]}}',
           duration: 0,
           heading: undefined,
-          mode: 'None',
+          mode: 'Move',
           pitch: undefined,
           zoom: 16,
           paddingBottom: 0,
@@ -969,6 +970,7 @@ describe('Camera', () => {
       const camera = new Camera();
       const configWithoutBounds = {
         animationDuration: 2000,
+        animationMode: 'easeTo',
         pitch: 45,
         heading: 110,
         zoomLevel: 9,
@@ -1098,11 +1100,11 @@ describe('Camera', () => {
       test('returns "None" for "moveTo"', () => {
         expect(
           camera._getNativeCameraMode({animationMode: 'moveTo'}),
-        ).toStrictEqual('None');
+        ).toStrictEqual('Move');
       });
 
-      test('returns "Ease" as default', () => {
-        expect(camera._getNativeCameraMode({})).toStrictEqual('Ease');
+      test('returns "Move" as default (TODO: This should eventually fall back to None)', () => {
+        expect(camera._getNativeCameraMode({})).toStrictEqual('Move');
       });
     });
 
diff --git a/setup-jest.js b/setup-jest.js
index f9ab416b5..e0b396015 100644
--- a/setup-jest.js
+++ b/setup-jest.js
@@ -40,7 +40,7 @@ NativeModules.MGLModule = {
     'DidFinishLoadingStyle',
     'SetCameraComplete',
   ]),
-  CameraModes: keyMirror(['Flight', 'Ease', 'None']),
+  CameraModes: keyMirror(['Flight', 'Ease', 'Linear', 'None', 'Move']),
   StyleSource: keyMirror(['DefaultSourceID']),
   InterpolationMode: keyMirror([
     'Exponential',