From cdbafe633d9fcba652c6b4dae1e016ed7e559f0f Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Mon, 18 Apr 2022 16:25:07 -0500
Subject: [PATCH 01/84] Clean up warnings

---
 ios/RCTMGL-v10/RCTMGLMapView.swift | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/ios/RCTMGL-v10/RCTMGLMapView.swift b/ios/RCTMGL-v10/RCTMGLMapView.swift
index 9d9810590..e700e072c 100644
--- a/ios/RCTMGL-v10/RCTMGLMapView.swift
+++ b/ios/RCTMGL-v10/RCTMGLMapView.swift
@@ -143,7 +143,7 @@ open class RCTMGLMapView : MapView {
   
   @objc func setReactStyleURL(_ value: String?) {
     if let value = value {
-      if let url = URL(string: value) {
+      if let _ = URL(string: value) {
         mapView.mapboxMap.loadStyleURI(StyleURI(rawValue: value)!)
       } else {
         if RCTJSONParse(value, nil) != nil {
@@ -168,6 +168,7 @@ open class RCTMGLMapView : MapView {
     self.reactOnMapChange = value
 
     self.mapView.mapboxMap.onEvery(.cameraChanged, handler: { cameraEvent in
+      print("Hi????")
       let event = RCTMGLEvent(type:.regionDidChange, payload: self._makeRegionPayload());
       self.fireEvent(event: event, callback: self.reactOnMapChange!)
     })
@@ -425,7 +426,7 @@ extension RCTMGLMapView {
             }
             let features = hitFeatures.map { try! dictionaryFrom($0.feature) }
             let location = self.mapboxMap.coordinate(for: tapPoint)
-            let event = try! RCTMGLEvent(
+            let event = RCTMGLEvent(
               type: (source is RCTMGLVectorSource) ? .vectorSourceLayerPress : .shapeSourceLayerPress,
               payload: [
                 "features": features,

From b0b07934c23cd3579040ff44ee608853823c9241 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Mon, 18 Apr 2022 16:25:44 -0500
Subject: [PATCH 02/84] Remove log

---
 ios/RCTMGL-v10/RCTMGLMapView.swift | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ios/RCTMGL-v10/RCTMGLMapView.swift b/ios/RCTMGL-v10/RCTMGLMapView.swift
index e700e072c..a22c68699 100644
--- a/ios/RCTMGL-v10/RCTMGLMapView.swift
+++ b/ios/RCTMGL-v10/RCTMGLMapView.swift
@@ -168,7 +168,6 @@ open class RCTMGLMapView : MapView {
     self.reactOnMapChange = value
 
     self.mapView.mapboxMap.onEvery(.cameraChanged, handler: { cameraEvent in
-      print("Hi????")
       let event = RCTMGLEvent(type:.regionDidChange, payload: self._makeRegionPayload());
       self.fireEvent(event: event, callback: self.reactOnMapChange!)
     })

From 6fcaa7e49db200871a8e4140684f1290fc4ea920 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 19 Apr 2022 10:58:19 -0500
Subject: [PATCH 03/84] Listen for and return map drag information in callbacks

---
 ios/RCTMGL-v10/MGLModule.swift     |  1 +
 ios/RCTMGL-v10/RCTMGLEvent.swift   |  1 +
 ios/RCTMGL-v10/RCTMGLMapView.swift | 52 ++++++++++++++++++++----------
 3 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/ios/RCTMGL-v10/MGLModule.swift b/ios/RCTMGL-v10/MGLModule.swift
index 475aa58aa..c62e55914 100644
--- a/ios/RCTMGL-v10/MGLModule.swift
+++ b/ios/RCTMGL-v10/MGLModule.swift
@@ -42,6 +42,7 @@ class MGLModule : NSObject {
         ],
       "EventTypes":
         [
+          "RegionIsChanging" : RCTMGLEvent.EventType.regionIsChanging.rawValue,
           "RegionDidChange" : RCTMGLEvent.EventType.regionDidChange.rawValue,
           "DidFinishLoadingMap": RCTMGLEvent.EventType.didFinishLoadingMap.rawValue
         ],
diff --git a/ios/RCTMGL-v10/RCTMGLEvent.swift b/ios/RCTMGL-v10/RCTMGLEvent.swift
index 5f3bb6281..1638a4bb4 100644
--- a/ios/RCTMGL-v10/RCTMGLEvent.swift
+++ b/ios/RCTMGL-v10/RCTMGLEvent.swift
@@ -20,6 +20,7 @@ class RCTMGLEvent : NSObject, RCTMGLEventProtocol {
 
     enum EventType : String {
       case tap = "press"
+      case regionIsChanging = "regionischanging"
       case regionDidChange = "regiondidchange"
       case imageMissing = "imagesmissingimage"
       case didFinishLoadingMap = "didfinishloadingmap"
diff --git a/ios/RCTMGL-v10/RCTMGLMapView.swift b/ios/RCTMGL-v10/RCTMGLMapView.swift
index a22c68699..fd4838435 100644
--- a/ios/RCTMGL-v10/RCTMGLMapView.swift
+++ b/ios/RCTMGL-v10/RCTMGLMapView.swift
@@ -1,12 +1,6 @@
 import MapboxMaps
 import Turf
 
-private extension MapboxMaps.PointAnnotationManager {
- // func doHandleTap(_ tap: UITapGestureRecognizer) {
- //   self.handleTap(tap)
- // }
-}
-
 class PointAnnotationManager : AnnotationInteractionDelegate {
   weak var selected : RCTMGLPointAnnotation? = nil
   
@@ -124,7 +118,9 @@ open class RCTMGLMapView : MapView {
   var onStyleLoadedComponents: [RCTMGLMapComponent]? = []
   
   var _pendingInitialLayout = true
-  
+  var _isUserInteraction = false
+  var _isAnimatingFromUserInteraction = false
+
   var layerWaiters : [String:[(String) -> Void]] = [:]
   
   lazy var pointAnnotationManager : PointAnnotationManager = {
@@ -156,18 +152,19 @@ open class RCTMGLMapView : MapView {
   @objc func setReactOnPress(_ value: @escaping RCTBubblingEventBlock) {
     self.reactOnPress = value
 
-    /*
-      let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleTap))
-      self.addGestureRecognizer(tapGesture)
-    */
-    mapView.gestures.singleTapGestureRecognizer.removeTarget( pointAnnotationManager.manager, action: nil)
-    mapView.gestures.singleTapGestureRecognizer.addTarget(self, action: #selector(doHandleTap(_:)))
+    self.mapView.gestures.singleTapGestureRecognizer.removeTarget( pointAnnotationManager.manager, action: nil)
+    self.mapView.gestures.singleTapGestureRecognizer.addTarget(self, action: #selector(doHandleTap(_:)))
   }
 
   @objc func setReactOnMapChange(_ value: @escaping RCTBubblingEventBlock) {
     self.reactOnMapChange = value
-
+    
     self.mapView.mapboxMap.onEvery(.cameraChanged, handler: { cameraEvent in
+      let event = RCTMGLEvent(type:.regionIsChanging, payload: self._makeRegionPayload());
+      self.fireEvent(event: event, callback: self.reactOnMapChange!)
+    })
+
+    self.mapView.mapboxMap.onEvery(.mapIdle, handler: { cameraEvent in
       let event = RCTMGLEvent(type:.regionDidChange, payload: self._makeRegionPayload());
       self.fireEvent(event: event, callback: self.reactOnMapChange!)
     })
@@ -219,7 +216,7 @@ open class RCTMGLMapView : MapView {
     return result
   }
     
-  func _makeRegionPayload() -> [String:Any] {
+  func _makeRegionPayload() -> [String: Any] {
     return toJSON(
       geometry: .point(Point(mapView.cameraState.center)),
       properties: [
@@ -227,7 +224,9 @@ open class RCTMGLMapView : MapView {
         "heading": Double(mapView.cameraState.bearing),
         "bearing": Double(mapView.cameraState.bearing),
         "pitch": Double(mapView.cameraState.pitch),
-        "visibleBounds": _toArray(bounds: mapView.mapboxMap.cameraBounds.bounds)
+        "visibleBounds": _toArray(bounds: mapView.mapboxMap.cameraBounds.bounds),
+        "isUserInteraction": _isUserInteraction,
+        "isAnimatingFromUserInteraction": _isAnimatingFromUserInteraction
       ]
     )
   }
@@ -262,6 +261,8 @@ open class RCTMGLMapView : MapView {
     let resourceOptions = ResourceOptions(accessToken: MGLModule.accessToken!)
     super.init(frame: frame, mapInitOptions: MapInitOptions(resourceOptions: resourceOptions))
 
+    self.mapView.gestures.delegate = self
+
     setupEvents()
   }
   
@@ -273,6 +274,7 @@ open class RCTMGLMapView : MapView {
         Logger.log(level: .error, message: "MapLoad error \(event)")
       }
     })
+    
     self.mapboxMap.onEvery(.styleImageMissing) { (event) in
       if let data = event.data as? [String:Any] {
         if let imageName = data["id"] as? String {
@@ -360,7 +362,7 @@ open class RCTMGLMapView : MapView {
 
 // MARK: - Touch
 
-extension RCTMGLMapView {
+extension RCTMGLMapView: GestureManagerDelegate {
   func touchableSources() -> [RCTMGLSource] {
     return sources.filter { $0.isTouchable() }
   }
@@ -457,6 +459,22 @@ extension RCTMGLMapView {
       }
     }
   }
+  
+  public func gestureManager(_ gestureManager: GestureManager, didBegin gestureType: GestureType) {
+    _isUserInteraction = true
+  }
+  
+  public func gestureManager(_ gestureManager: GestureManager, didEnd gestureType: GestureType, willAnimate: Bool) {
+    _isUserInteraction = false
+    if willAnimate {
+      _isAnimatingFromUserInteraction = true
+    }
+  }
+  
+  public func gestureManager(_ gestureManager: GestureManager, didEndAnimatingFor gestureType: GestureType) {
+    _isUserInteraction = false
+    _isAnimatingFromUserInteraction = false
+  }
 }
 
 // MARK: - queryTerrainElevation

From 4e14afd6c302533ed7251066e8b6a399f105e431 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 19 Apr 2022 11:01:58 -0500
Subject: [PATCH 04/84] Add example showing map gesture handling

---
 .../src/examples/V10/MapGestureHandlers.js    | 53 +++++++++++++++++++
 example/src/scenes/Home.js                    |  2 +
 2 files changed, 55 insertions(+)
 create mode 100644 example/src/examples/V10/MapGestureHandlers.js

diff --git a/example/src/examples/V10/MapGestureHandlers.js b/example/src/examples/V10/MapGestureHandlers.js
new file mode 100644
index 000000000..bb8676705
--- /dev/null
+++ b/example/src/examples/V10/MapGestureHandlers.js
@@ -0,0 +1,53 @@
+import React, {useState} from 'react';
+import {SafeAreaView, View} from 'react-native';
+import {MapView, Camera, Logger} from '@rnmapbox/maps';
+import {Text, Divider} from 'react-native-elements';
+
+import Page from '../common/Page';
+
+Logger.setLogLevel('verbose');
+
+const styles = {
+  map: {
+    flex: 1,
+  },
+  info: {
+    flex: 0,
+    padding: 10,
+  },
+  divider: {
+    marginVertical: 10,
+  },
+};
+
+const MapGestureHandlers = props => {
+  const [region, setRegion] = useState({});
+
+  const properties = region?.properties;
+
+  return (
+    <Page {...props}>
+      <MapView
+        style={styles.map}
+        onRegionWillChange={_region => setRegion(_region)}
+        onRegionIsChanging={_region => setRegion(_region)}
+        onRegionDidChange={_region => setRegion(_region)}>
+        <Camera centerCoordinate={[-73.984638, 40.759211]} zoomLevel={12} />
+      </MapView>
+
+      <SafeAreaView>
+        <View style={styles.info}>
+          <Text>Interacting:</Text>
+          <Text h4={true}>{properties?.isUserInteraction ? 'Yes' : 'No'}</Text>
+          <Divider style={styles.divider} />
+          <Text>Animating from interaction:</Text>
+          <Text h4={true}>
+            {properties?.isAnimatingFromUserInteraction ? 'Yes' : 'No'}
+          </Text>
+        </View>
+      </SafeAreaView>
+    </Page>
+  );
+};
+
+export default MapGestureHandlers;
diff --git a/example/src/scenes/Home.js b/example/src/scenes/Home.js
index 2c659288a..9dcad55b3 100644
--- a/example/src/scenes/Home.js
+++ b/example/src/scenes/Home.js
@@ -69,6 +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';
 
 const styles = StyleSheet.create({
   exampleList: {
@@ -121,6 +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 ExampleGroup('Map', [
     new ExampleItem('Show Map', ShowMap),

From c47fbd6e70466112ec5da5fffac7eaab6dcdfa6a Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 19 Apr 2022 12:26:13 -0500
Subject: [PATCH 05/84] Remove unneeded enum string values

---
 ios/RCTMGL-v10/RCTMGLEvent.swift | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/ios/RCTMGL-v10/RCTMGLEvent.swift b/ios/RCTMGL-v10/RCTMGLEvent.swift
index 1638a4bb4..4a4fd09eb 100644
--- a/ios/RCTMGL-v10/RCTMGLEvent.swift
+++ b/ios/RCTMGL-v10/RCTMGLEvent.swift
@@ -19,16 +19,17 @@ class RCTMGLEvent : NSObject, RCTMGLEventProtocol {
     }
 
     enum EventType : String {
-      case tap = "press"
-      case regionIsChanging = "regionischanging"
-      case regionDidChange = "regiondidchange"
-      case imageMissing = "imagesmissingimage"
-      case didFinishLoadingMap = "didfinishloadingmap"
-      case offlineProgress = "offlinestatus"
-      case offlineError = "offlineerror"
-      case offlineTileLimit = "offlinetileLimit"
-      case vectorSourceLayerPress = "vectorsourcelayerpress"
-      case shapeSourceLayerPress = "shapesourcelayerpress"
+      case tap
+      case regionWillChange
+      case regionIsChanging
+      case regionDidChange
+      case imageMissing
+      case didFinishLoadingMap
+      case offlineProgress
+      case offlineError
+      case offlineTileLimit
+      case vectorSourceLayerPress
+      case shapeSourceLayerPress
     }
     
     init(type: EventType, payload: [String:Any]?) {
@@ -37,4 +38,3 @@ class RCTMGLEvent : NSObject, RCTMGLEventProtocol {
     }
     
 }
-

From de50625a70f95b39d9129865001fd25cc32264c1 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 19 Apr 2022 13:41:21 -0500
Subject: [PATCH 06/84] Add new region callbacks to mirror v10 native API

---
 docs/MapView.md                    |  8 +++---
 docs/docs.json                     | 40 +++++++++++++++++++++++++++---
 index.d.ts                         |  6 +++++
 ios/RCTMGL-v10/MGLModule.swift     |  4 +--
 ios/RCTMGL-v10/RCTMGLEvent.swift   |  2 ++
 ios/RCTMGL-v10/RCTMGLMapView.swift |  5 ++--
 javascript/components/MapView.js   | 38 ++++++++++++++++++++++++++--
 7 files changed, 91 insertions(+), 12 deletions(-)

diff --git a/docs/MapView.md b/docs/MapView.md
index 1503b1050..d5a14d797 100644
--- a/docs/MapView.md
+++ b/docs/MapView.md
@@ -26,9 +26,11 @@
 | surfaceView | `bool` | `false` | `false` | [Android only] Enable/Disable use of GLSurfaceView insted of TextureView. |
 | onPress | `func` | `none` | `false` | Map press listener, gets called when a user presses the map |
 | onLongPress | `func` | `none` | `false` | Map long press listener, gets called when a user long presses the map |
-| onRegionWillChange | `func` | `none` | `false` | This event is triggered whenever the currently displayed map region is about to change. |
-| onRegionIsChanging | `func` | `none` | `false` | This event is triggered whenever the currently displayed map region is changing. |
-| onRegionDidChange | `func` | `none` | `false` | This event is triggered whenever the currently displayed map region finished changing |
+| onRegionWillChange | `func` | `none` | `false` | <v10 only<br/><br/>This event is triggered whenever the currently displayed map region is about to change. |
+| onRegionIsChanging | `func` | `none` | `false` | <v10 only<br/><br/>This event is triggered whenever the currently displayed map region is changing. |
+| onRegionDidChange | `func` | `none` | `false` | <v10 only<br/><br/>This event is triggered whenever the currently displayed map region finished changing. |
+| onCameraChanged | `func` | `none` | `false` | v10 only<br/><br/>Called when the currently displayed map area changes. |
+| onMapIdle | `func` | `none` | `false` | v10 only<br/><br/>Called when the currently displayed map area stops changing. |
 | onWillStartLoadingMap | `func` | `none` | `false` | This event is triggered when the map is about to start loading a new map style. |
 | onDidFinishLoadingMap | `func` | `none` | `false` | This is triggered when the map has successfully loaded a new map style. |
 | onDidFailLoadingMap | `func` | `none` | `false` | This event is triggered when the map has failed to load a new map style. |
diff --git a/docs/docs.json b/docs/docs.json
index 2b13910b5..61a94fa3f 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -3044,7 +3044,7 @@
         "required": false,
         "type": "func",
         "default": "none",
-        "description": "This event is triggered whenever the currently displayed map region is about to change.",
+        "description": "<v10 only\n\nThis event is triggered whenever the currently displayed map region is about to change.",
         "params": [
           {
             "name": "feature",
@@ -3061,7 +3061,7 @@
         "required": false,
         "type": "func",
         "default": "none",
-        "description": "This event is triggered whenever the currently displayed map region is changing.",
+        "description": "<v10 only\n\nThis event is triggered whenever the currently displayed map region is changing.",
         "params": [
           {
             "name": "feature",
@@ -3078,7 +3078,7 @@
         "required": false,
         "type": "func",
         "default": "none",
-        "description": "This event is triggered whenever the currently displayed map region finished changing",
+        "description": "<v10 only\n\nThis event is triggered whenever the currently displayed map region finished changing.",
         "params": [
           {
             "name": "feature",
@@ -3090,6 +3090,40 @@
           }
         ]
       },
+      {
+        "name": "onCameraChanged",
+        "required": false,
+        "type": "func",
+        "default": "none",
+        "description": "v10 only\n\nCalled when the currently displayed map area changes.",
+        "params": [
+          {
+            "name": "region",
+            "description": "A payload containing the map center, bounds, and other properties.",
+            "type": {
+              "name": "RegionPayload"
+            },
+            "optional": false
+          }
+        ]
+      },
+      {
+        "name": "onMapIdle",
+        "required": false,
+        "type": "func",
+        "default": "none",
+        "description": "v10 only\n\nCalled when the currently displayed map area stops changing.",
+        "params": [
+          {
+            "name": "region",
+            "description": "A payload containing the map center, bounds, and other properties.",
+            "type": {
+              "name": "RegionPayload"
+            },
+            "optional": false
+          }
+        ]
+      },
       {
         "name": "onWillStartLoadingMap",
         "required": false,
diff --git a/index.d.ts b/index.d.ts
index 0e8d12ab4..f6b0ffa7e 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -487,6 +487,12 @@ 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;
   onUserLocationUpdate?: (feature: MapboxGL.Location) => void;
   onWillStartLoadingMap?: () => void;
   onDidFinishLoadingMap?: () => void;
diff --git a/ios/RCTMGL-v10/MGLModule.swift b/ios/RCTMGL-v10/MGLModule.swift
index c62e55914..4fc46d432 100644
--- a/ios/RCTMGL-v10/MGLModule.swift
+++ b/ios/RCTMGL-v10/MGLModule.swift
@@ -42,8 +42,8 @@ class MGLModule : NSObject {
         ],
       "EventTypes":
         [
-          "RegionIsChanging" : RCTMGLEvent.EventType.regionIsChanging.rawValue,
-          "RegionDidChange" : RCTMGLEvent.EventType.regionDidChange.rawValue,
+          "CameraChanged" : RCTMGLEvent.EventType.cameraChanged.rawValue,
+          "MapIdle" : RCTMGLEvent.EventType.mapIdle.rawValue,
           "DidFinishLoadingMap": RCTMGLEvent.EventType.didFinishLoadingMap.rawValue
         ],
       "OfflineCallbackName":
diff --git a/ios/RCTMGL-v10/RCTMGLEvent.swift b/ios/RCTMGL-v10/RCTMGLEvent.swift
index 4a4fd09eb..e7c5e86ed 100644
--- a/ios/RCTMGL-v10/RCTMGLEvent.swift
+++ b/ios/RCTMGL-v10/RCTMGLEvent.swift
@@ -23,6 +23,8 @@ class RCTMGLEvent : NSObject, RCTMGLEventProtocol {
       case regionWillChange
       case regionIsChanging
       case regionDidChange
+      case cameraChanged
+      case mapIdle
       case imageMissing
       case didFinishLoadingMap
       case offlineProgress
diff --git a/ios/RCTMGL-v10/RCTMGLMapView.swift b/ios/RCTMGL-v10/RCTMGLMapView.swift
index fd4838435..e53422799 100644
--- a/ios/RCTMGL-v10/RCTMGLMapView.swift
+++ b/ios/RCTMGL-v10/RCTMGLMapView.swift
@@ -1,5 +1,6 @@
 import MapboxMaps
 import Turf
+import MapKit
 
 class PointAnnotationManager : AnnotationInteractionDelegate {
   weak var selected : RCTMGLPointAnnotation? = nil
@@ -160,12 +161,12 @@ open class RCTMGLMapView : MapView {
     self.reactOnMapChange = value
     
     self.mapView.mapboxMap.onEvery(.cameraChanged, handler: { cameraEvent in
-      let event = RCTMGLEvent(type:.regionIsChanging, payload: self._makeRegionPayload());
+      let event = RCTMGLEvent(type:.cameraChanged, payload: self._makeRegionPayload());
       self.fireEvent(event: event, callback: self.reactOnMapChange!)
     })
 
     self.mapView.mapboxMap.onEvery(.mapIdle, handler: { cameraEvent in
-      let event = RCTMGLEvent(type:.regionDidChange, payload: self._makeRegionPayload());
+      let event = RCTMGLEvent(type:.mapIdle, payload: self._makeRegionPayload());
       self.fireEvent(event: event, callback: self.reactOnMapChange!)
     })
   }
diff --git a/javascript/components/MapView.js b/javascript/components/MapView.js
index ab6a70a62..17e1aef34 100644
--- a/javascript/components/MapView.js
+++ b/javascript/components/MapView.js
@@ -179,6 +179,8 @@ class MapView extends NativeBridgeComponent(React.Component) {
     onLongPress: PropTypes.func,
 
     /**
+     * <v10 only
+     *
      * This event is triggered whenever the currently displayed map region is about to change.
      *
      * @param {PointFeature} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
@@ -186,6 +188,8 @@ class MapView extends NativeBridgeComponent(React.Component) {
     onRegionWillChange: PropTypes.func,
 
     /**
+     * <v10 only
+     *
      * This event is triggered whenever the currently displayed map region is changing.
      *
      * @param {PointFeature} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
@@ -193,12 +197,32 @@ class MapView extends NativeBridgeComponent(React.Component) {
     onRegionIsChanging: PropTypes.func,
 
     /**
-     * This event is triggered whenever the currently displayed map region finished changing
+     * <v10 only
+     *
+     * This event is triggered whenever the currently displayed map region finished changing.
      *
      * @param {PointFeature} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
      */
     onRegionDidChange: PropTypes.func,
 
+    /**
+     * v10 only
+     *
+     * Called when the currently displayed map area changes.
+     *
+     * @param {RegionPayload} region - A payload containing the map center, bounds, and other properties.
+     */
+    onCameraChanged: PropTypes.func,
+
+    /**
+     * v10 only
+     *
+     * Called when the currently displayed map area stops changing.
+     *
+     * @param {RegionPayload} region - A payload containing the map center, bounds, and other properties.
+     */
+    onMapIdle: PropTypes.func,
+
     /**
      * This event is triggered when the map is about to start loading a new map style.
      */
@@ -625,7 +649,11 @@ class MapView extends NativeBridgeComponent(React.Component) {
     if (isFunction(this.props.onRegionWillChange)) {
       this.props.onRegionWillChange(payload);
     }
-    this.setState({isUserInteraction: payload.properties.isUserInteraction});
+    this.setState({
+      isUserInteraction: payload.properties.isUserInteraction,
+      isAnimatingFromUserInteraction:
+        payload.properties.isAnimatingFromUserInteraction,
+    });
   }
 
   _onRegionDidChange(payload) {
@@ -659,6 +687,12 @@ class MapView extends NativeBridgeComponent(React.Component) {
           propName = 'onRegionDidChange';
         }
         break;
+      case MapboxGL.EventTypes.CameraChanged:
+        propName = 'onCameraChanged';
+        break;
+      case MapboxGL.EventTypes.MapIdle:
+        propName = 'onMapIdle';
+        break;
       case MapboxGL.EventTypes.UserLocationUpdated:
         propName = 'onUserLocationUpdate';
         break;

From 9748f80e8f12dd44d790c18a55a901bdeb1b3c08 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 19 Apr 2022 13:42:24 -0500
Subject: [PATCH 07/84] Display additional callback info

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

diff --git a/example/src/examples/V10/MapGestureHandlers.js b/example/src/examples/V10/MapGestureHandlers.js
index bb8676705..b79658081 100644
--- a/example/src/examples/V10/MapGestureHandlers.js
+++ b/example/src/examples/V10/MapGestureHandlers.js
@@ -18,9 +18,13 @@ const styles = {
   divider: {
     marginVertical: 10,
   },
+  fadedText: {
+    color: 'gray',
+  },
 };
 
 const MapGestureHandlers = props => {
+  const [lastCallback, setLastCallback] = useState('');
   const [region, setRegion] = useState({});
 
   const properties = region?.properties;
@@ -29,19 +33,37 @@ const MapGestureHandlers = props => {
     <Page {...props}>
       <MapView
         style={styles.map}
-        onRegionWillChange={_region => setRegion(_region)}
-        onRegionIsChanging={_region => setRegion(_region)}
-        onRegionDidChange={_region => setRegion(_region)}>
+        onPress={e => {
+          console.log(e);
+        }}
+        onLongPress={e => {
+          console.log(e);
+        }}
+        onCameraChanged={_region => {
+          setLastCallback('onCameraChanged');
+          setRegion(_region);
+        }}
+        onMapIdle={_region => {
+          setLastCallback('onMapIdle');
+          setRegion(_region);
+        }}>
         <Camera centerCoordinate={[-73.984638, 40.759211]} zoomLevel={12} />
       </MapView>
 
       <SafeAreaView>
         <View style={styles.info}>
-          <Text>Interacting:</Text>
-          <Text h4={true}>{properties?.isUserInteraction ? 'Yes' : 'No'}</Text>
+          <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>
+
           <Divider style={styles.divider} />
-          <Text>Animating from interaction:</Text>
-          <Text h4={true}>
+
+          <Text style={styles.fadedText}>isAnimatingFromUserInteraction</Text>
+          <Text>
             {properties?.isAnimatingFromUserInteraction ? 'Yes' : 'No'}
           </Text>
         </View>

From ecf6048bdcf25eb359f1ffca56ec210bbc0cc312 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 19 Apr 2022 13:52:25 -0500
Subject: [PATCH 08/84] Use instant camera transition

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

diff --git a/example/src/examples/V10/MapGestureHandlers.js b/example/src/examples/V10/MapGestureHandlers.js
index b79658081..9572e6728 100644
--- a/example/src/examples/V10/MapGestureHandlers.js
+++ b/example/src/examples/V10/MapGestureHandlers.js
@@ -47,7 +47,11 @@ const MapGestureHandlers = props => {
           setLastCallback('onMapIdle');
           setRegion(_region);
         }}>
-        <Camera centerCoordinate={[-73.984638, 40.759211]} zoomLevel={12} />
+        <Camera
+          centerCoordinate={[-73.984638, 40.759211]}
+          zoomLevel={12}
+          animationDuration={0}
+        />
       </MapView>
 
       <SafeAreaView>

From 9fd16b080016570df495be252b78be6ca7fe5352 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 19 Apr 2022 14:19:02 -0500
Subject: [PATCH 09/84] Add long-press handler

---
 ios/RCTMGL-v10/RCTMGLEvent.swift      |  1 +
 ios/RCTMGL-v10/RCTMGLMapView.swift    | 36 ++++++++++++++++++++++-----
 ios/RCTMGL-v10/RCTMGLMapViewManager.m |  1 +
 3 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/ios/RCTMGL-v10/RCTMGLEvent.swift b/ios/RCTMGL-v10/RCTMGLEvent.swift
index e7c5e86ed..cbb995191 100644
--- a/ios/RCTMGL-v10/RCTMGLEvent.swift
+++ b/ios/RCTMGL-v10/RCTMGLEvent.swift
@@ -20,6 +20,7 @@ class RCTMGLEvent : NSObject, RCTMGLEventProtocol {
 
     enum EventType : String {
       case tap
+      case longPress
       case regionWillChange
       case regionIsChanging
       case regionDidChange
diff --git a/ios/RCTMGL-v10/RCTMGLMapView.swift b/ios/RCTMGL-v10/RCTMGLMapView.swift
index e53422799..abe5b53d9 100644
--- a/ios/RCTMGL-v10/RCTMGLMapView.swift
+++ b/ios/RCTMGL-v10/RCTMGLMapView.swift
@@ -109,10 +109,11 @@ public func dictionaryFrom(_ from: Turf.Feature?) throws -> [String:Any]? {
 
 @objc(RCTMGLMapView)
 open class RCTMGLMapView : MapView {
-  var reactOnPress : RCTBubblingEventBlock? = nil
-  var reactOnMapChange : RCTBubblingEventBlock? = nil
+  var reactOnPress : RCTBubblingEventBlock?
+  var reactOnLongPress : RCTBubblingEventBlock?
+  var reactOnMapChange : RCTBubblingEventBlock?
 
-  var reactCamera : RCTMGLCamera? = nil
+  var reactCamera : RCTMGLCamera?
   var images : [RCTMGLImages] = []
   var sources : [RCTMGLSource] = []
   
@@ -149,14 +150,21 @@ open class RCTMGLMapView : MapView {
       }
     }
   }
-
+  
   @objc func setReactOnPress(_ value: @escaping RCTBubblingEventBlock) {
     self.reactOnPress = value
-
+    
     self.mapView.gestures.singleTapGestureRecognizer.removeTarget( pointAnnotationManager.manager, action: nil)
     self.mapView.gestures.singleTapGestureRecognizer.addTarget(self, action: #selector(doHandleTap(_:)))
   }
 
+  @objc func setReactOnLongPress(_ value: @escaping RCTBubblingEventBlock) {
+    self.reactOnLongPress = value
+
+    let longPressGestureRecognizer = UILongPressGestureRecognizer(target: self, action: #selector(doHandleLongPress(_:)))
+    self.mapView.addGestureRecognizer(longPressGestureRecognizer)
+  }
+
   @objc func setReactOnMapChange(_ value: @escaping RCTBubblingEventBlock) {
     self.reactOnMapChange = value
     
@@ -443,7 +451,7 @@ extension RCTMGLMapView: GestureManagerDelegate {
               ]
             )
             self.fireEvent(event: event, callback: onPress)
-        
+            
           } else {
             if let reactOnPress = self.reactOnPress {
               let location = self.mapboxMap.coordinate(for: tapPoint)
@@ -461,6 +469,22 @@ extension RCTMGLMapView: GestureManagerDelegate {
     }
   }
   
+  @objc
+  func doHandleLongPress(_ sender: UILongPressGestureRecognizer) {
+    let position = sender.location(in: self)
+
+    if let reactOnLongPress = self.reactOnLongPress, sender.state == .began {
+      let coordinate = self.mapboxMap.coordinate(for: position)
+      var geojson = Feature(geometry: .point(Point(coordinate)));
+      geojson.properties = [
+        "screenPointX": .number(Double(position.x)),
+        "screenPointY": .number(Double(position.y))
+      ]
+      let event = try! RCTMGLEvent(type:.longPress, payload: dictionaryFrom(geojson)!)
+      self.fireEvent(event: event, callback: reactOnLongPress)
+    }
+  }
+  
   public func gestureManager(_ gestureManager: GestureManager, didBegin gestureType: GestureType) {
     _isUserInteraction = true
   }
diff --git a/ios/RCTMGL-v10/RCTMGLMapViewManager.m b/ios/RCTMGL-v10/RCTMGLMapViewManager.m
index 0f08a9ba3..1e4a2333c 100644
--- a/ios/RCTMGL-v10/RCTMGLMapViewManager.m
+++ b/ios/RCTMGL-v10/RCTMGLMapViewManager.m
@@ -5,6 +5,7 @@ @interface RCT_EXTERN_REMAP_MODULE(RCTMGLMapView, RCTMGLMapViewManager, RCTViewM
 
 RCT_REMAP_VIEW_PROPERTY(styleURL, reactStyleURL, NSString)
 RCT_REMAP_VIEW_PROPERTY(onPress, reactOnPress, RCTBubblingEventBlock)
+RCT_REMAP_VIEW_PROPERTY(onLongPress, reactOnLongPress, RCTBubblingEventBlock)
 RCT_REMAP_VIEW_PROPERTY(onMapChange, reactOnMapChange, RCTBubblingEventBlock)
 
 RCT_REMAP_VIEW_PROPERTY(zoomEnabled, reactZoomEnabled, BOOL)

From 054cf0aee69029c69d9f989880d4cec3c8a27e1b Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 19 Apr 2022 14:42:18 -0500
Subject: [PATCH 10/84] Incorporate tap and long-press into example

---
 .../src/examples/V10/MapGestureHandlers.js    | 55 +++++++++++++++++--
 1 file changed, 50 insertions(+), 5 deletions(-)

diff --git a/example/src/examples/V10/MapGestureHandlers.js b/example/src/examples/V10/MapGestureHandlers.js
index 9572e6728..145a2be3a 100644
--- a/example/src/examples/V10/MapGestureHandlers.js
+++ b/example/src/examples/V10/MapGestureHandlers.js
@@ -1,9 +1,16 @@
 import React, {useState} from 'react';
 import {SafeAreaView, View} from 'react-native';
-import {MapView, Camera, Logger} from '@rnmapbox/maps';
+import {
+  MapView,
+  Camera,
+  CircleLayer,
+  ShapeSource,
+  Logger,
+} from '@rnmapbox/maps';
 import {Text, Divider} from 'react-native-elements';
 
 import Page from '../common/Page';
+import colors from '../../styles/colors';
 
 Logger.setLogLevel('verbose');
 
@@ -26,18 +33,32 @@ const styles = {
 const MapGestureHandlers = props => {
   const [lastCallback, setLastCallback] = useState('');
   const [region, setRegion] = useState({});
+  const [features, setFeatures] = useState([]);
 
   const properties = region?.properties;
 
+  const buildShape = feature => {
+    return {
+      type: 'Point',
+      coordinates: feature.geometry.coordinates,
+    };
+  };
+
+  const addFeature = (feature, kind) => {
+    const _feature = {...feature};
+    _feature.properties.kind = kind;
+    setFeatures(prev => [...prev, _feature]);
+  };
+
   return (
     <Page {...props}>
       <MapView
         style={styles.map}
-        onPress={e => {
-          console.log(e);
+        onPress={_feature => {
+          addFeature(_feature, 'press');
         }}
-        onLongPress={e => {
-          console.log(e);
+        onLongPress={_feature => {
+          addFeature(_feature, 'longPress');
         }}
         onCameraChanged={_region => {
           setLastCallback('onCameraChanged');
@@ -52,10 +73,34 @@ const MapGestureHandlers = props => {
           zoomLevel={12}
           animationDuration={0}
         />
+        {features.map((f, i) => {
+          const id = JSON.stringify(f.geometry.coordinates);
+          const circleStyle =
+            f.properties.kind === 'press'
+              ? {
+                  circleColor: colors.primary.blue,
+                  circleRadius: 6,
+                }
+              : {
+                  circleColor: colors.primary.pink,
+                  circleRadius: 12,
+                };
+          return (
+            <ShapeSource key={id} id={`source-${id}`} shape={buildShape(f)}>
+              <CircleLayer id={`layer-${id}`} style={circleStyle} />
+            </ShapeSource>
+          );
+        })}
       </MapView>
 
       <SafeAreaView>
         <View style={styles.info}>
+          <Text style={styles.fadedText}>
+            Tap or long-press to create a marker.
+          </Text>
+
+          <Divider style={styles.divider} />
+
           <Text style={styles.fadedText}>lastCallback</Text>
           <Text>{lastCallback}</Text>
 

From a31cc0d78e677bd997b5ed346f7d9c6497f34230 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 20 Apr 2022 10:59:35 -0500
Subject: [PATCH 11/84] Ignore Ruby gems and local bundler files, cleanup

---
 .gitignore | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/.gitignore b/.gitignore
index d1a4b3635..74642f657 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,6 @@
+# System
+.DS_Store
+
 # Xcode
 !**/*.xcodeproj
 !**/*.pbxproj
@@ -58,9 +61,6 @@ yarn.lock
 # Expo
 .expo
 
-# OS X
-.DS_Store
-
 # Test generated files
 /ReactAndroid/src/androidTest/assets/AndroidTestBundle.js
 *.js.meta
@@ -82,10 +82,14 @@ RNTester/build
 /React/CoreModules/**/*.xcodeproj
 /packages/react-native-codegen/**/*.xcodeproj
 
+# Ruby gems/bundle
+Gemfile
+Gemfile.lock
+vendor/
+
 # CocoaPods
 /template/ios/Pods/
 /template/ios/Podfile.lock
-/RNTester/Gemfile.lock
 
 # Ignore RNTester specific Pods, but keep the __offline_mirrors__ here.
 RNTester/Pods/*
@@ -99,7 +103,7 @@ RNTester/Pods/*
 .vscode
 .vs
 
-# project specific
+# Project specific
 ios/Mapbox.framework
 ios/temp.zip
 ios/.framework_version

From 0c258b80fbbb079d4498ec72c0e2b2774fc084df Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 27 Apr 2022 14:10:13 -0500
Subject: [PATCH 12/84] Convert Camera to typescript

---
 docs/docs.json                   | 607 ----------------------------
 javascript/components/Camera.js  | 673 -------------------------------
 javascript/components/Camera.tsx | 420 +++++++++++++++++++
 javascript/index.js              |   4 +-
 4 files changed, 422 insertions(+), 1282 deletions(-)
 delete mode 100644 javascript/components/Camera.js
 create mode 100644 javascript/components/Camera.tsx

diff --git a/docs/docs.json b/docs/docs.json
index b4fce8893..6a679066c 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -208,613 +208,6 @@
     ],
     "name": "Callout"
   },
-  "Camera": {
-    "description": "",
-    "displayName": "Camera",
-    "methods": [
-      {
-        "name": "fitBounds",
-        "docblock": "Map camera transitions to fit provided bounds\n\n@example\nthis.camera.fitBounds([lng, lat], [lng, lat])\nthis.camera.fitBounds([lng, lat], [lng, lat], 20, 1000) // padding for all sides\nthis.camera.fitBounds([lng, lat], [lng, lat], [verticalPadding, horizontalPadding], 1000)\nthis.camera.fitBounds([lng, lat], [lng, lat], [top, right, bottom, left], 1000)\n\n@param {Array<Number>} northEastCoordinates - North east coordinate of bound\n@param {Array<Number>} southWestCoordinates - South west coordinate of bound\n@param {Number=} padding - Camera padding for bound\n@param {Number=} animationDuration - Duration of camera animation\n@return {void}",
-        "modifiers": [],
-        "params": [
-          {
-            "name": "northEastCoordinates",
-            "description": "North east coordinate of bound",
-            "type": {
-              "name": "Array",
-              "elements": [
-                {
-                  "name": "Number"
-                }
-              ]
-            },
-            "optional": false
-          },
-          {
-            "name": "southWestCoordinates",
-            "description": "South west coordinate of bound",
-            "type": {
-              "name": "Array",
-              "elements": [
-                {
-                  "name": "Number"
-                }
-              ]
-            },
-            "optional": false
-          },
-          {
-            "name": "padding",
-            "description": "Camera padding for bound",
-            "type": {
-              "name": "Number"
-            },
-            "optional": true
-          },
-          {
-            "name": "animationDuration",
-            "description": "Duration of camera animation",
-            "type": {
-              "name": "Number"
-            },
-            "optional": true
-          }
-        ],
-        "returns": {
-          "description": null,
-          "type": {
-            "name": "void"
-          }
-        },
-        "description": "Map camera transitions to fit provided bounds",
-        "examples": [
-          "\nthis.camera.fitBounds([lng, lat], [lng, lat])\nthis.camera.fitBounds([lng, lat], [lng, lat], 20, 1000) // padding for all sides\nthis.camera.fitBounds([lng, lat], [lng, lat], [verticalPadding, horizontalPadding], 1000)\nthis.camera.fitBounds([lng, lat], [lng, lat], [top, right, bottom, left], 1000)\n\n"
-        ]
-      },
-      {
-        "name": "flyTo",
-        "docblock": "Map camera will fly to new coordinate\n\n@example\nthis.camera.flyTo([lng, lat])\nthis.camera.flyTo([lng, lat], 12000)\n\n @param {Array<Number>} coordinates - Coordinates that map camera will jump too\n @param {Number=} animationDuration - Duration of camera animation\n @return {void}",
-        "modifiers": [],
-        "params": [
-          {
-            "name": "coordinates",
-            "description": "Coordinates that map camera will jump too",
-            "type": {
-              "name": "Array",
-              "elements": [
-                {
-                  "name": "Number"
-                }
-              ]
-            },
-            "optional": false
-          },
-          {
-            "name": "animationDuration",
-            "description": "Duration of camera animation",
-            "type": {
-              "name": "Number"
-            },
-            "optional": true
-          }
-        ],
-        "returns": {
-          "description": null,
-          "type": {
-            "name": "void"
-          }
-        },
-        "description": "Map camera will fly to new coordinate",
-        "examples": [
-          "\nthis.camera.flyTo([lng, lat])\nthis.camera.flyTo([lng, lat], 12000)\n\n "
-        ]
-      },
-      {
-        "name": "moveTo",
-        "docblock": "Map camera will move to new coordinate at the same zoom level\n\n@example\nthis.camera.moveTo([lng, lat], 200) // eases camera to new location based on duration\nthis.camera.moveTo([lng, lat]) // snaps camera to new location without any easing\n\n @param {Array<Number>} coordinates - Coordinates that map camera will move too\n @param {Number=} animationDuration - Duration of camera animation\n @return {void}",
-        "modifiers": [],
-        "params": [
-          {
-            "name": "coordinates",
-            "description": "Coordinates that map camera will move too",
-            "type": {
-              "name": "Array",
-              "elements": [
-                {
-                  "name": "Number"
-                }
-              ]
-            },
-            "optional": false
-          },
-          {
-            "name": "animationDuration",
-            "description": "Duration of camera animation",
-            "type": {
-              "name": "Number"
-            },
-            "optional": true
-          }
-        ],
-        "returns": {
-          "description": null,
-          "type": {
-            "name": "void"
-          }
-        },
-        "description": "Map camera will move to new coordinate at the same zoom level",
-        "examples": [
-          "\nthis.camera.moveTo([lng, lat], 200) // eases camera to new location based on duration\nthis.camera.moveTo([lng, lat]) // snaps camera to new location without any easing\n\n "
-        ]
-      },
-      {
-        "name": "zoomTo",
-        "docblock": "Map camera will zoom to specified level\n\n@example\nthis.camera.zoomTo(16)\nthis.camera.zoomTo(16, 100)\n\n@param {Number} zoomLevel - Zoom level that the map camera will animate too\n@param {Number=} animationDuration - Duration of camera animation\n@return {void}",
-        "modifiers": [],
-        "params": [
-          {
-            "name": "zoomLevel",
-            "description": "Zoom level that the map camera will animate too",
-            "type": {
-              "name": "Number"
-            },
-            "optional": false
-          },
-          {
-            "name": "animationDuration",
-            "description": "Duration of camera animation",
-            "type": {
-              "name": "Number"
-            },
-            "optional": true
-          }
-        ],
-        "returns": {
-          "description": null,
-          "type": {
-            "name": "void"
-          }
-        },
-        "description": "Map camera will zoom to specified level",
-        "examples": [
-          "\nthis.camera.zoomTo(16)\nthis.camera.zoomTo(16, 100)\n\n"
-        ]
-      },
-      {
-        "name": "setCamera",
-        "docblock": "Map camera will perform updates based on provided config. Advanced use only!\n\n@example\nthis.camera.setCamera({\n  centerCoordinate: [lng, lat],\n  zoomLevel: 16,\n  animationDuration: 2000,\n})\n\nthis.camera.setCamera({\n  stops: [\n    { pitch: 45, animationDuration: 200 },\n    { heading: 180, animationDuration: 300 },\n  ]\n})\n\n @param {Object} config - Camera configuration",
-        "modifiers": [],
-        "params": [
-          {
-            "name": "config",
-            "description": "Camera configuration",
-            "type": {
-              "name": "Object"
-            },
-            "optional": false
-          }
-        ],
-        "returns": null,
-        "description": "Map camera will perform updates based on provided config. Advanced use only!",
-        "examples": [
-          "\nthis.camera.setCamera({\n  centerCoordinate: [lng, lat],\n  zoomLevel: 16,\n  animationDuration: 2000,\n})\n\nthis.camera.setCamera({\n  stops: [\n    { pitch: 45, animationDuration: 200 },\n    { heading: 180, animationDuration: 300 },\n  ]\n})\n\n "
-        ]
-      }
-    ],
-    "props": [
-      {
-        "name": "allowUpdates",
-        "required": false,
-        "type": "bool",
-        "default": "true",
-        "description": "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."
-      },
-      {
-        "name": "animationDuration",
-        "required": false,
-        "type": "number",
-        "default": "2000",
-        "description": "The duration a camera update takes (in ms)"
-      },
-      {
-        "name": "animationMode",
-        "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`none`: An instantaneous change (v10 only).\n`moveTo`: An instantaneous change (<v10)."
-      },
-      {
-        "name": "defaultSettings",
-        "required": false,
-        "type": {
-          "name": "shape",
-          "value": [
-            {
-              "name": "centerCoordinate",
-              "required": false,
-              "type": {
-                "name": "array",
-                "value": {
-                  "type": "number"
-                }
-              },
-              "default": "none",
-              "description": "Center coordinate on map [lng, lat]"
-            },
-            {
-              "name": "padding",
-              "required": false,
-              "type": {
-                "name": "shape",
-                "value": [
-                  {
-                    "name": "paddingLeft",
-                    "required": false,
-                    "type": "number",
-                    "default": "none",
-                    "description": "Left padding in points"
-                  },
-                  {
-                    "name": "paddingRight",
-                    "required": false,
-                    "type": "number",
-                    "default": "none",
-                    "description": "Right padding in points"
-                  },
-                  {
-                    "name": "paddingTop",
-                    "required": false,
-                    "type": "number",
-                    "default": "none",
-                    "description": "Top padding in points"
-                  },
-                  {
-                    "name": "paddingBottom",
-                    "required": false,
-                    "type": "number",
-                    "default": "none",
-                    "description": "Bottom padding in points"
-                  }
-                ]
-              },
-              "default": "none",
-              "description": "Padding around edges of map in points"
-            },
-            {
-              "name": "heading",
-              "required": false,
-              "type": "number",
-              "default": "none",
-              "description": "Heading on map"
-            },
-            {
-              "name": "pitch",
-              "required": false,
-              "type": "number",
-              "default": "none",
-              "description": "Pitch on map"
-            },
-            {
-              "name": "bounds",
-              "required": false,
-              "type": {
-                "name": "shape",
-                "value": [
-                  {
-                    "name": "ne",
-                    "required": true,
-                    "type": {
-                      "name": "array",
-                      "value": {
-                        "type": "number"
-                      }
-                    },
-                    "default": "none",
-                    "description": "North east coordinate of bound"
-                  },
-                  {
-                    "name": "sw",
-                    "required": true,
-                    "type": {
-                      "name": "array",
-                      "value": {
-                        "type": "number"
-                      }
-                    },
-                    "default": "none",
-                    "description": "South west coordinate of bound"
-                  },
-                  {
-                    "name": "paddingLeft",
-                    "required": false,
-                    "type": "number",
-                    "default": "none",
-                    "description": "Left padding in points (deprecated; use root `padding` property instead)"
-                  },
-                  {
-                    "name": "paddingRight",
-                    "required": false,
-                    "type": "number",
-                    "default": "none",
-                    "description": "Right padding in points (deprecated; use root `padding` property instead)"
-                  },
-                  {
-                    "name": "paddingTop",
-                    "required": false,
-                    "type": "number",
-                    "default": "none",
-                    "description": "Top padding in points (deprecated; use root `padding` property instead)"
-                  },
-                  {
-                    "name": "paddingBottom",
-                    "required": false,
-                    "type": "number",
-                    "default": "none",
-                    "description": "Bottom padding in points (deprecated; use root `padding` property instead)"
-                  }
-                ]
-              },
-              "default": "none",
-              "description": "Represents a rectangle in geographical coordinates marking the visible area of the map.\nThe `bounds.padding*` properties are deprecated; use root `padding` property instead."
-            },
-            {
-              "name": "onUserTrackingModeChange",
-              "required": false,
-              "type": "func",
-              "default": "none",
-              "description": "Callback that is triggered on user tracking mode changes"
-            },
-            {
-              "name": "zoomLevel",
-              "required": false,
-              "type": "number",
-              "default": "none",
-              "description": "Zoom level of the map"
-            }
-          ]
-        },
-        "default": "none",
-        "description": "Default view settings applied on camera"
-      },
-      {
-        "name": "centerCoordinate",
-        "required": false,
-        "type": {
-          "name": "array",
-          "value": {
-            "type": "number"
-          }
-        },
-        "default": "none",
-        "description": "Center coordinate on map [lng, lat]"
-      },
-      {
-        "name": "padding",
-        "required": false,
-        "type": {
-          "name": "shape",
-          "value": [
-            {
-              "name": "paddingLeft",
-              "required": false,
-              "type": "number",
-              "default": "none",
-              "description": "Left padding in points"
-            },
-            {
-              "name": "paddingRight",
-              "required": false,
-              "type": "number",
-              "default": "none",
-              "description": "Right padding in points"
-            },
-            {
-              "name": "paddingTop",
-              "required": false,
-              "type": "number",
-              "default": "none",
-              "description": "Top padding in points"
-            },
-            {
-              "name": "paddingBottom",
-              "required": false,
-              "type": "number",
-              "default": "none",
-              "description": "Bottom padding in points"
-            }
-          ]
-        },
-        "default": "none",
-        "description": "Padding around edges of map in points"
-      },
-      {
-        "name": "heading",
-        "required": false,
-        "type": "number",
-        "default": "none",
-        "description": "Heading on map"
-      },
-      {
-        "name": "pitch",
-        "required": false,
-        "type": "number",
-        "default": "none",
-        "description": "Pitch on map"
-      },
-      {
-        "name": "bounds",
-        "required": false,
-        "type": {
-          "name": "shape",
-          "value": [
-            {
-              "name": "ne",
-              "required": true,
-              "type": {
-                "name": "array",
-                "value": {
-                  "type": "number"
-                }
-              },
-              "default": "none",
-              "description": "North east coordinate of bound"
-            },
-            {
-              "name": "sw",
-              "required": true,
-              "type": {
-                "name": "array",
-                "value": {
-                  "type": "number"
-                }
-              },
-              "default": "none",
-              "description": "South west coordinate of bound"
-            },
-            {
-              "name": "paddingLeft",
-              "required": false,
-              "type": "number",
-              "default": "none",
-              "description": "Left padding in points (deprecated; use root `padding` property instead)"
-            },
-            {
-              "name": "paddingRight",
-              "required": false,
-              "type": "number",
-              "default": "none",
-              "description": "Right padding in points (deprecated; use root `padding` property instead)"
-            },
-            {
-              "name": "paddingTop",
-              "required": false,
-              "type": "number",
-              "default": "none",
-              "description": "Top padding in points (deprecated; use root `padding` property instead)"
-            },
-            {
-              "name": "paddingBottom",
-              "required": false,
-              "type": "number",
-              "default": "none",
-              "description": "Bottom padding in points (deprecated; use root `padding` property instead)"
-            }
-          ]
-        },
-        "default": "none",
-        "description": "Represents a rectangle in geographical coordinates marking the visible area of the map.\nThe `bounds.padding*` properties are deprecated; use root `padding` property instead."
-      },
-      {
-        "name": "onUserTrackingModeChange",
-        "required": false,
-        "type": "func",
-        "default": "none",
-        "description": "Callback that is triggered on user tracking mode changes"
-      },
-      {
-        "name": "zoomLevel",
-        "required": false,
-        "type": "number",
-        "default": "none",
-        "description": "Zoom level of the map"
-      },
-      {
-        "name": "minZoomLevel",
-        "required": false,
-        "type": "number",
-        "default": "none",
-        "description": "The minimum zoom level of the map"
-      },
-      {
-        "name": "maxZoomLevel",
-        "required": false,
-        "type": "number",
-        "default": "none",
-        "description": "The maximum zoom level of the map"
-      },
-      {
-        "name": "maxBounds",
-        "required": false,
-        "type": {
-          "name": "shape",
-          "value": [
-            {
-              "name": "ne",
-              "required": true,
-              "type": {
-                "name": "array",
-                "value": {
-                  "type": "number"
-                }
-              },
-              "default": "none",
-              "description": "northEastCoordinates - North east coordinate of bound"
-            },
-            {
-              "name": "sw",
-              "required": true,
-              "type": {
-                "name": "array",
-                "value": {
-                  "type": "number"
-                }
-              },
-              "default": "none",
-              "description": "southWestCoordinates - South west coordinate of bound"
-            }
-          ]
-        },
-        "default": "none",
-        "description": "Restrict map panning so that the center is within these bounds"
-      },
-      {
-        "name": "followUserLocation",
-        "required": false,
-        "type": "bool",
-        "default": "none",
-        "description": "Should the map orientation follow the user's."
-      },
-      {
-        "name": "followUserMode",
-        "required": false,
-        "type": "enum",
-        "default": "none",
-        "description": "The mode used to track the user location on the map. One of; \"normal\", \"compass\", \"course\". Each mode string is also available as a member on the `MapboxGL.UserTrackingModes` object. `Follow` (normal), `FollowWithHeading` (compass), `FollowWithCourse` (course). NOTE: `followUserLocation` must be set to `true` for any of the modes to take effect. [Example](../example/src/examples/SetUserTrackingModes.js)"
-      },
-      {
-        "name": "followZoomLevel",
-        "required": false,
-        "type": "number",
-        "default": "none",
-        "description": "The zoomLevel on map while followUserLocation is set to `true`"
-      },
-      {
-        "name": "followPitch",
-        "required": false,
-        "type": "number",
-        "default": "none",
-        "description": "The pitch on map while followUserLocation is set to `true`"
-      },
-      {
-        "name": "followHeading",
-        "required": false,
-        "type": "number",
-        "default": "none",
-        "description": "The heading on map while followUserLocation is set to `true`"
-      },
-      {
-        "name": "triggerKey",
-        "required": false,
-        "type": "any",
-        "default": "none",
-        "description": "Manually update the camera - helpful for when props did not update, however you still want the camera to move"
-      }
-    ],
-    "composes": [
-      "../utils"
-    ],
-    "name": "Camera"
-  },
   "CircleLayer": {
     "description": "CircleLayer is a style layer that renders one or more filled circles on the map.",
     "displayName": "CircleLayer",
diff --git a/javascript/components/Camera.js b/javascript/components/Camera.js
deleted file mode 100644
index c3d0925cf..000000000
--- a/javascript/components/Camera.js
+++ /dev/null
@@ -1,673 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { NativeModules, requireNativeComponent } from 'react-native';
-
-import { toJSONString, viewPropTypes, existenceChange } from '../utils';
-import * as geoUtils from '../utils/geoUtils';
-
-const MapboxGL = NativeModules.MGLModule;
-
-export const NATIVE_MODULE_NAME = 'RCTMGLCamera';
-
-const SettingsPropTypes = {
-  /**
-   * Center coordinate on map [lng, lat]
-   */
-  centerCoordinate: PropTypes.arrayOf(PropTypes.number),
-
-  /**
-   * Padding around edges of map in points
-   */
-  padding: PropTypes.shape({
-    /**
-     * Left padding in points
-     */
-    paddingLeft: PropTypes.number,
-
-    /**
-     * Right padding in points
-     */
-    paddingRight: PropTypes.number,
-
-    /**
-     * Top padding in points
-     */
-    paddingTop: PropTypes.number,
-
-    /**
-     * Bottom padding in points
-     */
-    paddingBottom: PropTypes.number,
-  }),
-
-  /**
-   * Heading on map
-   */
-  heading: PropTypes.number,
-
-  /**
-   * Pitch on map
-   */
-  pitch: PropTypes.number,
-
-  /**
-   * Represents a rectangle in geographical coordinates marking the visible area of the map.
-   * The `bounds.padding*` properties are deprecated; use root `padding` property instead.
-   */
-  bounds: PropTypes.shape({
-    /**
-     * North east coordinate of bound
-     */
-    ne: PropTypes.arrayOf(PropTypes.number).isRequired,
-
-    /**
-     * South west coordinate of bound
-     */
-    sw: PropTypes.arrayOf(PropTypes.number).isRequired,
-
-    /**
-     * Left padding in points (deprecated; use root `padding` property instead)
-     */
-    paddingLeft: PropTypes.number,
-
-    /**
-     * Right padding in points (deprecated; use root `padding` property instead)
-     */
-    paddingRight: PropTypes.number,
-
-    /**
-     * Top padding in points (deprecated; use root `padding` property instead)
-     */
-    paddingTop: PropTypes.number,
-
-    /**
-     * Bottom padding in points (deprecated; use root `padding` property instead)
-     */
-    paddingBottom: PropTypes.number,
-  }),
-
-  /**
-   * Callback that is triggered on user tracking mode changes
-   */
-  onUserTrackingModeChange: PropTypes.func,
-
-  /**
-   * Zoom level of the map
-   */
-  zoomLevel: PropTypes.number,
-};
-
-class Camera extends React.Component {
-  static propTypes = {
-    ...viewPropTypes,
-
-    /**
-     * 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.
-     */
-    allowUpdates: PropTypes.bool,
-
-    /**
-     * The duration a camera update takes (in ms)
-     */
-    animationDuration: PropTypes.number,
-
-    /**
-     * 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.
-     * `none`: An instantaneous change (v10 only).
-     * `moveTo`: An instantaneous change (<v10).
-     */
-    animationMode: PropTypes.oneOf([
-      'flyTo',
-      'easeTo',
-      'linearTo',
-      'none',
-      'moveTo',
-    ]),
-
-    /**
-     * Default view settings applied on camera
-     */
-    defaultSettings: PropTypes.shape(SettingsPropTypes),
-
-    // normal - view settings
-    ...SettingsPropTypes,
-
-    /**
-     * The minimum zoom level of the map
-     */
-    minZoomLevel: PropTypes.number,
-
-    /**
-     * The maximum zoom level of the map
-     */
-    maxZoomLevel: PropTypes.number,
-
-    /**
-     * Restrict map panning so that the center is within these bounds
-     */
-    maxBounds: PropTypes.shape({
-      /**
-       * northEastCoordinates - North east coordinate of bound
-       */
-      ne: PropTypes.arrayOf(PropTypes.number).isRequired,
-
-      /**
-       * southWestCoordinates - South west coordinate of bound
-       */
-      sw: PropTypes.arrayOf(PropTypes.number).isRequired,
-    }),
-
-    /**
-     * Should the map orientation follow the user's.
-     */
-    followUserLocation: PropTypes.bool,
-
-    /**
-     * The mode used to track the user location on the map. One of; "normal", "compass", "course". Each mode string is also available as a member on the `MapboxGL.UserTrackingModes` object. `Follow` (normal), `FollowWithHeading` (compass), `FollowWithCourse` (course). NOTE: `followUserLocation` must be set to `true` for any of the modes to take effect. [Example](../example/src/examples/SetUserTrackingModes.js)
-     */
-    followUserMode: PropTypes.oneOf(['normal', 'compass', 'course']),
-
-    /**
-     * The zoomLevel on map while followUserLocation is set to `true`
-     */
-    followZoomLevel: PropTypes.number,
-
-    /**
-     * The pitch on map while followUserLocation is set to `true`
-     */
-    followPitch: PropTypes.number,
-
-    /**
-     * The heading on map while followUserLocation is set to `true`
-     */
-    followHeading: PropTypes.number,
-
-    /**
-     * Manually update the camera - helpful for when props did not update, however you still want the camera to move
-     */
-    triggerKey: PropTypes.any,
-
-    // Triggered when the
-    onUserTrackingModeChange: PropTypes.func,
-  };
-
-  static defaultProps = {
-    allowUpdates: true,
-    animationMode: 'easeTo',
-    animationDuration: 2000,
-  };
-
-  static Mode = {
-    Flight: 'flyTo',
-    Ease: 'easeTo',
-    Linear: 'linearTo',
-    None: 'none',
-    Move: 'moveTo',
-  };
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this._handleCameraChange(this.props, nextProps);
-  }
-
-  shouldComponentUpdate() {
-    return false;
-  }
-
-  _handleCameraChange(currentCamera, nextCamera) {
-    const c = currentCamera;
-    const n = nextCamera;
-
-    if (!n.allowUpdates) {
-      return;
-    }
-
-    const hasCameraChanged = this._hasCameraChanged(c, n);
-    if (!hasCameraChanged) {
-      return;
-    }
-
-    if (c.followUserLocation && !n.followUserLocation) {
-      this.refs.camera.setNativeProps({ followUserLocation: false });
-      return;
-    }
-    if (!c.followUserLocation && n.followUserLocation) {
-      this.refs.camera.setNativeProps({ followUserLocation: true });
-    }
-
-    if (n.followUserLocation) {
-      this.refs.camera.setNativeProps({
-        followUserMode: n.followUserMode,
-        followPitch: n.followPitch || n.pitch,
-        followHeading: n.followHeading || n.heading,
-        followZoomLevel: n.followZoomLevel || n.zoomLevel,
-      });
-      return;
-    }
-
-    if (n.maxBounds) {
-      this.refs.camera.setNativeProps({
-        maxBounds: this._getMaxBounds(),
-      });
-    }
-    if (n.minZoomLevel) {
-      this.refs.camera.setNativeProps({
-        minZoomLevel: this.props.minZoomLevel,
-      });
-    }
-    if (n.maxZoomLevel) {
-      this.refs.camera.setNativeProps({
-        maxZoomLevel: this.props.maxZoomLevel,
-      });
-    }
-
-    const cameraConfig = {
-      bounds: n.bounds,
-      centerCoordinate: n.centerCoordinate,
-      padding: n.padding,
-      zoomLevel: n.zoomLevel,
-      pitch: n.pitch,
-      heading: n.heading,
-      animationMode: n.animationMode,
-      animationDuration: n.animationDuration,
-    };
-
-    const boundsChanged = this._hasBoundsChanged(c.bounds, n.bounds);
-    const centerCoordinateChanged = this._hasCenterCoordinateChanged(
-      c.centerCoordinate,
-      n.centerCoordinate,
-    );
-    const paddingChanged = this._hasPaddingChanged(c.padding, n.padding);
-    const zoomChanged = this._hasNumberChanged(c.zoomLevel, n.zoomLevel);
-    const pitchChanged = this._hasNumberChanged(c.pitch, n.pitch);
-    const headingChanged = this._hasNumberChanged(c.heading, n.heading);
-
-    if (
-      boundsChanged ||
-      centerCoordinateChanged ||
-      paddingChanged ||
-      zoomChanged ||
-      pitchChanged ||
-      headingChanged
-    ) {
-      this._setCamera(cameraConfig);
-    }
-  }
-
-  _hasCameraChanged(currentCamera, nextCamera) {
-    const c = currentCamera;
-    const n = nextCamera;
-
-    const hasDefaultPropsChanged =
-      c.heading !== n.heading ||
-      this._hasCenterCoordinateChanged(
-        c.centerCoordinate,
-        n.centerCoordinate,
-      ) ||
-      this._hasBoundsChanged(c.bounds, n.bounds) ||
-      this._hasPaddingChanged(c.padding, n.padding) ||
-      c.pitch !== n.pitch ||
-      c.zoomLevel !== n.zoomLevel ||
-      c.triggerKey !== n.triggerKey;
-
-    const hasFollowPropsChanged =
-      c.followUserLocation !== n.followUserLocation ||
-      c.followUserMode !== n.followUserMode ||
-      c.followZoomLevel !== n.followZoomLevel ||
-      c.followHeading !== n.followHeading ||
-      c.followPitch !== n.followPitch;
-
-    const hasAnimationPropsChanged =
-      c.animationMode !== n.animationMode ||
-      c.animationDuration !== n.animationDuration;
-
-    const hasNavigationConstraintsPropsChanged =
-      this._hasBoundsChanged(c.maxBounds, n.maxBounds) ||
-      c.minZoomLevel !== n.minZoomLevel ||
-      c.maxZoomLevel !== n.maxZoomLevel;
-
-    return (
-      hasDefaultPropsChanged ||
-      hasFollowPropsChanged ||
-      hasAnimationPropsChanged ||
-      hasNavigationConstraintsPropsChanged
-    );
-  }
-
-  _hasCenterCoordinateChanged(cC, nC) {
-    if (!cC && !nC) {
-      return false;
-    }
-
-    if (existenceChange(cC, nC)) {
-      return true;
-    }
-
-    const isLngDiff = cC[0] !== nC[0];
-    const isLatDiff = cC[1] !== nC[1];
-    return isLngDiff || isLatDiff;
-  }
-
-  _hasBoundsChanged(cB, nB) {
-    if (!cB && !nB) {
-      return false;
-    }
-
-    if (existenceChange(cB, nB)) {
-      return true;
-    }
-
-    return (
-      cB.ne[0] !== nB.ne[0] ||
-      cB.ne[1] !== nB.ne[1] ||
-      cB.sw[0] !== nB.sw[0] ||
-      cB.sw[1] !== nB.sw[1] ||
-      cB.paddingTop !== nB.paddingTop ||
-      cB.paddingLeft !== nB.paddingLeft ||
-      cB.paddingRight !== nB.paddingRight ||
-      cB.paddingBottom !== nB.paddingBottom
-    );
-  }
-
-  _hasPaddingChanged(cP, nP) {
-    if (!cP && !nP) {
-      return false;
-    }
-
-    if (existenceChange(cP, nP)) {
-      return true;
-    }
-
-    return (
-      cP.paddingTop !== nP.paddingTop ||
-      cP.paddingLeft !== nP.paddingLeft ||
-      cP.paddingRight !== nP.paddingRight ||
-      cP.paddingBottom !== nP.paddingBottom
-    );
-  }
-
-  _hasNumberChanged(prev, next) {
-    if (existenceChange(prev, next)) {
-      return true;
-    }
-
-    if (!prev && !next) {
-      return false;
-    }
-
-    return prev !== next;
-  }
-
-  /**
-   * Map camera transitions to fit provided bounds
-   *
-   * @example
-   * this.camera.fitBounds([lng, lat], [lng, lat])
-   * this.camera.fitBounds([lng, lat], [lng, lat], 20, 1000) // padding for all sides
-   * this.camera.fitBounds([lng, lat], [lng, lat], [verticalPadding, horizontalPadding], 1000)
-   * this.camera.fitBounds([lng, lat], [lng, lat], [top, right, bottom, left], 1000)
-   *
-   * @param {Array<Number>} northEastCoordinates - North east coordinate of bound
-   * @param {Array<Number>} southWestCoordinates - South west coordinate of bound
-   * @param {Number=} padding - Camera padding for bound
-   * @param {Number=} animationDuration - Duration of camera animation
-   * @return {void}
-   */
-  fitBounds(
-    northEastCoordinates,
-    southWestCoordinates,
-    padding = 0,
-    animationDuration = 0.0,
-  ) {
-    const pad = {
-      paddingLeft: 0,
-      paddingRight: 0,
-      paddingTop: 0,
-      paddingBottom: 0,
-    };
-
-    if (Array.isArray(padding)) {
-      if (padding.length === 2) {
-        pad.paddingTop = padding[0];
-        pad.paddingBottom = padding[0];
-        pad.paddingLeft = padding[1];
-        pad.paddingRight = padding[1];
-      } else if (padding.length === 4) {
-        pad.paddingTop = padding[0];
-        pad.paddingRight = padding[1];
-        pad.paddingBottom = padding[2];
-        pad.paddingLeft = padding[3];
-      }
-    } else {
-      pad.paddingLeft = padding;
-      pad.paddingRight = padding;
-      pad.paddingTop = padding;
-      pad.paddingBottom = padding;
-    }
-
-    return this.setCamera({
-      bounds: {
-        ne: northEastCoordinates,
-        sw: southWestCoordinates,
-      },
-      padding: pad,
-      animationDuration,
-      animationMode: Camera.Mode.Ease,
-    });
-  }
-
-  /**
-   * Map camera will fly to new coordinate
-   *
-   * @example
-   * this.camera.flyTo([lng, lat])
-   * this.camera.flyTo([lng, lat], 12000)
-   *
-   *  @param {Array<Number>} coordinates - Coordinates that map camera will jump too
-   *  @param {Number=} animationDuration - Duration of camera animation
-   *  @return {void}
-   */
-  flyTo(coordinates, animationDuration = 2000) {
-    return this.setCamera({
-      centerCoordinate: coordinates,
-      animationDuration,
-      animationMode: Camera.Mode.Flight,
-    });
-  }
-
-  /**
-   * Map camera will move to new coordinate at the same zoom level
-   *
-   * @example
-   * this.camera.moveTo([lng, lat], 200) // eases camera to new location based on duration
-   * this.camera.moveTo([lng, lat]) // snaps camera to new location without any easing
-   *
-   *  @param {Array<Number>} coordinates - Coordinates that map camera will move too
-   *  @param {Number=} animationDuration - Duration of camera animation
-   *  @return {void}
-   */
-  moveTo(coordinates, animationDuration = 0) {
-    return this.setCamera({
-      centerCoordinate: coordinates,
-      animationDuration,
-    });
-  }
-
-  /**
-   * Map camera will zoom to specified level
-   *
-   * @example
-   * this.camera.zoomTo(16)
-   * this.camera.zoomTo(16, 100)
-   *
-   * @param {Number} zoomLevel - Zoom level that the map camera will animate too
-   * @param {Number=} animationDuration - Duration of camera animation
-   * @return {void}
-   */
-  zoomTo(zoomLevel, animationDuration = 2000) {
-    return this.setCamera({
-      zoomLevel,
-      animationDuration,
-      animationMode: Camera.Mode.Flight,
-    });
-  }
-
-  /**
-   * Map camera will perform updates based on provided config. Advanced use only!
-   *
-   * @example
-   * this.camera.setCamera({
-   *   centerCoordinate: [lng, lat],
-   *   zoomLevel: 16,
-   *   animationDuration: 2000,
-   * })
-   *
-   * this.camera.setCamera({
-   *   stops: [
-   *     { pitch: 45, animationDuration: 200 },
-   *     { heading: 180, animationDuration: 300 },
-   *   ]
-   * })
-   *
-   *  @param {Object} config - Camera configuration
-   */
-  setCamera(config = {}) {
-    this._setCamera(config);
-  }
-
-  _setCamera(config = {}) {
-    let cameraConfig = {};
-
-    if (config.stops) {
-      cameraConfig.stops = [];
-
-      for (const stop of config.stops) {
-        cameraConfig.stops.push(this._createStopConfig(stop));
-      }
-    } else {
-      cameraConfig = this._createStopConfig(config);
-    }
-
-    this.refs.camera.setNativeProps({ stop: cameraConfig });
-  }
-
-  _createDefaultCamera() {
-    if (this.defaultCamera) {
-      return this.defaultCamera;
-    }
-    if (!this.props.defaultSettings) {
-      return null;
-    }
-
-    this.defaultCamera = this._createStopConfig(
-      {
-        ...this.props.defaultSettings,
-        animationMode: Camera.Mode.Move,
-      },
-      true,
-    );
-    return this.defaultCamera;
-  }
-
-  _createStopConfig(config = {}, ignoreFollowUserLocation = false) {
-    if (this.props.followUserLocation && !ignoreFollowUserLocation) {
-      return null;
-    }
-
-    const stopConfig = {
-      mode: this._getNativeCameraMode(config),
-      pitch: config.pitch,
-      heading: config.heading,
-      duration: config.animationDuration || 0,
-      zoom: config.zoomLevel,
-    };
-
-    if (config.centerCoordinate) {
-      stopConfig.centerCoordinate = toJSONString(
-        geoUtils.makePoint(config.centerCoordinate),
-      );
-    }
-
-    if (config.bounds && config.bounds.ne && config.bounds.sw) {
-      const { ne, sw } = config.bounds;
-      stopConfig.bounds = toJSONString(geoUtils.makeLatLngBounds(ne, sw));
-    }
-
-    stopConfig.paddingTop =
-      config.padding?.paddingTop || config.bounds?.paddingTop || 0;
-    stopConfig.paddingRight =
-      config.padding?.paddingRight || config.bounds?.paddingRight || 0;
-    stopConfig.paddingBottom =
-      config.padding?.paddingBottom || config.bounds?.paddingBottom || 0;
-    stopConfig.paddingLeft =
-      config.padding?.paddingLeft || config.bounds?.paddingLeft || 0;
-
-    return stopConfig;
-  }
-
-  _getNativeCameraMode(config) {
-    switch (config.animationMode) {
-      case Camera.Mode.Flight:
-        return MapboxGL.CameraModes.Flight;
-      case Camera.Mode.Ease:
-        return MapboxGL.CameraModes.Ease;
-      case Camera.Mode.Linear:
-        return MapboxGL.CameraModes.Linear;
-      case Camera.Mode.None:
-        return MapboxGL.CameraModes.None;
-      case Camera.Mode.Move:
-      default:
-        return MapboxGL.CameraModes.Move;
-    }
-  }
-
-  _getMaxBounds() {
-    const bounds = this.props.maxBounds;
-    if (!bounds || !bounds.ne || !bounds.sw) {
-      return null;
-    }
-    return toJSONString(geoUtils.makeLatLngBounds(bounds.ne, bounds.sw));
-  }
-
-  render() {
-    const props = Object.assign({}, this.props);
-
-    const callbacks = {
-      onUserTrackingModeChange: props.onUserTrackingModeChange,
-    };
-
-    return (
-      <RCTMGLCamera
-        testID="Camera"
-        ref="camera"
-        followUserLocation={this.props.followUserLocation}
-        followUserMode={this.props.followUserMode}
-        followPitch={this.props.followPitch}
-        followHeading={this.props.followHeading}
-        followZoomLevel={this.props.followZoomLevel}
-        stop={this._createStopConfig(props)}
-        minZoomLevel={this.props.minZoomLevel}
-        maxZoomLevel={this.props.maxZoomLevel}
-        maxBounds={this._getMaxBounds()}
-        defaultStop={this._createDefaultCamera()}
-        {...callbacks}
-      />
-    );
-  }
-}
-
-const RCTMGLCamera = requireNativeComponent(NATIVE_MODULE_NAME, Camera, {
-  nativeOnly: {
-    stop: true,
-  },
-});
-
-Camera.UserTrackingModes = {
-  Follow: 'normal',
-  FollowWithHeading: 'compass',
-  FollowWithCourse: 'course',
-};
-
-export default Camera;
diff --git a/javascript/components/Camera.tsx b/javascript/components/Camera.tsx
new file mode 100644
index 000000000..ad830f149
--- /dev/null
+++ b/javascript/components/Camera.tsx
@@ -0,0 +1,420 @@
+import React, { memo, useCallback, useMemo, useRef } from 'react';
+import { Position } from 'geojson';
+import { NativeModules, requireNativeComponent } from 'react-native';
+
+import * as geoUtils from '../utils/geoUtils';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLCamera';
+
+const Mode = {
+  Flight: 'flyTo',
+  Ease: 'easeTo',
+  Linear: 'linearTo',
+  None: 'none',
+  Move: 'moveTo',
+};
+
+export const UserTrackingModes = {
+  Follow: 'normal',
+  FollowWithHeading: 'compass',
+  FollowWithCourse: 'course',
+};
+
+type AnimationMode = 'flyTo' | 'easeTo' | 'linearTo' | 'none' | 'moveTo';
+
+interface CameraStop {
+  centerCoordinate: Position;
+  bounds: {
+    ne: Position;
+    sw: Position;
+    paddingLeft?: number; // deprecated
+    paddingRight?: number; // deprecated
+    paddingTop?: number; // deprecated
+    paddingBottom?: number; // deprecated
+  };
+  heading: number;
+  pitch: number;
+  zoomLevel: number;
+  padding: {
+    paddingLeft: number;
+    paddingRight: number;
+    paddingTop: number;
+    paddingBottom: number;
+  };
+  animationDuration: number;
+  animationMode: AnimationMode;
+}
+
+interface CameraFollowConfig {
+  followUserLocation: boolean;
+  followUserMode?: 'normal' | 'compass' | 'course';
+  followZoomLevel?: number;
+  followPitch?: number;
+  followHeading?: number;
+}
+
+interface CameraMinMaxConfig {
+  minZoomLevel: number;
+  maxZoomLevel: number;
+  maxBounds: {
+    ne: Position;
+    sw: Position;
+  };
+}
+
+/**
+ * @param {Position} centerCoordinate
+ * @param {TODO} bounds
+ * @param {number} heading
+ * @param {number} pitch
+ * @param {number} zoomLevel
+ * @param {TODO} padding
+ * @param {number} animationDuration
+ * @param {AnimationMode} animationMode
+ * @param {boolean} followUserLocation
+ * @param {'normal' | 'compass' | 'course'} followUserMode
+ * @param {number} followZoomLevel
+ * @param {number} followPitch
+ * @param {number} followHeading
+ * @param {number} minZoomLevel
+ * @param {number} maxZoomLevel
+ * @param {TODO} maxBounds
+ */
+interface CameraProps
+  extends CameraStop,
+    CameraFollowConfig,
+    CameraMinMaxConfig {
+  defaultSettings?: CameraStop;
+  allowUpdates: boolean;
+  triggerKey: any;
+  onUserTrackingModeChange: () => void;
+}
+
+/**
+ *
+ * @param {CameraProps} props
+ */
+const Camera = memo((props: CameraProps) => {
+  const {
+    centerCoordinate,
+    bounds,
+    heading,
+    pitch,
+    zoomLevel,
+    padding,
+    allowUpdates = true,
+    animationDuration = 2000,
+    animationMode = 'easeTo',
+    defaultSettings,
+    minZoomLevel,
+    maxZoomLevel,
+    maxBounds,
+    followUserLocation,
+    followUserMode,
+    followZoomLevel,
+    followPitch,
+    followHeading,
+    triggerKey,
+    onUserTrackingModeChange,
+  } = props;
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const camera: React.RefObject<RCTMGLCamera> = useRef(null);
+
+  /**
+   * Map camera transitions to fit provided bounds
+   *
+   * @example
+   * camera.fitBounds([lng, lat], [lng, lat])
+   * camera.fitBounds([lng, lat], [lng, lat], 20, 1000) // padding for all sides
+   * camera.fitBounds([lng, lat], [lng, lat], [verticalPadding, horizontalPadding], 1000)
+   * camera.fitBounds([lng, lat], [lng, lat], [top, right, bottom, left], 1000)
+   *
+   * @param {Array<Number>} northEastCoordinates - North east coordinate of bound
+   * @param {Array<Number>} southWestCoordinates - South west coordinate of bound
+   * @param {Number=} padding - Camera padding for bound
+   * @param {Number=} animationDuration - Duration of camera animation
+   * @return {void}
+   */
+  // const fitBounds = (
+  //   northEastCoordinates: Position,
+  //   southWestCoordinates: Position,
+  //   padding = 0,
+  //   animationDuration = 0.0,
+  // ) => {
+  //   const pad = {
+  //     paddingLeft: 0,
+  //     paddingRight: 0,
+  //     paddingTop: 0,
+  //     paddingBottom: 0,
+  //   };
+
+  //   if (Array.isArray(padding)) {
+  //     if (padding.length === 2) {
+  //       pad.paddingTop = padding[0];
+  //       pad.paddingBottom = padding[0];
+  //       pad.paddingLeft = padding[1];
+  //       pad.paddingRight = padding[1];
+  //     } else if (padding.length === 4) {
+  //       pad.paddingTop = padding[0];
+  //       pad.paddingRight = padding[1];
+  //       pad.paddingBottom = padding[2];
+  //       pad.paddingLeft = padding[3];
+  //     }
+  //   } else {
+  //     pad.paddingLeft = padding;
+  //     pad.paddingRight = padding;
+  //     pad.paddingTop = padding;
+  //     pad.paddingBottom = padding;
+  //   }
+
+  //   return setCamera({
+  //     bounds: {
+  //       ne: northEastCoordinates,
+  //       sw: southWestCoordinates,
+  //     },
+  //     padding: pad,
+  //     animationDuration,
+  //     animationMode: Mode.Ease,
+  //   });
+  // };
+
+  /**
+   * Map camera will fly to new coordinate
+   *
+   * @example
+   * camera.flyTo([lng, lat])
+   * camera.flyTo([lng, lat], 12000)
+   *
+   *  @param {Array<Number>} coordinates - Coordinates that map camera will jump too
+   *  @param {Number=} animationDuration - Duration of camera animation
+   *  @return {void}
+   */
+  // const flyTo = (coordinates: Position, animationDuration = 2000) => {
+  //   return setCamera({
+  //     centerCoordinate: coordinates,
+  //     animationDuration,
+  //     animationMode: Mode.Flight,
+  //   });
+  // };
+
+  /**
+   * Map camera will move to new coordinate at the same zoom level
+   *
+   * @example
+   * camera.moveTo([lng, lat], 200) // eases camera to new location based on duration
+   * camera.moveTo([lng, lat]) // snaps camera to new location without any easing
+   *
+   *  @param {Array<Number>} coordinates - Coordinates that map camera will move too
+   *  @param {Number=} animationDuration - Duration of camera animation
+   *  @return {void}
+   */
+  // const moveTo = (coordinates: Position, animationDuration = 0) => {
+  //   return setCamera({
+  //     centerCoordinate: coordinates,
+  //     animationDuration,
+  //   });
+  // };
+
+  /**
+   * Map camera will zoom to specified level
+   *
+   * @example
+   * camera.zoomTo(16)
+   * camera.zoomTo(16, 100)
+   *
+   * @param {Number} zoomLevel - Zoom level that the map camera will animate too
+   * @param {Number=} animationDuration - Duration of camera animation
+   * @return {void}
+   */
+  // const zoomTo = (zoomLevel: number, animationDuration = 2000) => {
+  //   return setCamera({
+  //     zoomLevel,
+  //     animationDuration,
+  //     animationMode: Mode.Flight,
+  //   });
+  // };
+
+  /**
+   * Map camera will perform updates based on provided config. Advanced use only!
+   *
+   * @example
+   * camera.setCamera({
+   *   centerCoordinate: [lng, lat],
+   *   zoomLevel: 16,
+   *   animationDuration: 2000,
+   * })
+   *
+   * camera.setCamera({
+   *   stops: [
+   *     { pitch: 45, animationDuration: 200 },
+   *     { heading: 180, animationDuration: 300 },
+   *   ]
+   * })
+   *
+   *  @param {Object} config - Camera configuration
+   */
+  // const setCamera = (config: CameraStop) => {
+  //   _setCamera(config);
+  // };
+
+  // const _setCamera = (config = {}) => {
+  //   let cameraConfig = {};
+
+  //   if (config.stops) {
+  //     cameraConfig.stops = [];
+
+  //     for (const stop of config.stops) {
+  //       cameraConfig.stops.push(_createStop(stop));
+  //     }
+  //   } else {
+  //     cameraConfig = _createStop(config);
+  //   }
+
+  //   refs.camera.setNativeProps({ stop: cameraConfig });
+  // }
+
+  const _createDefaultStop = (): NativeCameraStop | null => {
+    return null;
+  };
+
+  const _createStop = useCallback(
+    (
+      stop: CameraStop,
+      ignoreFollowUserLocation = false,
+    ): NativeCameraStop | null => {
+      if (props.followUserLocation && !ignoreFollowUserLocation) {
+        return null;
+      }
+
+      const stopConfig: NativeCameraStop = {
+        mode: _getNativeCameraMode(stop),
+        pitch: stop.pitch,
+        heading: stop.heading,
+        duration: stop.animationDuration || 0,
+        zoom: stop.zoomLevel,
+      };
+
+      if (stop.centerCoordinate) {
+        stopConfig.centerCoordinate = JSON.stringify(
+          geoUtils.makePoint(stop.centerCoordinate),
+        );
+      }
+
+      if (stop.bounds && stop.bounds.ne && stop.bounds.sw) {
+        const { ne, sw } = stop.bounds;
+        stopConfig.bounds = JSON.stringify(geoUtils.makeLatLngBounds(ne, sw));
+      }
+
+      stopConfig.paddingTop =
+        stop.padding?.paddingTop ?? stop.bounds?.paddingTop ?? 0;
+      stopConfig.paddingRight =
+        stop.padding?.paddingRight ?? stop.bounds?.paddingRight ?? 0;
+      stopConfig.paddingBottom =
+        stop.padding?.paddingBottom ?? stop.bounds?.paddingBottom ?? 0;
+      stopConfig.paddingLeft =
+        stop.padding?.paddingLeft ?? stop.bounds?.paddingLeft ?? 0;
+
+      return stopConfig;
+    },
+    [props.followUserLocation],
+  );
+
+  const _getNativeCameraMode = (config: { animationMode: AnimationMode }) => {
+    switch (config.animationMode) {
+      case Mode.Flight:
+        return MapboxGL.CameraModes.Flight;
+      case Mode.Ease:
+        return MapboxGL.CameraModes.Ease;
+      case Mode.Linear:
+        return MapboxGL.CameraModes.Linear;
+      case Mode.None:
+        return MapboxGL.CameraModes.None;
+      case Mode.Move:
+      default:
+        return MapboxGL.CameraModes.Move;
+    }
+  };
+
+  const nativeMaxBounds = useMemo(() => {
+    if (!maxBounds?.ne || !maxBounds?.sw) {
+      return null;
+    }
+    return JSON.stringify(
+      geoUtils.makeLatLngBounds(maxBounds.ne, maxBounds.sw),
+    );
+  }, [maxBounds]);
+
+  const stop = useMemo(() => {
+    return _createStop({
+      centerCoordinate,
+      bounds,
+      heading,
+      pitch,
+      zoomLevel,
+      padding,
+      animationDuration,
+      animationMode,
+    });
+  }, [
+    centerCoordinate,
+    bounds,
+    heading,
+    pitch,
+    zoomLevel,
+    padding,
+    animationDuration,
+    animationMode,
+    _createStop,
+  ]);
+
+  return (
+    <RCTMGLCamera
+      testID={'Camera'}
+      ref={camera}
+      stop={stop}
+      defaultStop={_createDefaultStop()}
+      followUserLocation={followUserLocation}
+      followUserMode={followUserMode}
+      followPitch={followPitch}
+      followHeading={followHeading}
+      followZoomLevel={followZoomLevel}
+      minZoomLevel={minZoomLevel}
+      maxZoomLevel={maxZoomLevel}
+      maxBounds={nativeMaxBounds}
+      onUserTrackingModeChange={onUserTrackingModeChange}
+    />
+  );
+});
+
+interface NativeCameraProps extends CameraFollowConfig {
+  testID: string;
+  stop: NativeCameraStop | null;
+  defaultStop: NativeCameraStop | null;
+  minZoomLevel: number;
+  maxZoomLevel: number;
+  maxBounds: string | null;
+  onUserTrackingModeChange: () => void;
+}
+
+interface NativeCameraStop {
+  centerCoordinate?: string;
+  bounds?: string;
+  heading: number;
+  pitch: number;
+  zoom: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  duration: number;
+  mode: AnimationMode;
+}
+
+const RCTMGLCamera =
+  requireNativeComponent<NativeCameraProps>(NATIVE_MODULE_NAME);
+
+export default Camera;
diff --git a/javascript/index.js b/javascript/index.js
index 193534a43..42c9244f3 100644
--- a/javascript/index.js
+++ b/javascript/index.js
@@ -7,7 +7,7 @@ import PointAnnotation from './components/PointAnnotation';
 import Annotation from './components/annotations/Annotation';
 import Callout from './components/Callout';
 import UserLocation from './components/UserLocation';
-import Camera from './components/Camera';
+import Camera, { UserTrackingModes } from './components/Camera';
 import VectorSource from './components/VectorSource';
 import ShapeSource from './components/ShapeSource';
 import RasterSource from './components/RasterSource';
@@ -64,7 +64,7 @@ MapboxGL.requestAndroidLocationPermissions = async function () {
   throw new Error('You should only call this method on Android!');
 };
 
-MapboxGL.UserTrackingModes = Camera.UserTrackingModes;
+MapboxGL.UserTrackingModes = UserTrackingModes;
 
 // components
 MapboxGL.MapView = MapView;

From fefa4dda147cc925876d73077fb5a22414d15796 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 27 Apr 2022 14:10:35 -0500
Subject: [PATCH 13/84] Fix import

---
 __tests__/components/Camera.test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/__tests__/components/Camera.test.js b/__tests__/components/Camera.test.js
index 7ec50012a..3acca9b1c 100644
--- a/__tests__/components/Camera.test.js
+++ b/__tests__/components/Camera.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
 
-import Camera from '../../javascript/components/Camera';
+import Camera, { UserTrackingModes } from '../../javascript/components/Camera';
 
 const cameraWithoutFollowDefault = {
   ...Camera.defaultProps,
@@ -91,7 +91,7 @@ describe('Camera', () => {
 
   describe('class', () => {
     test('correct "UserTrackingModes" statics', () => {
-      expect(Camera.UserTrackingModes).toStrictEqual({
+      expect(UserTrackingModes).toStrictEqual({
         Follow: 'normal',
         FollowWithCourse: 'course',
         FollowWithHeading: 'compass',

From 4d74a6c6835744066f74d203348de3cb5f1f46cd Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 27 Apr 2022 14:28:49 -0500
Subject: [PATCH 14/84] Clean up and expand stop methods

---
 javascript/components/Camera.tsx | 32 +++++++++++++++++---------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/javascript/components/Camera.tsx b/javascript/components/Camera.tsx
index ad830f149..00dcb90dc 100644
--- a/javascript/components/Camera.tsx
+++ b/javascript/components/Camera.tsx
@@ -93,7 +93,6 @@ interface CameraProps
 }
 
 /**
- *
  * @param {CameraProps} props
  */
 const Camera = memo((props: CameraProps) => {
@@ -104,10 +103,8 @@ const Camera = memo((props: CameraProps) => {
     pitch,
     zoomLevel,
     padding,
-    allowUpdates = true,
     animationDuration = 2000,
     animationMode = 'easeTo',
-    defaultSettings,
     minZoomLevel,
     maxZoomLevel,
     maxBounds,
@@ -116,6 +113,8 @@ const Camera = memo((props: CameraProps) => {
     followZoomLevel,
     followPitch,
     followHeading,
+    defaultSettings,
+    allowUpdates = true,
     triggerKey,
     onUserTrackingModeChange,
   } = props;
@@ -277,11 +276,7 @@ const Camera = memo((props: CameraProps) => {
   //   refs.camera.setNativeProps({ stop: cameraConfig });
   // }
 
-  const _createDefaultStop = (): NativeCameraStop | null => {
-    return null;
-  };
-
-  const _createStop = useCallback(
+  const buildNativeStop = useCallback(
     (
       stop: CameraStop,
       ignoreFollowUserLocation = false,
@@ -291,10 +286,10 @@ const Camera = memo((props: CameraProps) => {
       }
 
       const stopConfig: NativeCameraStop = {
-        mode: _getNativeCameraMode(stop),
+        mode: nativeAnimationMode(stop.animationMode),
         pitch: stop.pitch,
         heading: stop.heading,
-        duration: stop.animationDuration || 0,
+        duration: stop.animationDuration ?? 0,
         zoom: stop.zoomLevel,
       };
 
@@ -323,8 +318,8 @@ const Camera = memo((props: CameraProps) => {
     [props.followUserLocation],
   );
 
-  const _getNativeCameraMode = (config: { animationMode: AnimationMode }) => {
-    switch (config.animationMode) {
+  const nativeAnimationMode = (_mode: AnimationMode) => {
+    switch (_mode) {
       case Mode.Flight:
         return MapboxGL.CameraModes.Flight;
       case Mode.Ease:
@@ -349,7 +344,7 @@ const Camera = memo((props: CameraProps) => {
   }, [maxBounds]);
 
   const stop = useMemo(() => {
-    return _createStop({
+    return buildNativeStop({
       centerCoordinate,
       bounds,
       heading,
@@ -368,15 +363,22 @@ const Camera = memo((props: CameraProps) => {
     padding,
     animationDuration,
     animationMode,
-    _createStop,
+    buildNativeStop,
   ]);
 
+  const defaultStop = useMemo((): NativeCameraStop | null => {
+    if (!defaultSettings) {
+      return null;
+    }
+    return buildNativeStop(defaultSettings);
+  }, [defaultSettings, buildNativeStop]);
+
   return (
     <RCTMGLCamera
       testID={'Camera'}
       ref={camera}
       stop={stop}
-      defaultStop={_createDefaultStop()}
+      defaultStop={defaultStop}
       followUserLocation={followUserLocation}
       followUserMode={followUserMode}
       followPitch={followPitch}

From 232ec86e7836517101fbc5afc69b47d26a0ca889 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 27 Apr 2022 14:32:22 -0500
Subject: [PATCH 15/84] Add memoization

---
 javascript/components/Camera.tsx | 34 ++++++++++++++++----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/javascript/components/Camera.tsx b/javascript/components/Camera.tsx
index 00dcb90dc..061746843 100644
--- a/javascript/components/Camera.tsx
+++ b/javascript/components/Camera.tsx
@@ -276,6 +276,22 @@ const Camera = memo((props: CameraProps) => {
   //   refs.camera.setNativeProps({ stop: cameraConfig });
   // }
 
+  const nativeAnimationMode = useCallback((_mode: AnimationMode) => {
+    switch (_mode) {
+      case Mode.Flight:
+        return MapboxGL.CameraModes.Flight;
+      case Mode.Ease:
+        return MapboxGL.CameraModes.Ease;
+      case Mode.Linear:
+        return MapboxGL.CameraModes.Linear;
+      case Mode.None:
+        return MapboxGL.CameraModes.None;
+      case Mode.Move:
+      default:
+        return MapboxGL.CameraModes.Move;
+    }
+  }, []);
+
   const buildNativeStop = useCallback(
     (
       stop: CameraStop,
@@ -315,25 +331,9 @@ const Camera = memo((props: CameraProps) => {
 
       return stopConfig;
     },
-    [props.followUserLocation],
+    [props.followUserLocation, nativeAnimationMode],
   );
 
-  const nativeAnimationMode = (_mode: AnimationMode) => {
-    switch (_mode) {
-      case Mode.Flight:
-        return MapboxGL.CameraModes.Flight;
-      case Mode.Ease:
-        return MapboxGL.CameraModes.Ease;
-      case Mode.Linear:
-        return MapboxGL.CameraModes.Linear;
-      case Mode.None:
-        return MapboxGL.CameraModes.None;
-      case Mode.Move:
-      default:
-        return MapboxGL.CameraModes.Move;
-    }
-  };
-
   const nativeMaxBounds = useMemo(() => {
     if (!maxBounds?.ne || !maxBounds?.sw) {
       return null;

From 8d649ae2b9e7aa07ad52defe9c4fc88ba9c4f74a Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 27 Apr 2022 14:33:41 -0500
Subject: [PATCH 16/84] Rename

---
 javascript/components/Camera.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/javascript/components/Camera.tsx b/javascript/components/Camera.tsx
index 061746843..3febe9dc5 100644
--- a/javascript/components/Camera.tsx
+++ b/javascript/components/Camera.tsx
@@ -343,7 +343,7 @@ const Camera = memo((props: CameraProps) => {
     );
   }, [maxBounds]);
 
-  const stop = useMemo(() => {
+  const nativeStop = useMemo(() => {
     return buildNativeStop({
       centerCoordinate,
       bounds,
@@ -366,7 +366,7 @@ const Camera = memo((props: CameraProps) => {
     buildNativeStop,
   ]);
 
-  const defaultStop = useMemo((): NativeCameraStop | null => {
+  const nativeDefaultStop = useMemo((): NativeCameraStop | null => {
     if (!defaultSettings) {
       return null;
     }
@@ -377,8 +377,8 @@ const Camera = memo((props: CameraProps) => {
     <RCTMGLCamera
       testID={'Camera'}
       ref={camera}
-      stop={stop}
-      defaultStop={defaultStop}
+      stop={nativeStop}
+      defaultStop={nativeDefaultStop}
       followUserLocation={followUserLocation}
       followUserMode={followUserMode}
       followPitch={followPitch}

From 42e36df05b8ea14fd78d8822f7fdb7485ea7baf3 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 27 Apr 2022 16:46:08 -0500
Subject: [PATCH 17/84] Build out primary imperative camera method

---
 javascript/components/Camera.tsx | 655 +++++++++++++++++--------------
 1 file changed, 360 insertions(+), 295 deletions(-)

diff --git a/javascript/components/Camera.tsx b/javascript/components/Camera.tsx
index 3febe9dc5..122a3d01e 100644
--- a/javascript/components/Camera.tsx
+++ b/javascript/components/Camera.tsx
@@ -1,4 +1,11 @@
-import React, { memo, useCallback, useMemo, useRef } from 'react';
+import React, {
+  forwardRef,
+  memo,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react';
 import { Position } from 'geojson';
 import { NativeModules, requireNativeComponent } from 'react-native';
 
@@ -25,6 +32,7 @@ export const UserTrackingModes = {
 type AnimationMode = 'flyTo' | 'easeTo' | 'linearTo' | 'none' | 'moveTo';
 
 interface CameraStop {
+  readonly type: 'CameraStop';
   centerCoordinate: Position;
   bounds: {
     ne: Position;
@@ -34,17 +42,17 @@ interface CameraStop {
     paddingTop?: number; // deprecated
     paddingBottom?: number; // deprecated
   };
-  heading: number;
-  pitch: number;
-  zoomLevel: number;
-  padding: {
+  heading?: number;
+  pitch?: number;
+  zoomLevel?: number;
+  padding?: {
     paddingLeft: number;
     paddingRight: number;
     paddingTop: number;
     paddingBottom: number;
   };
-  animationDuration: number;
-  animationMode: AnimationMode;
+  animationDuration?: number;
+  animationMode?: AnimationMode;
 }
 
 interface CameraFollowConfig {
@@ -64,6 +72,11 @@ interface CameraMinMaxConfig {
   };
 }
 
+interface CameraStops {
+  readonly type: 'CameraStops';
+  stops: CameraStop[];
+}
+
 /**
  * @param {Position} centerCoordinate
  * @param {TODO} bounds
@@ -95,256 +108,276 @@ interface CameraProps
 /**
  * @param {CameraProps} props
  */
-const Camera = memo((props: CameraProps) => {
-  const {
-    centerCoordinate,
-    bounds,
-    heading,
-    pitch,
-    zoomLevel,
-    padding,
-    animationDuration = 2000,
-    animationMode = 'easeTo',
-    minZoomLevel,
-    maxZoomLevel,
-    maxBounds,
-    followUserLocation,
-    followUserMode,
-    followZoomLevel,
-    followPitch,
-    followHeading,
-    defaultSettings,
-    allowUpdates = true,
-    triggerKey,
-    onUserTrackingModeChange,
-  } = props;
-
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  const camera: React.RefObject<RCTMGLCamera> = useRef(null);
-
-  /**
-   * Map camera transitions to fit provided bounds
-   *
-   * @example
-   * camera.fitBounds([lng, lat], [lng, lat])
-   * camera.fitBounds([lng, lat], [lng, lat], 20, 1000) // padding for all sides
-   * camera.fitBounds([lng, lat], [lng, lat], [verticalPadding, horizontalPadding], 1000)
-   * camera.fitBounds([lng, lat], [lng, lat], [top, right, bottom, left], 1000)
-   *
-   * @param {Array<Number>} northEastCoordinates - North east coordinate of bound
-   * @param {Array<Number>} southWestCoordinates - South west coordinate of bound
-   * @param {Number=} padding - Camera padding for bound
-   * @param {Number=} animationDuration - Duration of camera animation
-   * @return {void}
-   */
-  // const fitBounds = (
-  //   northEastCoordinates: Position,
-  //   southWestCoordinates: Position,
-  //   padding = 0,
-  //   animationDuration = 0.0,
-  // ) => {
-  //   const pad = {
-  //     paddingLeft: 0,
-  //     paddingRight: 0,
-  //     paddingTop: 0,
-  //     paddingBottom: 0,
-  //   };
-
-  //   if (Array.isArray(padding)) {
-  //     if (padding.length === 2) {
-  //       pad.paddingTop = padding[0];
-  //       pad.paddingBottom = padding[0];
-  //       pad.paddingLeft = padding[1];
-  //       pad.paddingRight = padding[1];
-  //     } else if (padding.length === 4) {
-  //       pad.paddingTop = padding[0];
-  //       pad.paddingRight = padding[1];
-  //       pad.paddingBottom = padding[2];
-  //       pad.paddingLeft = padding[3];
-  //     }
-  //   } else {
-  //     pad.paddingLeft = padding;
-  //     pad.paddingRight = padding;
-  //     pad.paddingTop = padding;
-  //     pad.paddingBottom = padding;
-  //   }
-
-  //   return setCamera({
-  //     bounds: {
-  //       ne: northEastCoordinates,
-  //       sw: southWestCoordinates,
-  //     },
-  //     padding: pad,
-  //     animationDuration,
-  //     animationMode: Mode.Ease,
-  //   });
-  // };
-
-  /**
-   * Map camera will fly to new coordinate
-   *
-   * @example
-   * camera.flyTo([lng, lat])
-   * camera.flyTo([lng, lat], 12000)
-   *
-   *  @param {Array<Number>} coordinates - Coordinates that map camera will jump too
-   *  @param {Number=} animationDuration - Duration of camera animation
-   *  @return {void}
-   */
-  // const flyTo = (coordinates: Position, animationDuration = 2000) => {
-  //   return setCamera({
-  //     centerCoordinate: coordinates,
-  //     animationDuration,
-  //     animationMode: Mode.Flight,
-  //   });
-  // };
-
-  /**
-   * Map camera will move to new coordinate at the same zoom level
-   *
-   * @example
-   * camera.moveTo([lng, lat], 200) // eases camera to new location based on duration
-   * camera.moveTo([lng, lat]) // snaps camera to new location without any easing
-   *
-   *  @param {Array<Number>} coordinates - Coordinates that map camera will move too
-   *  @param {Number=} animationDuration - Duration of camera animation
-   *  @return {void}
-   */
-  // const moveTo = (coordinates: Position, animationDuration = 0) => {
-  //   return setCamera({
-  //     centerCoordinate: coordinates,
-  //     animationDuration,
-  //   });
-  // };
-
-  /**
-   * Map camera will zoom to specified level
-   *
-   * @example
-   * camera.zoomTo(16)
-   * camera.zoomTo(16, 100)
-   *
-   * @param {Number} zoomLevel - Zoom level that the map camera will animate too
-   * @param {Number=} animationDuration - Duration of camera animation
-   * @return {void}
-   */
-  // const zoomTo = (zoomLevel: number, animationDuration = 2000) => {
-  //   return setCamera({
-  //     zoomLevel,
-  //     animationDuration,
-  //     animationMode: Mode.Flight,
-  //   });
-  // };
-
-  /**
-   * Map camera will perform updates based on provided config. Advanced use only!
-   *
-   * @example
-   * camera.setCamera({
-   *   centerCoordinate: [lng, lat],
-   *   zoomLevel: 16,
-   *   animationDuration: 2000,
-   * })
-   *
-   * camera.setCamera({
-   *   stops: [
-   *     { pitch: 45, animationDuration: 200 },
-   *     { heading: 180, animationDuration: 300 },
-   *   ]
-   * })
-   *
-   *  @param {Object} config - Camera configuration
-   */
-  // const setCamera = (config: CameraStop) => {
-  //   _setCamera(config);
-  // };
-
-  // const _setCamera = (config = {}) => {
-  //   let cameraConfig = {};
-
-  //   if (config.stops) {
-  //     cameraConfig.stops = [];
-
-  //     for (const stop of config.stops) {
-  //       cameraConfig.stops.push(_createStop(stop));
-  //     }
-  //   } else {
-  //     cameraConfig = _createStop(config);
-  //   }
-
-  //   refs.camera.setNativeProps({ stop: cameraConfig });
-  // }
-
-  const nativeAnimationMode = useCallback((_mode: AnimationMode) => {
-    switch (_mode) {
-      case Mode.Flight:
-        return MapboxGL.CameraModes.Flight;
-      case Mode.Ease:
-        return MapboxGL.CameraModes.Ease;
-      case Mode.Linear:
-        return MapboxGL.CameraModes.Linear;
-      case Mode.None:
-        return MapboxGL.CameraModes.None;
-      case Mode.Move:
-      default:
-        return MapboxGL.CameraModes.Move;
-    }
-  }, []);
-
-  const buildNativeStop = useCallback(
-    (
-      stop: CameraStop,
-      ignoreFollowUserLocation = false,
-    ): NativeCameraStop | null => {
-      if (props.followUserLocation && !ignoreFollowUserLocation) {
+const Camera = memo(
+  forwardRef((props: CameraProps, ref) => {
+    const {
+      centerCoordinate,
+      bounds,
+      heading,
+      pitch,
+      zoomLevel,
+      padding,
+      animationDuration,
+      animationMode,
+      minZoomLevel,
+      maxZoomLevel,
+      maxBounds,
+      followUserLocation,
+      followUserMode,
+      followZoomLevel,
+      followPitch,
+      followHeading,
+      defaultSettings,
+      allowUpdates = true,
+      triggerKey,
+      onUserTrackingModeChange,
+    } = props;
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const camera: React.RefObject<RCTMGLCamera> = useRef(null);
+
+    /**
+     * Map camera transitions to fit provided bounds
+     *
+     * @example
+     * camera.fitBounds([lng, lat], [lng, lat])
+     * camera.fitBounds([lng, lat], [lng, lat], 20, 1000) // padding for all sides
+     * camera.fitBounds([lng, lat], [lng, lat], [verticalPadding, horizontalPadding], 1000)
+     * camera.fitBounds([lng, lat], [lng, lat], [top, right, bottom, left], 1000)
+     *
+     * @param {Array<Number>} northEastCoordinates - North east coordinate of bound
+     * @param {Array<Number>} southWestCoordinates - South west coordinate of bound
+     * @param {Number=} padding - Camera padding for bound
+     * @param {Number=} animationDuration - Duration of camera animation
+     * @return {void}
+     */
+    // const fitBounds = (
+    //   northEastCoordinates: Position,
+    //   southWestCoordinates: Position,
+    //   padding = 0,
+    //   animationDuration = 0.0,
+    // ) => {
+    //   const pad = {
+    //     paddingLeft: 0,
+    //     paddingRight: 0,
+    //     paddingTop: 0,
+    //     paddingBottom: 0,
+    //   };
+
+    //   if (Array.isArray(padding)) {
+    //     if (padding.length === 2) {
+    //       pad.paddingTop = padding[0];
+    //       pad.paddingBottom = padding[0];
+    //       pad.paddingLeft = padding[1];
+    //       pad.paddingRight = padding[1];
+    //     } else if (padding.length === 4) {
+    //       pad.paddingTop = padding[0];
+    //       pad.paddingRight = padding[1];
+    //       pad.paddingBottom = padding[2];
+    //       pad.paddingLeft = padding[3];
+    //     }
+    //   } else {
+    //     pad.paddingLeft = padding;
+    //     pad.paddingRight = padding;
+    //     pad.paddingTop = padding;
+    //     pad.paddingBottom = padding;
+    //   }
+
+    //   return setCamera({
+    //     bounds: {
+    //       ne: northEastCoordinates,
+    //       sw: southWestCoordinates,
+    //     },
+    //     padding: pad,
+    //     animationDuration,
+    //     animationMode: Mode.Ease,
+    //   });
+    // };
+
+    /**
+     * Map camera will fly to new coordinate
+     *
+     * @example
+     * camera.flyTo([lng, lat])
+     * camera.flyTo([lng, lat], 12000)
+     *
+     *  @param {Array<Number>} coordinates - Coordinates that map camera will jump too
+     *  @param {Number=} animationDuration - Duration of camera animation
+     *  @return {void}
+     */
+    // const flyTo = (coordinates: Position, animationDuration = 2000) => {
+    //   return setCamera({
+    //     centerCoordinate: coordinates,
+    //     animationDuration,
+    //     animationMode: Mode.Flight,
+    //   });
+    // };
+
+    /**
+     * Map camera will move to new coordinate at the same zoom level
+     *
+     * @example
+     * camera.moveTo([lng, lat], 200) // eases camera to new location based on duration
+     * camera.moveTo([lng, lat]) // snaps camera to new location without any easing
+     *
+     *  @param {Array<Number>} coordinates - Coordinates that map camera will move too
+     *  @param {Number=} animationDuration - Duration of camera animation
+     *  @return {void}
+     */
+    // const moveTo = (coordinates: Position, animationDuration = 0) => {
+    //   return setCamera({
+    //     centerCoordinate: coordinates,
+    //     animationDuration,
+    //   });
+    // };
+
+    /**
+     * Map camera will zoom to specified level
+     *
+     * @example
+     * camera.zoomTo(16)
+     * camera.zoomTo(16, 100)
+     *
+     * @param {Number} zoomLevel - Zoom level that the map camera will animate too
+     * @param {Number=} animationDuration - Duration of camera animation
+     * @return {void}
+     */
+    // const zoomTo = (zoomLevel: number, animationDuration = 2000) => {
+    //   return setCamera({
+    //     zoomLevel,
+    //     animationDuration,
+    //     animationMode: Mode.Flight,
+    //   });
+    // };
+
+    /**
+     * Map camera will perform updates based on provided config. Advanced use only!
+     *
+     * @example
+     * camera.setCamera({
+     *   centerCoordinate: [lng, lat],
+     *   zoomLevel: 16,
+     *   animationDuration: 2000,
+     * })
+     *
+     * camera.setCamera({
+     *   stops: [
+     *     { pitch: 45, animationDuration: 200 },
+     *     { heading: 180, animationDuration: 300 },
+     *   ]
+     * })
+     *
+     *  @param {Object} config - Camera configuration
+     */
+    // const setCamera = (config: CameraStop) => {
+    //   _setCamera(config);
+    // };
+
+    const nativeAnimationMode = useCallback(
+      (_mode?: AnimationMode): NativeAnimationMode | undefined => {
+        switch (_mode) {
+          case Mode.Flight:
+            return MapboxGL.CameraModes.Flight;
+          case Mode.Ease:
+            return MapboxGL.CameraModes.Ease;
+          case Mode.Linear:
+            return MapboxGL.CameraModes.Linear;
+          case Mode.None:
+            return MapboxGL.CameraModes.None;
+          case Mode.Move:
+            return MapboxGL.CameraModes.Move;
+          default:
+            return undefined;
+        }
+      },
+      [],
+    );
+
+    const nativeDefaultStop = useMemo((): NativeCameraStop | null => {
+      if (!defaultSettings) {
         return null;
       }
-
-      const stopConfig: NativeCameraStop = {
-        mode: nativeAnimationMode(stop.animationMode),
-        pitch: stop.pitch,
-        heading: stop.heading,
-        duration: stop.animationDuration ?? 0,
-        zoom: stop.zoomLevel,
+      const _defaultStop: NativeCameraStop = {
+        centerCoordinate: JSON.stringify(defaultSettings.centerCoordinate),
+        bounds: JSON.stringify(defaultSettings.bounds),
+        heading: defaultSettings.heading ?? 0,
+        pitch: defaultSettings.pitch ?? 0,
+        zoom: defaultSettings.zoomLevel ?? 11,
+        paddingTop: defaultSettings.padding?.paddingTop ?? 0,
+        paddingBottom: defaultSettings.padding?.paddingBottom ?? 0,
+        paddingLeft: defaultSettings.padding?.paddingLeft ?? 0,
+        paddingRight: defaultSettings.padding?.paddingRight ?? 0,
+        duration: defaultSettings.animationDuration ?? 2000,
+        mode: nativeAnimationMode(defaultSettings.animationMode) ?? 'flight',
       };
-
-      if (stop.centerCoordinate) {
-        stopConfig.centerCoordinate = JSON.stringify(
-          geoUtils.makePoint(stop.centerCoordinate),
-        );
-      }
-
-      if (stop.bounds && stop.bounds.ne && stop.bounds.sw) {
-        const { ne, sw } = stop.bounds;
-        stopConfig.bounds = JSON.stringify(geoUtils.makeLatLngBounds(ne, sw));
-      }
-
-      stopConfig.paddingTop =
-        stop.padding?.paddingTop ?? stop.bounds?.paddingTop ?? 0;
-      stopConfig.paddingRight =
-        stop.padding?.paddingRight ?? stop.bounds?.paddingRight ?? 0;
-      stopConfig.paddingBottom =
-        stop.padding?.paddingBottom ?? stop.bounds?.paddingBottom ?? 0;
-      stopConfig.paddingLeft =
-        stop.padding?.paddingLeft ?? stop.bounds?.paddingLeft ?? 0;
-
-      return stopConfig;
-    },
-    [props.followUserLocation, nativeAnimationMode],
-  );
-
-  const nativeMaxBounds = useMemo(() => {
-    if (!maxBounds?.ne || !maxBounds?.sw) {
-      return null;
-    }
-    return JSON.stringify(
-      geoUtils.makeLatLngBounds(maxBounds.ne, maxBounds.sw),
+      return _defaultStop;
+    }, [defaultSettings, nativeAnimationMode]);
+
+    const buildNativeStop = useCallback(
+      (
+        stop: CameraStop,
+        ignoreFollowUserLocation = false,
+      ): NativeCameraStop | null => {
+        stop = {
+          ...stop,
+          type: 'CameraStop',
+        };
+
+        if (props.followUserLocation && !ignoreFollowUserLocation) {
+          return null;
+        }
+
+        const _nativeStop: NativeCameraStop = { ...nativeDefaultStop };
+
+        if (stop.pitch !== undefined) _nativeStop.pitch = stop.pitch;
+        if (stop.heading !== undefined) _nativeStop.heading = stop.heading;
+        if (stop.zoomLevel !== undefined) _nativeStop.zoom = stop.zoomLevel;
+        if (stop.animationMode !== undefined)
+          _nativeStop.mode = nativeAnimationMode(stop.animationMode);
+        if (stop.animationDuration !== undefined)
+          _nativeStop.duration = stop.animationDuration;
+
+        if (stop.centerCoordinate) {
+          _nativeStop.centerCoordinate = JSON.stringify(
+            geoUtils.makePoint(stop.centerCoordinate),
+          );
+        }
+
+        if (stop.bounds && stop.bounds.ne && stop.bounds.sw) {
+          const { ne, sw } = stop.bounds;
+          _nativeStop.bounds = JSON.stringify(
+            geoUtils.makeLatLngBounds(ne, sw),
+          );
+        }
+
+        _nativeStop.paddingTop =
+          stop.padding?.paddingTop ?? stop.bounds?.paddingTop ?? 0;
+        _nativeStop.paddingRight =
+          stop.padding?.paddingRight ?? stop.bounds?.paddingRight ?? 0;
+        _nativeStop.paddingBottom =
+          stop.padding?.paddingBottom ?? stop.bounds?.paddingBottom ?? 0;
+        _nativeStop.paddingLeft =
+          stop.padding?.paddingLeft ?? stop.bounds?.paddingLeft ?? 0;
+
+        return _nativeStop;
+      },
+      [props.followUserLocation, nativeDefaultStop, nativeAnimationMode],
     );
-  }, [maxBounds]);
 
-  const nativeStop = useMemo(() => {
-    return buildNativeStop({
+    const nativeStop = useMemo(() => {
+      return buildNativeStop({
+        type: 'CameraStop',
+        centerCoordinate,
+        bounds,
+        heading,
+        pitch,
+        zoomLevel,
+        padding,
+        animationDuration,
+        animationMode,
+      });
+    }, [
       centerCoordinate,
       bounds,
       heading,
@@ -353,44 +386,74 @@ const Camera = memo((props: CameraProps) => {
       padding,
       animationDuration,
       animationMode,
-    });
-  }, [
-    centerCoordinate,
-    bounds,
-    heading,
-    pitch,
-    zoomLevel,
-    padding,
-    animationDuration,
-    animationMode,
-    buildNativeStop,
-  ]);
-
-  const nativeDefaultStop = useMemo((): NativeCameraStop | null => {
-    if (!defaultSettings) {
-      return null;
-    }
-    return buildNativeStop(defaultSettings);
-  }, [defaultSettings, buildNativeStop]);
-
-  return (
-    <RCTMGLCamera
-      testID={'Camera'}
-      ref={camera}
-      stop={nativeStop}
-      defaultStop={nativeDefaultStop}
-      followUserLocation={followUserLocation}
-      followUserMode={followUserMode}
-      followPitch={followPitch}
-      followHeading={followHeading}
-      followZoomLevel={followZoomLevel}
-      minZoomLevel={minZoomLevel}
-      maxZoomLevel={maxZoomLevel}
-      maxBounds={nativeMaxBounds}
-      onUserTrackingModeChange={onUserTrackingModeChange}
-    />
-  );
-});
+      buildNativeStop,
+    ]);
+
+    const nativeMaxBounds = useMemo(() => {
+      if (!maxBounds?.ne || !maxBounds?.sw) {
+        return null;
+      }
+      return JSON.stringify(
+        geoUtils.makeLatLngBounds(maxBounds.ne, maxBounds.sw),
+      );
+    }, [maxBounds]);
+
+    const setCamera = useCallback(
+      (config: CameraStop | CameraStops) => {
+        if (!config.type)
+          config = {
+            // @ts-expect-error The compiler doesn't understand that the `config` union type is guaranteed
+            // to be an object type
+            ...config,
+            // @ts-expect-error Allows JS files to pass in an invalid config (lacking the `type` property),
+            // which would raise a compilation error in TS files.
+            type: config.stops ? 'CameraStops' : 'CameraStop',
+          };
+
+        if (config.type === 'CameraStops') {
+          for (const _stop of config.stops) {
+            let _nativeStops: NativeCameraStop[] = [];
+            const _nativeStop = buildNativeStop(_stop);
+            if (_nativeStop) {
+              _nativeStops = [..._nativeStops, _nativeStop];
+            }
+            camera.current.setNativeProps({
+              stop: { stops: _nativeStops },
+            });
+          }
+        } else if (config.type === 'CameraStop') {
+          const _nativeStop = buildNativeStop(config);
+          if (_nativeStop) {
+            camera.current.setNativeProps({ stop: _nativeStop });
+          }
+        }
+      },
+      [buildNativeStop],
+    );
+
+    useImperativeHandle(ref, () => ({
+      setCamera,
+    }));
+
+    return (
+      <RCTMGLCamera
+        testID={'Camera'}
+        ref={camera}
+        stop={nativeStop}
+        defaultStop={nativeDefaultStop}
+        followUserLocation={followUserLocation}
+        followUserMode={followUserMode}
+        followPitch={followPitch}
+        followHeading={followHeading}
+        followZoomLevel={followZoomLevel}
+        minZoomLevel={minZoomLevel}
+        maxZoomLevel={maxZoomLevel}
+        maxBounds={nativeMaxBounds}
+        onUserTrackingModeChange={onUserTrackingModeChange}
+      />
+    );
+  }),
+);
 
 interface NativeCameraProps extends CameraFollowConfig {
   testID: string;
@@ -405,17 +468,19 @@ interface NativeCameraProps extends CameraFollowConfig {
 interface NativeCameraStop {
   centerCoordinate?: string;
   bounds?: string;
-  heading: number;
-  pitch: number;
-  zoom: number;
+  heading?: number;
+  pitch?: number;
+  zoom?: number;
   paddingLeft?: number;
   paddingRight?: number;
   paddingTop?: number;
   paddingBottom?: number;
-  duration: number;
-  mode: AnimationMode;
+  duration?: number;
+  mode?: NativeAnimationMode;
 }
 
+type NativeAnimationMode = 'flight' | 'ease' | 'linear' | 'none' | 'move';
+
 const RCTMGLCamera =
   requireNativeComponent<NativeCameraProps>(NATIVE_MODULE_NAME);
 

From 62cb5792bc0e11029da63a57156f74dbfaa9f58f Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Thu, 28 Apr 2022 10:56:38 -0500
Subject: [PATCH 18/84] Implement imperative methods, refactor and expand types

---
 ...CameraAnimation.js => CameraAnimation.tsx} |   0
 javascript/components/Camera.tsx              | 368 +++++++++---------
 2 files changed, 188 insertions(+), 180 deletions(-)
 rename example/src/examples/V10/{CameraAnimation.js => CameraAnimation.tsx} (100%)

diff --git a/example/src/examples/V10/CameraAnimation.js b/example/src/examples/V10/CameraAnimation.tsx
similarity index 100%
rename from example/src/examples/V10/CameraAnimation.js
rename to example/src/examples/V10/CameraAnimation.tsx
diff --git a/javascript/components/Camera.tsx b/javascript/components/Camera.tsx
index 122a3d01e..0bda6336d 100644
--- a/javascript/components/Camera.tsx
+++ b/javascript/components/Camera.tsx
@@ -6,8 +6,9 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
-import { Position } from 'geojson';
 import { NativeModules, requireNativeComponent } from 'react-native';
+import { Position } from 'geojson';
+import { MapboxGLEvent } from '@rnmapbox/maps';
 
 import * as geoUtils from '../utils/geoUtils';
 
@@ -15,7 +16,7 @@ const MapboxGL = NativeModules.MGLModule;
 
 export const NATIVE_MODULE_NAME = 'RCTMGLCamera';
 
-const Mode = {
+const Mode: Record<string, AnimationMode> = {
   Flight: 'flyTo',
   Ease: 'easeTo',
   Linear: 'linearTo',
@@ -23,86 +24,132 @@ const Mode = {
   Move: 'moveTo',
 };
 
-export const UserTrackingModes = {
+export const UserTrackingModes: Record<string, UserTrackingMode> = {
   Follow: 'normal',
   FollowWithHeading: 'compass',
   FollowWithCourse: 'course',
 };
 
-type AnimationMode = 'flyTo' | 'easeTo' | 'linearTo' | 'none' | 'moveTo';
+// Component types.
+
+export type AnimationMode = 'flyTo' | 'easeTo' | 'linearTo' | 'none' | 'moveTo';
+
+type UserTrackingMode = 'normal' | 'compass' | 'course';
+
+type UserTrackingModeChangeCallback = (
+  event: MapboxGLEvent<
+    'usertrackingmodechange',
+    {
+      followUserLocation: boolean;
+      followUserMode: UserTrackingMode | null;
+    }
+  >,
+) => void;
+
+/**
+ * @param {Position} centerCoordinate
+ * @param {CameraBounds} bounds
+ * @param {number} heading
+ * @param {number} pitch
+ * @param {number} zoomLevel
+ * @param {CameraPadding} padding
+ * @param {number} animationDuration
+ * @param {AnimationMode} animationMode
+ * @param {boolean} followUserLocation
+ * @param {UserTrackingMode} followUserMode
+ * @param {number} followZoomLevel
+ * @param {number} followPitch
+ * @param {number} followHeading
+ * @param {number} minZoomLevel
+ * @param {number} maxZoomLevel
+ * @param {CameraBounds} maxBounds
+ */
+interface CameraProps
+  extends Omit<CameraStop, 'type'>,
+    CameraFollowConfig,
+    CameraMinMaxConfig {
+  defaultSettings?: CameraStop;
+  allowUpdates?: boolean;
+  triggerKey?: any;
+  onUserTrackingModeChange?: UserTrackingModeChangeCallback;
+}
 
 interface CameraStop {
   readonly type: 'CameraStop';
-  centerCoordinate: Position;
-  bounds: {
-    ne: Position;
-    sw: Position;
-    paddingLeft?: number; // deprecated
-    paddingRight?: number; // deprecated
-    paddingTop?: number; // deprecated
-    paddingBottom?: number; // deprecated
-  };
+  centerCoordinate?: Position;
+  bounds?: CameraBoundsWithPadding; // With padding for backwards compatibility.
   heading?: number;
   pitch?: number;
   zoomLevel?: number;
-  padding?: {
-    paddingLeft: number;
-    paddingRight: number;
-    paddingTop: number;
-    paddingBottom: number;
-  };
+  padding?: CameraPadding;
   animationDuration?: number;
   animationMode?: AnimationMode;
 }
 
 interface CameraFollowConfig {
-  followUserLocation: boolean;
-  followUserMode?: 'normal' | 'compass' | 'course';
+  followUserLocation?: boolean;
+  followUserMode?: UserTrackingMode;
   followZoomLevel?: number;
   followPitch?: number;
   followHeading?: number;
 }
 
 interface CameraMinMaxConfig {
-  minZoomLevel: number;
-  maxZoomLevel: number;
-  maxBounds: {
+  minZoomLevel?: number;
+  maxZoomLevel?: number;
+  maxBounds?: {
     ne: Position;
     sw: Position;
   };
 }
 
+interface CameraBounds {
+  ne: Position;
+  sw: Position;
+}
+
+interface CameraPadding {
+  paddingLeft: number;
+  paddingRight: number;
+  paddingTop: number;
+  paddingBottom: number;
+}
+
+interface CameraBoundsWithPadding
+  extends CameraBounds,
+    Partial<CameraPadding> {}
+
 interface CameraStops {
   readonly type: 'CameraStops';
   stops: CameraStop[];
 }
 
-/**
- * @param {Position} centerCoordinate
- * @param {TODO} bounds
- * @param {number} heading
- * @param {number} pitch
- * @param {number} zoomLevel
- * @param {TODO} padding
- * @param {number} animationDuration
- * @param {AnimationMode} animationMode
- * @param {boolean} followUserLocation
- * @param {'normal' | 'compass' | 'course'} followUserMode
- * @param {number} followZoomLevel
- * @param {number} followPitch
- * @param {number} followHeading
- * @param {number} minZoomLevel
- * @param {number} maxZoomLevel
- * @param {TODO} maxBounds
- */
-interface CameraProps
-  extends CameraStop,
-    CameraFollowConfig,
-    CameraMinMaxConfig {
-  defaultSettings?: CameraStop;
-  allowUpdates: boolean;
-  triggerKey: any;
-  onUserTrackingModeChange: () => void;
+// Native module types.
+
+type NativeAnimationMode = 'flight' | 'ease' | 'linear' | 'none' | 'move';
+
+interface NativeCameraProps extends CameraFollowConfig {
+  testID?: string;
+  stop: NativeCameraStop | null;
+  defaultStop?: NativeCameraStop | null;
+  minZoomLevel?: number;
+  maxZoomLevel?: number;
+  maxBounds?: string | null;
+  onUserTrackingModeChange?: UserTrackingModeChangeCallback;
+}
+
+interface NativeCameraStop {
+  centerCoordinate?: string;
+  bounds?: string;
+  heading?: number;
+  pitch?: number;
+  zoom?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  duration?: number;
+  mode?: NativeAnimationMode;
 }
 
 /**
@@ -138,141 +185,124 @@ const Camera = memo(
     const camera: React.RefObject<RCTMGLCamera> = useRef(null);
 
     /**
-     * Map camera transitions to fit provided bounds
+     * Map camera transitions to fit provided bounds.
      *
      * @example
      * camera.fitBounds([lng, lat], [lng, lat])
-     * camera.fitBounds([lng, lat], [lng, lat], 20, 1000) // padding for all sides
+     * camera.fitBounds([lng, lat], [lng, lat], 20, 1000)
      * camera.fitBounds([lng, lat], [lng, lat], [verticalPadding, horizontalPadding], 1000)
      * camera.fitBounds([lng, lat], [lng, lat], [top, right, bottom, left], 1000)
      *
-     * @param {Array<Number>} northEastCoordinates - North east coordinate of bound
-     * @param {Array<Number>} southWestCoordinates - South west coordinate of bound
-     * @param {Number=} padding - Camera padding for bound
-     * @param {Number=} animationDuration - Duration of camera animation
-     * @return {void}
+     * @param {Position} ne Northeast coordinate of bounds
+     * @param {Position} sw Southwest coordinate of bounds
+     * @param {number} paddingConfig Camera padding configuration
+     * @param {number} animationDuration Duration of camera animation
      */
-    // const fitBounds = (
-    //   northEastCoordinates: Position,
-    //   southWestCoordinates: Position,
-    //   padding = 0,
-    //   animationDuration = 0.0,
-    // ) => {
-    //   const pad = {
-    //     paddingLeft: 0,
-    //     paddingRight: 0,
-    //     paddingTop: 0,
-    //     paddingBottom: 0,
-    //   };
-
-    //   if (Array.isArray(padding)) {
-    //     if (padding.length === 2) {
-    //       pad.paddingTop = padding[0];
-    //       pad.paddingBottom = padding[0];
-    //       pad.paddingLeft = padding[1];
-    //       pad.paddingRight = padding[1];
-    //     } else if (padding.length === 4) {
-    //       pad.paddingTop = padding[0];
-    //       pad.paddingRight = padding[1];
-    //       pad.paddingBottom = padding[2];
-    //       pad.paddingLeft = padding[3];
-    //     }
-    //   } else {
-    //     pad.paddingLeft = padding;
-    //     pad.paddingRight = padding;
-    //     pad.paddingTop = padding;
-    //     pad.paddingBottom = padding;
-    //   }
-
-    //   return setCamera({
-    //     bounds: {
-    //       ne: northEastCoordinates,
-    //       sw: southWestCoordinates,
-    //     },
-    //     padding: pad,
-    //     animationDuration,
-    //     animationMode: Mode.Ease,
-    //   });
-    // };
+    const fitBounds = (
+      ne: Position,
+      sw: Position,
+      paddingConfig: number | number[] = 0,
+      animationDuration = 0,
+    ) => {
+      let padding = {
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+      };
+
+      if (Array.isArray(paddingConfig)) {
+        if (paddingConfig.length === 2) {
+          padding = {
+            paddingTop: paddingConfig[0],
+            paddingBottom: paddingConfig[0],
+            paddingLeft: paddingConfig[1],
+            paddingRight: paddingConfig[1],
+          };
+        } else if (paddingConfig.length === 4) {
+          padding = {
+            paddingTop: paddingConfig[0],
+            paddingBottom: paddingConfig[2],
+            paddingLeft: paddingConfig[3],
+            paddingRight: paddingConfig[1],
+          };
+        }
+      } else {
+        padding = {
+          paddingTop: paddingConfig,
+          paddingBottom: paddingConfig,
+          paddingLeft: paddingConfig,
+          paddingRight: paddingConfig,
+        };
+      }
+
+      return setCamera({
+        type: 'CameraStop',
+        bounds: {
+          ne,
+          sw,
+        },
+        padding,
+        animationDuration,
+        animationMode: 'easeTo',
+      });
+    };
 
     /**
-     * Map camera will fly to new coordinate
+     * Map camera will fly to new coordinate.
      *
      * @example
      * camera.flyTo([lng, lat])
      * camera.flyTo([lng, lat], 12000)
      *
-     *  @param {Array<Number>} coordinates - Coordinates that map camera will jump too
-     *  @param {Number=} animationDuration - Duration of camera animation
-     *  @return {void}
+     *  @param {Position} centerCoordinate Coordinates that map camera will center around
+     *  @param {number} animationDuration Duration of camera animation
      */
-    // const flyTo = (coordinates: Position, animationDuration = 2000) => {
-    //   return setCamera({
-    //     centerCoordinate: coordinates,
-    //     animationDuration,
-    //     animationMode: Mode.Flight,
-    //   });
-    // };
+    const flyTo = (centerCoordinate: Position, animationDuration = 2000) => {
+      setCamera({
+        type: 'CameraStop',
+        centerCoordinate,
+        animationDuration,
+      });
+    };
 
     /**
-     * Map camera will move to new coordinate at the same zoom level
+     * Map camera will move to new coordinate at the same zoom level.
      *
      * @example
      * camera.moveTo([lng, lat], 200) // eases camera to new location based on duration
      * camera.moveTo([lng, lat]) // snaps camera to new location without any easing
      *
-     *  @param {Array<Number>} coordinates - Coordinates that map camera will move too
-     *  @param {Number=} animationDuration - Duration of camera animation
-     *  @return {void}
+     *  @param {Position} centerCoordinate Coordinates that map camera will move too
+     *  @param {number} animationDuration Duration of camera animation
      */
-    // const moveTo = (coordinates: Position, animationDuration = 0) => {
-    //   return setCamera({
-    //     centerCoordinate: coordinates,
-    //     animationDuration,
-    //   });
-    // };
+    const moveTo = (centerCoordinate: Position, animationDuration = 0) => {
+      setCamera({
+        type: 'CameraStop',
+        centerCoordinate,
+        animationDuration,
+        animationMode: 'easeTo',
+      });
+    };
 
     /**
-     * Map camera will zoom to specified level
+     * Map camera will zoom to specified level.
      *
      * @example
      * camera.zoomTo(16)
      * camera.zoomTo(16, 100)
      *
-     * @param {Number} zoomLevel - Zoom level that the map camera will animate too
-     * @param {Number=} animationDuration - Duration of camera animation
-     * @return {void}
+     * @param {number} zoomLevel Zoom level that the map camera will animate too
+     * @param {number} animationDuration Duration of camera animation
      */
-    // const zoomTo = (zoomLevel: number, animationDuration = 2000) => {
-    //   return setCamera({
-    //     zoomLevel,
-    //     animationDuration,
-    //     animationMode: Mode.Flight,
-    //   });
-    // };
-
-    /**
-     * Map camera will perform updates based on provided config. Advanced use only!
-     *
-     * @example
-     * camera.setCamera({
-     *   centerCoordinate: [lng, lat],
-     *   zoomLevel: 16,
-     *   animationDuration: 2000,
-     * })
-     *
-     * camera.setCamera({
-     *   stops: [
-     *     { pitch: 45, animationDuration: 200 },
-     *     { heading: 180, animationDuration: 300 },
-     *   ]
-     * })
-     *
-     *  @param {Object} config - Camera configuration
-     */
-    // const setCamera = (config: CameraStop) => {
-    //   _setCamera(config);
-    // };
+    const zoomTo = (zoomLevel: number, animationDuration = 2000) => {
+      return setCamera({
+        type: 'CameraStop',
+        zoomLevel,
+        animationDuration,
+        animationMode: 'flyTo',
+      });
+    };
 
     const nativeAnimationMode = useCallback(
       (_mode?: AnimationMode): NativeAnimationMode | undefined => {
@@ -433,6 +463,10 @@ const Camera = memo(
 
     useImperativeHandle(ref, () => ({
       setCamera,
+      fitBounds,
+      flyTo,
+      moveTo,
+      zoomTo,
     }));
 
     return (
@@ -455,32 +489,6 @@ const Camera = memo(
   }),
 );
 
-interface NativeCameraProps extends CameraFollowConfig {
-  testID: string;
-  stop: NativeCameraStop | null;
-  defaultStop: NativeCameraStop | null;
-  minZoomLevel: number;
-  maxZoomLevel: number;
-  maxBounds: string | null;
-  onUserTrackingModeChange: () => void;
-}
-
-interface NativeCameraStop {
-  centerCoordinate?: string;
-  bounds?: string;
-  heading?: number;
-  pitch?: number;
-  zoom?: number;
-  paddingLeft?: number;
-  paddingRight?: number;
-  paddingTop?: number;
-  paddingBottom?: number;
-  duration?: number;
-  mode?: NativeAnimationMode;
-}
-
-type NativeAnimationMode = 'flight' | 'ease' | 'linear' | 'none' | 'move';
-
 const RCTMGLCamera =
   requireNativeComponent<NativeCameraProps>(NATIVE_MODULE_NAME);
 

From 3e0b987977f45a89606d4a2ac531e47239e28d30 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Thu, 28 Apr 2022 10:57:15 -0500
Subject: [PATCH 19/84] Update camera imports and exports

---
 index.d.ts          | 72 ++++++++-------------------------------------
 javascript/index.js |  8 ++++-
 2 files changed, 19 insertions(+), 61 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index b6b5f2e04..29bdcba05 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -240,18 +240,18 @@ declare namespace MapboxGL {
   }
 
   type Padding = number | [number, number] | [number, number, number, number];
-  class Camera extends Component<CameraProps> {
-    fitBounds(
-      northEastCoordinates: GeoJSON.Position,
-      southWestCoordinates: GeoJSON.Position,
-      padding?: Padding,
-      duration?: number,
-    ): void;
-    flyTo(coordinates: GeoJSON.Position, duration?: number): void;
-    moveTo(coordinates: GeoJSON.Position, duration?: number): void;
-    zoomTo(zoomLevel: number, duration?: number): void;
-    setCamera(config: CameraSettings): void;
-  }
+  // class Camera extends Component<CameraProps> {
+  //   fitBounds(
+  //     northEastCoordinates: GeoJSON.Position,
+  //     southWestCoordinates: GeoJSON.Position,
+  //     padding?: Padding,
+  //     duration?: number,
+  //   ): void;
+  //   flyTo(coordinates: GeoJSON.Position, duration?: number): void;
+  //   moveTo(coordinates: GeoJSON.Position, duration?: number): void;
+  //   zoomTo(zoomLevel: number, duration?: number): void;
+  //   setCamera(config: CameraSettings): void;
+  // }
 
   class UserLocation extends Component<UserLocationProps> {}
 
@@ -574,54 +574,6 @@ export interface MapViewProps extends ViewProps {
   onUserTrackingModeChange?: () => void;
 }
 
-export interface CameraProps extends CameraSettings, ViewProps {
-  allowUpdates?: boolean;
-  animationDuration?: number;
-  animationMode?: 'flyTo' | 'easeTo' | 'linearTo' | 'moveTo';
-  defaultSettings?: CameraSettings;
-  minZoomLevel?: number;
-  maxZoomLevel?: number;
-  maxBounds?: { ne: [number, number]; sw: [number, number] };
-  followUserLocation?: boolean;
-  followUserMode?: 'normal' | 'compass' | 'course';
-  followZoomLevel?: number;
-  followPitch?: number;
-  followHeading?: number;
-  triggerKey?: any;
-  alignment?: number[];
-  onUserTrackingModeChange?: (
-    event: MapboxGLEvent<
-      'usertrackingmodechange',
-      {
-        followUserLocation: boolean;
-        followUserMode: 'normal' | 'compass' | 'course' | null;
-      }
-    >,
-  ) => void;
-}
-
-export interface CameraPadding {
-  paddingLeft?: number;
-  paddingRight?: number;
-  paddingTop?: number;
-  paddingBottom?: number;
-}
-
-export interface CameraSettings {
-  centerCoordinate?: GeoJSON.Position;
-  heading?: number;
-  pitch?: number;
-  padding?: CameraPadding;
-  bounds?: CameraPadding & {
-    ne: GeoJSON.Position;
-    sw: GeoJSON.Position;
-  };
-  zoomLevel?: number;
-  animationDuration?: number;
-  animationMode?: 'flyTo' | 'easeTo' | 'linearTo' | 'moveTo';
-  stops?: CameraSettings[];
-}
-
 export interface UserLocationProps {
   androidRenderMode?: 'normal' | 'compass' | 'gps';
   animated?: boolean;
diff --git a/javascript/index.js b/javascript/index.js
index 42c9244f3..22e1dddd4 100644
--- a/javascript/index.js
+++ b/javascript/index.js
@@ -7,7 +7,11 @@ import PointAnnotation from './components/PointAnnotation';
 import Annotation from './components/annotations/Annotation';
 import Callout from './components/Callout';
 import UserLocation from './components/UserLocation';
-import Camera, { UserTrackingModes } from './components/Camera';
+import Camera, {
+  CameraProps,
+  UserTrackingModes,
+  AnimationMode,
+} from './components/Camera';
 import VectorSource from './components/VectorSource';
 import ShapeSource from './components/ShapeSource';
 import RasterSource from './components/RasterSource';
@@ -126,6 +130,8 @@ export {
   Callout,
   UserLocation,
   Camera,
+  CameraProps,
+  AnimationMode,
   Annotation,
   MarkerView,
   VectorSource,

From 7682ee47d363d1883370bfa1914603cfe453d14f Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Thu, 28 Apr 2022 10:58:15 -0500
Subject: [PATCH 20/84] Refactor and add types

---
 example/src/examples/V10/CameraAnimation.tsx | 118 ++++++++++---------
 1 file changed, 60 insertions(+), 58 deletions(-)

diff --git a/example/src/examples/V10/CameraAnimation.tsx b/example/src/examples/V10/CameraAnimation.tsx
index c5d988977..9fdc98010 100644
--- a/example/src/examples/V10/CameraAnimation.tsx
+++ b/example/src/examples/V10/CameraAnimation.tsx
@@ -1,28 +1,20 @@
 import React, { useMemo, useState } from 'react';
-import { Button, SafeAreaView, View } from 'react-native';
-import {
-  MapView,
-  Camera,
-  ShapeSource,
-  CircleLayer,
-  Logger,
-} from '@rnmapbox/maps';
+import { Button, SafeAreaView, StyleSheet, View } from 'react-native';
+import MapboxGL from '@rnmapbox/maps';
+const { MapView, ShapeSource, CircleLayer } = MapboxGL;
 import bbox from '@turf/bbox';
+import { Feature, LineString, Point, Position } from '@turf/helpers';
 import { Text, Divider } from 'react-native-elements';
 
+import { Camera, CameraProps, AnimationMode } from '../../../../javascript';
 import Page from '../common/Page';
 import colors from '../../styles/colors';
 
-Logger.setLogLevel('verbose');
-
-const styles = {
+const styles = StyleSheet.create({
   map: {
     flex: 1,
   },
-  circle: {
-    circleRadius: 6,
-    circleColor: colors.primary.blue,
-  },
+
   sheet: {
     paddingTop: 10,
     paddingHorizontal: 10,
@@ -41,6 +33,13 @@ const styles = {
   fadedText: {
     color: 'gray',
   },
+});
+
+const mapStyles = {
+  circle: {
+    circleRadius: 6,
+    circleColor: colors.primary.blue,
+  },
 };
 
 const zeroPadding = {
@@ -72,76 +71,78 @@ const randPadding = () => {
   };
 };
 
-const toPosition = (coordinate) => {
-  return [coordinate.longitude, coordinate.latitude];
-};
-
-const CameraAnimation = (props) => {
-  const initialCoordinate = {
-    latitude: 40.759211,
-    longitude: -73.984638,
-  };
+const CameraAnimation = (props: any) => {
+  const initialPosition = [-73.984638, 40.759211];
 
-  const [animationMode, setAnimationMode] = useState('moveTo');
-  const [coordinates, setCoordinates] = useState([initialCoordinate]);
+  const [animationMode, setAnimationMode] = useState<AnimationMode>('moveTo');
+  const [positions, setPositions] = useState([initialPosition]);
   const [padding, setPadding] = useState(zeroPadding);
 
   const paddingDisplay = useMemo(() => {
     return `L ${padding.paddingLeft} | R ${padding.paddingRight} | T ${padding.paddingTop} | B ${padding.paddingBottom}`;
   }, [padding]);
 
-  const move = (_animationMode, shouldCreateMultiple) => {
+  const move = (
+    _animationMode: AnimationMode,
+    shouldCreateMultiple: boolean,
+  ) => {
     setAnimationMode(_animationMode);
 
     if (shouldCreateMultiple) {
-      const _centerCoordinate = {
-        latitude: initialCoordinate.latitude + Math.random() * 0.2,
-        longitude: initialCoordinate.longitude + Math.random() * 0.2,
-      };
-      const _coordinates = Array(10)
+      const _centerPosition = [
+        initialPosition[0] + Math.random() * 0.2,
+        initialPosition[1] + Math.random() * 0.2,
+      ];
+      const _positions = Array(10)
         .fill(0)
         .map((_) => {
-          return {
-            latitude: _centerCoordinate.latitude + Math.random() * 0.2,
-            longitude: _centerCoordinate.longitude + Math.random() * 0.2,
-          };
+          return [
+            _centerPosition[0] + Math.random() * 0.2,
+            _centerPosition[1] + Math.random() * 0.2,
+          ];
         });
-      setCoordinates(_coordinates);
+      setPositions(_positions);
     } else {
-      setCoordinates([
-        {
-          latitude: initialCoordinate.latitude + Math.random() * 0.2,
-          longitude: initialCoordinate.longitude + Math.random() * 0.2,
-        },
+      setPositions([
+        [
+          initialPosition[0] + Math.random() * 0.2,
+          initialPosition[1] + Math.random() * 0.2,
+        ],
       ]);
     }
   };
 
-  const features = useMemo(() => {
-    return coordinates.map((p) => {
+  const features = useMemo((): Feature<Point>[] => {
+    return positions.map((p: Position) => {
       return {
         type: 'Feature',
         geometry: {
           type: 'Point',
-          coordinates: toPosition(p),
+          coordinates: p,
         },
+        properties: {},
       };
     });
-  }, [coordinates]);
+  }, [positions]);
 
-  const centerOrBounds = useMemo(() => {
-    if (coordinates.length === 1) {
+  const centerOrBounds = useMemo((): Pick<
+    CameraProps,
+    'centerCoordinate' | 'bounds'
+  > => {
+    if (positions.length === 1) {
       return {
-        centerCoordinate: toPosition(coordinates[0]),
+        centerCoordinate: positions[0],
       };
     } else {
-      const positions = coordinates.map(toPosition);
-      const lineString = {
+      console.log('pos:', positions);
+
+      const lineString: Feature<LineString> = {
         type: 'Feature',
         geometry: {
           type: 'LineString',
           coordinates: positions,
         },
+        properties: {},
       };
       const _bbox = bbox(lineString);
       return {
@@ -151,19 +152,20 @@ const CameraAnimation = (props) => {
         },
       };
     }
-  }, [coordinates]);
+  }, [positions]);
 
   const locationDisplay = useMemo(() => {
-    if (coordinates.length > 1) {
+    if (positions.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);
+    } else if (positions.length === 1) {
+      const position = positions[0];
+      const lon = position[0].toFixed(4);
+      const lat = position[1].toFixed(4);
       return `lon ${lon} | lat ${lat}`;
     }
-  }, [coordinates, centerOrBounds]);
+  }, [positions, centerOrBounds]);
 
   return (
     <Page {...props}>
@@ -182,7 +184,7 @@ const CameraAnimation = (props) => {
           const id = JSON.stringify(f.geometry.coordinates);
           return (
             <ShapeSource key={id} id={`source-${id}`} shape={f}>
-              <CircleLayer id={`layer-${id}`} style={styles.circle} />
+              <CircleLayer id={`layer-${id}`} style={mapStyles.circle} />
             </ShapeSource>
           );
         })}

From 735341207ede5d30c46aec6df59700f302665cdb Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Thu, 28 Apr 2022 11:09:00 -0500
Subject: [PATCH 21/84] Clean up

---
 example/src/examples/V10/CameraAnimation.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/example/src/examples/V10/CameraAnimation.tsx b/example/src/examples/V10/CameraAnimation.tsx
index 9fdc98010..8a0d0ded4 100644
--- a/example/src/examples/V10/CameraAnimation.tsx
+++ b/example/src/examples/V10/CameraAnimation.tsx
@@ -132,6 +132,7 @@ const CameraAnimation = (props: any) => {
     if (positions.length === 1) {
       return {
         centerCoordinate: positions[0],
+        bounds: undefined,
       };
     } else {
       console.log('pos:', positions);
@@ -146,6 +147,7 @@ const CameraAnimation = (props: any) => {
       };
       const _bbox = bbox(lineString);
       return {
+        centerCoordinate: undefined,
         bounds: {
           ne: [_bbox[0], _bbox[1]],
           sw: [_bbox[2], _bbox[3]],
@@ -156,13 +158,13 @@ const CameraAnimation = (props: any) => {
 
   const locationDisplay = useMemo(() => {
     if (positions.length > 1) {
-      const ne = centerOrBounds.bounds?.ne.map((n) => n.toFixed(3));
-      const sw = centerOrBounds.bounds?.sw.map((n) => n.toFixed(3));
+      const ne = centerOrBounds.bounds?.ne.map((n: number) => n.toFixed(3));
+      const sw = centerOrBounds.bounds?.sw.map((n: number) => n.toFixed(3));
       return `ne ${ne} | sw ${sw}`;
     } else if (positions.length === 1) {
-      const position = positions[0];
-      const lon = position[0].toFixed(4);
-      const lat = position[1].toFixed(4);
+      const [first] = positions;
+      const lon = first[0].toFixed(4);
+      const lat = first[1].toFixed(4);
       return `lon ${lon} | lat ${lat}`;
     }
   }, [positions, centerOrBounds]);

From 7f1df7d5514a46b374fb2d001ef2e777ce58692d Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Thu, 28 Apr 2022 11:09:29 -0500
Subject: [PATCH 22/84] Remove log

---
 example/src/examples/V10/CameraAnimation.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/example/src/examples/V10/CameraAnimation.tsx b/example/src/examples/V10/CameraAnimation.tsx
index 8a0d0ded4..bb04fd256 100644
--- a/example/src/examples/V10/CameraAnimation.tsx
+++ b/example/src/examples/V10/CameraAnimation.tsx
@@ -135,8 +135,6 @@ const CameraAnimation = (props: any) => {
         bounds: undefined,
       };
     } else {
-      console.log('pos:', positions);
-
       const lineString: Feature<LineString> = {
         type: 'Feature',
         geometry: {

From 1c3297de3d15c18bf2c355215c92d499abdbf8f0 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Thu, 28 Apr 2022 13:15:32 -0500
Subject: [PATCH 23/84] Provide camera ref types and comments

---
 javascript/components/Camera.tsx | 165 ++++++++++++++++++++-----------
 1 file changed, 106 insertions(+), 59 deletions(-)

diff --git a/javascript/components/Camera.tsx b/javascript/components/Camera.tsx
index 0bda6336d..df6dec4bb 100644
--- a/javascript/components/Camera.tsx
+++ b/javascript/components/Camera.tsx
@@ -75,7 +75,7 @@ interface CameraProps
 }
 
 interface CameraStop {
-  readonly type: 'CameraStop';
+  readonly type?: 'CameraStop';
   centerCoordinate?: Position;
   bounds?: CameraBoundsWithPadding; // With padding for backwards compatibility.
   heading?: number;
@@ -152,11 +152,93 @@ interface NativeCameraStop {
   mode?: NativeAnimationMode;
 }
 
+export interface CameraRef {
+  /**
+   * Sets any camera properties, with default fallbacks if unspecified.
+   */
+  setCamera: (config: CameraStop | CameraStops) => void;
+
+  /**
+   * Set the camera position to enclose the provided bounds, with optional
+   * padding and duration.
+   *
+   * @example
+   * camera.fitBounds([lon, lat], [lon, lat]);
+   * camera.fitBounds([lon, lat], [lon, lat], 20, 1000);
+   * camera.fitBounds([lon, lat], [lon, lat], [verticalPadding, horizontalPadding], 1000);
+   * camera.fitBounds([lon, lat], [lon, lat], [top, right, bottom, left], 1000);
+   *
+   * @param {Position} ne Northeast coordinate of bounding box
+   * @param {Position} sw Southwest coordinate of bounding box
+   * @param {number} paddingConfig
+   * @param {number} animationDuration
+   */
+  fitBounds: (
+    ne: Position,
+    sw: Position,
+    paddingConfig?: number | number[],
+    animationDuration?: number,
+  ) => void;
+
+  /**
+   * Sets the camera to center around the provided coordinate using a realistic 'travel'
+   * animation, with optional duration.
+   *
+   * @example
+   * camera.flyTo([lon, lat]);
+   * camera.flyTo([lon, lat], 12000);
+   *
+   *  @param {Position} centerCoordinate
+   *  @param {number} animationDuration
+   */
+  flyTo: (centerCoordinate: Position, animationDuration?: number) => void;
+
+  /**
+   * Sets the camera to center around the provided coordinate, with optional duration.
+   *
+   * @example
+   * camera.moveTo([lon, lat], 200);
+   * camera.moveTo([lon, lat]);
+   *
+   *  @param {Position} centerCoordinate
+   *  @param {number} animationDuration
+   */
+  moveTo: (centerCoordinate: Position, animationDuration?: number) => void;
+
+  /**
+   * Zooms the camera to the provided level, with optional duration.
+   *
+   * @example
+   * camera.zoomTo(16);
+   * camera.zoomTo(16, 100);
+   *
+   * @param {number} zoomLevel
+   * @param {number} animationDuration
+   */
+  zoomTo: (zoomLevel: number, animationDuration?: number) => void;
+}
+
 /**
  * @param {CameraProps} props
+ *
+ * @example
+ * To use imperative methods, pass in a ref object:
+ * ```
+ * const camera = useRef<CameraRef>(null);
+ *
+ * useEffect(() => {
+ *   camera.current?.setCamera({
+ *     centerCoordinate: [lon, lat],
+ *   });
+ * }, []);
+ *
+ * return (
+ *   <Camera ref={camera} />
+ * );
+ * ```
  */
 const Camera = memo(
-  forwardRef((props: CameraProps, ref) => {
+  forwardRef((props: CameraProps, ref: React.ForwardedRef<CameraRef>) => {
     const {
       centerCoordinate,
       bounds,
@@ -184,24 +266,10 @@ const Camera = memo(
     // @ts-ignore
     const camera: React.RefObject<RCTMGLCamera> = useRef(null);
 
-    /**
-     * Map camera transitions to fit provided bounds.
-     *
-     * @example
-     * camera.fitBounds([lng, lat], [lng, lat])
-     * camera.fitBounds([lng, lat], [lng, lat], 20, 1000)
-     * camera.fitBounds([lng, lat], [lng, lat], [verticalPadding, horizontalPadding], 1000)
-     * camera.fitBounds([lng, lat], [lng, lat], [top, right, bottom, left], 1000)
-     *
-     * @param {Position} ne Northeast coordinate of bounds
-     * @param {Position} sw Southwest coordinate of bounds
-     * @param {number} paddingConfig Camera padding configuration
-     * @param {number} animationDuration Duration of camera animation
-     */
-    const fitBounds = (
-      ne: Position,
-      sw: Position,
-      paddingConfig: number | number[] = 0,
+    const fitBounds: CameraRef['fitBounds'] = (
+      ne,
+      sw,
+      paddingConfig = 0,
       animationDuration = 0,
     ) => {
       let padding = {
@@ -236,7 +304,7 @@ const Camera = memo(
         };
       }
 
-      return setCamera({
+      setCamera({
         type: 'CameraStop',
         bounds: {
           ne,
@@ -248,17 +316,10 @@ const Camera = memo(
       });
     };
 
-    /**
-     * Map camera will fly to new coordinate.
-     *
-     * @example
-     * camera.flyTo([lng, lat])
-     * camera.flyTo([lng, lat], 12000)
-     *
-     *  @param {Position} centerCoordinate Coordinates that map camera will center around
-     *  @param {number} animationDuration Duration of camera animation
-     */
-    const flyTo = (centerCoordinate: Position, animationDuration = 2000) => {
+    const flyTo: CameraRef['flyTo'] = (
+      centerCoordinate,
+      animationDuration = 2000,
+    ) => {
       setCamera({
         type: 'CameraStop',
         centerCoordinate,
@@ -266,17 +327,10 @@ const Camera = memo(
       });
     };
 
-    /**
-     * Map camera will move to new coordinate at the same zoom level.
-     *
-     * @example
-     * camera.moveTo([lng, lat], 200) // eases camera to new location based on duration
-     * camera.moveTo([lng, lat]) // snaps camera to new location without any easing
-     *
-     *  @param {Position} centerCoordinate Coordinates that map camera will move too
-     *  @param {number} animationDuration Duration of camera animation
-     */
-    const moveTo = (centerCoordinate: Position, animationDuration = 0) => {
+    const moveTo: CameraRef['moveTo'] = (
+      centerCoordinate,
+      animationDuration = 0,
+    ) => {
       setCamera({
         type: 'CameraStop',
         centerCoordinate,
@@ -285,18 +339,11 @@ const Camera = memo(
       });
     };
 
-    /**
-     * Map camera will zoom to specified level.
-     *
-     * @example
-     * camera.zoomTo(16)
-     * camera.zoomTo(16, 100)
-     *
-     * @param {number} zoomLevel Zoom level that the map camera will animate too
-     * @param {number} animationDuration Duration of camera animation
-     */
-    const zoomTo = (zoomLevel: number, animationDuration = 2000) => {
-      return setCamera({
+    const zoomTo: CameraRef['zoomTo'] = (
+      zoomLevel,
+      animationDuration = 2000,
+    ) => {
+      setCamera({
         type: 'CameraStop',
         zoomLevel,
         animationDuration,
@@ -428,12 +475,12 @@ const Camera = memo(
       );
     }, [maxBounds]);
 
-    const setCamera = useCallback(
-      (config: CameraStop | CameraStops) => {
+    const setCamera: CameraRef['setCamera'] = useCallback(
+      (config) => {
         if (!config.type)
+          // @ts-expect-error The compiler doesn't understand that the `config` union type is guaranteed
+          // to be an object type.
           config = {
-            // @ts-expect-error The compiler doesn't understand that the `config` union type is guaranteed
-            // to be an object type
             ...config,
             // @ts-expect-error Allows JS files to pass in an invalid config (lacking the `type` property),
             // which would raise a compilation error in TS files.

From 6c4decd8bd4735475ba9ee4d5b49ec9197a70264 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Thu, 28 Apr 2022 13:16:00 -0500
Subject: [PATCH 24/84] Fix zoom force unwrap potential crash

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

diff --git a/ios/RCTMGL-v10/RCTMGLCamera.swift b/ios/RCTMGL-v10/RCTMGLCamera.swift
index 841219870..2a3fae0be 100644
--- a/ios/RCTMGL-v10/RCTMGLCamera.swift
+++ b/ios/RCTMGL-v10/RCTMGLCamera.swift
@@ -263,11 +263,11 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
       return .flight
     }()
     
-    if let z1 = minZoomLevel, let z2 = CGFloat(exactly: z1), zoom! < z2 {
+    if let z1 = minZoomLevel, let z2 = CGFloat(exactly: z1), let zCurrent = zoom, zCurrent < z2 {
       zoom = z2
     }
 
-    if let z1 = maxZoomLevel, let z2 = CGFloat(exactly: z1), zoom! > z2 {
+    if let z1 = maxZoomLevel, let z2 = CGFloat(exactly: z1), let zCurrent = zoom, zCurrent > z2 {
       zoom = z2
     }
 

From 18c974e78ab8a7d5217dbb1b0d729514cff8e2fe Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Thu, 28 Apr 2022 13:16:38 -0500
Subject: [PATCH 25/84] Add ref to exports

---
 javascript/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/javascript/index.js b/javascript/index.js
index 22e1dddd4..55d931a90 100644
--- a/javascript/index.js
+++ b/javascript/index.js
@@ -9,6 +9,7 @@ import Callout from './components/Callout';
 import UserLocation from './components/UserLocation';
 import Camera, {
   CameraProps,
+  CameraRef,
   UserTrackingModes,
   AnimationMode,
 } from './components/Camera';
@@ -130,6 +131,7 @@ export {
   Callout,
   UserLocation,
   Camera,
+  CameraRef,
   CameraProps,
   AnimationMode,
   Annotation,

From 7429ff89667de8b8d1970bf341ec6f51e1f8c330 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Thu, 28 Apr 2022 13:17:00 -0500
Subject: [PATCH 26/84] Expand to include imperative methods

---
 example/src/examples/V10/CameraAnimation.tsx | 234 +++++++++++++------
 1 file changed, 158 insertions(+), 76 deletions(-)

diff --git a/example/src/examples/V10/CameraAnimation.tsx b/example/src/examples/V10/CameraAnimation.tsx
index bb04fd256..18c5ea7fc 100644
--- a/example/src/examples/V10/CameraAnimation.tsx
+++ b/example/src/examples/V10/CameraAnimation.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { Button, SafeAreaView, StyleSheet, View } from 'react-native';
 import MapboxGL from '@rnmapbox/maps';
 const { MapView, ShapeSource, CircleLayer } = MapboxGL;
@@ -6,7 +6,12 @@ import bbox from '@turf/bbox';
 import { Feature, LineString, Point, Position } from '@turf/helpers';
 import { Text, Divider } from 'react-native-elements';
 
-import { Camera, CameraProps, AnimationMode } from '../../../../javascript';
+import {
+  Camera,
+  CameraRef,
+  CameraProps,
+  AnimationMode,
+} from '../../../../javascript';
 import Page from '../common/Page';
 import colors from '../../styles/colors';
 
@@ -42,6 +47,7 @@ const mapStyles = {
   },
 };
 
+const initialPosition = [-73.984638, 40.759211];
 const zeroPadding = {
   paddingTop: 0,
   paddingBottom: 0,
@@ -57,6 +63,10 @@ const evenPadding = {
 const minZoomLevel = 8;
 const maxZoomLevel = 16;
 
+const randPosition = (around: Position): Position => {
+  return [around[0] + Math.random() * 0.2, around[1] + Math.random() * 0.2];
+};
+
 const randPadding = () => {
   const randNum = () => {
     const items = [0, 150, 300];
@@ -72,7 +82,10 @@ const randPadding = () => {
 };
 
 const CameraAnimation = (props: any) => {
-  const initialPosition = [-73.984638, 40.759211];
+  const [inputKind, setInputKind] = useState<'declarative' | 'imperative'>(
+    'declarative',
+  );
+  const camera = useRef<CameraRef>(null);
 
   const [animationMode, setAnimationMode] = useState<AnimationMode>('moveTo');
   const [positions, setPositions] = useState([initialPosition]);
@@ -89,26 +102,13 @@ const CameraAnimation = (props: any) => {
     setAnimationMode(_animationMode);
 
     if (shouldCreateMultiple) {
-      const _centerPosition = [
-        initialPosition[0] + Math.random() * 0.2,
-        initialPosition[1] + Math.random() * 0.2,
-      ];
+      const _centerPosition = randPosition(initialPosition);
       const _positions = Array(10)
         .fill(0)
-        .map((_) => {
-          return [
-            _centerPosition[0] + Math.random() * 0.2,
-            _centerPosition[1] + Math.random() * 0.2,
-          ];
-        });
+        .map((_) => randPosition(_centerPosition));
       setPositions(_positions);
     } else {
-      setPositions([
-        [
-          initialPosition[0] + Math.random() * 0.2,
-          initialPosition[1] + Math.random() * 0.2,
-        ],
-      ]);
+      setPositions([randPosition(initialPosition)]);
     }
   };
 
@@ -167,80 +167,162 @@ const CameraAnimation = (props: any) => {
     }
   }, [positions, centerOrBounds]);
 
+  const declarativeContent = () => {
+    return (
+      <View>
+        <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="Zero"
+            onPress={() => {
+              setPadding(zeroPadding);
+            }}
+          />
+          <Button
+            title="Even"
+            onPress={() => {
+              setPadding(evenPadding);
+            }}
+          />
+          <Button
+            title="Random"
+            onPress={() => {
+              setPadding(randPadding());
+            }}
+          />
+        </View>
+
+        <Divider style={styles.divider} />
+
+        <Text style={styles.fadedText}>info</Text>
+        <Text>position: {locationDisplay}</Text>
+        <Text>padding: {paddingDisplay}</Text>
+      </View>
+    );
+  };
+
+  const imperativeContent = () => {
+    const setCam = camera.current?.setCamera;
+    const zoomTo = camera.current?.zoomTo;
+
+    return (
+      <View>
+        <Text style={styles.fadedText}>setCamera</Text>
+        <Button
+          title="setCamera(centerCoordinate: <random>)"
+          onPress={() =>
+            setCam?.({
+              centerCoordinate: randPosition(initialPosition),
+            })
+          }
+        />
+        <Button
+          title="setCamera(centerCoordinate: <random>, duration: 1500)"
+          onPress={() =>
+            setCam?.({
+              centerCoordinate: randPosition(initialPosition),
+              animationDuration: 1500,
+            })
+          }
+        />
+        <Button
+          title="setCamera(centerCoordinate: <random>, animationMode: 'easeTo')"
+          onPress={() =>
+            setCam?.({
+              centerCoordinate: randPosition(initialPosition),
+              animationMode: 'easeTo',
+            })
+          }
+        />
+
+        <Text style={styles.fadedText}>zoomTo</Text>
+        <Button
+          title="zoomTo(<random>)"
+          onPress={() => {
+            zoomTo?.(Math.random() * maxZoomLevel);
+          }}
+        />
+      </View>
+    );
+  };
+
+  const content = () => {
+    return inputKind === 'declarative'
+      ? declarativeContent()
+      : imperativeContent();
+  };
+
   return (
     <Page {...props}>
       <MapView style={styles.map}>
         <Camera
+          ref={camera}
           {...centerOrBounds}
           zoomLevel={12}
           minZoomLevel={minZoomLevel}
           maxZoomLevel={maxZoomLevel}
           padding={padding}
-          animationDuration={800}
+          animationDuration={1000}
           animationMode={animationMode}
         />
 
-        {features.map((f) => {
-          const id = JSON.stringify(f.geometry.coordinates);
-          return (
-            <ShapeSource key={id} id={`source-${id}`} shape={f}>
-              <CircleLayer id={`layer-${id}`} style={mapStyles.circle} />
-            </ShapeSource>
-          );
-        })}
+        {inputKind === 'declarative' &&
+          features.map((f) => {
+            const id = JSON.stringify(f.geometry.coordinates);
+            return (
+              <ShapeSource key={id} id={`source-${id}`} shape={f}>
+                <CircleLayer id={`layer-${id}`} style={mapStyles.circle} />
+              </ShapeSource>
+            );
+          })}
       </MapView>
 
       <SafeAreaView>
         <View style={styles.sheet}>
-          <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="Zero"
-                onPress={() => {
-                  setPadding(zeroPadding);
-                }}
-              />
-              <Button
-                title="Even"
-                onPress={() => {
-                  setPadding(evenPadding);
-                }}
-              />
-              <Button
-                title="Random"
-                onPress={() => {
-                  setPadding(randPadding());
-                }}
-              />
-            </View>
-
-            <Divider style={styles.divider} />
-
-            <Text style={styles.fadedText}>info</Text>
-            <Text>position: {locationDisplay}</Text>
-            <Text>padding: {paddingDisplay}</Text>
+          <View style={styles.buttonRow}>
+            <Button
+              title="declarative"
+              color={
+                inputKind === 'declarative'
+                  ? colors.primary.pink
+                  : colors.primary.gray
+              }
+              onPress={() => setInputKind('declarative')}
+            />
+            <Button
+              title="imperative"
+              color={
+                inputKind === 'imperative'
+                  ? colors.primary.pink
+                  : colors.primary.gray
+              }
+              onPress={() => setInputKind('imperative')}
+            />
           </View>
+
+          <Divider style={styles.divider} />
+
+          <View style={styles.content}>{content()}</View>
         </View>
       </SafeAreaView>
     </Page>

From 84a54699b5630944c5030ed737abfa53a60259be Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Thu, 28 Apr 2022 15:15:20 -0500
Subject: [PATCH 27/84] Convert to typescript, simplify export shape, alter
 camera type exports

---
 javascript/{index.js => index.ts} | 120 +++++++++++++-----------------
 package.json                      |   8 +-
 2 files changed, 58 insertions(+), 70 deletions(-)
 rename javascript/{index.js => index.ts} (63%)

diff --git a/javascript/index.js b/javascript/index.ts
similarity index 63%
rename from javascript/index.js
rename to javascript/index.ts
index 55d931a90..8a9a9ea5a 100644
--- a/javascript/index.js
+++ b/javascript/index.ts
@@ -34,7 +34,7 @@ import offlineManager from './modules/offline/offlineManager';
 import snapshotManager from './modules/snapshot/snapshotManager';
 import MarkerView from './components/MarkerView';
 import Animated from './utils/animated/Animated';
-import AnimatedMapPoint from './utils/animated/AnimatedPoint';
+import AnimatedPoint from './utils/animated/AnimatedPoint';
 import AnimatedShape from './utils/animated/AnimatedShape';
 import AnimatedCoordinatesArray from './utils/animated/AnimatedCoordinatesArray';
 import AnimatedExtractCoordinateFromArray from './utils/animated/AnimatedExtractCoordinateFromArray';
@@ -42,10 +42,7 @@ import AnimatedRouteCoordinatesArray from './utils/animated/AnimatedRouteCoordin
 import Style from './components/Style';
 import Logger from './utils/Logger';
 
-const MapboxGL = { ...NativeModules.MGLModule };
-
-// static methods
-MapboxGL.requestAndroidLocationPermissions = async function () {
+const requestAndroidLocationPermissions = async function () {
   if (isAndroid()) {
     const res = await PermissionsAndroid.requestMultiple([
       PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
@@ -58,6 +55,7 @@ MapboxGL.requestAndroidLocationPermissions = async function () {
 
     const permissions = Object.keys(res);
     for (const permission of permissions) {
+      // @ts-expect-error TODO: Use Android permissions type.
       if (res[permission] === PermissionsAndroid.RESULTS.GRANTED) {
         return true;
       }
@@ -69,79 +67,65 @@ MapboxGL.requestAndroidLocationPermissions = async function () {
   throw new Error('You should only call this method on Android!');
 };
 
-MapboxGL.UserTrackingModes = UserTrackingModes;
-
-// components
-MapboxGL.MapView = MapView;
-MapboxGL.Light = Light;
-MapboxGL.PointAnnotation = PointAnnotation;
-MapboxGL.Callout = Callout;
-MapboxGL.UserLocation = UserLocation;
-MapboxGL.Camera = Camera;
-MapboxGL.Style = Style;
-
-// annotations
-MapboxGL.Annotation = Annotation;
-MapboxGL.MarkerView = MarkerView;
-
-// sources
-MapboxGL.VectorSource = VectorSource;
-MapboxGL.ShapeSource = ShapeSource;
-MapboxGL.RasterSource = RasterSource;
-MapboxGL.ImageSource = ImageSource;
-MapboxGL.Images = Images;
-MapboxGL.RasterDemSource = RasterDemSource;
-
-// layers
-MapboxGL.FillLayer = FillLayer;
-MapboxGL.FillExtrusionLayer = FillExtrusionLayer;
-MapboxGL.HeatmapLayer = HeatmapLayer;
-MapboxGL.LineLayer = LineLayer;
-MapboxGL.CircleLayer = CircleLayer;
-MapboxGL.SkyLayer = SkyLayer;
-MapboxGL.SymbolLayer = SymbolLayer;
-MapboxGL.RasterLayer = RasterLayer;
-MapboxGL.BackgroundLayer = BackgroundLayer;
-
-MapboxGL.Terrain = Terrain;
-
-// modules
-MapboxGL.locationManager = locationManager;
-MapboxGL.offlineManager = offlineManager;
-MapboxGL.snapshotManager = snapshotManager;
-
-// animated
-MapboxGL.Animated = Animated;
-
-// utils
-MapboxGL.AnimatedPoint = AnimatedMapPoint;
-MapboxGL.AnimatedCoordinatesArray = AnimatedCoordinatesArray;
-MapboxGL.AnimatedExtractCoordinateFromArray =
-  AnimatedExtractCoordinateFromArray;
-MapboxGL.AnimatedRouteCoordinatesArray = AnimatedRouteCoordinatesArray;
-MapboxGL.AnimatedShape = AnimatedShape;
-MapboxGL.Logger = Logger;
-
-const { LineJoin } = MapboxGL;
+const MapboxGL: Record<string, any> = {
+  ...NativeModules.MGLModule,
+  requestAndroidLocationPermissions,
+  UserTrackingModes,
+  MapView,
+  Light,
+  PointAnnotation,
+  Callout,
+  UserLocation,
+  Camera,
+  Style,
+  Annotation,
+  MarkerView,
+  VectorSource,
+  ShapeSource,
+  RasterSource,
+  ImageSource,
+  Images,
+  RasterDemSource,
+  FillLayer,
+  FillExtrusionLayer,
+  HeatmapLayer,
+  LineLayer,
+  CircleLayer,
+  SkyLayer,
+  SymbolLayer,
+  RasterLayer,
+  BackgroundLayer,
+  Terrain,
+  locationManager,
+  offlineManager,
+  snapshotManager,
+  Animated,
+  AnimatedPoint,
+  AnimatedCoordinatesArray,
+  AnimatedExtractCoordinateFromArray,
+  AnimatedRouteCoordinatesArray,
+  AnimatedShape,
+  Logger,
+};
 
 export {
+  requestAndroidLocationPermissions,
+  UserTrackingModes,
   MapView,
   Light,
   PointAnnotation,
   Callout,
   UserLocation,
   Camera,
-  CameraRef,
-  CameraProps,
-  AnimationMode,
+  Style,
   Annotation,
   MarkerView,
   VectorSource,
   ShapeSource,
   RasterSource,
-  RasterDemSource,
   ImageSource,
   Images,
+  RasterDemSource,
   FillLayer,
   FillExtrusionLayer,
   HeatmapLayer,
@@ -155,13 +139,15 @@ export {
   locationManager,
   offlineManager,
   snapshotManager,
-  AnimatedMapPoint,
+  Animated,
+  AnimatedPoint,
   AnimatedCoordinatesArray,
+  AnimatedExtractCoordinateFromArray,
+  AnimatedRouteCoordinatesArray,
   AnimatedShape,
-  Animated,
-  LineJoin,
   Logger,
-  Style,
 };
 
+export type { CameraProps, CameraRef, AnimationMode };
+
 export default MapboxGL;
diff --git a/package.json b/package.json
index 27f282a91..f15251f84 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "access": "public"
   },
   "author": "React Native Mapbox Team",
-  "main": "./javascript/index.js",
+  "main": "./javascript/index.ts",
   "keywords": [
     "gl",
     "ios",
@@ -85,7 +85,9 @@
   "jest": {
     "preset": "react-native",
     "collectCoverageFrom": [
-      "javascript/**/*.js"
+      "javascript/**/*.js",
+      "javascript/**/*.ts",
+      "javascript/**/*.tsx"
     ],
     "setupFiles": [
       "./setup-jest.js",
@@ -105,4 +107,4 @@
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": "eslint --fix"
   }
-}
+}
\ No newline at end of file

From bfe8dcff1f64fee5c31426bdf24dc2f217330809 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Thu, 28 Apr 2022 15:16:10 -0500
Subject: [PATCH 28/84] Export prop types

---
 javascript/components/Camera.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/javascript/components/Camera.tsx b/javascript/components/Camera.tsx
index df6dec4bb..840808e92 100644
--- a/javascript/components/Camera.tsx
+++ b/javascript/components/Camera.tsx
@@ -64,7 +64,7 @@ type UserTrackingModeChangeCallback = (
  * @param {number} maxZoomLevel
  * @param {CameraBounds} maxBounds
  */
-interface CameraProps
+export interface CameraProps
   extends Omit<CameraStop, 'type'>,
     CameraFollowConfig,
     CameraMinMaxConfig {

From 34072913c7d5ee675f86df26acb33a8186e6c44a Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Thu, 28 Apr 2022 15:16:40 -0500
Subject: [PATCH 29/84] Use updated import shape

---
 example/src/examples/V10/CameraAnimation.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/example/src/examples/V10/CameraAnimation.tsx b/example/src/examples/V10/CameraAnimation.tsx
index 18c5ea7fc..037ca8ce4 100644
--- a/example/src/examples/V10/CameraAnimation.tsx
+++ b/example/src/examples/V10/CameraAnimation.tsx
@@ -1,7 +1,6 @@
 import React, { useMemo, useRef, useState } from 'react';
 import { Button, SafeAreaView, StyleSheet, View } from 'react-native';
 import MapboxGL from '@rnmapbox/maps';
-const { MapView, ShapeSource, CircleLayer } = MapboxGL;
 import bbox from '@turf/bbox';
 import { Feature, LineString, Point, Position } from '@turf/helpers';
 import { Text, Divider } from 'react-native-elements';
@@ -274,7 +273,7 @@ const CameraAnimation = (props: any) => {
 
   return (
     <Page {...props}>
-      <MapView style={styles.map}>
+      <MapboxGL.MapView style={styles.map}>
         <Camera
           ref={camera}
           {...centerOrBounds}
@@ -290,12 +289,15 @@ const CameraAnimation = (props: any) => {
           features.map((f) => {
             const id = JSON.stringify(f.geometry.coordinates);
             return (
-              <ShapeSource key={id} id={`source-${id}`} shape={f}>
-                <CircleLayer id={`layer-${id}`} style={mapStyles.circle} />
-              </ShapeSource>
+              <MapboxGL.ShapeSource key={id} id={`source-${id}`} shape={f}>
+                <MapboxGL.CircleLayer
+                  id={`layer-${id}`}
+                  style={mapStyles.circle}
+                />
+              </MapboxGL.ShapeSource>
             );
           })}
-      </MapView>
+      </MapboxGL.MapView>
 
       <SafeAreaView>
         <View style={styles.sheet}>

From 21e9fa9d52897b9f15b58fe42d2be4a47216f53b Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Thu, 28 Apr 2022 16:05:54 -0500
Subject: [PATCH 30/84] Cleanup

---
 index.d.ts          | 14 +-------------
 javascript/index.ts |  2 +-
 2 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 29bdcba05..96887d070 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,4 +1,4 @@
-declare module 'react-native-mapbox-gl__maps';
+declare module 'rnmapbox__maps';
 
 import { Component, ReactNode, SyntheticEvent } from 'react';
 import {
@@ -240,18 +240,6 @@ declare namespace MapboxGL {
   }
 
   type Padding = number | [number, number] | [number, number, number, number];
-  // class Camera extends Component<CameraProps> {
-  //   fitBounds(
-  //     northEastCoordinates: GeoJSON.Position,
-  //     southWestCoordinates: GeoJSON.Position,
-  //     padding?: Padding,
-  //     duration?: number,
-  //   ): void;
-  //   flyTo(coordinates: GeoJSON.Position, duration?: number): void;
-  //   moveTo(coordinates: GeoJSON.Position, duration?: number): void;
-  //   zoomTo(zoomLevel: number, duration?: number): void;
-  //   setCamera(config: CameraSettings): void;
-  // }
 
   class UserLocation extends Component<UserLocationProps> {}
 
diff --git a/javascript/index.ts b/javascript/index.ts
index 8a9a9ea5a..6c716e732 100644
--- a/javascript/index.ts
+++ b/javascript/index.ts
@@ -67,7 +67,7 @@ const requestAndroidLocationPermissions = async function () {
   throw new Error('You should only call this method on Android!');
 };
 
-const MapboxGL: Record<string, any> = {
+const MapboxGL = {
   ...NativeModules.MGLModule,
   requestAndroidLocationPermissions,
   UserTrackingModes,

From ea8a675c2c93f4fe345340f166fc3e0854bd354f Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Thu, 28 Apr 2022 16:49:33 -0500
Subject: [PATCH 31/84] Refactor index and definitions files to correctly
 export all types

---
 .github/pull_request_template.md             |   2 +-
 CONTRIBUTING.md                              |   9 +-
 index.d.ts => definitions.d.ts               |   0
 example/src/examples/V10/CameraAnimation.tsx |  14 +-
 index.ts                                     | 245 +++++++++++++++++++
 javascript/index.ts                          | 153 ------------
 package.json                                 |   2 +-
 scripts/autogenerate.js                      |   8 +-
 tsconfig.json                                |  38 +--
 9 files changed, 285 insertions(+), 186 deletions(-)
 rename index.d.ts => definitions.d.ts (100%)
 create mode 100644 index.ts
 delete mode 100644 javascript/index.ts

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 058d6e1f5..6ae4f822f 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -20,7 +20,7 @@ Added `your feature` that allows ...
 - [ ] I have tested this on a device/simulator for each compatible OS
 - [ ] I updated the documentation with running `yarn generate` in the root folder
 - [ ] I mentioned this change in `CHANGELOG.md`
-- [ ] I updated the typings files (`index.d.ts`)
+- [ ] I updated the typings files (`definitions.d.ts`)
 - [ ] I added/ updated a sample (`/example`)
 
 ## Screenshot OR Video
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 26d623d24..4acad5d3f 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,30 +1,33 @@
 # Contributing
 
 ## Setup for creating pull requests
+
 - Fork this project
 - In your fork, create a branch, for example: `fix/camera-update`
 - Add your changes
 - Push and open a PR with your branch
 
 ## Testing my changes
+
 The metro bundler under `/example` is set up to use the libraries files under root.  
 Which means, when you change something within `javascript/components/UserLocation.js`  
 it will be reflected in any scene in example that uses that component.
 
 ## Best practices for PR's
+
 - If you add a feature, make sure you add it to the documentation
-- If you add an objective-c or java method, make sure you update the declaration file: `index.d.ts`.
+- If you add an objective-c or java method, make sure you update the declaration file: `definitions.d.ts`.
 - Make sure to use small concise commits
 - Use meaningful commit messages
 - Make sure to update/ add new tests for your changes
 - If you add a new feature make sure to add a scene in `/example` for others to see/ test it
 
 ## Documentation
+
 Documentation is generated from code blocks and comments.  
 It will be auto-generated when you commit changes.  
 If any changes are generated from your edits, the changed files will need to be added using `git add` before attempting the commit again.  
-To manually generate the changes, run `npm run generate`.  
+To manually generate the changes, run `npm run generate`.
 
 Notice, that changing the documentation in the individual <COMPONENT>.md within `/docs` will not suffice.  
 The correct way is the above described
- 
diff --git a/index.d.ts b/definitions.d.ts
similarity index 100%
rename from index.d.ts
rename to definitions.d.ts
diff --git a/example/src/examples/V10/CameraAnimation.tsx b/example/src/examples/V10/CameraAnimation.tsx
index 037ca8ce4..616e7eaa3 100644
--- a/example/src/examples/V10/CameraAnimation.tsx
+++ b/example/src/examples/V10/CameraAnimation.tsx
@@ -1,16 +1,14 @@
 import React, { useMemo, useRef, useState } from 'react';
 import { Button, SafeAreaView, StyleSheet, View } from 'react-native';
-import MapboxGL from '@rnmapbox/maps';
+import MapboxGL, {
+  CameraProps,
+  AnimationMode,
+  CameraRef,
+} from '@rnmapbox/maps';
 import bbox from '@turf/bbox';
 import { Feature, LineString, Point, Position } from '@turf/helpers';
 import { Text, Divider } from 'react-native-elements';
 
-import {
-  Camera,
-  CameraRef,
-  CameraProps,
-  AnimationMode,
-} from '../../../../javascript';
 import Page from '../common/Page';
 import colors from '../../styles/colors';
 
@@ -274,7 +272,7 @@ const CameraAnimation = (props: any) => {
   return (
     <Page {...props}>
       <MapboxGL.MapView style={styles.map}>
-        <Camera
+        <MapboxGL.Camera
           ref={camera}
           {...centerOrBounds}
           zoomLevel={12}
diff --git a/index.ts b/index.ts
new file mode 100644
index 000000000..66c9c8782
--- /dev/null
+++ b/index.ts
@@ -0,0 +1,245 @@
+import { NativeModules, PermissionsAndroid } from 'react-native';
+import {
+  Expression,
+  MapboxGLEvent,
+  OnPressEvent,
+  OrnamentPosition,
+  WithExpression,
+  TextVariableAnchorValues,
+  MarkerViewProps,
+  RegionPayload,
+  MapState,
+  MapViewProps,
+  UserLocationProps,
+  LightStyle,
+  Transition,
+  BackgroundLayerStyle,
+  CircleLayerStyle,
+  FillExtrusionLayerStyle,
+  FillLayerStyle,
+  LineLayerStyle,
+  RasterLayerStyle,
+  SymbolLayerStyle,
+  HeatmapLayerStyle,
+  Point,
+  LightProps,
+  PointAnnotationProps,
+  StyleProps,
+  CalloutProps,
+  TileSourceProps,
+  VectorSourceProps,
+  ShapeSourceProps,
+  RasterSourceProps,
+  LayerBaseProps,
+  BackgroundLayerProps,
+  CircleLayerProps,
+  FillExtrusionLayerProps,
+  FillLayerProps,
+  LineLayerProps,
+  RasterLayerProps,
+  SymbolLayerProps,
+  HeatmapLayerProps,
+  ImagesProps,
+  ImageSourceProps,
+  OfflineCreatePackOptions,
+  SnapshotOptions,
+} from 'definitions';
+
+import { isAndroid } from './javascript/utils';
+import MapView from './javascript/components/MapView';
+import Light from './javascript/components/Light';
+import PointAnnotation from './javascript/components/PointAnnotation';
+import Annotation from './javascript/components/annotations/Annotation';
+import Callout from './javascript/components/Callout';
+import UserLocation from './javascript/components/UserLocation';
+import Camera, {
+  CameraProps,
+  CameraRef,
+  UserTrackingModes,
+  AnimationMode,
+} from './javascript/components/Camera';
+import VectorSource from './javascript/components/VectorSource';
+import ShapeSource from './javascript/components/ShapeSource';
+import RasterSource from './javascript/components/RasterSource';
+import RasterDemSource from './javascript/components/RasterDemSource';
+import ImageSource from './javascript/components/ImageSource';
+import Images from './javascript/components/Images';
+import FillLayer from './javascript/components/FillLayer';
+import FillExtrusionLayer from './javascript/components/FillExtrusionLayer';
+import HeatmapLayer from './javascript/components/HeatmapLayer';
+import LineLayer from './javascript/components/LineLayer';
+import CircleLayer from './javascript/components/CircleLayer';
+import SkyLayer from './javascript/components/SkyLayer';
+import SymbolLayer from './javascript/components/SymbolLayer';
+import RasterLayer from './javascript/components/RasterLayer';
+import BackgroundLayer from './javascript/components/BackgroundLayer';
+import Terrain from './javascript/components/Terrain';
+import locationManager from './javascript/modules/location/locationManager';
+import offlineManager from './javascript/modules/offline/offlineManager';
+import snapshotManager from './javascript/modules/snapshot/snapshotManager';
+import MarkerView from './javascript/components/MarkerView';
+import Animated from './javascript/utils/animated/Animated';
+import AnimatedPoint from './javascript/utils/animated/AnimatedPoint';
+import AnimatedShape from './javascript/utils/animated/AnimatedShape';
+import AnimatedCoordinatesArray from './javascript/utils/animated/AnimatedCoordinatesArray';
+import AnimatedExtractCoordinateFromArray from './javascript/utils/animated/AnimatedExtractCoordinateFromArray';
+import AnimatedRouteCoordinatesArray from './javascript/utils/animated/AnimatedRouteCoordinatesArray';
+import Style from './javascript/components/Style';
+import Logger from './javascript/utils/Logger';
+
+const requestAndroidLocationPermissions = async function () {
+  if (isAndroid()) {
+    const res = await PermissionsAndroid.requestMultiple([
+      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
+      PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION,
+    ]);
+
+    if (!res) {
+      return false;
+    }
+
+    const permissions = Object.keys(res);
+    for (const permission of permissions) {
+      // @ts-expect-error TODO: Use Android permissions type.
+      if (res[permission] === PermissionsAndroid.RESULTS.GRANTED) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  throw new Error('You should only call this method on Android!');
+};
+
+const MapboxGL = {
+  ...NativeModules.MGLModule,
+  requestAndroidLocationPermissions,
+  UserTrackingModes,
+  MapView,
+  Light,
+  PointAnnotation,
+  Callout,
+  UserLocation,
+  Camera,
+  Style,
+  Annotation,
+  MarkerView,
+  VectorSource,
+  ShapeSource,
+  RasterSource,
+  ImageSource,
+  Images,
+  RasterDemSource,
+  FillLayer,
+  FillExtrusionLayer,
+  HeatmapLayer,
+  LineLayer,
+  CircleLayer,
+  SkyLayer,
+  SymbolLayer,
+  RasterLayer,
+  BackgroundLayer,
+  Terrain,
+  locationManager,
+  offlineManager,
+  snapshotManager,
+  Animated,
+  AnimatedPoint,
+  AnimatedCoordinatesArray,
+  AnimatedExtractCoordinateFromArray,
+  AnimatedRouteCoordinatesArray,
+  AnimatedShape,
+  Logger,
+};
+
+export {
+  requestAndroidLocationPermissions,
+  UserTrackingModes,
+  MapView,
+  Light,
+  PointAnnotation,
+  Callout,
+  UserLocation,
+  Camera,
+  Style,
+  Annotation,
+  MarkerView,
+  VectorSource,
+  ShapeSource,
+  RasterSource,
+  ImageSource,
+  Images,
+  RasterDemSource,
+  FillLayer,
+  FillExtrusionLayer,
+  HeatmapLayer,
+  LineLayer,
+  CircleLayer,
+  SkyLayer,
+  SymbolLayer,
+  RasterLayer,
+  BackgroundLayer,
+  Terrain,
+  locationManager,
+  offlineManager,
+  snapshotManager,
+  Animated,
+  AnimatedPoint,
+  AnimatedCoordinatesArray,
+  AnimatedExtractCoordinateFromArray,
+  AnimatedRouteCoordinatesArray,
+  AnimatedShape,
+  Logger,
+};
+
+export type {
+  CameraProps,
+  CameraRef,
+  AnimationMode,
+  Expression,
+  MapboxGLEvent,
+  OnPressEvent,
+  OrnamentPosition,
+  WithExpression,
+  TextVariableAnchorValues,
+  MarkerViewProps,
+  RegionPayload,
+  MapState,
+  MapViewProps,
+  UserLocationProps,
+  LightStyle,
+  Transition,
+  BackgroundLayerStyle,
+  CircleLayerStyle,
+  FillExtrusionLayerStyle,
+  FillLayerStyle,
+  LineLayerStyle,
+  RasterLayerStyle,
+  SymbolLayerStyle,
+  HeatmapLayerStyle,
+  Point,
+  LightProps,
+  PointAnnotationProps,
+  StyleProps,
+  CalloutProps,
+  TileSourceProps,
+  VectorSourceProps,
+  ShapeSourceProps,
+  RasterSourceProps,
+  LayerBaseProps,
+  BackgroundLayerProps,
+  CircleLayerProps,
+  FillExtrusionLayerProps,
+  FillLayerProps,
+  LineLayerProps,
+  RasterLayerProps,
+  SymbolLayerProps,
+  HeatmapLayerProps,
+  ImagesProps,
+  ImageSourceProps,
+  OfflineCreatePackOptions,
+  SnapshotOptions,
+};
+
+export default MapboxGL;
diff --git a/javascript/index.ts b/javascript/index.ts
deleted file mode 100644
index 6c716e732..000000000
--- a/javascript/index.ts
+++ /dev/null
@@ -1,153 +0,0 @@
-import { NativeModules, PermissionsAndroid } from 'react-native';
-
-import { isAndroid } from './utils';
-import MapView from './components/MapView';
-import Light from './components/Light';
-import PointAnnotation from './components/PointAnnotation';
-import Annotation from './components/annotations/Annotation';
-import Callout from './components/Callout';
-import UserLocation from './components/UserLocation';
-import Camera, {
-  CameraProps,
-  CameraRef,
-  UserTrackingModes,
-  AnimationMode,
-} from './components/Camera';
-import VectorSource from './components/VectorSource';
-import ShapeSource from './components/ShapeSource';
-import RasterSource from './components/RasterSource';
-import RasterDemSource from './components/RasterDemSource';
-import ImageSource from './components/ImageSource';
-import Images from './components/Images';
-import FillLayer from './components/FillLayer';
-import FillExtrusionLayer from './components/FillExtrusionLayer';
-import HeatmapLayer from './components/HeatmapLayer';
-import LineLayer from './components/LineLayer';
-import CircleLayer from './components/CircleLayer';
-import SkyLayer from './components/SkyLayer';
-import SymbolLayer from './components/SymbolLayer';
-import RasterLayer from './components/RasterLayer';
-import BackgroundLayer from './components/BackgroundLayer';
-import Terrain from './components/Terrain';
-import locationManager from './modules/location/locationManager';
-import offlineManager from './modules/offline/offlineManager';
-import snapshotManager from './modules/snapshot/snapshotManager';
-import MarkerView from './components/MarkerView';
-import Animated from './utils/animated/Animated';
-import AnimatedPoint from './utils/animated/AnimatedPoint';
-import AnimatedShape from './utils/animated/AnimatedShape';
-import AnimatedCoordinatesArray from './utils/animated/AnimatedCoordinatesArray';
-import AnimatedExtractCoordinateFromArray from './utils/animated/AnimatedExtractCoordinateFromArray';
-import AnimatedRouteCoordinatesArray from './utils/animated/AnimatedRouteCoordinatesArray';
-import Style from './components/Style';
-import Logger from './utils/Logger';
-
-const requestAndroidLocationPermissions = async function () {
-  if (isAndroid()) {
-    const res = await PermissionsAndroid.requestMultiple([
-      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
-      PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION,
-    ]);
-
-    if (!res) {
-      return false;
-    }
-
-    const permissions = Object.keys(res);
-    for (const permission of permissions) {
-      // @ts-expect-error TODO: Use Android permissions type.
-      if (res[permission] === PermissionsAndroid.RESULTS.GRANTED) {
-        return true;
-      }
-    }
-
-    return false;
-  }
-
-  throw new Error('You should only call this method on Android!');
-};
-
-const MapboxGL = {
-  ...NativeModules.MGLModule,
-  requestAndroidLocationPermissions,
-  UserTrackingModes,
-  MapView,
-  Light,
-  PointAnnotation,
-  Callout,
-  UserLocation,
-  Camera,
-  Style,
-  Annotation,
-  MarkerView,
-  VectorSource,
-  ShapeSource,
-  RasterSource,
-  ImageSource,
-  Images,
-  RasterDemSource,
-  FillLayer,
-  FillExtrusionLayer,
-  HeatmapLayer,
-  LineLayer,
-  CircleLayer,
-  SkyLayer,
-  SymbolLayer,
-  RasterLayer,
-  BackgroundLayer,
-  Terrain,
-  locationManager,
-  offlineManager,
-  snapshotManager,
-  Animated,
-  AnimatedPoint,
-  AnimatedCoordinatesArray,
-  AnimatedExtractCoordinateFromArray,
-  AnimatedRouteCoordinatesArray,
-  AnimatedShape,
-  Logger,
-};
-
-export {
-  requestAndroidLocationPermissions,
-  UserTrackingModes,
-  MapView,
-  Light,
-  PointAnnotation,
-  Callout,
-  UserLocation,
-  Camera,
-  Style,
-  Annotation,
-  MarkerView,
-  VectorSource,
-  ShapeSource,
-  RasterSource,
-  ImageSource,
-  Images,
-  RasterDemSource,
-  FillLayer,
-  FillExtrusionLayer,
-  HeatmapLayer,
-  LineLayer,
-  CircleLayer,
-  SkyLayer,
-  SymbolLayer,
-  RasterLayer,
-  BackgroundLayer,
-  Terrain,
-  locationManager,
-  offlineManager,
-  snapshotManager,
-  Animated,
-  AnimatedPoint,
-  AnimatedCoordinatesArray,
-  AnimatedExtractCoordinateFromArray,
-  AnimatedRouteCoordinatesArray,
-  AnimatedShape,
-  Logger,
-};
-
-export type { CameraProps, CameraRef, AnimationMode };
-
-export default MapboxGL;
diff --git a/package.json b/package.json
index f15251f84..27c2a7c42 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "access": "public"
   },
   "author": "React Native Mapbox Team",
-  "main": "./javascript/index.ts",
+  "main": "index.ts",
   "keywords": [
     "gl",
     "ios",
diff --git a/scripts/autogenerate.js b/scripts/autogenerate.js
index 5052b5152..03ce31544 100644
--- a/scripts/autogenerate.js
+++ b/scripts/autogenerate.js
@@ -415,10 +415,10 @@ async function generate() {
       output: path.join(IOS_OUTPUT_PATH, 'RCTMGLStyle.h'),
       only: 'gl',
     },
-    {
-      input: path.join(TMPL_PATH, 'index.d.ts.ejs'),
-      output: path.join(IOS_OUTPUT_PATH, 'index.d.ts'),
-    },
+    // {
+    //   input: path.join(TMPL_PATH, 'definitions.d.ts.ejs'),
+    //   output: path.join(IOS_OUTPUT_PATH, 'definitions.d.ts'),
+    // },
     {
       input: path.join(TMPL_PATH, 'RCTMGLStyle.m.ejs'),
       output: path.join(IOS_OUTPUT_PATH, 'RCTMGLStyle.m'),
diff --git a/tsconfig.json b/tsconfig.json
index b3d11464d..471f54d1b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,26 +1,28 @@
 {
   "compilerOptions": {
     /* Basic Options */
-    "target": "esnext",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
-    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
-    "lib": ["es6"],                           /* Specify library files to be included in the compilation. */
-    "allowJs": true,                          /* Allow javascript files to be compiled. */
+    "target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
+    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
+    "lib": [
+      "es6"
+    ] /* Specify library files to be included in the compilation. */,
+    "allowJs": true /* Allow javascript files to be compiled. */,
     // "checkJs": true,                       /* Report errors in .js files. */
-    "jsx": "react-native",                    /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    "jsx": "react-native" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
     // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
     // "sourceMap": true,                     /* Generates corresponding '.map' file. */
     // "outFile": "./",                       /* Concatenate and emit output to single file. */
     // "outDir": "./",                        /* Redirect output structure to the directory. */
     // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
     // "removeComments": true,                /* Do not emit comments to output. */
-    "noEmit": true,                           /* Do not emit outputs. */
+    "noEmit": true /* Do not emit outputs. */,
     // "incremental": true,                   /* Enable incremental compilation */
     // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
     // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
-    "isolatedModules": true,                  /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+    "isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
 
     /* Strict Type-Checking Options */
-    "strict": true,                           /* Enable all strict type-checking options. */
+    "strict": true /* Enable all strict type-checking options. */,
     // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
     // "strictNullChecks": true,              /* Enable strict null checks. */
     // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
@@ -35,18 +37,19 @@
     // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
 
     /* Module Resolution Options */
-    "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-    "baseUrl": "./",                          /* Base directory to resolve non-absolute module names. */
-    "paths": {                                /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-      "@rnmapbox/maps": ["index.d.ts"],
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
+    "paths": {
+      /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+      "@rnmapbox/maps": ["index.ts", "definitions.d.ts"],
       "react": ["node_modules/@types/react"],
-      "react-native": ["node_modules/@types/react-native"],
+      "react-native": ["node_modules/@types/react-native"]
     },
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
     // "typeRoots": [],                       /* List of folders to include type definitions from. */
     // "types": [],                           /* Type declaration files to be included in compilation. */
-    "allowSyntheticDefaultImports": true,     /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-    "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
     // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
 
     /* Source Map Options */
@@ -60,6 +63,9 @@
     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
   },
   "exclude": [
-    "node_modules", "babel.config.js", "metro.config.js", "jest.config.js"
+    "node_modules",
+    "babel.config.js",
+    "metro.config.js",
+    "jest.config.js"
   ]
 }

From 748c78fd663c7cefac65fadaadbcd2c2cf5ba644 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 29 Apr 2022 09:30:36 -0500
Subject: [PATCH 32/84] Fix exports to allow access to .d.ts types

---
 definitions.d.ts | 704 +++++++++++++++++++++++------------------------
 index.ts         | 130 +++------
 2 files changed, 393 insertions(+), 441 deletions(-)

diff --git a/definitions.d.ts b/definitions.d.ts
index 96887d070..550c58a20 100644
--- a/definitions.d.ts
+++ b/definitions.d.ts
@@ -47,7 +47,7 @@ type ExpressionName =
   // Zoom, Heatmap
   | 'zoom' | 'heatmap-density';
 
-type ExpressionField =
+export type ExpressionField =
   | string
   | number
   | boolean
@@ -57,7 +57,7 @@ type ExpressionField =
 
 export type Expression = [ExpressionName, ...ExpressionField[]];
 
-type Anchor =
+export type Anchor =
   | 'center'
   | 'left'
   | 'right'
@@ -67,11 +67,11 @@ type Anchor =
   | 'top-right'
   | 'bottom-left'
   | 'bottom-right';
-type Visibility = 'visible' | 'none';
-type Alignment = 'map' | 'viewport';
-type AutoAlignment = Alignment | 'auto';
+export type Visibility = 'visible' | 'none';
+export type Alignment = 'map' | 'viewport';
+export type AutoAlignment = Alignment | 'auto';
 
-type NamedStyles<T> = {
+export type NamedStyles<T> = {
   [P in keyof T]:
     | SymbolLayerStyle
     | RasterLayerStyle
@@ -100,372 +100,369 @@ export type OnPressEvent = {
   };
 };
 
-declare namespace MapboxGL {
-  function removeCustomHeader(headerName: string): void;
-  function addCustomHeader(headerName: string, headerValue: string): void;
-  function setAccessToken(accessToken: string | null): void;
-  function getAccessToken(): Promise<string>;
-  function setTelemetryEnabled(telemetryEnabled: boolean): void;
-  function setConnected(connected: boolean): void;
-  function requestAndroidLocationPermissions(): Promise<boolean>;
+export function removeCustomHeader(headerName: string): void;
+export function addCustomHeader(headerName: string, headerValue: string): void;
+export function setAccessToken(accessToken: string | null): void;
+export function getAccessToken(): Promise<string>;
+export function setTelemetryEnabled(telemetryEnabled: boolean): void;
+export function setConnected(connected: boolean): void;
+export function requestAndroidLocationPermissions(): Promise<boolean>;
 
-  const offlineManager: OfflineManager;
-  const snapshotManager: SnapshotManager;
-  const locationManager: LocationManager;
+export const offlineManager: OfflineManager;
+export const snapshotManager: SnapshotManager;
+export const locationManager: LocationManager;
 
+/**
+ * GeoUtils
+ */
+export interface UnitsOptions {
+  units?: Units;
+}
+
+export interface PositionsOptions {
+  bbox?: BBox;
+  id?: Id;
+}
+
+export class geoUtils {
+  makePoint<P = Properties>(
+    coordinates: Position,
+    properties?: P,
+    options?: PositionsOptions,
+  ): Feature<GeoJSON.Point, P>;
+  makeLineString<P = Properties>(
+    coordinates: Position[],
+    properties?: P,
+    options?: PositionsOptions,
+  ): Feature<LineString, P>;
+  makeLatLngBounds<G = Geometry, P = Properties>(
+    northEastCoordinates: Position[],
+    southWestCoordinates: Position[],
+  ): FeatureCollection<G, P>;
+  makeFeature<G = Geometry, P = Properties>(
+    geometry: G,
+    properties?: P,
+  ): Feature<G, P>;
+  makeFeatureCollection<G = Geometry, P = Properties>(
+    features: Array<Feature<G, P>>,
+    options?: PositionsOptions,
+  ): FeatureCollection<G, P>;
+  addToFeatureCollection<G = Geometry, P = Properties>(
+    newFeatureCollection: Array<FeatureCollection<G, P>>,
+    newFeature: Feature<G, P>,
+  ): FeatureCollection<G, P>;
+  calculateDistance(origin: Coord, dest: Coord, options?: UnitsOptions): number;
+  pointAlongLine(
+    newLineString: Feature<LineString> | LineString,
+    distAlong: number,
+    options?: UnitsOptions,
+  ): Feature<GeoJSON.Point>;
+  getOrCalculateVisibleRegion(
+    coord: { lon: number; lat: number },
+    zoomLevel: number,
+    width: number,
+    height: number,
+    nativeRegion: {
+      properties: { visibleBounds: number[] };
+      visibleBounds: number[];
+    },
+  ): void;
+}
+
+export namespace Animated {
+  // sources
+  class ShapeSource extends Component<ShapeSourceProps> {}
+  class ImageSource extends Component<ImageSourceProps> {}
+
+  // layers
+  class FillLayer extends Component<FillLayerProps> {}
+  class FillExtrusionLayer extends Component<FillExtrusionLayerProps> {}
+  class LineLayer extends Component<LineLayerProps> {}
+  class CircleLayer extends Component<CircleLayerProps> {}
+  class SymbolLayer extends Component<SymbolLayerProps> {}
+  class RasterLayer extends Component<RasterLayerProps> {}
+  class BackgroundLayer extends Component<BackgroundLayerProps> {}
+}
+
+/**
+ * Classes
+ */
+
+export class AnimatedPoint {
+  constructor(point?: GeoJSON.Point);
+  longitude: ReactNative.Animated.Value;
+  latitude: ReactNative.Animated.Value;
+  setValue: (point: GeoJSON.Point) => void;
+  setOffset: (point: GeoJSON.Point) => void;
+  flattenOffset: () => void;
+  stopAnimation: (cb?: () => GeoJSON.Point) => void;
+  addListener: (cb?: () => GeoJSON.Point) => void;
+  removeListener: (id: string) => void;
+  spring: (
+    config: Record<string, any>,
+  ) => ReactNative.Animated.CompositeAnimation;
+  timing: (
+    config: Record<string, any>,
+  ) => ReactNative.Animated.CompositeAnimation;
+}
+
+/**
+ * Components
+ */
+export class MapView extends Component<MapViewProps> {
+  getPointInView(coordinate: GeoJSON.Position): Promise<GeoJSON.Position>;
+  getCoordinateFromView(point: GeoJSON.Position): Promise<GeoJSON.Position>;
+  getVisibleBounds(): Promise<GeoJSON.Position[]>;
+  queryRenderedFeaturesAtPoint(
+    coordinate: GeoJSON.Position,
+    filter?: Expression,
+    layerIds?: Array<string>,
+  ): Promise<GeoJSON.FeatureCollection | undefined>;
+  queryRenderedFeaturesInRect(
+    coordinate: GeoJSON.Position,
+    filter?: Expression,
+    layerIds?: Array<string>,
+  ): Promise<GeoJSON.FeatureCollection | undefined>;
+  takeSnap(writeToDisk?: boolean): Promise<string>;
+  getZoom(): Promise<number>;
+  getCenter(): Promise<GeoJSON.Position>;
+  showAttribution(): void;
+  setSourceVisibility(
+    visible: boolean,
+    sourceId: string,
+    sourceLayerId?: string,
+  ): void;
+}
+
+export type Padding =
+  | number
+  | [number, number]
+  | [number, number, number, number];
+
+export class UserLocation extends Component<UserLocationProps> {}
+
+export interface Location {
+  coords: Coordinates;
+  timestamp?: number;
+}
+
+export interface Coordinates {
   /**
-   * GeoUtils
+   * The heading (measured in degrees) relative to true north.
+   * Heading is used to describe the direction the device is pointing to (the value of the compass).
+   * Note that on Android this is incorrectly reporting the course value as mentioned in issue https://github.com/rnmapbox/maps/issues/1213
+   * and will be corrected in a future update.
    */
-  interface UnitsOptions {
-    units?: Units;
-  }
-
-  interface PositionsOptions {
-    bbox?: BBox;
-    id?: Id;
-  }
-
-  namespace geoUtils {
-    function makePoint<P = Properties>(
-      coordinates: Position,
-      properties?: P,
-      options?: PositionsOptions,
-    ): Feature<GeoJSON.Point, P>;
-    function makeLineString<P = Properties>(
-      coordinates: Position[],
-      properties?: P,
-      options?: PositionsOptions,
-    ): Feature<LineString, P>;
-    function makeLatLngBounds<G = Geometry, P = Properties>(
-      northEastCoordinates: Position[],
-      southWestCoordinates: Position[],
-    ): FeatureCollection<G, P>;
-    function makeFeature<G = Geometry, P = Properties>(
-      geometry: G,
-      properties?: P,
-    ): Feature<G, P>;
-    function makeFeatureCollection<G = Geometry, P = Properties>(
-      features: Array<Feature<G, P>>,
-      options?: PositionsOptions,
-    ): FeatureCollection<G, P>;
-    function addToFeatureCollection<G = Geometry, P = Properties>(
-      newFeatureCollection: Array<FeatureCollection<G, P>>,
-      newFeature: Feature<G, P>,
-    ): FeatureCollection<G, P>;
-    function calculateDistance(
-      origin: Coord,
-      dest: Coord,
-      options?: UnitsOptions,
-    ): number;
-    function pointAlongLine(
-      newLineString: Feature<LineString> | LineString,
-      distAlong: number,
-      options?: UnitsOptions,
-    ): Feature<GeoJSON.Point>;
-    function getOrCalculateVisibleRegion(
-      coord: { lon: number; lat: number },
-      zoomLevel: number,
-      width: number,
-      height: number,
-      nativeRegion: {
-        properties: { visibleBounds: number[] };
-        visibleBounds: number[];
-      },
-    ): void;
-  }
-
-  namespace Animated {
-    // sources
-    class ShapeSource extends Component<ShapeSourceProps> {}
-    class ImageSource extends Component<ImageSourceProps> {}
-
-    // layers
-    class FillLayer extends Component<FillLayerProps> {}
-    class FillExtrusionLayer extends Component<FillExtrusionLayerProps> {}
-    class LineLayer extends Component<LineLayerProps> {}
-    class CircleLayer extends Component<CircleLayerProps> {}
-    class SymbolLayer extends Component<SymbolLayerProps> {}
-    class RasterLayer extends Component<RasterLayerProps> {}
-    class BackgroundLayer extends Component<BackgroundLayerProps> {}
-  }
+  heading?: number;
 
   /**
-   * Classes
+   * The direction in which the device is traveling, measured in degrees and relative to due north.
+   * The course refers to the direction the device is actually moving (not the same as heading).
    */
-
-  class AnimatedPoint {
-    constructor(point?: GeoJSON.Point);
-    longitude: ReactNative.Animated.Value;
-    latitude: ReactNative.Animated.Value;
-    setValue: (point: GeoJSON.Point) => void;
-    setOffset: (point: GeoJSON.Point) => void;
-    flattenOffset: () => void;
-    stopAnimation: (cb?: () => GeoJSON.Point) => void;
-    addListener: (cb?: () => GeoJSON.Point) => void;
-    removeListener: (id: string) => void;
-    spring: (
-      config: Record<string, any>,
-    ) => ReactNative.Animated.CompositeAnimation;
-    timing: (
-      config: Record<string, any>,
-    ) => ReactNative.Animated.CompositeAnimation;
-  }
+  course?: number;
 
   /**
-   * Components
+   * The instantaneous speed of the device, measured in meters per second.
    */
-  class MapView extends Component<MapViewProps> {
-    getPointInView(coordinate: GeoJSON.Position): Promise<GeoJSON.Position>;
-    getCoordinateFromView(point: GeoJSON.Position): Promise<GeoJSON.Position>;
-    getVisibleBounds(): Promise<GeoJSON.Position[]>;
-    queryRenderedFeaturesAtPoint(
-      coordinate: GeoJSON.Position,
-      filter?: Expression,
-      layerIds?: Array<string>,
-    ): Promise<GeoJSON.FeatureCollection | undefined>;
-    queryRenderedFeaturesInRect(
-      coordinate: GeoJSON.Position,
-      filter?: Expression,
-      layerIds?: Array<string>,
-    ): Promise<GeoJSON.FeatureCollection | undefined>;
-    takeSnap(writeToDisk?: boolean): Promise<string>;
-    getZoom(): Promise<number>;
-    getCenter(): Promise<GeoJSON.Position>;
-    showAttribution(): void;
-    setSourceVisibility(
-      visible: boolean,
-      sourceId: string,
-      sourceLayerId?: string,
-    ): void;
-  }
-
-  type Padding = number | [number, number] | [number, number, number, number];
-
-  class UserLocation extends Component<UserLocationProps> {}
-
-  interface Location {
-    coords: Coordinates;
-    timestamp?: number;
-  }
-
-  interface Coordinates {
-    /**
-     * The heading (measured in degrees) relative to true north.
-     * Heading is used to describe the direction the device is pointing to (the value of the compass).
-     * Note that on Android this is incorrectly reporting the course value as mentioned in issue https://github.com/rnmapbox/maps/issues/1213
-     * and will be corrected in a future update.
-     */
-    heading?: number;
-
-    /**
-     * The direction in which the device is traveling, measured in degrees and relative to due north.
-     * The course refers to the direction the device is actually moving (not the same as heading).
-     */
-    course?: number;
-
-    /**
-     * The instantaneous speed of the device, measured in meters per second.
-     */
-    speed?: number;
-
-    /**
-     * The latitude in degrees.
-     */
-    latitude: number;
+  speed?: number;
 
-    /**
-     * The longitude in degrees.
-     */
-    longitude: number;
+  /**
+   * The latitude in degrees.
+   */
+  latitude: number;
 
-    /**
-     * The radius of uncertainty for the location, measured in meters.
-     */
-    accuracy?: number;
-
-    /**
-     * The altitude, measured in meters.
-     */
-    altitude?: number;
-  }
-
-  class Light extends Component<LightProps> {}
-
-  class StyleSheet extends Component {
-    static create<T extends NamedStyles<T> | NamedStyles<any>>(styles: T): T;
-    camera(
-      stops: { [key: number]: string },
-      interpolationMode?: InterpolationMode,
-    ): void;
-    source(
-      stops: { [key: number]: string },
-      attributeName: string,
-      interpolationMode?: InterpolationMode,
-    ): void;
-    composite(
-      stops: { [key: number]: string },
-      attributeName: string,
-      interpolationMode?: InterpolationMode,
-    ): void;
-
-    identity(attributeName: string): number;
-  }
-
-  class PointAnnotation extends Component<PointAnnotationProps> {
-    refresh(): void;
-  }
-  class MarkerView extends Component<MarkerViewProps> {}
-  class Callout extends Component<CalloutProps> {}
-  type Style = React.FC<StyleProps>;
+  /**
+   * The longitude in degrees.
+   */
+  longitude: number;
 
   /**
-   * Sources
+   * The radius of uncertainty for the location, measured in meters.
    */
-  class VectorSource extends Component<VectorSourceProps> {}
-  class ShapeSource extends Component<ShapeSourceProps> {
-    features(
-      filter?: Expression,
-    ): Promise<FeatureCollection<Geometry, Properties>>;
-
-    getClusterExpansionZoom(
-      feature: Feature<Geometry, Properties> | number,
-    ): Promise<number>;
-    /**
-     * Returns all the leaves of a cluster with pagination support.
-     * @param cluster feature cluster
-     * @param limit the number of leaves to return
-     * @param offset the amount of points to skip (for pagination)
-     */
-    getClusterLeaves: (
-      feature: Feature<Geometry, Properties> | number,
-      limit: number,
-      offset: number,
-    ) => Promise<FeatureCollection<Geometry, Properties>>;
-    /**
-     * Returns the children of a cluster (on the next zoom level).
-     * @param cluster feature cluster
-     */
-    getClusterChildren: (
-      feature: Feature<Geometry, Properties> | number,
-    ) => Promise<FeatureCollection<Geometry, Properties>>;
-  }
-  class RasterSource extends Component<RasterSourceProps> {}
+  accuracy?: number;
 
   /**
-   * Layers
+   * The altitude, measured in meters.
    */
-  class BackgroundLayer extends Component<BackgroundLayerProps> {}
-  class CircleLayer extends Component<CircleLayerProps> {}
-  class FillExtrusionLayer extends Component<FillExtrusionLayerProps> {}
-  class FillLayer extends Component<FillLayerProps> {}
-  class LineLayer extends Component<LineLayerProps> {}
-  class RasterLayer extends Component<RasterLayerProps> {}
-  class SymbolLayer extends Component<SymbolLayerProps> {}
-  class HeatmapLayer extends Component<HeatmapLayerProps> {}
-  class Images extends Component<ImagesProps> {}
-  class ImageSource extends Component<ImageSourceProps> {}
+  altitude?: number;
+}
+
+export class Light extends Component<LightProps> {}
+
+export class StyleSheet extends Component {
+  static create<T extends NamedStyles<T> | NamedStyles<any>>(styles: T): T;
+  camera(
+    stops: { [key: number]: string },
+    interpolationMode?: InterpolationMode,
+  ): void;
+  source(
+    stops: { [key: number]: string },
+    attributeName: string,
+    interpolationMode?: InterpolationMode,
+  ): void;
+  composite(
+    stops: { [key: number]: string },
+    attributeName: string,
+    interpolationMode?: InterpolationMode,
+  ): void;
+
+  identity(attributeName: string): number;
+}
 
-  class LocationManager extends Component {
-    start(displacement?: number): void;
-    stop(): void;
-  }
+export class PointAnnotation extends Component<PointAnnotationProps> {
+  refresh(): void;
+}
+export class MarkerView extends Component<MarkerViewProps> {}
+export class Callout extends Component<CalloutProps> {}
+export type Style = React.FC<StyleProps>;
 
+/**
+ * Sources
+ */
+export class VectorSource extends Component<VectorSourceProps> {}
+export class ShapeSource extends Component<ShapeSourceProps> {
+  features(
+    filter?: Expression,
+  ): Promise<FeatureCollection<Geometry, Properties>>;
+
+  getClusterExpansionZoom(
+    feature: Feature<Geometry, Properties> | number,
+  ): Promise<number>;
   /**
-   * Offline
+   * Returns all the leaves of a cluster with pagination support.
+   * @param cluster feature cluster
+   * @param limit the number of leaves to return
+   * @param offset the amount of points to skip (for pagination)
    */
-  class OfflineManager extends Component {
-    createPack(
-      options: OfflineCreatePackOptions,
-      progressListener?: (
-        pack: OfflinePack,
-        status: OfflineProgressStatus,
-      ) => void,
-      errorListener?: (pack: OfflinePack, err: OfflineProgressError) => void,
-    ): Promise<void>;
-    deletePack(name: string): Promise<void>;
-    invalidatePack(name: string): Promise<void>;
-    getPacks(): Promise<Array<OfflinePack>>;
-    getPack(name: string): Promise<OfflinePack | undefined>;
-    invalidateAmbientCache(): Promise<void>;
-    clearAmbientCache(): Promise<void>;
-    setMaximumAmbientCacheSize(size: number): Promise<void>;
-    resetDatabase(): Promise<void>;
-    setTileCountLimit(limit: number): void;
-    setProgressEventThrottle(throttleValue: number): void;
-    subscribe(
-      packName: string,
-      progressListener: (pack: OfflinePack, status: object) => void,
-      errorListener?: (pack: OfflinePack, err: object) => void,
-    ): void;
-    unsubscribe(packName: string): void;
-  }
-
-  class SnapshotManager {
-    static takeSnap(options: SnapshotOptions): Promise<string>;
-  }
-
-  interface OfflineProgressStatus {
-    name: string;
-    state: number;
-    percentage: number;
-    completedResourceSize: number;
-    completedTileCount: number;
-    completedResourceCount: number;
-    requiredResourceCount: number;
-    completedTileSize: number;
-  }
-
-  interface OfflineProgressError {
-    message: string;
-    name: string;
-  }
-
-  interface OfflinePack {
-    name: string;
-    bounds: [GeoJSON.Position, GeoJSON.Position];
-    metadata: any;
-    status: () => Promise<OfflinePackStatus>;
-    resume: () => Promise<void>;
-    pause: () => Promise<void>;
-  }
-
-  interface OfflinePackStatus {
-    name: string;
-    state: number;
-    percentage: number;
-    completedResourceCount: number;
-    completedResourceSize: number;
-    completedTileSize: number;
-    completedTileCount: number;
-    requiredResourceCount: number;
-  }
-
+  getClusterLeaves: (
+    feature: Feature<Geometry, Properties> | number,
+    limit: number,
+    offset: number,
+  ) => Promise<FeatureCollection<Geometry, Properties>>;
   /**
-   * Constants
+   * Returns the children of a cluster (on the next zoom level).
+   * @param cluster feature cluster
    */
-  enum UserTrackingModes {
-    Follow = 'normal',
-    FollowWithHeading = 'compass',
-    FollowWithCourse = 'course',
-  }
-
-  enum InterpolationMode {
-    Exponential = 0,
-    Categorical = 1,
-    Interval = 2,
-    Identity = 3,
-  }
-
-  enum StyleURL {
-    Street = 'mapbox://styles/mapbox/streets-v11',
-    Dark = 'mapbox://styles/mapbox/dark-v10',
-    Light = 'mapbox://styles/mapbox/light-v10',
-    Outdoors = 'mapbox://styles/mapbox/outdoors-v11',
-    Satellite = 'mapbox://styles/mapbox/satellite-v9',
-    SatelliteStreet = 'mapbox://styles/mapbox/satellite-streets-v11',
-    TrafficDay = 'mapbox://styles/mapbox/navigation-preview-day-v4',
-    TrafficNight = 'mapbox://styles/mapbox/navigation-preview-night-v4',
-  }
+  getClusterChildren: (
+    feature: Feature<Geometry, Properties> | number,
+  ) => Promise<FeatureCollection<Geometry, Properties>>;
+}
+export class RasterSource extends Component<RasterSourceProps> {}
+
+/**
+ * Layers
+ */
+export class BackgroundLayer extends Component<BackgroundLayerProps> {}
+export class CircleLayer extends Component<CircleLayerProps> {}
+export class FillExtrusionLayer extends Component<FillExtrusionLayerProps> {}
+export class FillLayer extends Component<FillLayerProps> {}
+export class LineLayer extends Component<LineLayerProps> {}
+export class RasterLayer extends Component<RasterLayerProps> {}
+export class SymbolLayer extends Component<SymbolLayerProps> {}
+export class HeatmapLayer extends Component<HeatmapLayerProps> {}
+export class Images extends Component<ImagesProps> {}
+export class ImageSource extends Component<ImageSourceProps> {}
+
+export class LocationManager extends Component {
+  start(displacement?: number): void;
+  stop(): void;
+}
+
+/**
+ * Offline
+ */
+export class OfflineManager extends Component {
+  createPack(
+    options: OfflineCreatePackOptions,
+    progressListener?: (
+      pack: OfflinePack,
+      status: OfflineProgressStatus,
+    ) => void,
+    errorListener?: (pack: OfflinePack, err: OfflineProgressError) => void,
+  ): Promise<void>;
+  deletePack(name: string): Promise<void>;
+  invalidatePack(name: string): Promise<void>;
+  getPacks(): Promise<Array<OfflinePack>>;
+  getPack(name: string): Promise<OfflinePack | undefined>;
+  invalidateAmbientCache(): Promise<void>;
+  clearAmbientCache(): Promise<void>;
+  setMaximumAmbientCacheSize(size: number): Promise<void>;
+  resetDatabase(): Promise<void>;
+  setTileCountLimit(limit: number): void;
+  setProgressEventThrottle(throttleValue: number): void;
+  subscribe(
+    packName: string,
+    progressListener: (pack: OfflinePack, status: object) => void,
+    errorListener?: (pack: OfflinePack, err: object) => void,
+  ): void;
+  unsubscribe(packName: string): void;
+}
+
+export class SnapshotManager {
+  static takeSnap(options: SnapshotOptions): Promise<string>;
+}
+
+export interface OfflineProgressStatus {
+  name: string;
+  state: number;
+  percentage: number;
+  completedResourceSize: number;
+  completedTileCount: number;
+  completedResourceCount: number;
+  requiredResourceCount: number;
+  completedTileSize: number;
+}
+
+export interface OfflineProgressError {
+  message: string;
+  name: string;
+}
+
+export interface OfflinePack {
+  name: string;
+  bounds: [GeoJSON.Position, GeoJSON.Position];
+  metadata: any;
+  status: () => Promise<OfflinePackStatus>;
+  resume: () => Promise<void>;
+  pause: () => Promise<void>;
+}
+
+export interface OfflinePackStatus {
+  name: string;
+  state: number;
+  percentage: number;
+  completedResourceCount: number;
+  completedResourceSize: number;
+  completedTileSize: number;
+  completedTileCount: number;
+  requiredResourceCount: number;
+}
+
+/**
+ * Constants
+ */
+export enum UserTrackingModes {
+  Follow = 'normal',
+  FollowWithHeading = 'compass',
+  FollowWithCourse = 'course',
+}
+
+export enum InterpolationMode {
+  Exponential = 0,
+  Categorical = 1,
+  Interval = 2,
+  Identity = 3,
+}
+
+export enum StyleURL {
+  Street = 'mapbox://styles/mapbox/streets-v11',
+  Dark = 'mapbox://styles/mapbox/dark-v10',
+  Light = 'mapbox://styles/mapbox/light-v10',
+  Outdoors = 'mapbox://styles/mapbox/outdoors-v11',
+  Satellite = 'mapbox://styles/mapbox/satellite-v9',
+  SatelliteStreet = 'mapbox://styles/mapbox/satellite-streets-v11',
+  TrafficDay = 'mapbox://styles/mapbox/navigation-preview-day-v4',
+  TrafficNight = 'mapbox://styles/mapbox/navigation-preview-night-v4',
 }
 
 export type OrnamentPosition =
@@ -508,7 +505,7 @@ export interface MapState {
 
 export interface MapViewProps extends ViewProps {
   animated?: boolean;
-  userTrackingMode?: MapboxGL.UserTrackingModes;
+  userTrackingMode?: UserTrackingModes;
   userLocationVerticalAlignment?: number;
   contentInset?: Array<number>;
   style?: StyleProp<ViewStyle>;
@@ -548,7 +545,7 @@ export interface MapViewProps extends ViewProps {
   ) => void;
   onCameraChanged?: (state: MapState) => void;
   onMapIdle?: (state: MapState) => void;
-  onUserLocationUpdate?: (feature: MapboxGL.Location) => void;
+  onUserLocationUpdate?: (feature: Location) => void;
   onWillStartLoadingMap?: () => void;
   onDidFinishLoadingMap?: () => void;
   onDidFailLoadingMap?: () => void;
@@ -568,7 +565,7 @@ export interface UserLocationProps {
   children?: ReactNode;
   minDisplacement?: number;
   onPress?: () => void;
-  onUpdate?: (location: MapboxGL.Location) => void;
+  onUpdate?: (location: Location) => void;
   renderMode?: 'normal' | 'native';
   showsUserHeadingIndicator?: boolean;
   visible?: boolean;
@@ -961,7 +958,8 @@ export interface SnapshotOptions {
   writeToDisk?: boolean;
 }
 
-// Logger class
+// Logger
+
 type LogLevel = 'error' | 'warning' | 'info' | 'debug' | 'verbose';
 
 interface LogObject {
@@ -977,4 +975,4 @@ export class Logger {
   public static setLogLevel: (level: LogLevel) => void;
 }
 
-export default MapboxGL;
+export as namespace MapboxGL;
diff --git a/index.ts b/index.ts
index 66c9c8782..72aa1fefc 100644
--- a/index.ts
+++ b/index.ts
@@ -1,49 +1,4 @@
 import { NativeModules, PermissionsAndroid } from 'react-native';
-import {
-  Expression,
-  MapboxGLEvent,
-  OnPressEvent,
-  OrnamentPosition,
-  WithExpression,
-  TextVariableAnchorValues,
-  MarkerViewProps,
-  RegionPayload,
-  MapState,
-  MapViewProps,
-  UserLocationProps,
-  LightStyle,
-  Transition,
-  BackgroundLayerStyle,
-  CircleLayerStyle,
-  FillExtrusionLayerStyle,
-  FillLayerStyle,
-  LineLayerStyle,
-  RasterLayerStyle,
-  SymbolLayerStyle,
-  HeatmapLayerStyle,
-  Point,
-  LightProps,
-  PointAnnotationProps,
-  StyleProps,
-  CalloutProps,
-  TileSourceProps,
-  VectorSourceProps,
-  ShapeSourceProps,
-  RasterSourceProps,
-  LayerBaseProps,
-  BackgroundLayerProps,
-  CircleLayerProps,
-  FillExtrusionLayerProps,
-  FillLayerProps,
-  LineLayerProps,
-  RasterLayerProps,
-  SymbolLayerProps,
-  HeatmapLayerProps,
-  ImagesProps,
-  ImageSourceProps,
-  OfflineCreatePackOptions,
-  SnapshotOptions,
-} from 'definitions';
 
 import { isAndroid } from './javascript/utils';
 import MapView from './javascript/components/MapView';
@@ -197,49 +152,48 @@ export type {
   CameraProps,
   CameraRef,
   AnimationMode,
-  Expression,
-  MapboxGLEvent,
-  OnPressEvent,
-  OrnamentPosition,
-  WithExpression,
-  TextVariableAnchorValues,
-  MarkerViewProps,
-  RegionPayload,
-  MapState,
-  MapViewProps,
-  UserLocationProps,
-  LightStyle,
-  Transition,
-  BackgroundLayerStyle,
-  CircleLayerStyle,
-  FillExtrusionLayerStyle,
-  FillLayerStyle,
-  LineLayerStyle,
-  RasterLayerStyle,
-  SymbolLayerStyle,
-  HeatmapLayerStyle,
-  Point,
-  LightProps,
-  PointAnnotationProps,
-  StyleProps,
-  CalloutProps,
-  TileSourceProps,
-  VectorSourceProps,
-  ShapeSourceProps,
-  RasterSourceProps,
-  LayerBaseProps,
-  BackgroundLayerProps,
-  CircleLayerProps,
-  FillExtrusionLayerProps,
-  FillLayerProps,
-  LineLayerProps,
-  RasterLayerProps,
-  SymbolLayerProps,
-  HeatmapLayerProps,
-  ImagesProps,
-  ImageSourceProps,
-  OfflineCreatePackOptions,
-  SnapshotOptions,
+  // Expression,
+  // MapboxGLEvent,
+  // OnPressEvent,
+  // OrnamentPosition,
+  // WithExpression,
+  // TextVariableAnchorValues,
+  // MarkerViewProps,
+  // RegionPayload,
+  // MapState,
+  // MapViewProps,
+  // UserLocationProps,
+  // LightStyle,
+  // Transition,
+  // BackgroundLayerStyle,
+  // CircleLayerStyle,
+  // FillExtrusionLayerStyle,
+  // FillLayerStyle,
+  // LineLayerStyle,
+  // RasterLayerStyle,
+  // SymbolLayerStyle,
+  // HeatmapLayerStyle,
+  // Point,
+  // LightProps,
+  // PointAnnotationProps,
+  // StyleProps,
+  // CalloutProps,
+  // TileSourceProps,
+  // VectorSourceProps,
+  // ShapeSourceProps,
+  // RasterSourceProps,
+  // LayerBaseProps,
+  // BackgroundLayerProps,
+  // CircleLayerProps,
+  // FillExtrusionLayerProps,
+  // FillLayerProps,
+  // LineLayerProps,
+  // RasterLayerProps,
+  // HeatmapLayerProps,
+  // ImagesProps,
+  // ImageSourceProps,
+  // OfflineCreatePackOptions,
+  // SnapshotOptions,
 };
 
 export default MapboxGL;

From c243718982d41bcfa8ec73b3350c5258d9227d37 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 29 Apr 2022 09:40:23 -0500
Subject: [PATCH 33/84] Re-export .d.ts types

---
 index.ts | 130 +++++++++++++++++++++++++++++++++++++------------------
 1 file changed, 88 insertions(+), 42 deletions(-)

diff --git a/index.ts b/index.ts
index 72aa1fefc..01eb6651a 100644
--- a/index.ts
+++ b/index.ts
@@ -1,4 +1,48 @@
 import { NativeModules, PermissionsAndroid } from 'react-native';
+import {
+  Expression,
+  MapboxGLEvent,
+  OnPressEvent,
+  OrnamentPosition,
+  WithExpression,
+  TextVariableAnchorValues,
+  MarkerViewProps,
+  RegionPayload,
+  MapState,
+  MapViewProps,
+  UserLocationProps,
+  LightStyle,
+  Transition,
+  BackgroundLayerStyle,
+  CircleLayerStyle,
+  FillExtrusionLayerStyle,
+  FillLayerStyle,
+  LineLayerStyle,
+  RasterLayerStyle,
+  SymbolLayerStyle,
+  HeatmapLayerStyle,
+  Point,
+  LightProps,
+  PointAnnotationProps,
+  StyleProps,
+  CalloutProps,
+  TileSourceProps,
+  VectorSourceProps,
+  ShapeSourceProps,
+  RasterSourceProps,
+  LayerBaseProps,
+  BackgroundLayerProps,
+  CircleLayerProps,
+  FillExtrusionLayerProps,
+  FillLayerProps,
+  LineLayerProps,
+  RasterLayerProps,
+  HeatmapLayerProps,
+  ImagesProps,
+  ImageSourceProps,
+  OfflineCreatePackOptions,
+  SnapshotOptions,
+} from 'definitions';
 
 import { isAndroid } from './javascript/utils';
 import MapView from './javascript/components/MapView';
@@ -149,51 +193,53 @@ export {
 };
 
 export type {
+  // TS types
   CameraProps,
   CameraRef,
   AnimationMode,
-  // Expression,
-  // MapboxGLEvent,
-  // OnPressEvent,
-  // OrnamentPosition,
-  // WithExpression,
-  // TextVariableAnchorValues,
-  // MarkerViewProps,
-  // RegionPayload,
-  // MapState,
-  // MapViewProps,
-  // UserLocationProps,
-  // LightStyle,
-  // Transition,
-  // BackgroundLayerStyle,
-  // CircleLayerStyle,
-  // FillExtrusionLayerStyle,
-  // FillLayerStyle,
-  // LineLayerStyle,
-  // RasterLayerStyle,
-  // SymbolLayerStyle,
-  // HeatmapLayerStyle,
-  // Point,
-  // LightProps,
-  // PointAnnotationProps,
-  // StyleProps,
-  // CalloutProps,
-  // TileSourceProps,
-  // VectorSourceProps,
-  // ShapeSourceProps,
-  // RasterSourceProps,
-  // LayerBaseProps,
-  // BackgroundLayerProps,
-  // CircleLayerProps,
-  // FillExtrusionLayerProps,
-  // FillLayerProps,
-  // LineLayerProps,
-  // RasterLayerProps,
-  // HeatmapLayerProps,
-  // ImagesProps,
-  // ImageSourceProps,
-  // OfflineCreatePackOptions,
-  // SnapshotOptions,
+  // JS definitions
+  Expression,
+  MapboxGLEvent,
+  OnPressEvent,
+  OrnamentPosition,
+  WithExpression,
+  TextVariableAnchorValues,
+  MarkerViewProps,
+  RegionPayload,
+  MapState,
+  MapViewProps,
+  UserLocationProps,
+  LightStyle,
+  Transition,
+  BackgroundLayerStyle,
+  CircleLayerStyle,
+  FillExtrusionLayerStyle,
+  FillLayerStyle,
+  LineLayerStyle,
+  RasterLayerStyle,
+  SymbolLayerStyle,
+  HeatmapLayerStyle,
+  Point,
+  LightProps,
+  PointAnnotationProps,
+  StyleProps,
+  CalloutProps,
+  TileSourceProps,
+  VectorSourceProps,
+  ShapeSourceProps,
+  RasterSourceProps,
+  LayerBaseProps,
+  BackgroundLayerProps,
+  CircleLayerProps,
+  FillExtrusionLayerProps,
+  FillLayerProps,
+  LineLayerProps,
+  RasterLayerProps,
+  HeatmapLayerProps,
+  ImagesProps,
+  ImageSourceProps,
+  OfflineCreatePackOptions,
+  SnapshotOptions,
 };
 
 export default MapboxGL;

From 7d3793f62eb3d8cc6fcc59e75540e9797ff2f088 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 29 Apr 2022 09:52:40 -0500
Subject: [PATCH 34/84] Move definitions file back to javascript folder

---
 .github/pull_request_template.md          | 2 +-
 CONTRIBUTING.md                           | 2 +-
 index.ts                                  | 2 +-
 definitions.d.ts => javascript/index.d.ts | 0
 scripts/autogenerate.js                   | 8 ++++----
 tsconfig.json                             | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)
 rename definitions.d.ts => javascript/index.d.ts (100%)

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 6ae4f822f..058d6e1f5 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -20,7 +20,7 @@ Added `your feature` that allows ...
 - [ ] I have tested this on a device/simulator for each compatible OS
 - [ ] I updated the documentation with running `yarn generate` in the root folder
 - [ ] I mentioned this change in `CHANGELOG.md`
-- [ ] I updated the typings files (`definitions.d.ts`)
+- [ ] I updated the typings files (`index.d.ts`)
 - [ ] I added/ updated a sample (`/example`)
 
 ## Screenshot OR Video
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 4acad5d3f..b94508c0a 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -16,7 +16,7 @@ it will be reflected in any scene in example that uses that component.
 ## Best practices for PR's
 
 - If you add a feature, make sure you add it to the documentation
-- If you add an objective-c or java method, make sure you update the declaration file: `definitions.d.ts`.
+- If you add an objective-c or java method, make sure you update the declaration file: `index.d.ts`.
 - Make sure to use small concise commits
 - Use meaningful commit messages
 - Make sure to update/ add new tests for your changes
diff --git a/index.ts b/index.ts
index 01eb6651a..71f3ae140 100644
--- a/index.ts
+++ b/index.ts
@@ -42,7 +42,7 @@ import {
   ImageSourceProps,
   OfflineCreatePackOptions,
   SnapshotOptions,
-} from 'definitions';
+} from 'javascript';
 
 import { isAndroid } from './javascript/utils';
 import MapView from './javascript/components/MapView';
diff --git a/definitions.d.ts b/javascript/index.d.ts
similarity index 100%
rename from definitions.d.ts
rename to javascript/index.d.ts
diff --git a/scripts/autogenerate.js b/scripts/autogenerate.js
index 03ce31544..5052b5152 100644
--- a/scripts/autogenerate.js
+++ b/scripts/autogenerate.js
@@ -415,10 +415,10 @@ async function generate() {
       output: path.join(IOS_OUTPUT_PATH, 'RCTMGLStyle.h'),
       only: 'gl',
     },
-    // {
-    //   input: path.join(TMPL_PATH, 'definitions.d.ts.ejs'),
-    //   output: path.join(IOS_OUTPUT_PATH, 'definitions.d.ts'),
-    // },
+    {
+      input: path.join(TMPL_PATH, 'index.d.ts.ejs'),
+      output: path.join(IOS_OUTPUT_PATH, 'index.d.ts'),
+    },
     {
       input: path.join(TMPL_PATH, 'RCTMGLStyle.m.ejs'),
       output: path.join(IOS_OUTPUT_PATH, 'RCTMGLStyle.m'),
diff --git a/tsconfig.json b/tsconfig.json
index 471f54d1b..0d490d56b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -41,7 +41,7 @@
     "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
     "paths": {
       /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-      "@rnmapbox/maps": ["index.ts", "definitions.d.ts"],
+      "@rnmapbox/maps": ["index.ts", "javascript/index.d.ts"],
       "react": ["node_modules/@types/react"],
       "react-native": ["node_modules/@types/react-native"]
     },

From d88183052939d6cbede408854adf91a6a3edbca5 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 29 Apr 2022 11:37:59 -0500
Subject: [PATCH 35/84] Refactor and distinguish exports as components, types,
 etc.

---
 index.ts              | 905 +++++++++++++++++++++++++++++++++++++-----
 javascript/index.d.ts | 769 ++---------------------------------
 2 files changed, 843 insertions(+), 831 deletions(-)

diff --git a/index.ts b/index.ts
index 71f3ae140..3605ca642 100644
--- a/index.ts
+++ b/index.ts
@@ -1,50 +1,14 @@
-import { NativeModules, PermissionsAndroid } from 'react-native';
+import { ReactNode, SyntheticEvent } from 'react';
 import {
-  Expression,
-  MapboxGLEvent,
-  OnPressEvent,
-  OrnamentPosition,
-  WithExpression,
-  TextVariableAnchorValues,
-  MarkerViewProps,
-  RegionPayload,
-  MapState,
-  MapViewProps,
-  UserLocationProps,
-  LightStyle,
-  Transition,
-  BackgroundLayerStyle,
-  CircleLayerStyle,
-  FillExtrusionLayerStyle,
-  FillLayerStyle,
-  LineLayerStyle,
-  RasterLayerStyle,
-  SymbolLayerStyle,
-  HeatmapLayerStyle,
-  Point,
-  LightProps,
-  PointAnnotationProps,
-  StyleProps,
-  CalloutProps,
-  TileSourceProps,
-  VectorSourceProps,
-  ShapeSourceProps,
-  RasterSourceProps,
-  LayerBaseProps,
-  BackgroundLayerProps,
-  CircleLayerProps,
-  FillExtrusionLayerProps,
-  FillLayerProps,
-  LineLayerProps,
-  RasterLayerProps,
-  HeatmapLayerProps,
-  ImagesProps,
-  ImageSourceProps,
-  OfflineCreatePackOptions,
-  SnapshotOptions,
-} from 'javascript';
+  ViewProps,
+  ViewStyle,
+  StyleProp,
+  TextStyle,
+  ImageSourcePropType,
+} from 'react-native';
+import { NativeModules, PermissionsAndroid } from 'react-native';
+import { Units, BBox, Id } from '@turf/helpers';
 
-import { isAndroid } from './javascript/utils';
 import MapView from './javascript/components/MapView';
 import Light from './javascript/components/Light';
 import PointAnnotation from './javascript/components/PointAnnotation';
@@ -54,7 +18,7 @@ import UserLocation from './javascript/components/UserLocation';
 import Camera, {
   CameraProps,
   CameraRef,
-  UserTrackingModes,
+  UserTrackingMode,
   AnimationMode,
 } from './javascript/components/Camera';
 import VectorSource from './javascript/components/VectorSource';
@@ -85,6 +49,715 @@ import AnimatedExtractCoordinateFromArray from './javascript/utils/animated/Anim
 import AnimatedRouteCoordinatesArray from './javascript/utils/animated/AnimatedRouteCoordinatesArray';
 import Style from './javascript/components/Style';
 import Logger from './javascript/utils/Logger';
+import { isAndroid } from './javascript/utils';
+
+// Types
+
+interface OfflineProgressStatus {
+  name: string;
+  state: number;
+  percentage: number;
+  completedResourceSize: number;
+  completedTileCount: number;
+  completedResourceCount: number;
+  requiredResourceCount: number;
+  completedTileSize: number;
+}
+
+interface OfflineProgressError {
+  message: string;
+  name: string;
+}
+
+interface OfflinePack {
+  name: string;
+  bounds: [GeoJSON.Position, GeoJSON.Position];
+  metadata: any;
+  status: () => Promise<OfflinePackStatus>;
+  resume: () => Promise<void>;
+  pause: () => Promise<void>;
+}
+
+interface OfflinePackStatus {
+  name: string;
+  state: number;
+  percentage: number;
+  completedResourceCount: number;
+  completedResourceSize: number;
+  completedTileSize: number;
+  completedTileCount: number;
+  requiredResourceCount: number;
+}
+
+type OrnamentPosition =
+  | { top: number; left: number }
+  | { top: number; right: number }
+  | { bottom: number; left: number }
+  | { bottom: number; right: number };
+
+/**
+ * <v10.
+ */
+interface RegionPayload {
+  zoomLevel: number;
+  heading: number;
+  animated: boolean;
+  isUserInteraction: boolean;
+  visibleBounds: GeoJSON.Position[];
+  pitch: number;
+}
+
+/**
+ * v10 only.
+ */
+interface MapState {
+  properties: {
+    center: GeoJSON.Position;
+    bounds: {
+      ne: GeoJSON.Position;
+      sw: GeoJSON.Position;
+    };
+    zoom: number;
+    heading: number;
+    pitch: number;
+  };
+  gestures: {
+    isGestureActive: boolean;
+    isAnimatingFromGesture: boolean;
+  };
+}
+
+interface MapViewProps extends ViewProps {
+  animated?: boolean;
+  userTrackingMode?: UserTrackingMode;
+  userLocationVerticalAlignment?: number;
+  contentInset?: Array<number>;
+  style?: StyleProp<ViewStyle>;
+  styleURL?: string;
+  styleJSON?: string;
+  preferredFramesPerSecond?: number;
+  localizeLabels?: boolean;
+  zoomEnabled?: boolean;
+  scrollEnabled?: boolean;
+  pitchEnabled?: boolean;
+  rotateEnabled?: boolean;
+  attributionEnabled?: boolean;
+  attributionPosition?: OrnamentPosition;
+  logoEnabled?: boolean;
+  logoPosition?: OrnamentPosition;
+  compassEnabled?: boolean;
+  compassPosition?: OrnamentPosition;
+  compassViewPosition?: number;
+  compassViewMargins?: Point;
+  scaleBarEnabled?: boolean;
+  scaleBarPosition?: OrnamentPosition;
+  surfaceView?: boolean;
+  regionWillChangeDebounceTime?: number;
+  regionDidChangeDebounceTime?: number;
+  tintColor?: string;
+
+  onPress?: (feature: GeoJSON.Feature) => void;
+  onLongPress?: (feature: GeoJSON.Feature) => void;
+  onRegionWillChange?: (
+    feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
+  ) => void;
+  onRegionIsChanging?: (
+    feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
+  ) => void;
+  onRegionDidChange?: (
+    feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
+  ) => void;
+  onCameraChanged?: (state: MapState) => void;
+  onMapIdle?: (state: MapState) => void;
+  onUserLocationUpdate?: (feature: Location) => void;
+  onWillStartLoadingMap?: () => void;
+  onDidFinishLoadingMap?: () => void;
+  onDidFailLoadingMap?: () => void;
+  onWillStartRenderingFrame?: () => void;
+  onDidFinishRenderingFrame?: () => void;
+  onDidFinishRenderingFrameFully?: () => void;
+  onWillStartRenderingMap?: () => void;
+  onDidFinishRenderingMap?: () => void;
+  onDidFinishRenderingMapFully?: () => void;
+  onDidFinishLoadingStyle?: () => void;
+  onUserTrackingModeChange?: () => void;
+}
+
+interface UserLocationProps {
+  androidRenderMode?: 'normal' | 'compass' | 'gps';
+  animated?: boolean;
+  children?: ReactNode;
+  minDisplacement?: number;
+  onPress?: () => void;
+  onUpdate?: (location: Location) => void;
+  renderMode?: 'normal' | 'native';
+  showsUserHeadingIndicator?: boolean;
+  visible?: boolean;
+}
+
+type WithExpression<T> = {
+  [P in keyof T]: T[P] | Expression;
+};
+
+interface LightStyle {
+  anchor?: Alignment | Expression;
+  position?: GeoJSON.Position | Expression;
+  positionTransition?: Transition | Expression;
+  color?: string | Expression;
+  colorTransition?: Transition | Expression;
+  intensity?: number | Expression;
+  intensityTransition?: Transition | Expression;
+}
+
+interface Transition {
+  duration: number;
+  delay: number;
+}
+
+interface BackgroundLayerStyle {
+  visibility?: Visibility | Expression;
+  backgroundColor?: string | Expression;
+  backgroundColorTransition?: Transition | Expression;
+  backgroundPattern?: string | Expression;
+  backgroundPatternTransition?: Transition | Expression;
+  backgroundOpacity?: number | Expression;
+  backgroundOpacityTransition?: Transition | Expression;
+}
+
+interface CircleLayerStyle {
+  visibility?: Visibility | Expression;
+  circleRadius?: number | Expression;
+  circleRadiusTransition?: Transition | Expression;
+  circleColor?: string | Expression;
+  circleColorTransition?: Transition | Expression;
+  circleBlur?: number | Expression;
+  circleBlurTransition?: Transition | Expression;
+  circleOpacity?: number | Expression;
+  circleOpacityTransition?: Transition | Expression;
+  circleTranslate?: Array<number> | Expression;
+  circleTranslateTransition?: Transition | Expression;
+  circleTranslateAnchor?: Alignment | Expression;
+  circlePitchScale?: Alignment | Expression;
+  circlePitchAlignment?: Alignment | Expression;
+  circleStrokeWidth?: number | Expression;
+  circleStrokeWidthTransition?: Transition | Expression;
+  circleStrokeColor?: string | Expression;
+  circleStrokeColorTransition?: Transition | Expression;
+  circleStrokeOpacity?: number | Expression;
+  circleStrokeOpacityTransition?: Transition | Expression;
+}
+
+interface FillExtrusionLayerStyle {
+  visibility?: Visibility | Expression;
+  fillExtrusionOpacity?: number | Expression;
+  fillExtrusionOpacityTransition?: Transition | Expression;
+  fillExtrusionColor?: string | Expression;
+  fillExtrusionColorTransition?: Transition | Expression;
+  fillExtrusionTranslate?: Array<number> | Expression;
+  fillExtrusionTranslateTransition?: Transition | Expression;
+  fillExtrusionTranslateAnchor?: Alignment | Expression;
+  fillExtrusionPattern?: string | Expression;
+  fillExtrusionPatternTransition?: Transition | Expression;
+  fillExtrusionHeight?: number | Expression;
+  fillExtrusionHeightTransition?: Transition | Expression;
+  fillExtrusionBase?: number | Expression;
+  fillExtrusionBaseTransition?: Transition | Expression;
+}
+
+interface FillLayerStyle {
+  visibility?: Visibility | Expression;
+  fillAntialias?: boolean | Expression;
+  fillOpacity?: number | Expression;
+  fillExtrusionOpacityTransition?: Transition | Expression;
+  fillColor?: string | Expression;
+  fillColorTransition?: Transition | Expression;
+  fillOutlineColor?: string | Expression;
+  fillOutlineColorTransition?: Transition | Expression;
+  fillTranslate?: Array<number> | Expression;
+  fillTranslateTransition?: Transition | Expression;
+  fillTranslateAnchor?: Alignment | Expression;
+  fillPattern?: string | Expression;
+  fillPatternTransition?: Transition | Expression;
+}
+
+interface LineLayerStyle {
+  lineCap?: 'butt' | 'round' | 'square' | Expression;
+  lineJoin?: 'bevel' | 'round' | 'miter' | Expression;
+  lineMiterLimit?: number | Expression;
+  lineRoundLimit?: number | Expression;
+  visibility?: Visibility | Expression;
+  lineOpacity?: number | Expression;
+  lineOpacityTransition?: Transition | Expression;
+  lineColor?: string | Expression;
+  lineColorTransition?: Transition | Expression;
+  lineTranslate?: Array<number> | Expression;
+  lineTranslateTransition?: Transition | Expression;
+  lineTranslateAnchor?: Alignment | Expression;
+  lineWidth?: number | Expression;
+  lineWidthTransition?: Transition | Expression;
+  lineGapWidth?: number | Expression;
+  lineGapWidthTransition?: Transition | Expression;
+  lineOffset?: number | Expression;
+  lineOffsetTransition?: Transition | Expression;
+  lineBlur?: number | Expression;
+  lineBlurTransition?: Transition | Expression;
+  lineDasharray?: Array<number> | Expression;
+  lineDasharrayTransition?: Transition | Expression;
+  linePattern?: string | Expression;
+  linePatternTransition?: Transition | Expression;
+}
+
+interface RasterLayerStyle {
+  visibility?: Visibility | Expression;
+  rasterOpacity?: number | Expression;
+  rasterOpacityTransition?: Transition | Expression;
+  rasterHueRotate?: Expression;
+  rasterHueRotateTransition?: Transition | Expression;
+  rasterBrightnessMin?: number | Expression;
+  rasterBrightnessMinTransition?: Transition | Expression;
+  rasterBrightnessMax?: number | Expression;
+  rasterBrightnessMaxTransition?: Transition | Expression;
+  rasterSaturation?: number | Expression;
+  rasterSaturationTransition?: Transition | Expression;
+  rasterContrast?: number | Expression;
+  rasterContrastTransition?: Transition | Expression;
+  rasterFadeDuration?: number | Expression;
+}
+
+type TextVariableAnchorValues =
+  | 'center'
+  | 'left'
+  | 'right'
+  | 'top'
+  | 'bottom'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right';
+
+interface SymbolLayerStyle {
+  symbolPlacement?: 'point' | 'line' | Expression;
+  symbolSpacing?: number | Expression;
+  symbolAvoidEdges?: boolean | Expression;
+  symbolSortKey?: number | Expression;
+  symbolZOrder?: 'auto' | 'viewport-y' | 'source' | Expression;
+  iconAllowOverlap?: boolean | Expression;
+  iconIgnorePlacement?: boolean | Expression;
+  iconOptional?: boolean | Expression;
+  iconRotationAlignment?: AutoAlignment | Expression;
+  iconSize?: number | Expression;
+  iconTextFit?: 'none' | 'width' | 'height' | 'both' | Expression;
+  iconTextFitPadding?: Array<number> | Expression;
+  iconImage?: string | Expression;
+  iconRotate?: number | Expression;
+  iconPadding?: number | Expression;
+  iconKeepUpright?: boolean | Expression;
+  iconOffset?: Array<number> | Expression;
+  iconAnchor?: Anchor | Expression;
+  iconPitchAlignment?: AutoAlignment | Expression;
+  textPitchAlignment?: AutoAlignment | Expression;
+  textRotationAlignment?: AutoAlignment | Expression;
+  textField?: string | Expression;
+  textFont?: Array<string> | Expression;
+  textSize?: number | Expression;
+  textMaxWidth?: number | Expression;
+  textLineHeight?: number | Expression;
+  textLetterSpacing?: number | Expression;
+  textJustify?: 'left' | 'center' | 'right' | Expression;
+  textAnchor?: Anchor | Expression;
+  textMaxAngle?: number | Expression;
+  textRotate?: number | Expression;
+  textPadding?: number | Expression;
+  textKeepUpright?: boolean | Expression;
+  textTransform?: 'none' | 'uppercase' | 'lowercase' | Expression;
+  textOffset?: Array<number> | Expression;
+  textAllowOverlap?: boolean | Expression;
+  textIgnorePlacement?: boolean | Expression;
+  textOptional?: boolean | Expression;
+  textVariableAnchor?: Array<TextVariableAnchorValues>;
+  textRadialOffset?: number | Expression;
+  visibility?: Visibility | Expression;
+  iconOpacity?: number | Expression;
+  iconOpacityTransition?: Transition | Expression;
+  iconColor?: string | Expression;
+  iconColorTransition?: Transition | Expression;
+  iconHaloColor?: string | Expression;
+  iconHaloColorTransition?: Transition | Expression;
+  iconHaloWidth?: number | Expression;
+  iconHaloWidthTransition?: Transition | Expression;
+  iconHaloBlur?: number | Expression;
+  iconHaloBlurTransition?: Transition | Expression;
+  iconTranslate?: Array<number> | Expression;
+  iconTranslateTransition?: Transition | Expression;
+  iconTranslateAnchor?: Alignment | Expression;
+  textOpacity?: number | Expression;
+  textOpacityTransition?: Transition | Expression;
+  textColor?: string | Expression;
+  textColorTransition?: Transition | Expression;
+  textHaloColor?: string | Expression;
+  textHaloColorTransition?: Transition | Expression;
+  textHaloWidth?: number | Expression;
+  textHaloWidthTransition?: Transition | Expression;
+  textHaloBlur?: number | Expression;
+  textHaloBlurTransition?: Transition | Expression;
+  textTranslate?: Array<number> | Expression;
+  textTranslateTransition?: Transition | Expression;
+  textTranslateAnchor?: Alignment | Expression;
+}
+
+interface HeatmapLayerStyle {
+  visibility?: Visibility | Expression;
+  heatmapRadius?: number | Expression;
+  heatmapRadiusTransition?: Transition | Expression;
+  heatmapWeight?: number | Expression;
+  heatmapIntensity?: number | Expression;
+  heatmapIntensityTransition?: Transition | Expression;
+  heatmapColor?: string | Expression;
+  heatmapOpacity?: number | Expression;
+  heatmapOpacityTransition?: Transition | Expression;
+}
+
+interface Point {
+  x: number;
+  y: number;
+}
+
+interface LightProps extends Omit<ViewProps, 'style'> {
+  style?: LightStyle;
+}
+
+interface PointAnnotationProps {
+  id: string;
+  title?: string;
+  snippet?: string;
+  selected?: boolean;
+  draggable?: boolean;
+  coordinate: GeoJSON.Position;
+  anchor?: Point;
+  onSelected?: () => void;
+  onDeselected?: () => void;
+  onDragStart?: () => void;
+  onDrag?: () => void;
+  onDragEnd?: () => void;
+}
+
+type MarkerViewProps = PointAnnotationProps;
+
+interface StyleProps {
+  json: any;
+}
+
+interface CalloutProps extends Omit<ViewProps, 'style'> {
+  title?: string;
+  style?: StyleProp<WithExpression<ViewStyle>>;
+  containerStyle?: StyleProp<WithExpression<ViewStyle>>;
+  contentStyle?: StyleProp<WithExpression<ViewStyle>>;
+  tipStyle?: StyleProp<WithExpression<ViewStyle>>;
+  textStyle?: StyleProp<WithExpression<TextStyle>>;
+}
+
+interface TileSourceProps extends ViewProps {
+  id: string;
+  url?: string;
+  tileUrlTemplates?: Array<string>;
+  minZoomLevel?: number;
+  maxZoomLevel?: number;
+}
+
+interface VectorSourceProps extends TileSourceProps {
+  onPress?: (event: OnPressEvent) => void;
+  hitbox?: {
+    width: number;
+    height: number;
+  };
+}
+
+interface ShapeSourceProps extends ViewProps {
+  id: string;
+  url?: string;
+  shape?:
+    | GeoJSON.GeometryCollection
+    | GeoJSON.Feature
+    | GeoJSON.FeatureCollection
+    | GeoJSON.Geometry;
+  cluster?: boolean;
+  clusterRadius?: number;
+  clusterMaxZoomLevel?: number;
+  clusterProperties?: object;
+  maxZoomLevel?: number;
+  buffer?: number;
+  tolerance?: number;
+  lineMetrics?: boolean;
+  images?: { assets?: string[] } & { [key: string]: ImageSourcePropType };
+  onPress?: (event: OnPressEvent) => void;
+  hitbox?: {
+    width: number;
+    height: number;
+  };
+}
+
+interface RasterSourceProps extends TileSourceProps {
+  tileSize?: number;
+}
+
+interface LayerBaseProps<T = object> extends Omit<ViewProps, 'style'> {
+  id: string;
+  sourceID?: string;
+  sourceLayerID?: string;
+  aboveLayerID?: string;
+  belowLayerID?: string;
+  layerIndex?: number;
+  filter?: Expression;
+  minZoomLevel?: number;
+  maxZoomLevel?: number;
+}
+
+interface BackgroundLayerProps extends LayerBaseProps {
+  style?: StyleProp<BackgroundLayerStyle>;
+}
+
+interface CircleLayerProps extends LayerBaseProps {
+  style?: StyleProp<CircleLayerStyle>;
+}
+
+interface FillExtrusionLayerProps extends Omit<LayerBaseProps, 'id'> {
+  id: string;
+  style?: StyleProp<FillExtrusionLayerStyle>;
+}
+
+interface FillLayerProps extends LayerBaseProps {
+  style?: StyleProp<FillLayerStyle>;
+}
+
+interface LineLayerProps extends LayerBaseProps {
+  style?: StyleProp<LineLayerStyle>;
+}
+
+interface RasterLayerProps extends LayerBaseProps {
+  style?: StyleProp<RasterLayerStyle>;
+}
+
+interface SymbolLayerProps extends LayerBaseProps {
+  style?: StyleProp<SymbolLayerStyle>;
+}
+
+interface HeatmapLayerProps extends LayerBaseProps {
+  style?: StyleProp<HeatmapLayerStyle>;
+}
+
+interface ImagesProps extends ViewProps {
+  images?: { assets?: string[] } & { [key: string]: ImageSourcePropType };
+  nativeAssetImages?: string[];
+  onImageMissing?: (imageKey: string) => void;
+}
+
+interface ImageSourceProps extends ViewProps {
+  id: string;
+  url?: number | string;
+  coordinates: [
+    GeoJSON.Position,
+    GeoJSON.Position,
+    GeoJSON.Position,
+    GeoJSON.Position,
+  ];
+}
+
+interface OfflineCreatePackOptions {
+  name?: string;
+  styleURL?: string;
+  bounds?: [GeoJSON.Position, GeoJSON.Position];
+  minZoom?: number;
+  maxZoom?: number;
+  metadata?: any;
+}
+
+interface SnapshotOptions {
+  centerCoordinate?: GeoJSON.Position;
+  width?: number;
+  height?: number;
+  zoomLevel?: number;
+  pitch?: number;
+  heading?: number;
+  styleURL?: string;
+  writeToDisk?: boolean;
+}
+
+type LogLevel = 'error' | 'warning' | 'info' | 'debug' | 'verbose';
+
+interface LogObject {
+  level: LogLevel;
+  message: string;
+  tag: string;
+}
+
+type LogCallback = (object: LogObject) => void;
+
+interface Location {
+  coords: Coordinates;
+  timestamp?: number;
+}
+
+interface Coordinates {
+  /**
+   * The heading (measured in degrees) relative to true north.
+   * Heading is used to describe the direction the device is pointing to (the value of the compass).
+   * Note that on Android this is incorrectly reporting the course value as mentioned in issue https://github.com/rnmapbox/maps/issues/1213
+   * and will be corrected in a future update.
+   */
+  heading?: number;
+
+  /**
+   * The direction in which the device is traveling, measured in degrees and relative to due north.
+   * The course refers to the direction the device is actually moving (not the same as heading).
+   */
+  course?: number;
+
+  /**
+   * The instantaneous speed of the device, measured in meters per second.
+   */
+  speed?: number;
+
+  /**
+   * The latitude in degrees.
+   */
+  latitude: number;
+
+  /**
+   * The longitude in degrees.
+   */
+  longitude: number;
+
+  /**
+   * The radius of uncertainty for the location, measured in meters.
+   */
+  accuracy?: number;
+
+  /**
+   * The altitude, measured in meters.
+   */
+  altitude?: number;
+}
+
+type Padding = number | [number, number] | [number, number, number, number];
+
+// prettier-ignore
+type ExpressionName =
+  // Types
+  | 'array' | 'boolean' | 'collator' | 'format' | 'image' | 'literal' | 'number' | 'number-format' | 'object' | 'string'
+  | 'to-boolean' | 'to-color' | 'to-number' | 'to-string' | 'typeof'
+  // Feature data
+  | 'accumulated' | 'feature-state' | 'geometry-type' | 'id' | 'line-progress' | 'properties'
+  // Lookup
+  | 'at' | 'get' | 'has' | 'in' | 'index-of' | 'length' | 'slice'
+  // Decision
+  | '!' | '!=' | '<' | '<=' | '==' | '>' | '>=' | 'all' | 'any' | 'case' | 'match' | 'coalesce' | 'within'
+  // Ramps, scales, curves
+  | 'interpolate' | 'interpolate-hcl' | 'interpolate-lab' | 'step'
+  // Variable binding
+  | 'let' | 'var'
+  // String
+  | 'concat' | 'downcase' | 'is-supported-script' | 'resolved-locale' | 'upcase'
+  // Color
+  | 'rgb' | 'rgba' | 'to-rgba'
+  // Math
+  | '-' | '*' | '/' | '%' | '^' | '+' | 'abs' | 'acos' | 'asin' | 'atan' | 'ceil' | 'cos' | 'distance' | 'e'
+  | 'floor' | 'ln' | 'ln2' | 'log10' | 'log2' | 'max' | 'min' | 'pi' | 'round' | 'sin' | 'sqrt' | 'tan'
+  // Zoom, Heatmap
+  | 'zoom' | 'heatmap-density';
+
+type ExpressionField =
+  | string
+  | number
+  | boolean
+  | Expression
+  | ExpressionField[]
+  | { [key: string]: ExpressionField };
+
+type Expression = [ExpressionName, ...ExpressionField[]];
+
+type Anchor =
+  | 'center'
+  | 'left'
+  | 'right'
+  | 'top'
+  | 'bottom'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right';
+type Visibility = 'visible' | 'none';
+type Alignment = 'map' | 'viewport';
+type AutoAlignment = Alignment | 'auto';
+
+type NamedStyles<T> = {
+  [P in keyof T]:
+    | SymbolLayerStyle
+    | RasterLayerStyle
+    | LineLayerStyle
+    | FillLayerStyle
+    | FillExtrusionLayerStyle
+    | CircleLayerStyle
+    | BackgroundLayerStyle;
+};
+
+type MapboxGLEvent<
+  T extends string,
+  P = GeoJSON.Feature,
+  V = Element,
+> = SyntheticEvent<V, { type: T; payload: P }>;
+
+type OnPressEvent = {
+  features: Array<GeoJSON.Feature>;
+  coordinates: {
+    latitude: number;
+    longitude: number;
+  };
+  point: {
+    x: number;
+    y: number;
+  };
+};
+
+interface UnitsOptions {
+  units?: Units;
+}
+
+interface PositionsOptions {
+  bbox?: BBox;
+  id?: Id;
+}
+
+type StyleURLKey =
+  | 'Street'
+  | 'Dark'
+  | 'Light'
+  | 'Outdoors'
+  | 'Satellite'
+  | 'SatelliteStreet'
+  | 'TrafficDay'
+  | 'TrafficNight';
+
+// Enums
+
+enum InterpolationMode {
+  Exponential = 0,
+  Categorical = 1,
+  Interval = 2,
+  Identity = 3,
+}
+
+const StyleURL: Record<StyleURLKey, string> = {
+  Street: 'mapbox://styles/mapbox/streets-v11',
+  Dark: 'mapbox://styles/mapbox/dark-v10',
+  Light: 'mapbox://styles/mapbox/light-v10',
+  Outdoors: 'mapbox://styles/mapbox/outdoors-v11',
+  Satellite: 'mapbox://styles/mapbox/satellite-v9',
+  SatelliteStreet: 'mapbox://styles/mapbox/satellite-streets-v11',
+  TrafficDay: 'mapbox://styles/mapbox/navigation-preview-day-v4',
+  TrafficNight: 'mapbox://styles/mapbox/navigation-preview-night-v4',
+};
+
+// Methods
 
 const requestAndroidLocationPermissions = async function () {
   if (isAndroid()) {
@@ -111,65 +784,23 @@ const requestAndroidLocationPermissions = async function () {
   throw new Error('You should only call this method on Android!');
 };
 
-const MapboxGL = {
-  ...NativeModules.MGLModule,
-  requestAndroidLocationPermissions,
-  UserTrackingModes,
-  MapView,
-  Light,
-  PointAnnotation,
-  Callout,
-  UserLocation,
-  Camera,
-  Style,
-  Annotation,
-  MarkerView,
-  VectorSource,
-  ShapeSource,
-  RasterSource,
-  ImageSource,
-  Images,
-  RasterDemSource,
-  FillLayer,
-  FillExtrusionLayer,
-  HeatmapLayer,
-  LineLayer,
-  CircleLayer,
-  SkyLayer,
-  SymbolLayer,
-  RasterLayer,
-  BackgroundLayer,
-  Terrain,
-  locationManager,
-  offlineManager,
-  snapshotManager,
-  Animated,
-  AnimatedPoint,
-  AnimatedCoordinatesArray,
-  AnimatedExtractCoordinateFromArray,
-  AnimatedRouteCoordinatesArray,
-  AnimatedShape,
-  Logger,
-};
+// Export
 
 export {
-  requestAndroidLocationPermissions,
-  UserTrackingModes,
+  // Components
   MapView,
   Light,
   PointAnnotation,
+  Annotation,
   Callout,
   UserLocation,
   Camera,
-  Style,
-  Annotation,
-  MarkerView,
   VectorSource,
   ShapeSource,
   RasterSource,
+  RasterDemSource,
   ImageSource,
   Images,
-  RasterDemSource,
   FillLayer,
   FillExtrusionLayer,
   HeatmapLayer,
@@ -183,32 +814,37 @@ export {
   locationManager,
   offlineManager,
   snapshotManager,
+  MarkerView,
   Animated,
   AnimatedPoint,
+  AnimatedShape,
   AnimatedCoordinatesArray,
   AnimatedExtractCoordinateFromArray,
   AnimatedRouteCoordinatesArray,
-  AnimatedShape,
+  Style,
   Logger,
+  // Enums
+  InterpolationMode,
+  StyleURL,
+  // Methods
+  requestAndroidLocationPermissions,
 };
 
 export type {
-  // TS types
+  // Types
   CameraProps,
   CameraRef,
   AnimationMode,
-  // JS definitions
-  Expression,
-  MapboxGLEvent,
-  OnPressEvent,
+  OfflineProgressStatus,
+  OfflineProgressError,
+  OfflinePack,
+  OfflinePackStatus,
   OrnamentPosition,
-  WithExpression,
-  TextVariableAnchorValues,
-  MarkerViewProps,
   RegionPayload,
   MapState,
   MapViewProps,
   UserLocationProps,
+  WithExpression,
   LightStyle,
   Transition,
   BackgroundLayerStyle,
@@ -217,11 +853,13 @@ export type {
   FillLayerStyle,
   LineLayerStyle,
   RasterLayerStyle,
+  TextVariableAnchorValues,
   SymbolLayerStyle,
   HeatmapLayerStyle,
   Point,
   LightProps,
   PointAnnotationProps,
+  MarkerViewProps,
   StyleProps,
   CalloutProps,
   TileSourceProps,
@@ -235,11 +873,76 @@ export type {
   FillLayerProps,
   LineLayerProps,
   RasterLayerProps,
+  SymbolLayerProps,
   HeatmapLayerProps,
   ImagesProps,
   ImageSourceProps,
   OfflineCreatePackOptions,
   SnapshotOptions,
+  LogLevel,
+  LogObject,
+  LogCallback,
+  Location,
+  Coordinates,
+  Padding,
+  ExpressionName,
+  ExpressionField,
+  Expression,
+  Anchor,
+  Visibility,
+  Alignment,
+  AutoAlignment,
+  NamedStyles,
+  MapboxGLEvent,
+  OnPressEvent,
+  UnitsOptions,
+  PositionsOptions,
+  StyleURLKey,
+};
+
+const MapboxGL = {
+  ...NativeModules.MGLModule,
+  // Components
+  MapView,
+  Light,
+  PointAnnotation,
+  Annotation,
+  Callout,
+  UserLocation,
+  Camera,
+  VectorSource,
+  ShapeSource,
+  RasterSource,
+  RasterDemSource,
+  ImageSource,
+  Images,
+  FillLayer,
+  FillExtrusionLayer,
+  HeatmapLayer,
+  LineLayer,
+  CircleLayer,
+  SkyLayer,
+  SymbolLayer,
+  RasterLayer,
+  BackgroundLayer,
+  Terrain,
+  locationManager,
+  offlineManager,
+  snapshotManager,
+  MarkerView,
+  Animated,
+  AnimatedPoint,
+  AnimatedShape,
+  AnimatedCoordinatesArray,
+  AnimatedExtractCoordinateFromArray,
+  AnimatedRouteCoordinatesArray,
+  Style,
+  Logger,
+  // Enums
+  InterpolationMode,
+  StyleURL,
+  // Methods
+  requestAndroidLocationPermissions,
 };
 
 export default MapboxGL;
diff --git a/javascript/index.d.ts b/javascript/index.d.ts
index 550c58a20..468e4d6fc 100644
--- a/javascript/index.d.ts
+++ b/javascript/index.d.ts
@@ -1,13 +1,6 @@
 declare module 'rnmapbox__maps';
 
-import { Component, ReactNode, SyntheticEvent } from 'react';
-import {
-  ViewProps,
-  ViewStyle,
-  StyleProp,
-  TextStyle,
-  ImageSourcePropType,
-} from 'react-native';
+import { Component } from 'react';
 import ReactNative from 'react-native';
 import {
   Geometry,
@@ -16,89 +9,41 @@ import {
   Feature,
   LineString,
   Coord,
-  Units,
-  BBox,
-  Id,
   FeatureCollection,
 } from '@turf/helpers';
-
-// prettier-ignore
-type ExpressionName =
-  // Types
-  | 'array' | 'boolean' | 'collator' | 'format' | 'image' | 'literal' | 'number' | 'number-format' | 'object' | 'string'
-  | 'to-boolean' | 'to-color' | 'to-number' | 'to-string' | 'typeof'
-  // Feature data
-  | 'accumulated' | 'feature-state' | 'geometry-type' | 'id' | 'line-progress' | 'properties'
-  // Lookup
-  | 'at' | 'get' | 'has' | 'in' | 'index-of' | 'length' | 'slice'
-  // Decision
-  | '!' | '!=' | '<' | '<=' | '==' | '>' | '>=' | 'all' | 'any' | 'case' | 'match' | 'coalesce' | 'within'
-  // Ramps, scales, curves
-  | 'interpolate' | 'interpolate-hcl' | 'interpolate-lab' | 'step'
-  // Variable binding
-  | 'let' | 'var'
-  // String
-  | 'concat' | 'downcase' | 'is-supported-script' | 'resolved-locale' | 'upcase'
-  // Color
-  | 'rgb' | 'rgba' | 'to-rgba'
-  // Math
-  | '-' | '*' | '/' | '%' | '^' | '+' | 'abs' | 'acos' | 'asin' | 'atan' | 'ceil' | 'cos' | 'distance' | 'e'
-  | 'floor' | 'ln' | 'ln2' | 'log10' | 'log2' | 'max' | 'min' | 'pi' | 'round' | 'sin' | 'sqrt' | 'tan'
-  // Zoom, Heatmap
-  | 'zoom' | 'heatmap-density';
-
-export type ExpressionField =
-  | string
-  | number
-  | boolean
-  | Expression
-  | ExpressionField[]
-  | { [key: string]: ExpressionField };
-
-export type Expression = [ExpressionName, ...ExpressionField[]];
-
-export type Anchor =
-  | 'center'
-  | 'left'
-  | 'right'
-  | 'top'
-  | 'bottom'
-  | 'top-left'
-  | 'top-right'
-  | 'bottom-left'
-  | 'bottom-right';
-export type Visibility = 'visible' | 'none';
-export type Alignment = 'map' | 'viewport';
-export type AutoAlignment = Alignment | 'auto';
-
-export type NamedStyles<T> = {
-  [P in keyof T]:
-    | SymbolLayerStyle
-    | RasterLayerStyle
-    | LineLayerStyle
-    | FillLayerStyle
-    | FillExtrusionLayerStyle
-    | CircleLayerStyle
-    | BackgroundLayerStyle;
-};
-
-export type MapboxGLEvent<
-  T extends string,
-  P = GeoJSON.Feature,
-  V = Element,
-> = SyntheticEvent<V, { type: T; payload: P }>;
-
-export type OnPressEvent = {
-  features: Array<GeoJSON.Feature>;
-  coordinates: {
-    latitude: number;
-    longitude: number;
-  };
-  point: {
-    x: number;
-    y: number;
-  };
-};
+import {
+  ShapeSourceProps,
+  ImageSourceProps,
+  FillLayerProps,
+  FillExtrusionLayerProps,
+  LineLayerProps,
+  CircleLayerProps,
+  RasterLayerProps,
+  BackgroundLayerProps,
+  MapViewProps,
+  Expression,
+  UserLocationProps,
+  LightProps,
+  PointAnnotationProps,
+  MarkerViewProps,
+  CalloutProps,
+  StyleProps,
+  VectorSourceProps,
+  RasterSourceProps,
+  HeatmapLayerProps,
+  ImagesProps,
+  OfflineCreatePackOptions,
+  SnapshotOptions,
+  PositionsOptions,
+  InterpolationMode,
+  LogCallback,
+  LogLevel,
+  NamedStyles,
+  OfflineProgressError,
+  OfflineProgressStatus,
+  SymbolLayerProps,
+  UnitsOptions,
+} from '@rnmapbox/maps';
 
 export function removeCustomHeader(headerName: string): void;
 export function addCustomHeader(headerName: string, headerValue: string): void;
@@ -112,18 +57,6 @@ export const offlineManager: OfflineManager;
 export const snapshotManager: SnapshotManager;
 export const locationManager: LocationManager;
 
-/**
- * GeoUtils
- */
-export interface UnitsOptions {
-  units?: Units;
-}
-
-export interface PositionsOptions {
-  bbox?: BBox;
-  id?: Id;
-}
-
 export class geoUtils {
   makePoint<P = Properties>(
     coordinates: Position,
@@ -184,10 +117,6 @@ export namespace Animated {
   class BackgroundLayer extends Component<BackgroundLayerProps> {}
 }
 
-/**
- * Classes
- */
-
 export class AnimatedPoint {
   constructor(point?: GeoJSON.Point);
   longitude: ReactNative.Animated.Value;
@@ -206,9 +135,6 @@ export class AnimatedPoint {
   ) => ReactNative.Animated.CompositeAnimation;
 }
 
-/**
- * Components
- */
 export class MapView extends Component<MapViewProps> {
   getPointInView(coordinate: GeoJSON.Position): Promise<GeoJSON.Position>;
   getCoordinateFromView(point: GeoJSON.Position): Promise<GeoJSON.Position>;
@@ -234,59 +160,8 @@ export class MapView extends Component<MapViewProps> {
   ): void;
 }
 
-export type Padding =
-  | number
-  | [number, number]
-  | [number, number, number, number];
-
 export class UserLocation extends Component<UserLocationProps> {}
 
-export interface Location {
-  coords: Coordinates;
-  timestamp?: number;
-}
-
-export interface Coordinates {
-  /**
-   * The heading (measured in degrees) relative to true north.
-   * Heading is used to describe the direction the device is pointing to (the value of the compass).
-   * Note that on Android this is incorrectly reporting the course value as mentioned in issue https://github.com/rnmapbox/maps/issues/1213
-   * and will be corrected in a future update.
-   */
-  heading?: number;
-
-  /**
-   * The direction in which the device is traveling, measured in degrees and relative to due north.
-   * The course refers to the direction the device is actually moving (not the same as heading).
-   */
-  course?: number;
-
-  /**
-   * The instantaneous speed of the device, measured in meters per second.
-   */
-  speed?: number;
-
-  /**
-   * The latitude in degrees.
-   */
-  latitude: number;
-
-  /**
-   * The longitude in degrees.
-   */
-  longitude: number;
-
-  /**
-   * The radius of uncertainty for the location, measured in meters.
-   */
-  accuracy?: number;
-
-  /**
-   * The altitude, measured in meters.
-   */
-  altitude?: number;
-}
-
 export class Light extends Component<LightProps> {}
 
 export class StyleSheet extends Component {
@@ -316,9 +191,6 @@ export class MarkerView extends Component<MarkerViewProps> {}
 export class Callout extends Component<CalloutProps> {}
 export type Style = React.FC<StyleProps>;
 
-/**
- * Sources
- */
 export class VectorSource extends Component<VectorSourceProps> {}
 export class ShapeSource extends Component<ShapeSourceProps> {
   features(
@@ -397,579 +269,16 @@ export class OfflineManager extends Component {
   ): void;
   unsubscribe(packName: string): void;
 }
+export class OfflinePack extends Component {
+  status(): void;
+  resume(): void;
+  pause(): void;
+}
 
 export class SnapshotManager {
   static takeSnap(options: SnapshotOptions): Promise<string>;
 }
 
-export interface OfflineProgressStatus {
-  name: string;
-  state: number;
-  percentage: number;
-  completedResourceSize: number;
-  completedTileCount: number;
-  completedResourceCount: number;
-  requiredResourceCount: number;
-  completedTileSize: number;
-}
-
-export interface OfflineProgressError {
-  message: string;
-  name: string;
-}
-
-export interface OfflinePack {
-  name: string;
-  bounds: [GeoJSON.Position, GeoJSON.Position];
-  metadata: any;
-  status: () => Promise<OfflinePackStatus>;
-  resume: () => Promise<void>;
-  pause: () => Promise<void>;
-}
-
-export interface OfflinePackStatus {
-  name: string;
-  state: number;
-  percentage: number;
-  completedResourceCount: number;
-  completedResourceSize: number;
-  completedTileSize: number;
-  completedTileCount: number;
-  requiredResourceCount: number;
-}
-
-/**
- * Constants
- */
-export enum UserTrackingModes {
-  Follow = 'normal',
-  FollowWithHeading = 'compass',
-  FollowWithCourse = 'course',
-}
-
-export enum InterpolationMode {
-  Exponential = 0,
-  Categorical = 1,
-  Interval = 2,
-  Identity = 3,
-}
-
-export enum StyleURL {
-  Street = 'mapbox://styles/mapbox/streets-v11',
-  Dark = 'mapbox://styles/mapbox/dark-v10',
-  Light = 'mapbox://styles/mapbox/light-v10',
-  Outdoors = 'mapbox://styles/mapbox/outdoors-v11',
-  Satellite = 'mapbox://styles/mapbox/satellite-v9',
-  SatelliteStreet = 'mapbox://styles/mapbox/satellite-streets-v11',
-  TrafficDay = 'mapbox://styles/mapbox/navigation-preview-day-v4',
-  TrafficNight = 'mapbox://styles/mapbox/navigation-preview-night-v4',
-}
-
-export type OrnamentPosition =
-  | { top: number; left: number }
-  | { top: number; right: number }
-  | { bottom: number; left: number }
-  | { bottom: number; right: number };
-
-/**
- * <v10.
- */
-export interface RegionPayload {
-  zoomLevel: number;
-  heading: number;
-  animated: boolean;
-  isUserInteraction: boolean;
-  visibleBounds: GeoJSON.Position[];
-  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?: UserTrackingModes;
-  userLocationVerticalAlignment?: number;
-  contentInset?: Array<number>;
-  style?: StyleProp<ViewStyle>;
-  styleURL?: string;
-  styleJSON?: string;
-  preferredFramesPerSecond?: number;
-  localizeLabels?: boolean;
-  zoomEnabled?: boolean;
-  scrollEnabled?: boolean;
-  pitchEnabled?: boolean;
-  rotateEnabled?: boolean;
-  attributionEnabled?: boolean;
-  attributionPosition?: OrnamentPosition;
-  logoEnabled?: boolean;
-  logoPosition?: OrnamentPosition;
-  compassEnabled?: boolean;
-  compassPosition?: OrnamentPosition;
-  compassViewPosition?: number;
-  compassViewMargins?: Point;
-  scaleBarEnabled?: boolean;
-  scaleBarPosition?: OrnamentPosition;
-  surfaceView?: boolean;
-  regionWillChangeDebounceTime?: number;
-  regionDidChangeDebounceTime?: number;
-  tintColor?: string;
-
-  onPress?: (feature: GeoJSON.Feature) => void;
-  onLongPress?: (feature: GeoJSON.Feature) => void;
-  onRegionWillChange?: (
-    feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
-  ) => void;
-  onRegionIsChanging?: (
-    feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
-  ) => void;
-  onRegionDidChange?: (
-    feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
-  ) => void;
-  onCameraChanged?: (state: MapState) => void;
-  onMapIdle?: (state: MapState) => void;
-  onUserLocationUpdate?: (feature: Location) => void;
-  onWillStartLoadingMap?: () => void;
-  onDidFinishLoadingMap?: () => void;
-  onDidFailLoadingMap?: () => void;
-  onWillStartRenderingFrame?: () => void;
-  onDidFinishRenderingFrame?: () => void;
-  onDidFinishRenderingFrameFully?: () => void;
-  onWillStartRenderingMap?: () => void;
-  onDidFinishRenderingMap?: () => void;
-  onDidFinishRenderingMapFully?: () => void;
-  onDidFinishLoadingStyle?: () => void;
-  onUserTrackingModeChange?: () => void;
-}
-
-export interface UserLocationProps {
-  androidRenderMode?: 'normal' | 'compass' | 'gps';
-  animated?: boolean;
-  children?: ReactNode;
-  minDisplacement?: number;
-  onPress?: () => void;
-  onUpdate?: (location: Location) => void;
-  renderMode?: 'normal' | 'native';
-  showsUserHeadingIndicator?: boolean;
-  visible?: boolean;
-}
-
-export type WithExpression<T> = {
-  [P in keyof T]: T[P] | Expression;
-};
-
-export interface LightStyle {
-  anchor?: Alignment | Expression;
-  position?: GeoJSON.Position | Expression;
-  positionTransition?: Transition | Expression;
-  color?: string | Expression;
-  colorTransition?: Transition | Expression;
-  intensity?: number | Expression;
-  intensityTransition?: Transition | Expression;
-}
-
-export interface Transition {
-  duration: number;
-  delay: number;
-}
-
-export interface BackgroundLayerStyle {
-  visibility?: Visibility | Expression;
-  backgroundColor?: string | Expression;
-  backgroundColorTransition?: Transition | Expression;
-  backgroundPattern?: string | Expression;
-  backgroundPatternTransition?: Transition | Expression;
-  backgroundOpacity?: number | Expression;
-  backgroundOpacityTransition?: Transition | Expression;
-}
-
-export interface CircleLayerStyle {
-  visibility?: Visibility | Expression;
-  circleRadius?: number | Expression;
-  circleRadiusTransition?: Transition | Expression;
-  circleColor?: string | Expression;
-  circleColorTransition?: Transition | Expression;
-  circleBlur?: number | Expression;
-  circleBlurTransition?: Transition | Expression;
-  circleOpacity?: number | Expression;
-  circleOpacityTransition?: Transition | Expression;
-  circleTranslate?: Array<number> | Expression;
-  circleTranslateTransition?: Transition | Expression;
-  circleTranslateAnchor?: Alignment | Expression;
-  circlePitchScale?: Alignment | Expression;
-  circlePitchAlignment?: Alignment | Expression;
-  circleStrokeWidth?: number | Expression;
-  circleStrokeWidthTransition?: Transition | Expression;
-  circleStrokeColor?: string | Expression;
-  circleStrokeColorTransition?: Transition | Expression;
-  circleStrokeOpacity?: number | Expression;
-  circleStrokeOpacityTransition?: Transition | Expression;
-}
-
-export interface FillExtrusionLayerStyle {
-  visibility?: Visibility | Expression;
-  fillExtrusionOpacity?: number | Expression;
-  fillExtrusionOpacityTransition?: Transition | Expression;
-  fillExtrusionColor?: string | Expression;
-  fillExtrusionColorTransition?: Transition | Expression;
-  fillExtrusionTranslate?: Array<number> | Expression;
-  fillExtrusionTranslateTransition?: Transition | Expression;
-  fillExtrusionTranslateAnchor?: Alignment | Expression;
-  fillExtrusionPattern?: string | Expression;
-  fillExtrusionPatternTransition?: Transition | Expression;
-  fillExtrusionHeight?: number | Expression;
-  fillExtrusionHeightTransition?: Transition | Expression;
-  fillExtrusionBase?: number | Expression;
-  fillExtrusionBaseTransition?: Transition | Expression;
-}
-
-export interface FillLayerStyle {
-  visibility?: Visibility | Expression;
-  fillAntialias?: boolean | Expression;
-  fillOpacity?: number | Expression;
-  fillExtrusionOpacityTransition?: Transition | Expression;
-  fillColor?: string | Expression;
-  fillColorTransition?: Transition | Expression;
-  fillOutlineColor?: string | Expression;
-  fillOutlineColorTransition?: Transition | Expression;
-  fillTranslate?: Array<number> | Expression;
-  fillTranslateTransition?: Transition | Expression;
-  fillTranslateAnchor?: Alignment | Expression;
-  fillPattern?: string | Expression;
-  fillPatternTransition?: Transition | Expression;
-}
-
-export interface LineLayerStyle {
-  lineCap?: 'butt' | 'round' | 'square' | Expression;
-  lineJoin?: 'bevel' | 'round' | 'miter' | Expression;
-  lineMiterLimit?: number | Expression;
-  lineRoundLimit?: number | Expression;
-  visibility?: Visibility | Expression;
-  lineOpacity?: number | Expression;
-  lineOpacityTransition?: Transition | Expression;
-  lineColor?: string | Expression;
-  lineColorTransition?: Transition | Expression;
-  lineTranslate?: Array<number> | Expression;
-  lineTranslateTransition?: Transition | Expression;
-  lineTranslateAnchor?: Alignment | Expression;
-  lineWidth?: number | Expression;
-  lineWidthTransition?: Transition | Expression;
-  lineGapWidth?: number | Expression;
-  lineGapWidthTransition?: Transition | Expression;
-  lineOffset?: number | Expression;
-  lineOffsetTransition?: Transition | Expression;
-  lineBlur?: number | Expression;
-  lineBlurTransition?: Transition | Expression;
-  lineDasharray?: Array<number> | Expression;
-  lineDasharrayTransition?: Transition | Expression;
-  linePattern?: string | Expression;
-  linePatternTransition?: Transition | Expression;
-}
-
-export interface RasterLayerStyle {
-  visibility?: Visibility | Expression;
-  rasterOpacity?: number | Expression;
-  rasterOpacityTransition?: Transition | Expression;
-  rasterHueRotate?: Expression;
-  rasterHueRotateTransition?: Transition | Expression;
-  rasterBrightnessMin?: number | Expression;
-  rasterBrightnessMinTransition?: Transition | Expression;
-  rasterBrightnessMax?: number | Expression;
-  rasterBrightnessMaxTransition?: Transition | Expression;
-  rasterSaturation?: number | Expression;
-  rasterSaturationTransition?: Transition | Expression;
-  rasterContrast?: number | Expression;
-  rasterContrastTransition?: Transition | Expression;
-  rasterFadeDuration?: number | Expression;
-}
-
-export type TextVariableAnchorValues =
-  | 'center'
-  | 'left'
-  | 'right'
-  | 'top'
-  | 'bottom'
-  | 'top-left'
-  | 'top-right'
-  | 'bottom-left'
-  | 'bottom-right';
-
-export interface SymbolLayerStyle {
-  symbolPlacement?: 'point' | 'line' | Expression;
-  symbolSpacing?: number | Expression;
-  symbolAvoidEdges?: boolean | Expression;
-  symbolSortKey?: number | Expression;
-  symbolZOrder?: 'auto' | 'viewport-y' | 'source' | Expression;
-  iconAllowOverlap?: boolean | Expression;
-  iconIgnorePlacement?: boolean | Expression;
-  iconOptional?: boolean | Expression;
-  iconRotationAlignment?: AutoAlignment | Expression;
-  iconSize?: number | Expression;
-  iconTextFit?: 'none' | 'width' | 'height' | 'both' | Expression;
-  iconTextFitPadding?: Array<number> | Expression;
-  iconImage?: string | Expression;
-  iconRotate?: number | Expression;
-  iconPadding?: number | Expression;
-  iconKeepUpright?: boolean | Expression;
-  iconOffset?: Array<number> | Expression;
-  iconAnchor?: Anchor | Expression;
-  iconPitchAlignment?: AutoAlignment | Expression;
-  textPitchAlignment?: AutoAlignment | Expression;
-  textRotationAlignment?: AutoAlignment | Expression;
-  textField?: string | Expression;
-  textFont?: Array<string> | Expression;
-  textSize?: number | Expression;
-  textMaxWidth?: number | Expression;
-  textLineHeight?: number | Expression;
-  textLetterSpacing?: number | Expression;
-  textJustify?: 'left' | 'center' | 'right' | Expression;
-  textAnchor?: Anchor | Expression;
-  textMaxAngle?: number | Expression;
-  textRotate?: number | Expression;
-  textPadding?: number | Expression;
-  textKeepUpright?: boolean | Expression;
-  textTransform?: 'none' | 'uppercase' | 'lowercase' | Expression;
-  textOffset?: Array<number> | Expression;
-  textAllowOverlap?: boolean | Expression;
-  textIgnorePlacement?: boolean | Expression;
-  textOptional?: boolean | Expression;
-  textVariableAnchor?: Array<TextVariableAnchorValues>;
-  textRadialOffset?: number | Expression;
-  visibility?: Visibility | Expression;
-  iconOpacity?: number | Expression;
-  iconOpacityTransition?: Transition | Expression;
-  iconColor?: string | Expression;
-  iconColorTransition?: Transition | Expression;
-  iconHaloColor?: string | Expression;
-  iconHaloColorTransition?: Transition | Expression;
-  iconHaloWidth?: number | Expression;
-  iconHaloWidthTransition?: Transition | Expression;
-  iconHaloBlur?: number | Expression;
-  iconHaloBlurTransition?: Transition | Expression;
-  iconTranslate?: Array<number> | Expression;
-  iconTranslateTransition?: Transition | Expression;
-  iconTranslateAnchor?: Alignment | Expression;
-  textOpacity?: number | Expression;
-  textOpacityTransition?: Transition | Expression;
-  textColor?: string | Expression;
-  textColorTransition?: Transition | Expression;
-  textHaloColor?: string | Expression;
-  textHaloColorTransition?: Transition | Expression;
-  textHaloWidth?: number | Expression;
-  textHaloWidthTransition?: Transition | Expression;
-  textHaloBlur?: number | Expression;
-  textHaloBlurTransition?: Transition | Expression;
-  textTranslate?: Array<number> | Expression;
-  textTranslateTransition?: Transition | Expression;
-  textTranslateAnchor?: Alignment | Expression;
-}
-
-export interface HeatmapLayerStyle {
-  visibility?: Visibility | Expression;
-  heatmapRadius?: number | Expression;
-  heatmapRadiusTransition?: Transition | Expression;
-  heatmapWeight?: number | Expression;
-  heatmapIntensity?: number | Expression;
-  heatmapIntensityTransition?: Transition | Expression;
-  heatmapColor?: string | Expression;
-  heatmapOpacity?: number | Expression;
-  heatmapOpacityTransition?: Transition | Expression;
-}
-
-export interface Point {
-  x: number;
-  y: number;
-}
-
-export interface LightProps extends Omit<ViewProps, 'style'> {
-  style?: LightStyle;
-}
-
-export interface PointAnnotationProps {
-  id: string;
-  title?: string;
-  snippet?: string;
-  selected?: boolean;
-  draggable?: boolean;
-  coordinate: GeoJSON.Position;
-  anchor?: Point;
-  onSelected?: () => void;
-  onDeselected?: () => void;
-  onDragStart?: () => void;
-  onDrag?: () => void;
-  onDragEnd?: () => void;
-}
-
-export type MarkerViewProps = PointAnnotationProps;
-
-export interface StyleProps {
-  json: any;
-}
-
-export interface CalloutProps extends Omit<ViewProps, 'style'> {
-  title?: string;
-  style?: StyleProp<WithExpression<ViewStyle>>;
-  containerStyle?: StyleProp<WithExpression<ViewStyle>>;
-  contentStyle?: StyleProp<WithExpression<ViewStyle>>;
-  tipStyle?: StyleProp<WithExpression<ViewStyle>>;
-  textStyle?: StyleProp<WithExpression<TextStyle>>;
-}
-
-export interface TileSourceProps extends ViewProps {
-  id: string;
-  url?: string;
-  tileUrlTemplates?: Array<string>;
-  minZoomLevel?: number;
-  maxZoomLevel?: number;
-}
-
-export interface VectorSourceProps extends TileSourceProps {
-  onPress?: (event: OnPressEvent) => void;
-  hitbox?: {
-    width: number;
-    height: number;
-  };
-}
-
-export interface ShapeSourceProps extends ViewProps {
-  id: string;
-  url?: string;
-  shape?:
-    | GeoJSON.GeometryCollection
-    | GeoJSON.Feature
-    | GeoJSON.FeatureCollection
-    | GeoJSON.Geometry;
-  cluster?: boolean;
-  clusterRadius?: number;
-  clusterMaxZoomLevel?: number;
-  clusterProperties?: object;
-  maxZoomLevel?: number;
-  buffer?: number;
-  tolerance?: number;
-  lineMetrics?: boolean;
-  images?: { assets?: string[] } & { [key: string]: ImageSourcePropType };
-  onPress?: (event: OnPressEvent) => void;
-  hitbox?: {
-    width: number;
-    height: number;
-  };
-}
-
-export interface RasterSourceProps extends TileSourceProps {
-  tileSize?: number;
-}
-
-export interface LayerBaseProps<T = object> extends Omit<ViewProps, 'style'> {
-  id: string;
-  sourceID?: string;
-  sourceLayerID?: string;
-  aboveLayerID?: string;
-  belowLayerID?: string;
-  layerIndex?: number;
-  filter?: Expression;
-  minZoomLevel?: number;
-  maxZoomLevel?: number;
-}
-
-export interface BackgroundLayerProps extends LayerBaseProps {
-  style?: StyleProp<BackgroundLayerStyle>;
-}
-
-export interface CircleLayerProps extends LayerBaseProps {
-  style?: StyleProp<CircleLayerStyle>;
-}
-
-export interface FillExtrusionLayerProps extends Omit<LayerBaseProps, 'id'> {
-  id: string;
-  style?: StyleProp<FillExtrusionLayerStyle>;
-}
-
-export interface FillLayerProps extends LayerBaseProps {
-  style?: StyleProp<FillLayerStyle>;
-}
-
-export interface LineLayerProps extends LayerBaseProps {
-  style?: StyleProp<LineLayerStyle>;
-}
-
-export interface RasterLayerProps extends LayerBaseProps {
-  style?: StyleProp<RasterLayerStyle>;
-}
-
-export interface SymbolLayerProps extends LayerBaseProps {
-  style?: StyleProp<SymbolLayerStyle>;
-}
-
-export interface HeatmapLayerProps extends LayerBaseProps {
-  style?: StyleProp<HeatmapLayerStyle>;
-}
-
-export interface ImagesProps extends ViewProps {
-  images?: { assets?: string[] } & { [key: string]: ImageSourcePropType };
-  nativeAssetImages?: string[];
-  onImageMissing?: (imageKey: string) => void;
-}
-
-export interface ImageSourceProps extends ViewProps {
-  id: string;
-  url?: number | string;
-  coordinates: [
-    GeoJSON.Position,
-    GeoJSON.Position,
-    GeoJSON.Position,
-    GeoJSON.Position,
-  ];
-}
-
-export interface OfflineCreatePackOptions {
-  name?: string;
-  styleURL?: string;
-  bounds?: [GeoJSON.Position, GeoJSON.Position];
-  minZoom?: number;
-  maxZoom?: number;
-  metadata?: any;
-}
-
-export interface SnapshotOptions {
-  centerCoordinate?: GeoJSON.Position;
-  width?: number;
-  height?: number;
-  zoomLevel?: number;
-  pitch?: number;
-  heading?: number;
-  styleURL?: string;
-  writeToDisk?: boolean;
-}
-
-// Logger
-
-type LogLevel = 'error' | 'warning' | 'info' | 'debug' | 'verbose';
-
-interface LogObject {
-  level: LogLevel;
-  message: string;
-  tag: string;
-}
-
-type LogCallback = (object: LogObject) => void;
-
 export class Logger {
   public static setLogCallback: (cb: LogCallback) => boolean;
   public static setLogLevel: (level: LogLevel) => void;

From e00bfbfd94a59746eed64ab89c9481f1e4cbd434 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 29 Apr 2022 11:38:44 -0500
Subject: [PATCH 36/84] Export type, rename

---
 javascript/components/Camera.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/javascript/components/Camera.tsx b/javascript/components/Camera.tsx
index 840808e92..374c40494 100644
--- a/javascript/components/Camera.tsx
+++ b/javascript/components/Camera.tsx
@@ -16,7 +16,7 @@ const MapboxGL = NativeModules.MGLModule;
 
 export const NATIVE_MODULE_NAME = 'RCTMGLCamera';
 
-const Mode: Record<string, AnimationMode> = {
+const Modes: Record<string, AnimationMode> = {
   Flight: 'flyTo',
   Ease: 'easeTo',
   Linear: 'linearTo',
@@ -34,7 +34,7 @@ export const UserTrackingModes: Record<string, UserTrackingMode> = {
 
 export type AnimationMode = 'flyTo' | 'easeTo' | 'linearTo' | 'none' | 'moveTo';
 
-type UserTrackingMode = 'normal' | 'compass' | 'course';
+export type UserTrackingMode = 'normal' | 'compass' | 'course';
 
 type UserTrackingModeChangeCallback = (
   event: MapboxGLEvent<
@@ -354,15 +354,15 @@ const Camera = memo(
     const nativeAnimationMode = useCallback(
       (_mode?: AnimationMode): NativeAnimationMode | undefined => {
         switch (_mode) {
-          case Mode.Flight:
+          case Modes.Flight:
             return MapboxGL.CameraModes.Flight;
-          case Mode.Ease:
+          case Modes.Ease:
             return MapboxGL.CameraModes.Ease;
-          case Mode.Linear:
+          case Modes.Linear:
             return MapboxGL.CameraModes.Linear;
-          case Mode.None:
+          case Modes.None:
             return MapboxGL.CameraModes.None;
-          case Mode.Move:
+          case Modes.Move:
             return MapboxGL.CameraModes.Move;
           default:
             return undefined;

From 74fd2a0dfcb15d64c2b4ddcd636cff235cf69be0 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 29 Apr 2022 11:44:14 -0500
Subject: [PATCH 37/84] Fix buggy reference

---
 example/src/examples/Map/ShowMap.tsx | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/example/src/examples/Map/ShowMap.tsx b/example/src/examples/Map/ShowMap.tsx
index 37635edc4..01f0c4c9d 100755
--- a/example/src/examples/Map/ShowMap.tsx
+++ b/example/src/examples/Map/ShowMap.tsx
@@ -1,22 +1,25 @@
 import React, { FC, useState, useEffect } from 'react';
 import { Alert } from 'react-native';
-import MapboxGL from '@rnmapbox/maps';
+import MapboxGL, { StyleURL, StyleURLKey } from '@rnmapbox/maps';
 
 import sheet from '../../styles/sheet';
 import { onSortOptions } from '../../utils';
 import TabBarPage from '../common/TabBarPage';
 
 const ShowMap: FC<any> = (props) => {
-  const _mapOptions = Object.keys(MapboxGL.StyleURL)
-    .map((key) => {
+  const keys = Object.keys(StyleURL) as StyleURLKey[];
+  const _mapOptions = keys
+    .map((key: StyleURLKey) => {
       return {
         label: key,
-        data: (MapboxGL.StyleURL as any)[key], // bad any, because enums
+        data: StyleURL[key],
       };
     })
     .sort(onSortOptions);
 
-  const [styleURL, setStyleURL] = useState({ styleURL: _mapOptions[0].data });
+  const [styleURL, setStyleURL] = useState<typeof StyleURL[StyleURLKey]>(
+    _mapOptions[0].data,
+  );
 
   useEffect(() => {
     MapboxGL.locationManager.start();
@@ -26,8 +29,11 @@ const ShowMap: FC<any> = (props) => {
     };
   }, []);
 
-  const onMapChange = (index: number, newStyleURL: MapboxGL.StyleURL): void => {
-    setStyleURL({ styleURL: newStyleURL });
+  const onMapChange = (
+    index: number,
+    newStyleURL: typeof StyleURL[StyleURLKey],
+  ): void => {
+    setStyleURL(newStyleURL);
   };
 
   const onUserMarkerPress = (): void => {
@@ -41,7 +47,7 @@ const ShowMap: FC<any> = (props) => {
       options={_mapOptions}
       onOptionPress={onMapChange}
     >
-      <MapboxGL.MapView styleURL={styleURL.styleURL} style={sheet.matchParent}>
+      <MapboxGL.MapView styleURL={styleURL} style={sheet.matchParent}>
         <MapboxGL.Camera followZoomLevel={12} followUserLocation />
 
         <MapboxGL.UserLocation onPress={onUserMarkerPress} />

From 20f86d1a225eff8d422ceb42591c0e945344b49b Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 29 Apr 2022 14:28:47 -0500
Subject: [PATCH 38/84] Update .d.ts file name

---
 .github/pull_request_template.md              |   2 +-
 CONTRIBUTING.md                               |   2 +-
 definitions.d.ts                              | 297 ++++++++++++++++++
 scripts/autogenerate.js                       |   4 +-
 .../{index.d.ts.ejs => definitions.d.ts.ejs}  |   0
 5 files changed, 301 insertions(+), 4 deletions(-)
 create mode 100644 definitions.d.ts
 rename scripts/templates/{index.d.ts.ejs => definitions.d.ts.ejs} (100%)

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 058d6e1f5..6ae4f822f 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -20,7 +20,7 @@ Added `your feature` that allows ...
 - [ ] I have tested this on a device/simulator for each compatible OS
 - [ ] I updated the documentation with running `yarn generate` in the root folder
 - [ ] I mentioned this change in `CHANGELOG.md`
-- [ ] I updated the typings files (`index.d.ts`)
+- [ ] I updated the typings files (`definitions.d.ts`)
 - [ ] I added/ updated a sample (`/example`)
 
 ## Screenshot OR Video
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index b94508c0a..4acad5d3f 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -16,7 +16,7 @@ it will be reflected in any scene in example that uses that component.
 ## Best practices for PR's
 
 - If you add a feature, make sure you add it to the documentation
-- If you add an objective-c or java method, make sure you update the declaration file: `index.d.ts`.
+- If you add an objective-c or java method, make sure you update the declaration file: `definitions.d.ts`.
 - Make sure to use small concise commits
 - Use meaningful commit messages
 - Make sure to update/ add new tests for your changes
diff --git a/definitions.d.ts b/definitions.d.ts
new file mode 100644
index 000000000..1f1b1e695
--- /dev/null
+++ b/definitions.d.ts
@@ -0,0 +1,297 @@
+declare module 'rnmapbox__maps';
+
+import { Component } from 'react';
+import ReactNative from 'react-native';
+import {
+  Geometry,
+  Properties,
+  Position,
+  Feature,
+  LineString,
+  Coord,
+  FeatureCollection,
+} from '@turf/helpers';
+import {
+  ShapeSourceProps,
+  ImageSourceProps,
+  FillLayerProps,
+  FillExtrusionLayerProps,
+  LineLayerProps,
+  CircleLayerProps,
+  RasterLayerProps,
+  BackgroundLayerProps,
+  MapViewProps,
+  Expression,
+  UserLocationProps,
+  LightProps,
+  PointAnnotationProps,
+  MarkerViewProps,
+  CalloutProps,
+  StyleProps,
+  VectorSourceProps,
+  RasterSourceProps,
+  HeatmapLayerProps,
+  ImagesProps,
+  OfflineCreatePackOptions,
+  SnapshotOptions,
+  PositionsOptions,
+  InterpolationMode,
+  LogCallback,
+  LogLevel,
+  NamedStyles,
+  OfflineProgressError,
+  OfflineProgressStatus,
+  SymbolLayerProps,
+  UnitsOptions,
+} from '@rnmapbox/maps';
+
+export namespace MapboxGLDefinitions {
+  export function removeCustomHeader(headerName: string): void;
+  export function addCustomHeader(
+    headerName: string,
+    headerValue: string,
+  ): void;
+  export function setAccessToken(accessToken: string | null): void;
+  export function getAccessToken(): Promise<string>;
+  export function setTelemetryEnabled(telemetryEnabled: boolean): void;
+  export function setConnected(connected: boolean): void;
+  export function requestAndroidLocationPermissions(): Promise<boolean>;
+
+  export const offlineManager: OfflineManager;
+  export const snapshotManager: SnapshotManager;
+  export const locationManager: LocationManager;
+
+  export class geoUtils {
+    makePoint<P = Properties>(
+      coordinates: Position,
+      properties?: P,
+      options?: PositionsOptions,
+    ): Feature<GeoJSON.Point, P>;
+    makeLineString<P = Properties>(
+      coordinates: Position[],
+      properties?: P,
+      options?: PositionsOptions,
+    ): Feature<LineString, P>;
+    makeLatLngBounds<G = Geometry, P = Properties>(
+      northEastCoordinates: Position[],
+      southWestCoordinates: Position[],
+    ): FeatureCollection<G, P>;
+    makeFeature<G = Geometry, P = Properties>(
+      geometry: G,
+      properties?: P,
+    ): Feature<G, P>;
+    makeFeatureCollection<G = Geometry, P = Properties>(
+      features: Array<Feature<G, P>>,
+      options?: PositionsOptions,
+    ): FeatureCollection<G, P>;
+    addToFeatureCollection<G = Geometry, P = Properties>(
+      newFeatureCollection: Array<FeatureCollection<G, P>>,
+      newFeature: Feature<G, P>,
+    ): FeatureCollection<G, P>;
+    calculateDistance(
+      origin: Coord,
+      dest: Coord,
+      options?: UnitsOptions,
+    ): number;
+    pointAlongLine(
+      newLineString: Feature<LineString> | LineString,
+      distAlong: number,
+      options?: UnitsOptions,
+    ): Feature<GeoJSON.Point>;
+    getOrCalculateVisibleRegion(
+      coord: { lon: number; lat: number },
+      zoomLevel: number,
+      width: number,
+      height: number,
+      nativeRegion: {
+        properties: { visibleBounds: number[] };
+        visibleBounds: number[];
+      },
+    ): void;
+  }
+
+  export namespace Animated {
+    // sources
+    class ShapeSource extends Component<ShapeSourceProps> {}
+    class ImageSource extends Component<ImageSourceProps> {}
+
+    // layers
+    class FillLayer extends Component<FillLayerProps> {}
+    class FillExtrusionLayer extends Component<FillExtrusionLayerProps> {}
+    class LineLayer extends Component<LineLayerProps> {}
+    class CircleLayer extends Component<CircleLayerProps> {}
+    class SymbolLayer extends Component<SymbolLayerProps> {}
+    class RasterLayer extends Component<RasterLayerProps> {}
+    class BackgroundLayer extends Component<BackgroundLayerProps> {}
+  }
+
+  export class AnimatedPoint {
+    constructor(point?: GeoJSON.Point);
+    longitude: ReactNative.Animated.Value;
+    latitude: ReactNative.Animated.Value;
+    setValue: (point: GeoJSON.Point) => void;
+    setOffset: (point: GeoJSON.Point) => void;
+    flattenOffset: () => void;
+    stopAnimation: (cb?: () => GeoJSON.Point) => void;
+    addListener: (cb?: () => GeoJSON.Point) => void;
+    removeListener: (id: string) => void;
+    spring: (
+      config: Record<string, any>,
+    ) => ReactNative.Animated.CompositeAnimation;
+    timing: (
+      config: Record<string, any>,
+    ) => ReactNative.Animated.CompositeAnimation;
+  }
+
+  export class MapView extends Component<MapViewProps> {
+    longitude: number;
+    getPointInView(coordinate: GeoJSON.Position): Promise<GeoJSON.Position>;
+    getCoordinateFromView(point: GeoJSON.Position): Promise<GeoJSON.Position>;
+    getVisibleBounds(): Promise<GeoJSON.Position[]>;
+    queryRenderedFeaturesAtPoint(
+      coordinate: GeoJSON.Position,
+      filter?: Expression,
+      layerIds?: Array<string>,
+    ): Promise<GeoJSON.FeatureCollection | undefined>;
+    queryRenderedFeaturesInRect(
+      coordinate: GeoJSON.Position,
+      filter?: Expression,
+      layerIds?: Array<string>,
+    ): Promise<GeoJSON.FeatureCollection | undefined>;
+    takeSnap(writeToDisk?: boolean): Promise<string>;
+    getZoom(): Promise<number>;
+    getCenter(): Promise<GeoJSON.Position>;
+    showAttribution(): void;
+    setSourceVisibility(
+      visible: boolean,
+      sourceId: string,
+      sourceLayerId?: string,
+    ): void;
+  }
+
+  export class UserLocation extends Component<UserLocationProps> {}
+
+  export class Light extends Component<LightProps> {}
+
+  export class StyleSheet extends Component {
+    static create<T extends NamedStyles<T> | NamedStyles<any>>(styles: T): T;
+    camera(
+      stops: { [key: number]: string },
+      interpolationMode?: InterpolationMode,
+    ): void;
+    source(
+      stops: { [key: number]: string },
+      attributeName: string,
+      interpolationMode?: InterpolationMode,
+    ): void;
+    composite(
+      stops: { [key: number]: string },
+      attributeName: string,
+      interpolationMode?: InterpolationMode,
+    ): void;
+
+    identity(attributeName: string): number;
+  }
+
+  export class PointAnnotation extends Component<PointAnnotationProps> {
+    refresh(): void;
+  }
+  export class MarkerView extends Component<MarkerViewProps> {}
+  export class Callout extends Component<CalloutProps> {}
+  export class Style extends Component<StyleProps> {}
+
+  export class VectorSource extends Component<VectorSourceProps> {}
+  export class ShapeSource extends Component<ShapeSourceProps> {
+    features(
+      filter?: Expression,
+    ): Promise<FeatureCollection<Geometry, Properties>>;
+
+    getClusterExpansionZoom(
+      feature: Feature<Geometry, Properties> | number,
+    ): Promise<number>;
+    /**
+     * Returns all the leaves of a cluster with pagination support.
+     * @param cluster feature cluster
+     * @param limit the number of leaves to return
+     * @param offset the amount of points to skip (for pagination)
+     */
+    getClusterLeaves: (
+      feature: Feature<Geometry, Properties> | number,
+      limit: number,
+      offset: number,
+    ) => Promise<FeatureCollection<Geometry, Properties>>;
+    /**
+     * Returns the children of a cluster (on the next zoom level).
+     * @param cluster feature cluster
+     */
+    getClusterChildren: (
+      feature: Feature<Geometry, Properties> | number,
+    ) => Promise<FeatureCollection<Geometry, Properties>>;
+  }
+  export class RasterSource extends Component<RasterSourceProps> {}
+
+  /**
+   * Layers
+   */
+  export class BackgroundLayer extends Component<BackgroundLayerProps> {}
+  export class CircleLayer extends Component<CircleLayerProps> {}
+  export class FillExtrusionLayer extends Component<FillExtrusionLayerProps> {}
+  export class FillLayer extends Component<FillLayerProps> {}
+  export class LineLayer extends Component<LineLayerProps> {}
+  export class RasterLayer extends Component<RasterLayerProps> {}
+  export class SymbolLayer extends Component<SymbolLayerProps> {}
+  export class HeatmapLayer extends Component<HeatmapLayerProps> {}
+  export class Images extends Component<ImagesProps> {}
+  export class ImageSource extends Component<ImageSourceProps> {}
+
+  export class LocationManager extends Component {
+    start(displacement?: number): void;
+    stop(): void;
+  }
+
+  /**
+   * Offline
+   */
+  export class OfflineManager extends Component {
+    createPack(
+      options: OfflineCreatePackOptions,
+      progressListener?: (
+        pack: OfflinePack,
+        status: OfflineProgressStatus,
+      ) => void,
+      errorListener?: (pack: OfflinePack, err: OfflineProgressError) => void,
+    ): Promise<void>;
+    deletePack(name: string): Promise<void>;
+    invalidatePack(name: string): Promise<void>;
+    getPacks(): Promise<Array<OfflinePack>>;
+    getPack(name: string): Promise<OfflinePack | undefined>;
+    invalidateAmbientCache(): Promise<void>;
+    clearAmbientCache(): Promise<void>;
+    setMaximumAmbientCacheSize(size: number): Promise<void>;
+    resetDatabase(): Promise<void>;
+    setTileCountLimit(limit: number): void;
+    setProgressEventThrottle(throttleValue: number): void;
+    subscribe(
+      packName: string,
+      progressListener: (pack: OfflinePack, status: object) => void,
+      errorListener?: (pack: OfflinePack, err: object) => void,
+    ): void;
+    unsubscribe(packName: string): void;
+  }
+  export class OfflinePack extends Component {
+    status(): void;
+    resume(): void;
+    pause(): void;
+  }
+
+  export class SnapshotManager {
+    static takeSnap(options: SnapshotOptions): Promise<string>;
+  }
+
+  export class Logger {
+    public static setLogCallback: (cb: LogCallback) => boolean;
+    public static setLogLevel: (level: LogLevel) => void;
+  }
+}
+
+// export as namespace MapboxGL;
diff --git a/scripts/autogenerate.js b/scripts/autogenerate.js
index 5052b5152..e561153cb 100644
--- a/scripts/autogenerate.js
+++ b/scripts/autogenerate.js
@@ -416,8 +416,8 @@ async function generate() {
       only: 'gl',
     },
     {
-      input: path.join(TMPL_PATH, 'index.d.ts.ejs'),
-      output: path.join(IOS_OUTPUT_PATH, 'index.d.ts'),
+      input: path.join(TMPL_PATH, 'definitions.d.ts.ejs'),
+      output: path.join(IOS_OUTPUT_PATH, 'definitions.d.ts'),
     },
     {
       input: path.join(TMPL_PATH, 'RCTMGLStyle.m.ejs'),
diff --git a/scripts/templates/index.d.ts.ejs b/scripts/templates/definitions.d.ts.ejs
similarity index 100%
rename from scripts/templates/index.d.ts.ejs
rename to scripts/templates/definitions.d.ts.ejs

From 0d9dc7da6110513cfb4d1c233c185396c76ed795 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 29 Apr 2022 14:30:18 -0500
Subject: [PATCH 39/84] Look for types

---
 tsconfig.json | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/tsconfig.json b/tsconfig.json
index 0d490d56b..df6bcc750 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -41,13 +41,16 @@
     "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
     "paths": {
       /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-      "@rnmapbox/maps": ["index.ts", "javascript/index.d.ts"],
+      "@rnmapbox/maps": ["index.ts"],
       "react": ["node_modules/@types/react"],
       "react-native": ["node_modules/@types/react-native"]
     },
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
-    // "typeRoots": [],                       /* List of folders to include type definitions from. */
-    // "types": [],                           /* Type declaration files to be included in compilation. */
+    // "typeRoots": [] /* List of folders to include type definitions from. */,
+    "types": [
+      "./index",
+      "./definitions"
+    ] /* Type declaration files to be included in compilation. */,
     "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
     "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
     // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */

From 3681b2d665c8e15517367e390e286c59ebe0b154 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 29 Apr 2022 14:31:55 -0500
Subject: [PATCH 40/84] Remove seemingly erroneous file copy

---
 scripts/autogenerate.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/scripts/autogenerate.js b/scripts/autogenerate.js
index e561153cb..1a2113dfb 100644
--- a/scripts/autogenerate.js
+++ b/scripts/autogenerate.js
@@ -415,10 +415,11 @@ async function generate() {
       output: path.join(IOS_OUTPUT_PATH, 'RCTMGLStyle.h'),
       only: 'gl',
     },
-    {
-      input: path.join(TMPL_PATH, 'definitions.d.ts.ejs'),
-      output: path.join(IOS_OUTPUT_PATH, 'definitions.d.ts'),
-    },
+    // TODO: This doesn't seem right?
+    // {
+    //   input: path.join(TMPL_PATH, 'definitions.d.ts.ejs'),
+    //   output: path.join(IOS_OUTPUT_PATH, 'definitions.d.ts'),
+    // },
     {
       input: path.join(TMPL_PATH, 'RCTMGLStyle.m.ejs'),
       output: path.join(IOS_OUTPUT_PATH, 'RCTMGLStyle.m'),

From 202d0318f0524160c8e6f77ef1e5ea4f294327ba Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 29 Apr 2022 14:32:37 -0500
Subject: [PATCH 41/84] Fix default export typing

---
 index.ts | 47 ++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 46 insertions(+), 1 deletion(-)

diff --git a/index.ts b/index.ts
index 3605ca642..da83f4f3c 100644
--- a/index.ts
+++ b/index.ts
@@ -50,6 +50,7 @@ import AnimatedRouteCoordinatesArray from './javascript/utils/animated/AnimatedR
 import Style from './javascript/components/Style';
 import Logger from './javascript/utils/Logger';
 import { isAndroid } from './javascript/utils';
+import { MapboxGLDefinitions } from './definitions';
 
 // Types
 
@@ -900,7 +901,51 @@ export type {
   StyleURLKey,
 };
 
-const MapboxGL = {
+interface MapboxGLType {
+  // Components
+  MapView: typeof MapboxGLDefinitions.MapView;
+  Light: typeof MapboxGLDefinitions.Light;
+  PointAnnotation: typeof MapboxGLDefinitions.PointAnnotation;
+  Annotation: any; // typeof MapboxGLDefinitions.Annotation; // TODO: Define in .d.ts file.
+  Callout: typeof MapboxGLDefinitions.Callout;
+  UserLocation: typeof MapboxGLDefinitions.UserLocation;
+  Camera: typeof Camera;
+  VectorSource: typeof MapboxGLDefinitions.VectorSource;
+  ShapeSource: typeof MapboxGLDefinitions.ShapeSource;
+  RasterSource: typeof MapboxGLDefinitions.RasterSource;
+  RasterDemSource: any; // typeof MapboxGLDefinitions.RasterDemSource; // TODO: Define in .d.ts file.
+  ImageSource: typeof MapboxGLDefinitions.ImageSource;
+  Images: typeof MapboxGLDefinitions.Images;
+  FillLayer: typeof MapboxGLDefinitions.FillLayer;
+  FillExtrusionLayer: typeof MapboxGLDefinitions.FillExtrusionLayer;
+  HeatmapLayer: typeof MapboxGLDefinitions.HeatmapLayer;
+  LineLayer: typeof MapboxGLDefinitions.LineLayer;
+  CircleLayer: typeof MapboxGLDefinitions.CircleLayer;
+  SkyLayer: any; // typeof MapboxGLDefinitions.SkyLayer; // TODO: Define in .d.ts file.
+  SymbolLayer: typeof MapboxGLDefinitions.SymbolLayer;
+  RasterLayer: typeof MapboxGLDefinitions.RasterLayer;
+  BackgroundLayer: typeof MapboxGLDefinitions.BackgroundLayer;
+  Terrain: any; // typeof MapboxGLDefinitions.Terrain; // TODO: Define in .d.ts file.
+  locationManager: typeof MapboxGLDefinitions.locationManager;
+  offlineManager: typeof MapboxGLDefinitions.offlineManager;
+  snapshotManager: typeof MapboxGLDefinitions.snapshotManager;
+  MarkerView: typeof MapboxGLDefinitions.MarkerView;
+  Animated: typeof MapboxGLDefinitions.Animated;
+  AnimatedPoint: typeof MapboxGLDefinitions.AnimatedPoint;
+  AnimatedShape: any; // typeof MapboxGLDefinitions.AnimatedShape; // TODO: Define in .d.ts file.
+  AnimatedCoordinatesArray: any; // typeof MapboxGLDefinitions.AnimatedCoordinatesArray; // TODO: Define in .d.ts file.
+  AnimatedExtractCoordinateFromArray: any; // typeof MapboxGLDefinitions.AnimatedExtractCoordinateFromArray; // TODO: Define in .d.ts file.
+  AnimatedRouteCoordinatesArray: any; // typeof MapboxGLDefinitions.AnimatedRouteCoordinatesArray; // TODO: Define in .d.ts file.
+  Style: typeof MapboxGLDefinitions.Style;
+  Logger: typeof MapboxGLDefinitions.Logger;
+  // Enums
+  InterpolationMode: typeof InterpolationMode;
+  StyleURL: typeof StyleURL;
+  // Methods
+  requestAndroidLocationPermissions: typeof MapboxGLDefinitions.requestAndroidLocationPermissions;
+}
+
+const MapboxGL: MapboxGLType = {
   ...NativeModules.MGLModule,
   // Components
   MapView,

From 069a9acfd034990637409bbf0ebffae9834d0799 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 29 Apr 2022 14:32:55 -0500
Subject: [PATCH 42/84] Remove unused file

---
 javascript/index.d.ts | 287 ------------------------------------------
 1 file changed, 287 deletions(-)
 delete mode 100644 javascript/index.d.ts

diff --git a/javascript/index.d.ts b/javascript/index.d.ts
deleted file mode 100644
index 468e4d6fc..000000000
--- a/javascript/index.d.ts
+++ /dev/null
@@ -1,287 +0,0 @@
-declare module 'rnmapbox__maps';
-
-import { Component } from 'react';
-import ReactNative from 'react-native';
-import {
-  Geometry,
-  Properties,
-  Position,
-  Feature,
-  LineString,
-  Coord,
-  FeatureCollection,
-} from '@turf/helpers';
-import {
-  ShapeSourceProps,
-  ImageSourceProps,
-  FillLayerProps,
-  FillExtrusionLayerProps,
-  LineLayerProps,
-  CircleLayerProps,
-  RasterLayerProps,
-  BackgroundLayerProps,
-  MapViewProps,
-  Expression,
-  UserLocationProps,
-  LightProps,
-  PointAnnotationProps,
-  MarkerViewProps,
-  CalloutProps,
-  StyleProps,
-  VectorSourceProps,
-  RasterSourceProps,
-  HeatmapLayerProps,
-  ImagesProps,
-  OfflineCreatePackOptions,
-  SnapshotOptions,
-  PositionsOptions,
-  InterpolationMode,
-  LogCallback,
-  LogLevel,
-  NamedStyles,
-  OfflineProgressError,
-  OfflineProgressStatus,
-  SymbolLayerProps,
-  UnitsOptions,
-} from '@rnmapbox/maps';
-
-export function removeCustomHeader(headerName: string): void;
-export function addCustomHeader(headerName: string, headerValue: string): void;
-export function setAccessToken(accessToken: string | null): void;
-export function getAccessToken(): Promise<string>;
-export function setTelemetryEnabled(telemetryEnabled: boolean): void;
-export function setConnected(connected: boolean): void;
-export function requestAndroidLocationPermissions(): Promise<boolean>;
-
-export const offlineManager: OfflineManager;
-export const snapshotManager: SnapshotManager;
-export const locationManager: LocationManager;
-
-export class geoUtils {
-  makePoint<P = Properties>(
-    coordinates: Position,
-    properties?: P,
-    options?: PositionsOptions,
-  ): Feature<GeoJSON.Point, P>;
-  makeLineString<P = Properties>(
-    coordinates: Position[],
-    properties?: P,
-    options?: PositionsOptions,
-  ): Feature<LineString, P>;
-  makeLatLngBounds<G = Geometry, P = Properties>(
-    northEastCoordinates: Position[],
-    southWestCoordinates: Position[],
-  ): FeatureCollection<G, P>;
-  makeFeature<G = Geometry, P = Properties>(
-    geometry: G,
-    properties?: P,
-  ): Feature<G, P>;
-  makeFeatureCollection<G = Geometry, P = Properties>(
-    features: Array<Feature<G, P>>,
-    options?: PositionsOptions,
-  ): FeatureCollection<G, P>;
-  addToFeatureCollection<G = Geometry, P = Properties>(
-    newFeatureCollection: Array<FeatureCollection<G, P>>,
-    newFeature: Feature<G, P>,
-  ): FeatureCollection<G, P>;
-  calculateDistance(origin: Coord, dest: Coord, options?: UnitsOptions): number;
-  pointAlongLine(
-    newLineString: Feature<LineString> | LineString,
-    distAlong: number,
-    options?: UnitsOptions,
-  ): Feature<GeoJSON.Point>;
-  getOrCalculateVisibleRegion(
-    coord: { lon: number; lat: number },
-    zoomLevel: number,
-    width: number,
-    height: number,
-    nativeRegion: {
-      properties: { visibleBounds: number[] };
-      visibleBounds: number[];
-    },
-  ): void;
-}
-
-export namespace Animated {
-  // sources
-  class ShapeSource extends Component<ShapeSourceProps> {}
-  class ImageSource extends Component<ImageSourceProps> {}
-
-  // layers
-  class FillLayer extends Component<FillLayerProps> {}
-  class FillExtrusionLayer extends Component<FillExtrusionLayerProps> {}
-  class LineLayer extends Component<LineLayerProps> {}
-  class CircleLayer extends Component<CircleLayerProps> {}
-  class SymbolLayer extends Component<SymbolLayerProps> {}
-  class RasterLayer extends Component<RasterLayerProps> {}
-  class BackgroundLayer extends Component<BackgroundLayerProps> {}
-}
-
-export class AnimatedPoint {
-  constructor(point?: GeoJSON.Point);
-  longitude: ReactNative.Animated.Value;
-  latitude: ReactNative.Animated.Value;
-  setValue: (point: GeoJSON.Point) => void;
-  setOffset: (point: GeoJSON.Point) => void;
-  flattenOffset: () => void;
-  stopAnimation: (cb?: () => GeoJSON.Point) => void;
-  addListener: (cb?: () => GeoJSON.Point) => void;
-  removeListener: (id: string) => void;
-  spring: (
-    config: Record<string, any>,
-  ) => ReactNative.Animated.CompositeAnimation;
-  timing: (
-    config: Record<string, any>,
-  ) => ReactNative.Animated.CompositeAnimation;
-}
-
-export class MapView extends Component<MapViewProps> {
-  getPointInView(coordinate: GeoJSON.Position): Promise<GeoJSON.Position>;
-  getCoordinateFromView(point: GeoJSON.Position): Promise<GeoJSON.Position>;
-  getVisibleBounds(): Promise<GeoJSON.Position[]>;
-  queryRenderedFeaturesAtPoint(
-    coordinate: GeoJSON.Position,
-    filter?: Expression,
-    layerIds?: Array<string>,
-  ): Promise<GeoJSON.FeatureCollection | undefined>;
-  queryRenderedFeaturesInRect(
-    coordinate: GeoJSON.Position,
-    filter?: Expression,
-    layerIds?: Array<string>,
-  ): Promise<GeoJSON.FeatureCollection | undefined>;
-  takeSnap(writeToDisk?: boolean): Promise<string>;
-  getZoom(): Promise<number>;
-  getCenter(): Promise<GeoJSON.Position>;
-  showAttribution(): void;
-  setSourceVisibility(
-    visible: boolean,
-    sourceId: string,
-    sourceLayerId?: string,
-  ): void;
-}
-
-export class UserLocation extends Component<UserLocationProps> {}
-
-export class Light extends Component<LightProps> {}
-
-export class StyleSheet extends Component {
-  static create<T extends NamedStyles<T> | NamedStyles<any>>(styles: T): T;
-  camera(
-    stops: { [key: number]: string },
-    interpolationMode?: InterpolationMode,
-  ): void;
-  source(
-    stops: { [key: number]: string },
-    attributeName: string,
-    interpolationMode?: InterpolationMode,
-  ): void;
-  composite(
-    stops: { [key: number]: string },
-    attributeName: string,
-    interpolationMode?: InterpolationMode,
-  ): void;
-
-  identity(attributeName: string): number;
-}
-
-export class PointAnnotation extends Component<PointAnnotationProps> {
-  refresh(): void;
-}
-export class MarkerView extends Component<MarkerViewProps> {}
-export class Callout extends Component<CalloutProps> {}
-export type Style = React.FC<StyleProps>;
-
-export class VectorSource extends Component<VectorSourceProps> {}
-export class ShapeSource extends Component<ShapeSourceProps> {
-  features(
-    filter?: Expression,
-  ): Promise<FeatureCollection<Geometry, Properties>>;
-
-  getClusterExpansionZoom(
-    feature: Feature<Geometry, Properties> | number,
-  ): Promise<number>;
-  /**
-   * Returns all the leaves of a cluster with pagination support.
-   * @param cluster feature cluster
-   * @param limit the number of leaves to return
-   * @param offset the amount of points to skip (for pagination)
-   */
-  getClusterLeaves: (
-    feature: Feature<Geometry, Properties> | number,
-    limit: number,
-    offset: number,
-  ) => Promise<FeatureCollection<Geometry, Properties>>;
-  /**
-   * Returns the children of a cluster (on the next zoom level).
-   * @param cluster feature cluster
-   */
-  getClusterChildren: (
-    feature: Feature<Geometry, Properties> | number,
-  ) => Promise<FeatureCollection<Geometry, Properties>>;
-}
-export class RasterSource extends Component<RasterSourceProps> {}
-
-/**
- * Layers
- */
-export class BackgroundLayer extends Component<BackgroundLayerProps> {}
-export class CircleLayer extends Component<CircleLayerProps> {}
-export class FillExtrusionLayer extends Component<FillExtrusionLayerProps> {}
-export class FillLayer extends Component<FillLayerProps> {}
-export class LineLayer extends Component<LineLayerProps> {}
-export class RasterLayer extends Component<RasterLayerProps> {}
-export class SymbolLayer extends Component<SymbolLayerProps> {}
-export class HeatmapLayer extends Component<HeatmapLayerProps> {}
-export class Images extends Component<ImagesProps> {}
-export class ImageSource extends Component<ImageSourceProps> {}
-
-export class LocationManager extends Component {
-  start(displacement?: number): void;
-  stop(): void;
-}
-
-/**
- * Offline
- */
-export class OfflineManager extends Component {
-  createPack(
-    options: OfflineCreatePackOptions,
-    progressListener?: (
-      pack: OfflinePack,
-      status: OfflineProgressStatus,
-    ) => void,
-    errorListener?: (pack: OfflinePack, err: OfflineProgressError) => void,
-  ): Promise<void>;
-  deletePack(name: string): Promise<void>;
-  invalidatePack(name: string): Promise<void>;
-  getPacks(): Promise<Array<OfflinePack>>;
-  getPack(name: string): Promise<OfflinePack | undefined>;
-  invalidateAmbientCache(): Promise<void>;
-  clearAmbientCache(): Promise<void>;
-  setMaximumAmbientCacheSize(size: number): Promise<void>;
-  resetDatabase(): Promise<void>;
-  setTileCountLimit(limit: number): void;
-  setProgressEventThrottle(throttleValue: number): void;
-  subscribe(
-    packName: string,
-    progressListener: (pack: OfflinePack, status: object) => void,
-    errorListener?: (pack: OfflinePack, err: object) => void,
-  ): void;
-  unsubscribe(packName: string): void;
-}
-export class OfflinePack extends Component {
-  status(): void;
-  resume(): void;
-  pause(): void;
-}
-
-export class SnapshotManager {
-  static takeSnap(options: SnapshotOptions): Promise<string>;
-}
-
-export class Logger {
-  public static setLogCallback: (cb: LogCallback) => boolean;
-  public static setLogLevel: (level: LogLevel) => void;
-}
-
-export as namespace MapboxGL;

From 418b1c3bd3e03bd18abadfd19fb2ed4158299811 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 29 Apr 2022 15:19:16 -0500
Subject: [PATCH 43/84] Add additional class exports

---
 definitions.d.ts             |  1 -
 index.ts                     | 13 ++++++++++++-
 javascript/utils/geoUtils.js | 12 ++++++++++++
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/definitions.d.ts b/definitions.d.ts
index 1f1b1e695..610ccc441 100644
--- a/definitions.d.ts
+++ b/definitions.d.ts
@@ -55,7 +55,6 @@ export namespace MapboxGLDefinitions {
   export function getAccessToken(): Promise<string>;
   export function setTelemetryEnabled(telemetryEnabled: boolean): void;
   export function setConnected(connected: boolean): void;
-  export function requestAndroidLocationPermissions(): Promise<boolean>;
 
   export const offlineManager: OfflineManager;
   export const snapshotManager: SnapshotManager;
diff --git a/index.ts b/index.ts
index da83f4f3c..0b5f9d2e4 100644
--- a/index.ts
+++ b/index.ts
@@ -50,6 +50,7 @@ import AnimatedRouteCoordinatesArray from './javascript/utils/animated/AnimatedR
 import Style from './javascript/components/Style';
 import Logger from './javascript/utils/Logger';
 import { isAndroid } from './javascript/utils';
+import geoUtils from './javascript/utils/geoUtils';
 import { MapboxGLDefinitions } from './definitions';
 
 // Types
@@ -941,8 +942,16 @@ interface MapboxGLType {
   // Enums
   InterpolationMode: typeof InterpolationMode;
   StyleURL: typeof StyleURL;
+  // Classes
+  geoUtils: typeof geoUtils;
   // Methods
-  requestAndroidLocationPermissions: typeof MapboxGLDefinitions.requestAndroidLocationPermissions;
+  requestAndroidLocationPermissions: typeof requestAndroidLocationPermissions;
+  removeCustomHeader: typeof MapboxGLDefinitions.removeCustomHeader;
+  addCustomHeader: typeof MapboxGLDefinitions.addCustomHeader;
+  setAccessToken: typeof MapboxGLDefinitions.setAccessToken;
+  getAccessToken: typeof MapboxGLDefinitions.getAccessToken;
+  setTelemetryEnabled: typeof MapboxGLDefinitions.setTelemetryEnabled;
+  setConnected: typeof MapboxGLDefinitions.setConnected;
 }
 
 const MapboxGL: MapboxGLType = {
@@ -983,6 +992,8 @@ const MapboxGL: MapboxGLType = {
   AnimatedRouteCoordinatesArray,
   Style,
   Logger,
+  // Classes
+  geoUtils,
   // Enums
   InterpolationMode,
   StyleURL,
diff --git a/javascript/utils/geoUtils.js b/javascript/utils/geoUtils.js
index 66f21b6c3..e84244042 100644
--- a/javascript/utils/geoUtils.js
+++ b/javascript/utils/geoUtils.js
@@ -71,3 +71,15 @@ export function getOrCalculateVisibleRegion(
 
   return region;
 }
+
+export default {
+  makePoint,
+  makeLineString,
+  makeLatLngBounds,
+  makeFeature,
+  makeFeatureCollection,
+  addToFeatureCollection,
+  calculateDistance,
+  pointAlongLine,
+  getOrCalculateVisibleRegion,
+};

From 4a21c6b184b17bf9d671ecb97349acbbabe79d4d Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 29 Apr 2022 15:32:06 -0500
Subject: [PATCH 44/84] Rename variable

---
 javascript/components/Camera.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/javascript/components/Camera.tsx b/javascript/components/Camera.tsx
index 374c40494..34f86fdf0 100644
--- a/javascript/components/Camera.tsx
+++ b/javascript/components/Camera.tsx
@@ -10,9 +10,9 @@ import { NativeModules, requireNativeComponent } from 'react-native';
 import { Position } from 'geojson';
 import { MapboxGLEvent } from '@rnmapbox/maps';
 
-import * as geoUtils from '../utils/geoUtils';
+import geoUtils from '../utils/geoUtils';
 
-const MapboxGL = NativeModules.MGLModule;
+const NativeModule = NativeModules.MGLModule;
 
 export const NATIVE_MODULE_NAME = 'RCTMGLCamera';
 
@@ -355,15 +355,15 @@ const Camera = memo(
       (_mode?: AnimationMode): NativeAnimationMode | undefined => {
         switch (_mode) {
           case Modes.Flight:
-            return MapboxGL.CameraModes.Flight;
+            return NativeModule.CameraModes.Flight;
           case Modes.Ease:
-            return MapboxGL.CameraModes.Ease;
+            return NativeModule.CameraModes.Ease;
           case Modes.Linear:
-            return MapboxGL.CameraModes.Linear;
+            return NativeModule.CameraModes.Linear;
           case Modes.None:
-            return MapboxGL.CameraModes.None;
+            return NativeModule.CameraModes.None;
           case Modes.Move:
-            return MapboxGL.CameraModes.Move;
+            return NativeModule.CameraModes.Move;
           default:
             return undefined;
         }

From 7a18804fa0ad6e08640d16a30f3f87f3cc7d7559 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 29 Apr 2022 16:13:45 -0500
Subject: [PATCH 45/84] Fix import and expected keys

---
 __tests__/interface.test.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/__tests__/interface.test.js b/__tests__/interface.test.js
index 66e87946b..c3966557e 100644
--- a/__tests__/interface.test.js
+++ b/__tests__/interface.test.js
@@ -1,4 +1,4 @@
-import MapboxGL from '../javascript';
+import MapboxGL from '..';
 
 describe('Public Interface', () => {
   it('should contain all expected components and utils', () => {
@@ -20,6 +20,9 @@ describe('Public Interface', () => {
       'snapshotManager',
       'locationManager',
 
+      // utils
+      'geoUtils',
+
       // layers
       'FillLayer',
       'FillExtrusionLayer',

From e4257e58e8606e05480b9d66680a585ae873091b Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 29 Apr 2022 16:23:58 -0500
Subject: [PATCH 46/84] Fix test imports

---
 __tests__/modules/offline/offlineManager.test.js   | 2 +-
 __tests__/modules/snapshot/snapshotManager.test.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/__tests__/modules/offline/offlineManager.test.js b/__tests__/modules/offline/offlineManager.test.js
index 2a2e14add..d27520583 100644
--- a/__tests__/modules/offline/offlineManager.test.js
+++ b/__tests__/modules/offline/offlineManager.test.js
@@ -1,6 +1,6 @@
 import { NativeModules, Platform } from 'react-native';
 
-import MapboxGL from '../../../javascript';
+import MapboxGL from '../../..';
 import { OfflineModuleEventEmitter } from '../../../javascript/modules/offline/offlineManager';
 
 describe('offlineManager', () => {
diff --git a/__tests__/modules/snapshot/snapshotManager.test.js b/__tests__/modules/snapshot/snapshotManager.test.js
index 320015d05..68c41f464 100644
--- a/__tests__/modules/snapshot/snapshotManager.test.js
+++ b/__tests__/modules/snapshot/snapshotManager.test.js
@@ -1,4 +1,4 @@
-import MapboxGL from '../../../javascript';
+import MapboxGL from '../../..';
 
 describe('snapshotManager', () => {
   it('should resolve uri', async () => {

From f5202d29d4d88ae0c5fe1231f93b08c532e94bf9 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 6 May 2022 14:10:46 -0500
Subject: [PATCH 47/84] Update doc generator to handle ts files, add
 documentation

---
 docs/Camera.md                           | 178 +------
 javascript/components/Camera.tsx         | 576 +++++++++++------------
 scripts/autogenHelpers/DocJSONBuilder.js |  39 +-
 scripts/templates/component.md.ejs       |   2 +-
 4 files changed, 345 insertions(+), 450 deletions(-)

diff --git a/docs/Camera.md b/docs/Camera.md
index c52100eb8..16dba8279 100644
--- a/docs/Camera.md
+++ b/docs/Camera.md
@@ -1,162 +1,30 @@
-<!-- This file was autogenerated from Camera.js do not modify -->
+<!-- Autogenerated from Camera. Do not modify. -->
 ## <MapboxGL.Camera />
-### 
+### @param {CameraProps} props<br/><br/>@example<br/>To use imperative methods, pass in a ref object:<br/>```<br/>const camera = useRef<CameraRef>(null);<br/><br/>useEffect(() => {<br/>  camera.current?.setCamera({<br/>    centerCoordinate: [lon, lat],<br/>  });<br/>}, []);<br/><br/>return (<br/>  <Camera ref={camera} /><br/>);<br/>```
 
 ### props
 | Prop | Type | Default | Required | Description |
 | ---- | :--: | :-----: | :------: | :----------: |
-| 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/>`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 |
-| &nbsp;&nbsp;&nbsp;&nbsp;paddingLeft | `number` | `none` | `false` | Left padding in points |
-| &nbsp;&nbsp;&nbsp;&nbsp;paddingRight | `number` | `none` | `false` | Right padding in points |
-| &nbsp;&nbsp;&nbsp;&nbsp;paddingTop | `number` | `none` | `false` | Top padding in points |
-| &nbsp;&nbsp;&nbsp;&nbsp;paddingBottom | `number` | `none` | `false` | Bottom padding in points |
-| &nbsp;&nbsp;heading | `number` | `none` | `false` | Heading on map |
-| &nbsp;&nbsp;pitch | `number` | `none` | `false` | Pitch on map |
-| &nbsp;&nbsp;bounds | `shape` | `none` | `false` | Represents a rectangle in geographical coordinates marking the visible area of the map.<br/>The `bounds.padding*` properties are deprecated; use root `padding` property instead. |
-| &nbsp;&nbsp;&nbsp;&nbsp;ne | `array` | `none` | `true` | North east coordinate of bound |
-| &nbsp;&nbsp;&nbsp;&nbsp;sw | `array` | `none` | `true` | South west coordinate of bound |
-| &nbsp;&nbsp;&nbsp;&nbsp;paddingLeft | `number` | `none` | `false` | Left padding in points (deprecated; use root `padding` property instead) |
-| &nbsp;&nbsp;&nbsp;&nbsp;paddingRight | `number` | `none` | `false` | Right padding in points (deprecated; use root `padding` property instead) |
-| &nbsp;&nbsp;&nbsp;&nbsp;paddingTop | `number` | `none` | `false` | Top padding in points (deprecated; use root `padding` property instead) |
-| &nbsp;&nbsp;&nbsp;&nbsp;paddingBottom | `number` | `none` | `false` | Bottom padding in points (deprecated; use root `padding` property instead) |
-| &nbsp;&nbsp;onUserTrackingModeChange | `func` | `none` | `false` | Callback that is triggered on user tracking mode changes |
-| &nbsp;&nbsp;zoomLevel | `number` | `none` | `false` | Zoom level of the map |
-| centerCoordinate | `array` | `none` | `false` | Center coordinate on map [lng, lat] |
-| padding | `shape` | `none` | `false` | Padding around edges of map in points |
-| &nbsp;&nbsp;paddingLeft | `number` | `none` | `false` | Left padding in points |
-| &nbsp;&nbsp;paddingRight | `number` | `none` | `false` | Right padding in points |
-| &nbsp;&nbsp;paddingTop | `number` | `none` | `false` | Top padding in points |
-| &nbsp;&nbsp;paddingBottom | `number` | `none` | `false` | Bottom padding in points |
-| heading | `number` | `none` | `false` | Heading on map |
-| pitch | `number` | `none` | `false` | Pitch on map |
-| bounds | `shape` | `none` | `false` | Represents a rectangle in geographical coordinates marking the visible area of the map.<br/>The `bounds.padding*` properties are deprecated; use root `padding` property instead. |
-| &nbsp;&nbsp;ne | `array` | `none` | `true` | North east coordinate of bound |
-| &nbsp;&nbsp;sw | `array` | `none` | `true` | South west coordinate of bound |
-| &nbsp;&nbsp;paddingLeft | `number` | `none` | `false` | Left padding in points (deprecated; use root `padding` property instead) |
-| &nbsp;&nbsp;paddingRight | `number` | `none` | `false` | Right padding in points (deprecated; use root `padding` property instead) |
-| &nbsp;&nbsp;paddingTop | `number` | `none` | `false` | Top padding in points (deprecated; use root `padding` property instead) |
-| &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 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 |
-| followUserLocation | `bool` | `none` | `false` | Should the map orientation follow the user's. |
-| followUserMode | `enum` | `none` | `false` | The mode used to track the user location on the map. One of; "normal", "compass", "course". Each mode string is also available as a member on the `MapboxGL.UserTrackingModes` object. `Follow` (normal), `FollowWithHeading` (compass), `FollowWithCourse` (course). NOTE: `followUserLocation` must be set to `true` for any of the modes to take effect. [Example](../example/src/examples/SetUserTrackingModes.js) |
-| followZoomLevel | `number` | `none` | `false` | The zoomLevel on map while followUserLocation is set to `true` |
-| followPitch | `number` | `none` | `false` | The pitch on map while followUserLocation is set to `true` |
-| followHeading | `number` | `none` | `false` | The heading on map while followUserLocation is set to `true` |
-| triggerKey | `any` | `none` | `false` | Manually update the camera - helpful for when props did not update, however you still want the camera to move |
-
-### methods
-#### fitBounds(northEastCoordinates, southWestCoordinates[, padding][, animationDuration])
-
-Map camera transitions to fit provided bounds
-
-##### arguments
-| Name | Type | Required | Description  |
-| ---- | :--: | :------: | :----------: |
-| `northEastCoordinates` | `Array` | `Yes` | North east coordinate of bound |
-| `southWestCoordinates` | `Array` | `Yes` | South west coordinate of bound |
-| `padding` | `Number` | `No` | Camera padding for bound |
-| `animationDuration` | `Number` | `No` | Duration of camera animation |
-
-
-
-```javascript
-this.camera.fitBounds([lng, lat], [lng, lat])
-this.camera.fitBounds([lng, lat], [lng, lat], 20, 1000) // padding for all sides
-this.camera.fitBounds([lng, lat], [lng, lat], [verticalPadding, horizontalPadding], 1000)
-this.camera.fitBounds([lng, lat], [lng, lat], [top, right, bottom, left], 1000)
-```
-
-
-#### flyTo(coordinates[, animationDuration])
-
-Map camera will fly to new coordinate
-
-##### arguments
-| Name | Type | Required | Description  |
-| ---- | :--: | :------: | :----------: |
-| `coordinates` | `Array` | `Yes` | Coordinates that map camera will jump too |
-| `animationDuration` | `Number` | `No` | Duration of camera animation |
-
-
-
-```javascript
-this.camera.flyTo([lng, lat])
-this.camera.flyTo([lng, lat], 12000)
-```
-
-
-#### moveTo(coordinates[, animationDuration])
-
-Map camera will move to new coordinate at the same zoom level
-
-##### arguments
-| Name | Type | Required | Description  |
-| ---- | :--: | :------: | :----------: |
-| `coordinates` | `Array` | `Yes` | Coordinates that map camera will move too |
-| `animationDuration` | `Number` | `No` | Duration of camera animation |
-
-
-
-```javascript
-this.camera.moveTo([lng, lat], 200) // eases camera to new location based on duration
-this.camera.moveTo([lng, lat]) // snaps camera to new location without any easing
-```
-
-
-#### zoomTo(zoomLevel[, animationDuration])
-
-Map camera will zoom to specified level
-
-##### arguments
-| Name | Type | Required | Description  |
-| ---- | :--: | :------: | :----------: |
-| `zoomLevel` | `Number` | `Yes` | Zoom level that the map camera will animate too |
-| `animationDuration` | `Number` | `No` | Duration of camera animation |
-
-
-
-```javascript
-this.camera.zoomTo(16)
-this.camera.zoomTo(16, 100)
-```
-
-
-#### setCamera(config)
-
-Map camera will perform updates based on provided config. Advanced use only!
-
-##### arguments
-| Name | Type | Required | Description  |
-| ---- | :--: | :------: | :----------: |
-| `config` | `Object` | `Yes` | Camera configuration |
-
-
-
-```javascript
-this.camera.setCamera({
-  centerCoordinate: [lng, lat],
-  zoomLevel: 16,
-  animationDuration: 2000,
-})
-
-this.camera.setCamera({
-  stops: [
-    { pitch: 45, animationDuration: 200 },
-    { heading: 180, animationDuration: 300 },
-  ]
-})
-```
-
+| type | `literal` | `none` | `false` | FIX ME NO DESCRIPTION |
+| centerCoordinate | `Position` | `none` | `false` | The location on which the map should center. |
+| bounds | `CameraBoundsWithPadding` | `none` | `false` | The corners of a box around which the map should bound. Contains padding props for backwards<br/>compatibility; the root `padding` prop should be used instead. |
+| heading | `number` | `none` | `false` | The heading (orientation) of the map. |
+| pitch | `number` | `none` | `false` | The pitch of the map. |
+| zoomLevel | `number` | `none` | `false` | The zoom level of the map. |
+| padding | `CameraPadding` | `none` | `false` | The viewport padding in points. |
+| animationDuration | `number` | `none` | `false` | The duration the map takes to animate to a new configuration. |
+| animationMode | `'flyTo' \| 'easeTo' \| 'linearTo' \| 'none' \| 'moveTo'` | `none` | `false` | The easing or path the camera uses to animate to a new configuration. |
+| followUserMode | `'normal' \| 'compass' \| 'course'` | `none` | `false` | The mode used to track the user location on the map. |
+| followUserLocation | `boolean` | `none` | `false` | Whether the map orientation follows the user location. |
+| followZoomLevel | `number` | `none` | `false` | The zoom level used when following the user location. |
+| followPitch | `number` | `none` | `false` | The pitch used when following the user location. |
+| followHeading | `number` | `none` | `false` | The heading used when following the user location. |
+| minZoomLevel | `number` | `none` | `false` | The lowest allowed zoom level. |
+| maxZoomLevel | `number` | `none` | `false` | The highest allowed zoom level. |
+| maxBounds | `{ne:Position;sw:Position;}` | `none` | `false` | The corners of a box defining the limits of where the camera can pan or zoom. |
+| defaultSettings | `CameraStop` | `none` | `false` | The configuration that the camera falls back on, if no other values are specified. |
+| allowUpdates | `boolean` | `none` | `false` | Whether the camera should send any configuration to the native module. Prevents unnecessary tile<br/>fetching and improves performance when the map is not visible. Defaults to `true`. (Not yet implemented.) |
+| triggerKey | `string \| number` | `none` | `false` | Any arbitrary primitive value that, when changed, causes the camera to retry moving to its target<br/>configuration. (Not yet implemented.) |
+| onUserTrackingModeChange | `(event:MapboxGLEvent<'usertrackingmodechange',{followUserLocation:boolean;followUserMode:UserTrackingMode\|null;}>,)=>void` | `none` | `false` | Executes when user tracking mode changes. |
 
 
diff --git a/javascript/components/Camera.tsx b/javascript/components/Camera.tsx
index 34f86fdf0..d57f4323f 100644
--- a/javascript/components/Camera.tsx
+++ b/javascript/components/Camera.tsx
@@ -46,57 +46,62 @@ type UserTrackingModeChangeCallback = (
   >,
 ) => void;
 
-/**
- * @param {Position} centerCoordinate
- * @param {CameraBounds} bounds
- * @param {number} heading
- * @param {number} pitch
- * @param {number} zoomLevel
- * @param {CameraPadding} padding
- * @param {number} animationDuration
- * @param {AnimationMode} animationMode
- * @param {boolean} followUserLocation
- * @param {UserTrackingMode} followUserMode
- * @param {number} followZoomLevel
- * @param {number} followPitch
- * @param {number} followHeading
- * @param {number} minZoomLevel
- * @param {number} maxZoomLevel
- * @param {CameraBounds} maxBounds
- */
 export interface CameraProps
-  extends Omit<CameraStop, 'type'>,
+  extends CameraStop,
     CameraFollowConfig,
     CameraMinMaxConfig {
+  /** The configuration that the camera falls back on, if no other values are specified. */
   defaultSettings?: CameraStop;
+  /** Whether the camera should send any configuration to the native module. Prevents unnecessary tile
+   * fetching and improves performance when the map is not visible. Defaults to `true`. (Not yet implemented.) */
   allowUpdates?: boolean;
-  triggerKey?: any;
+  /** Any arbitrary primitive value that, when changed, causes the camera to retry moving to its target
+   * configuration. (Not yet implemented.) */
+  triggerKey?: string | number;
+  /** Executes when user tracking mode changes. */
   onUserTrackingModeChange?: UserTrackingModeChangeCallback;
 }
 
 interface CameraStop {
   readonly type?: 'CameraStop';
+  /** The location on which the map should center. */
   centerCoordinate?: Position;
-  bounds?: CameraBoundsWithPadding; // With padding for backwards compatibility.
+  /** The corners of a box around which the map should bound. Contains padding props for backwards
+   * compatibility; the root `padding` prop should be used instead. */
+  bounds?: CameraBoundsWithPadding;
+  /** The heading (orientation) of the map. */
   heading?: number;
+  /** The pitch of the map. */
   pitch?: number;
+  /** The zoom level of the map. */
   zoomLevel?: number;
+  /** The viewport padding in points. */
   padding?: CameraPadding;
+  /** The duration the map takes to animate to a new configuration. */
   animationDuration?: number;
+  /** The easing or path the camera uses to animate to a new configuration. */
   animationMode?: AnimationMode;
 }
 
 interface CameraFollowConfig {
-  followUserLocation?: boolean;
+  /** The mode used to track the user location on the map. */
   followUserMode?: UserTrackingMode;
+  /** Whether the map orientation follows the user location. */
+  followUserLocation?: boolean;
+  /** The zoom level used when following the user location. */
   followZoomLevel?: number;
+  /** The pitch used when following the user location. */
   followPitch?: number;
+  /** The heading used when following the user location. */
   followHeading?: number;
 }
 
 interface CameraMinMaxConfig {
+  /** The lowest allowed zoom level. */
   minZoomLevel?: number;
+  /** The highest allowed zoom level. */
   maxZoomLevel?: number;
+  /** The corners of a box defining the limits of where the camera can pan or zoom. */
   maxBounds?: {
     ne: Position;
     sw: Position;
@@ -237,224 +242,208 @@ export interface CameraRef {
  * );
  * ```
  */
-const Camera = memo(
-  forwardRef((props: CameraProps, ref: React.ForwardedRef<CameraRef>) => {
-    const {
-      centerCoordinate,
-      bounds,
-      heading,
-      pitch,
-      zoomLevel,
-      padding,
-      animationDuration,
-      animationMode,
-      minZoomLevel,
-      maxZoomLevel,
-      maxBounds,
-      followUserLocation,
-      followUserMode,
-      followZoomLevel,
-      followPitch,
-      followHeading,
-      defaultSettings,
-      allowUpdates = true,
-      triggerKey,
-      onUserTrackingModeChange,
-    } = props;
-
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const camera: React.RefObject<RCTMGLCamera> = useRef(null);
-
-    const fitBounds: CameraRef['fitBounds'] = (
-      ne,
-      sw,
-      paddingConfig = 0,
-      animationDuration = 0,
-    ) => {
-      let padding = {
-        paddingTop: 0,
-        paddingBottom: 0,
-        paddingLeft: 0,
-        paddingRight: 0,
-      };
+const Camera = (props: CameraProps, ref: React.ForwardedRef<CameraRef>) => {
+  const {
+    centerCoordinate,
+    bounds,
+    heading,
+    pitch,
+    zoomLevel,
+    padding,
+    animationDuration,
+    animationMode,
+    minZoomLevel,
+    maxZoomLevel,
+    maxBounds,
+    followUserLocation,
+    followUserMode,
+    followZoomLevel,
+    followPitch,
+    followHeading,
+    defaultSettings,
+    allowUpdates = true,
+    triggerKey,
+    onUserTrackingModeChange,
+  } = props;
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const camera: React.RefObject<RCTMGLCamera> = useRef(null);
+
+  const fitBounds: CameraRef['fitBounds'] = (
+    ne,
+    sw,
+    paddingConfig = 0,
+    animationDuration = 0,
+  ) => {
+    let padding = {
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingLeft: 0,
+      paddingRight: 0,
+    };
 
-      if (Array.isArray(paddingConfig)) {
-        if (paddingConfig.length === 2) {
-          padding = {
-            paddingTop: paddingConfig[0],
-            paddingBottom: paddingConfig[0],
-            paddingLeft: paddingConfig[1],
-            paddingRight: paddingConfig[1],
-          };
-        } else if (paddingConfig.length === 4) {
-          padding = {
-            paddingTop: paddingConfig[0],
-            paddingBottom: paddingConfig[2],
-            paddingLeft: paddingConfig[3],
-            paddingRight: paddingConfig[1],
-          };
-        }
-      } else {
+    if (Array.isArray(paddingConfig)) {
+      if (paddingConfig.length === 2) {
+        padding = {
+          paddingTop: paddingConfig[0],
+          paddingBottom: paddingConfig[0],
+          paddingLeft: paddingConfig[1],
+          paddingRight: paddingConfig[1],
+        };
+      } else if (paddingConfig.length === 4) {
         padding = {
-          paddingTop: paddingConfig,
-          paddingBottom: paddingConfig,
-          paddingLeft: paddingConfig,
-          paddingRight: paddingConfig,
+          paddingTop: paddingConfig[0],
+          paddingBottom: paddingConfig[2],
+          paddingLeft: paddingConfig[3],
+          paddingRight: paddingConfig[1],
         };
       }
+    } else {
+      padding = {
+        paddingTop: paddingConfig,
+        paddingBottom: paddingConfig,
+        paddingLeft: paddingConfig,
+        paddingRight: paddingConfig,
+      };
+    }
 
-      setCamera({
-        type: 'CameraStop',
-        bounds: {
-          ne,
-          sw,
-        },
-        padding,
-        animationDuration,
-        animationMode: 'easeTo',
-      });
-    };
+    setCamera({
+      type: 'CameraStop',
+      bounds: {
+        ne,
+        sw,
+      },
+      padding,
+      animationDuration,
+      animationMode: 'easeTo',
+    });
+  };
 
-    const flyTo: CameraRef['flyTo'] = (
+  const flyTo: CameraRef['flyTo'] = (
+    centerCoordinate,
+    animationDuration = 2000,
+  ) => {
+    setCamera({
+      type: 'CameraStop',
       centerCoordinate,
-      animationDuration = 2000,
-    ) => {
-      setCamera({
-        type: 'CameraStop',
-        centerCoordinate,
-        animationDuration,
-      });
-    };
+      animationDuration,
+    });
+  };
 
-    const moveTo: CameraRef['moveTo'] = (
+  const moveTo: CameraRef['moveTo'] = (
+    centerCoordinate,
+    animationDuration = 0,
+  ) => {
+    setCamera({
+      type: 'CameraStop',
       centerCoordinate,
-      animationDuration = 0,
-    ) => {
-      setCamera({
-        type: 'CameraStop',
-        centerCoordinate,
-        animationDuration,
-        animationMode: 'easeTo',
-      });
-    };
+      animationDuration,
+      animationMode: 'easeTo',
+    });
+  };
 
-    const zoomTo: CameraRef['zoomTo'] = (
+  const zoomTo: CameraRef['zoomTo'] = (zoomLevel, animationDuration = 2000) => {
+    setCamera({
+      type: 'CameraStop',
       zoomLevel,
-      animationDuration = 2000,
-    ) => {
-      setCamera({
-        type: 'CameraStop',
-        zoomLevel,
-        animationDuration,
-        animationMode: 'flyTo',
-      });
-    };
-
-    const nativeAnimationMode = useCallback(
-      (_mode?: AnimationMode): NativeAnimationMode | undefined => {
-        switch (_mode) {
-          case Modes.Flight:
-            return NativeModule.CameraModes.Flight;
-          case Modes.Ease:
-            return NativeModule.CameraModes.Ease;
-          case Modes.Linear:
-            return NativeModule.CameraModes.Linear;
-          case Modes.None:
-            return NativeModule.CameraModes.None;
-          case Modes.Move:
-            return NativeModule.CameraModes.Move;
-          default:
-            return undefined;
-        }
-      },
-      [],
-    );
+      animationDuration,
+      animationMode: 'flyTo',
+    });
+  };
 
-    const nativeDefaultStop = useMemo((): NativeCameraStop | null => {
-      if (!defaultSettings) {
-        return null;
+  const nativeAnimationMode = useCallback(
+    (_mode?: AnimationMode): NativeAnimationMode | undefined => {
+      switch (_mode) {
+        case Modes.Flight:
+          return NativeModule.CameraModes.Flight;
+        case Modes.Ease:
+          return NativeModule.CameraModes.Ease;
+        case Modes.Linear:
+          return NativeModule.CameraModes.Linear;
+        case Modes.None:
+          return NativeModule.CameraModes.None;
+        case Modes.Move:
+          return NativeModule.CameraModes.Move;
+        default:
+          return undefined;
       }
-      const _defaultStop: NativeCameraStop = {
-        centerCoordinate: JSON.stringify(defaultSettings.centerCoordinate),
-        bounds: JSON.stringify(defaultSettings.bounds),
-        heading: defaultSettings.heading ?? 0,
-        pitch: defaultSettings.pitch ?? 0,
-        zoom: defaultSettings.zoomLevel ?? 11,
-        paddingTop: defaultSettings.padding?.paddingTop ?? 0,
-        paddingBottom: defaultSettings.padding?.paddingBottom ?? 0,
-        paddingLeft: defaultSettings.padding?.paddingLeft ?? 0,
-        paddingRight: defaultSettings.padding?.paddingRight ?? 0,
-        duration: defaultSettings.animationDuration ?? 2000,
-        mode: nativeAnimationMode(defaultSettings.animationMode) ?? 'flight',
-      };
-      return _defaultStop;
-    }, [defaultSettings, nativeAnimationMode]);
-
-    const buildNativeStop = useCallback(
-      (
-        stop: CameraStop,
-        ignoreFollowUserLocation = false,
-      ): NativeCameraStop | null => {
-        stop = {
-          ...stop,
-          type: 'CameraStop',
-        };
-
-        if (props.followUserLocation && !ignoreFollowUserLocation) {
-          return null;
-        }
+    },
+    [],
+  );
 
-        const _nativeStop: NativeCameraStop = { ...nativeDefaultStop };
+  const nativeDefaultStop = useMemo((): NativeCameraStop | null => {
+    if (!defaultSettings) {
+      return null;
+    }
+    const _defaultStop: NativeCameraStop = {
+      centerCoordinate: JSON.stringify(defaultSettings.centerCoordinate),
+      bounds: JSON.stringify(defaultSettings.bounds),
+      heading: defaultSettings.heading ?? 0,
+      pitch: defaultSettings.pitch ?? 0,
+      zoom: defaultSettings.zoomLevel ?? 11,
+      paddingTop: defaultSettings.padding?.paddingTop ?? 0,
+      paddingBottom: defaultSettings.padding?.paddingBottom ?? 0,
+      paddingLeft: defaultSettings.padding?.paddingLeft ?? 0,
+      paddingRight: defaultSettings.padding?.paddingRight ?? 0,
+      duration: defaultSettings.animationDuration ?? 2000,
+      mode: nativeAnimationMode(defaultSettings.animationMode) ?? 'flight',
+    };
+    return _defaultStop;
+  }, [defaultSettings, nativeAnimationMode]);
+
+  const buildNativeStop = useCallback(
+    (
+      stop: CameraStop,
+      ignoreFollowUserLocation = false,
+    ): NativeCameraStop | null => {
+      stop = {
+        ...stop,
+        type: 'CameraStop',
+      };
 
-        if (stop.pitch !== undefined) _nativeStop.pitch = stop.pitch;
-        if (stop.heading !== undefined) _nativeStop.heading = stop.heading;
-        if (stop.zoomLevel !== undefined) _nativeStop.zoom = stop.zoomLevel;
-        if (stop.animationMode !== undefined)
-          _nativeStop.mode = nativeAnimationMode(stop.animationMode);
-        if (stop.animationDuration !== undefined)
-          _nativeStop.duration = stop.animationDuration;
+      if (props.followUserLocation && !ignoreFollowUserLocation) {
+        return null;
+      }
 
-        if (stop.centerCoordinate) {
-          _nativeStop.centerCoordinate = JSON.stringify(
-            geoUtils.makePoint(stop.centerCoordinate),
-          );
-        }
+      const _nativeStop: NativeCameraStop = { ...nativeDefaultStop };
 
-        if (stop.bounds && stop.bounds.ne && stop.bounds.sw) {
-          const { ne, sw } = stop.bounds;
-          _nativeStop.bounds = JSON.stringify(
-            geoUtils.makeLatLngBounds(ne, sw),
-          );
-        }
+      if (stop.pitch !== undefined) _nativeStop.pitch = stop.pitch;
+      if (stop.heading !== undefined) _nativeStop.heading = stop.heading;
+      if (stop.zoomLevel !== undefined) _nativeStop.zoom = stop.zoomLevel;
+      if (stop.animationMode !== undefined)
+        _nativeStop.mode = nativeAnimationMode(stop.animationMode);
+      if (stop.animationDuration !== undefined)
+        _nativeStop.duration = stop.animationDuration;
 
-        _nativeStop.paddingTop =
-          stop.padding?.paddingTop ?? stop.bounds?.paddingTop ?? 0;
-        _nativeStop.paddingRight =
-          stop.padding?.paddingRight ?? stop.bounds?.paddingRight ?? 0;
-        _nativeStop.paddingBottom =
-          stop.padding?.paddingBottom ?? stop.bounds?.paddingBottom ?? 0;
-        _nativeStop.paddingLeft =
-          stop.padding?.paddingLeft ?? stop.bounds?.paddingLeft ?? 0;
+      if (stop.centerCoordinate) {
+        _nativeStop.centerCoordinate = JSON.stringify(
+          geoUtils.makePoint(stop.centerCoordinate),
+        );
+      }
 
-        return _nativeStop;
-      },
-      [props.followUserLocation, nativeDefaultStop, nativeAnimationMode],
-    );
+      if (stop.bounds && stop.bounds.ne && stop.bounds.sw) {
+        const { ne, sw } = stop.bounds;
+        _nativeStop.bounds = JSON.stringify(geoUtils.makeLatLngBounds(ne, sw));
+      }
 
-    const nativeStop = useMemo(() => {
-      return buildNativeStop({
-        type: 'CameraStop',
-        centerCoordinate,
-        bounds,
-        heading,
-        pitch,
-        zoomLevel,
-        padding,
-        animationDuration,
-        animationMode,
-      });
-    }, [
+      _nativeStop.paddingTop =
+        stop.padding?.paddingTop ?? stop.bounds?.paddingTop ?? 0;
+      _nativeStop.paddingRight =
+        stop.padding?.paddingRight ?? stop.bounds?.paddingRight ?? 0;
+      _nativeStop.paddingBottom =
+        stop.padding?.paddingBottom ?? stop.bounds?.paddingBottom ?? 0;
+      _nativeStop.paddingLeft =
+        stop.padding?.paddingLeft ?? stop.bounds?.paddingLeft ?? 0;
+
+      return _nativeStop;
+    },
+    [props.followUserLocation, nativeDefaultStop, nativeAnimationMode],
+  );
+
+  const nativeStop = useMemo(() => {
+    return buildNativeStop({
+      type: 'CameraStop',
       centerCoordinate,
       bounds,
       heading,
@@ -463,80 +452,89 @@ const Camera = memo(
       padding,
       animationDuration,
       animationMode,
-      buildNativeStop,
-    ]);
+    });
+  }, [
+    centerCoordinate,
+    bounds,
+    heading,
+    pitch,
+    zoomLevel,
+    padding,
+    animationDuration,
+    animationMode,
+    buildNativeStop,
+  ]);
+
+  const nativeMaxBounds = useMemo(() => {
+    if (!maxBounds?.ne || !maxBounds?.sw) {
+      return null;
+    }
+    return JSON.stringify(
+      geoUtils.makeLatLngBounds(maxBounds.ne, maxBounds.sw),
+    );
+  }, [maxBounds]);
+
+  const setCamera: CameraRef['setCamera'] = useCallback(
+    (config) => {
+      if (!config.type)
+        // @ts-expect-error The compiler doesn't understand that the `config` union type is guaranteed
+        // to be an object type.
+        config = {
+          ...config,
+          // @ts-expect-error Allows JS files to pass in an invalid config (lacking the `type` property),
+          // which would raise a compilation error in TS files.
+          type: config.stops ? 'CameraStops' : 'CameraStop',
+        };
 
-    const nativeMaxBounds = useMemo(() => {
-      if (!maxBounds?.ne || !maxBounds?.sw) {
-        return null;
-      }
-      return JSON.stringify(
-        geoUtils.makeLatLngBounds(maxBounds.ne, maxBounds.sw),
-      );
-    }, [maxBounds]);
-
-    const setCamera: CameraRef['setCamera'] = useCallback(
-      (config) => {
-        if (!config.type)
-          // @ts-expect-error The compiler doesn't understand that the `config` union type is guaranteed
-          // to be an object type.
-          config = {
-            ...config,
-            // @ts-expect-error Allows JS files to pass in an invalid config (lacking the `type` property),
-            // which would raise a compilation error in TS files.
-            type: config.stops ? 'CameraStops' : 'CameraStop',
-          };
-
-        if (config.type === 'CameraStops') {
-          for (const _stop of config.stops) {
-            let _nativeStops: NativeCameraStop[] = [];
-            const _nativeStop = buildNativeStop(_stop);
-            if (_nativeStop) {
-              _nativeStops = [..._nativeStops, _nativeStop];
-            }
-            camera.current.setNativeProps({
-              stop: { stops: _nativeStops },
-            });
-          }
-        } else if (config.type === 'CameraStop') {
-          const _nativeStop = buildNativeStop(config);
+      if (config.type === 'CameraStops') {
+        for (const _stop of config.stops) {
+          let _nativeStops: NativeCameraStop[] = [];
+          const _nativeStop = buildNativeStop(_stop);
           if (_nativeStop) {
-            camera.current.setNativeProps({ stop: _nativeStop });
+            _nativeStops = [..._nativeStops, _nativeStop];
           }
+          camera.current.setNativeProps({
+            stop: { stops: _nativeStops },
+          });
         }
-      },
-      [buildNativeStop],
-    );
-
-    useImperativeHandle(ref, () => ({
-      setCamera,
-      fitBounds,
-      flyTo,
-      moveTo,
-      zoomTo,
-    }));
-
-    return (
-      <RCTMGLCamera
-        testID={'Camera'}
-        ref={camera}
-        stop={nativeStop}
-        defaultStop={nativeDefaultStop}
-        followUserLocation={followUserLocation}
-        followUserMode={followUserMode}
-        followPitch={followPitch}
-        followHeading={followHeading}
-        followZoomLevel={followZoomLevel}
-        minZoomLevel={minZoomLevel}
-        maxZoomLevel={maxZoomLevel}
-        maxBounds={nativeMaxBounds}
-        onUserTrackingModeChange={onUserTrackingModeChange}
-      />
-    );
-  }),
-);
+      } else if (config.type === 'CameraStop') {
+        const _nativeStop = buildNativeStop(config);
+        if (_nativeStop) {
+          camera.current.setNativeProps({ stop: _nativeStop });
+        }
+      }
+    },
+    [buildNativeStop],
+  );
+
+  useImperativeHandle(ref, () => ({
+    setCamera,
+    fitBounds,
+    flyTo,
+    moveTo,
+    zoomTo,
+  }));
+
+  return (
+    <RCTMGLCamera
+      testID={'Camera'}
+      ref={camera}
+      stop={nativeStop}
+      defaultStop={nativeDefaultStop}
+      followUserLocation={followUserLocation}
+      followUserMode={followUserMode}
+      followPitch={followPitch}
+      followHeading={followHeading}
+      followZoomLevel={followZoomLevel}
+      minZoomLevel={minZoomLevel}
+      maxZoomLevel={maxZoomLevel}
+      maxBounds={nativeMaxBounds}
+      onUserTrackingModeChange={onUserTrackingModeChange}
+    />
+  );
+};
 
 const RCTMGLCamera =
   requireNativeComponent<NativeCameraProps>(NATIVE_MODULE_NAME);
 
-export default Camera;
+export default memo(forwardRef(Camera));
diff --git a/scripts/autogenHelpers/DocJSONBuilder.js b/scripts/autogenHelpers/DocJSONBuilder.js
index 7f4535214..967f4c6c5 100644
--- a/scripts/autogenHelpers/DocJSONBuilder.js
+++ b/scripts/autogenHelpers/DocJSONBuilder.js
@@ -40,7 +40,7 @@ class DocJSONBuilder {
 
   get options() {
     return {
-      match: /.js$/,
+      match: /.(js|tsx)$/,
       shortName: true,
     };
   }
@@ -106,13 +106,36 @@ class DocJSONBuilder {
       return result;
     }
 
+    function tsTypeDesc(tsType) {
+      if (tsType == null) {
+        return;
+      }
+
+      if (tsType.name == null) {
+        return null;
+      }
+
+      if (tsType.name === 'signature') {
+        return `${tsType.raw
+          .replaceAll(/(\n|\s)/g, '')
+          .replaceAll(/(\|)/g, '\\|')}`;
+      } else if (tsType.name === 'union') {
+        return tsType.raw.replace(/\|/g, '\\|');
+      } else {
+        return tsType.name;
+      }
+    }
+
     function mapProp(propMeta, propName, array) {
       let result = {};
       if (!array) {
         result = {
           name: propName || 'FIX ME NO NAME',
           required: propMeta.required || false,
-          type: (propMeta.type && propMeta.type.name) || 'FIX ME UNKNOWN TYPE',
+          type:
+            (propMeta.type && propMeta.type.name) ||
+            tsTypeDesc(propMeta.tsType) ||
+            'FIX ME UNKNOWN TYPE',
           default: !propMeta.defaultValue
             ? 'none'
             : propMeta.defaultValue.value.replace(/\n/g, ''),
@@ -126,7 +149,9 @@ class DocJSONBuilder {
           result.required = propMeta.required;
         }
         result.type =
-          (propMeta.type && propMeta.type.name) || 'FIX ME UNKNOWN TYPE';
+          (propMeta.type && propMeta.type.name) ||
+          tsTypeDesc(propMeta.tsType) ||
+          'FIX ME UNKNOWN TYPE';
         if (propMeta.defaultValue) {
           result.default = propMeta.defaultValue.value.replace(/\n/g, '');
         }
@@ -213,15 +238,19 @@ class DocJSONBuilder {
             return reject(err);
           }
 
-          fileName = fileName.replace('.js', '');
+          fileName = fileName.replace(/.(js)/, '');
           if (IGNORE_FILES.includes(fileName)) {
             next();
             return;
           }
 
-          results[fileName] = docgen.parse(content, undefined, undefined, {
+          content = content.replace(/memo\(forwardRef\((.+?)\)\)/, '$1');
+
+          let parsed = docgen.parse(content, undefined, undefined, {
             filename: fileName,
           });
+          fileName = fileName.replace(/.(tsx)/, '');
+          results[fileName] = parsed;
           this.postprocess(results[fileName], fileName);
 
           next();
diff --git a/scripts/templates/component.md.ejs b/scripts/templates/component.md.ejs
index 867c78f5e..116b89b65 100644
--- a/scripts/templates/component.md.ejs
+++ b/scripts/templates/component.md.ejs
@@ -1,7 +1,7 @@
 <%
   const component = locals.component;
 -%>
-<!-- This file was autogenerated from <%- component.name %>.js do not modify -->
+<!-- Autogenerated from <%- component.name %>. Do not modify. -->
 ## <MapboxGL.<%- component.name %> />
 ### <%- replaceNewLine(component.description) %>
 

From 9013a6726e2aee31d5f8978b2b5ca25c52823114 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 6 May 2022 15:42:02 -0500
Subject: [PATCH 48/84] Add initial tests for new Camera functional component

---
 __tests__/components/Camera.test.js | 1176 ++-------------------------
 1 file changed, 48 insertions(+), 1128 deletions(-)

diff --git a/__tests__/components/Camera.test.js b/__tests__/components/Camera.test.js
index 3acca9b1c..b0347f881 100644
--- a/__tests__/components/Camera.test.js
+++ b/__tests__/components/Camera.test.js
@@ -1,1147 +1,67 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
 
-import Camera, { UserTrackingModes } from '../../javascript/components/Camera';
+import Camera from '../../javascript/components/Camera';
 
-const cameraWithoutFollowDefault = {
-  ...Camera.defaultProps,
-  animationDuration: 2000,
-  animationMode: 'easeTo',
-  centerCoordinate: [-111.8678, 40.2866],
-  zoomLevel: 16,
-  followUserLocation: false,
-  followUserMode: 'normal',
-  isUserInteraction: false,
-};
+const coordinate1 = [-111.8678, 40.2866];
+const coordinate2 = [-110.8678, 37.2866];
 
-const cameraWithoutFollowChanged = {
-  ...Camera.defaultProps,
-  animationDuration: 1000,
-  animationMode: 'easeTo',
-  centerCoordinate: [-110.8678, 37.2866],
-  zoomLevel: 13,
-  followUserLocation: false,
-  followUserMode: 'normal',
-  isUserInteraction: false,
+const bounds1 = {
+  ne: [-74.12641, 40.797968],
+  sw: [-74.143727, 40.772177],
 };
 
-const cameraWithFollowCourse = {
-  ...Camera.defaultProps,
-  animationDuration: 2000,
-  animationMode: 'easeTo',
-  defaultSettings: {
-    centerCoordinate: [-111.8678, 40.2866],
-    zoomLevel: 16,
-  },
-  followUserLocation: true,
-  followUserMode: 'course',
-  isUserInteraction: false,
+const paddingZero = {
+  paddingTop: 0,
+  paddingRight: 0,
+  paddingBottom: 0,
+  paddingLeft: 0,
 };
 
-const cameraWithBounds = {
-  ...Camera.defaultProps,
-  animationDuration: 2000,
-  animationMode: 'easeTo',
-  bounds: {
-    ne: [-74.12641, 40.797968],
-    sw: [-74.143727, 40.772177],
-  },
-  isUserInteraction: false,
-  maxZoomLevel: 19,
+const toFeature = (position) => {
+  return {
+    type: 'Feature',
+    geometry: {
+      type: 'Point',
+      coordinates: position,
+    },
+    properties: {},
+  };
 };
 
+const toFeatureCollection = (bounds) => {
+  return {
+    type: 'FeatureCollection',
+    features: [toFeature(bounds.ne), toFeature(bounds.sw)],
+  };
+};
 describe('Camera', () => {
-  describe('render', () => {
-    test('renders correctly', () => {
-      const { getByTestId } = render(<Camera />);
-
-      expect(getByTestId('Camera')).toBeDefined();
-    });
-
-    test('has proper default props', () => {
-      const { getByTestId } = render(<Camera />);
-
-      expect(getByTestId('Camera').props).toStrictEqual({
-        children: undefined,
-        testID: 'Camera',
-        followUserLocation: undefined,
-        followUserMode: undefined,
-        followPitch: undefined,
-        followHeading: undefined,
-        followZoomLevel: undefined,
-        stop: {
-          mode: 'Ease',
-          pitch: undefined,
-          heading: undefined,
-          duration: 2000,
-          zoom: undefined,
-          paddingBottom: 0,
-          paddingLeft: 0,
-          paddingRight: 0,
-          paddingTop: 0,
-        },
-        maxZoomLevel: undefined,
-        minZoomLevel: undefined,
-        maxBounds: null,
-        defaultStop: null,
-        onUserTrackingModeChange: undefined,
-      });
+  test('defaults are set', () => {
+    const result = render(<Camera />);
+    const { props } = result.queryByTestId('Camera');
+    expect(props.stop).toStrictEqual({
+      ...paddingZero,
     });
   });
-
-  describe('class', () => {
-    test('correct "UserTrackingModes" statics', () => {
-      expect(UserTrackingModes).toStrictEqual({
-        Follow: 'normal',
-        FollowWithCourse: 'course',
-        FollowWithHeading: 'compass',
-      });
+  test('set location by center', () => {
+    const result = render(
+      <Camera centerCoordinate={coordinate1} zoomLevel={14} />,
+    );
+    const { props } = result.queryByTestId('Camera');
+    props.stop.centerCoordinate = JSON.parse(props.stop.centerCoordinate);
+    expect(props.stop).toStrictEqual({
+      centerCoordinate: toFeature(coordinate1),
+      zoom: 14,
+      ...paddingZero,
     });
   });
-
-  describe('methods', () => {
-    describe('#_handleCameraChange', () => {
-      let camera;
-
-      beforeEach(() => {
-        camera = new Camera();
-
-        // set up fake ref
-        camera.refs = {
-          camera: {
-            setNativeProps: jest.fn(),
-          },
-        };
-
-        // set up fake props
-        // we only do this, because we want to test the class methods!
-        camera.props = {};
-
-        jest.spyOn(camera, '_setCamera');
-        jest.spyOn(camera, '_hasCameraChanged');
-        jest.spyOn(camera, '_hasBoundsChanged');
-      });
-
-      test('does not call "#_setCamera" or "#setNativeProps" when "nextCamera" has no changes to "currentCamera"', () => {
-        camera._handleCameraChange(
-          cameraWithoutFollowDefault,
-          cameraWithoutFollowDefault,
-        );
-
-        expect(camera._hasCameraChanged).toHaveBeenCalled();
-        expect(camera._setCamera).not.toHaveBeenCalled();
-        expect(camera.refs.camera.setNativeProps).not.toHaveBeenCalled();
-      });
-
-      test('sets "followUserLocation" to false when it was removed on "nextCamera"', () => {
-        camera._handleCameraChange(
-          cameraWithFollowCourse,
-          cameraWithoutFollowDefault,
-        );
-
-        expect(camera._hasCameraChanged).toHaveBeenCalled();
-        expect(camera._setCamera).not.toHaveBeenCalled();
-
-        expect(camera.refs.camera.setNativeProps).toHaveBeenCalledTimes(1);
-
-        expect(camera.refs.camera.setNativeProps).toHaveBeenCalledWith({
-          followUserLocation: false,
-        });
-      });
-
-      test('sets "followUserLocation" to true when it was added on "nextCamera"', () => {
-        camera._handleCameraChange(
-          cameraWithoutFollowDefault,
-          cameraWithFollowCourse,
-        );
-
-        expect(camera._hasCameraChanged).toHaveBeenCalled();
-        expect(camera._setCamera).not.toHaveBeenCalled();
-
-        expect(camera.refs.camera.setNativeProps).toHaveBeenCalledTimes(2);
-
-        expect(camera.refs.camera.setNativeProps).toHaveBeenNthCalledWith(1, {
-          followUserLocation: true,
-        });
-        expect(camera.refs.camera.setNativeProps).toHaveBeenNthCalledWith(2, {
-          followHeading: undefined,
-          followPitch: undefined,
-          followUserMode: 'course',
-          followZoomLevel: undefined,
-        });
-      });
-
-      test('calls "#_setCamera" when "nextCamera" "hasChanged" without bounds', () => {
-        camera._handleCameraChange(
-          cameraWithoutFollowDefault,
-          cameraWithoutFollowChanged,
-        );
-
-        expect(camera._hasCameraChanged).toHaveBeenCalled();
-        expect(camera._hasBoundsChanged).toHaveBeenCalled();
-        expect(camera._setCamera).toHaveBeenCalledWith({
-          animationDuration: 1000,
-          animationMode: 'easeTo',
-          centerCoordinate: [-110.8678, 37.2866],
-          heading: undefined,
-          pitch: undefined,
-          zoomLevel: 13,
-        });
-      });
-
-      test('calls "#_hasBoundsChanged" & "#_setCamera" when "nextCamera" "hasChanged" with bounds', () => {
-        camera._handleCameraChange(
-          cameraWithoutFollowDefault,
-          cameraWithBounds,
-        );
-
-        expect(camera._hasCameraChanged).toHaveBeenCalled();
-        expect(camera._hasBoundsChanged).toHaveBeenCalledTimes(2);
-        expect(camera._setCamera).toHaveBeenCalledWith({
-          animationDuration: 2000,
-          animationMode: 'easeTo',
-          bounds: { ne: [-74.12641, 40.797968], sw: [-74.143727, 40.772177] },
-          heading: undefined,
-          pitch: undefined,
-          zoomLevel: undefined,
-        });
-      });
-    });
-
-    describe('#_hasCameraChanged', () => {
-      let camera;
-
-      beforeEach(() => {
-        camera = new Camera();
-
-        // set up fake ref
-        camera.refs = {
-          camera: {
-            setNativeProps: jest.fn(),
-          },
-        };
-
-        // set up fake props
-        // we only do this, because we want to test the class methods!
-        camera.props = {};
-
-        jest.spyOn(camera, '_hasCenterCoordinateChanged');
-        jest.spyOn(camera, '_hasBoundsChanged');
-      });
-
-      test('returns true if "hasDefaultPropsChanged"', () => {
-        const testCases = [
-          [{ heading: 120 }, { heading: 121 }],
-          [
-            {
-              centerCoordinate: [-111.8678, 40.2866],
-            },
-            {
-              centerCoordinate: [-111.8678, 38.2866],
-            },
-          ],
-          [
-            {
-              bounds: {
-                ne: [-74.12641, 40.797968],
-                sw: [-74.143727, 40.772177],
-              },
-            },
-            {
-              bounds: {
-                ne: [-64.12641, 40.797968],
-                sw: [-74.143727, 40.772177],
-              },
-            },
-          ],
-          [
-            {
-              pitch: 45,
-            },
-            {
-              pitch: 55,
-            },
-          ],
-          [
-            {
-              zoomLevel: 10,
-            },
-            {
-              zoomLevel: 15,
-            },
-          ],
-          [
-            // using the usecase in /example
-            {
-              triggerKey: 1582486618640, // Date.now()
-            },
-            {
-              triggerKey: 1582486626818, // Date.now()
-            },
-          ],
-        ];
-
-        testCases.forEach((c) => {
-          expect(camera._hasCameraChanged(c[0], c[1])).toBe(true);
-        });
-      });
-
-      test('returns true if "hasFollowPropsChanged"', () => {
-        const testCases = [
-          [{ followUserLocation: false }, { followUserLocation: true }],
-          [{ followUserMode: 'normal' }, { followUserMode: 'course' }],
-          [{ followZoomLevel: 10 }, { followZoomLevel: 13 }],
-          [{ followHeading: 100 }, { followHeading: 110 }],
-          [{ followPitch: 40 }, { followPitch: 49 }],
-        ];
-
-        testCases.forEach((c) => {
-          expect(camera._hasCameraChanged(c[0], c[1])).toBe(true);
-        });
-      });
-
-      test('returns true if "hasAnimationPropsChanged"', () => {
-        const testCases = [
-          [{ animationDuration: 3000 }, { animationDuration: 1000 }],
-          [{ animationMode: 'flyTo' }, { animationMode: 'easeTo' }],
-        ];
-
-        testCases.forEach((c) => {
-          expect(camera._hasCameraChanged(c[0], c[1])).toBe(true);
-        });
-      });
-    });
-
-    describe('#_hasCenterCoordinateChanged', () => {
-      const camera = new Camera();
-
-      test('returns false when centerCoordinates are missing', () => {
-        expect(camera._hasCenterCoordinateChanged({}, {})).toBe(false);
-      });
-
-      test('returns false when centerCoordinates have not changed', () => {
-        expect(
-          camera._hasCenterCoordinateChanged(
-            [-111.8678, 40.2866],
-            [-111.8678, 40.2866],
-          ),
-        ).toBe(false);
-      });
-
-      test('returns true when centerCoordinates have changed', () => {
-        expect(
-          camera._hasCenterCoordinateChanged([-111.8678, 40.2866], undefined),
-        ).toBe(true);
-
-        expect(
-          camera._hasCenterCoordinateChanged(undefined, [-111.8678, 40.2866]),
-        ).toBe(true);
-
-        // isLngDiff
-        expect(
-          camera._hasCenterCoordinateChanged(
-            [-111.2678, 40.2866],
-            [-111.8678, 40.2866],
-          ),
-        ).toBe(true);
-
-        // isLatDiff
-        expect(
-          camera._hasCenterCoordinateChanged(
-            [-111.2678, 40.2866],
-            [-111.8678, 33.2866],
-          ),
-        ).toBe(true);
-      });
-    });
-
-    describe('#_hasBoundsChanged', () => {
-      const camera = new Camera();
-      const bounds = {
-        ne: [-74.12641, 40.797968],
-        sw: [-74.143727, 40.772177],
-        paddingTop: 5,
-        paddingLeft: 5,
-        paddingRight: 5,
-        paddingBottom: 5,
-      };
-
-      test('returns false when bounds are missing', () => {
-        expect(camera._hasBoundsChanged(undefined, undefined)).toBe(false);
-      });
-
-      test('returns false when bounds have not changed', () => {
-        expect(camera._hasBoundsChanged(bounds, bounds)).toBe(false);
-      });
-
-      test('returns true when bound props have changed', () => {
-        // ne[0]
-        expect(
-          camera._hasBoundsChanged(bounds, {
-            ...bounds,
-            ne: [-34.12641, 40.797968],
-          }),
-        ).toBe(true);
-
-        // ne[1]
-        expect(
-          camera._hasBoundsChanged(bounds, {
-            ...bounds,
-            ne: [-74.12641, 30.797968],
-          }),
-        ).toBe(true);
-
-        // sw[0]
-        expect(
-          camera._hasBoundsChanged(bounds, {
-            ...bounds,
-            sw: [-74.143723, 40.772177],
-          }),
-        ).toBe(true);
-
-        // sw[1]
-        expect(
-          camera._hasBoundsChanged(bounds, {
-            ...bounds,
-            sw: [-74.143727, 40.772137],
-          }),
-        ).toBe(true);
-
-        // paddingTop
-        expect(
-          camera._hasBoundsChanged(bounds, {
-            ...bounds,
-            paddingTop: 3,
-          }),
-        ).toBe(true);
-
-        // paddingLeft
-        expect(
-          camera._hasBoundsChanged(bounds, {
-            ...bounds,
-            paddingLeft: 3,
-          }),
-        ).toBe(true);
-
-        // paddingRight
-        expect(
-          camera._hasBoundsChanged(bounds, {
-            ...bounds,
-            paddingRight: 3,
-          }),
-        ).toBe(true);
-
-        // paddingBottom
-        expect(
-          camera._hasBoundsChanged(bounds, {
-            ...bounds,
-            paddingBottom: 3,
-          }),
-        ).toBe(true);
-      });
-
-      describe('does work with maxBounds', () => {
-        const currentMaxBounds = {
-          ne: [-74.12641, 40.797968],
-          sw: [-74.143727, 40.772177],
-        };
-
-        const nextMaxBounds = {
-          ne: [-83.12641, 42.797968],
-          sw: [-64.143727, 35.772177],
-        };
-
-        test('returns true if changed', () => {
-          expect(
-            camera._hasBoundsChanged(currentMaxBounds, nextMaxBounds),
-          ).toBe(true);
-        });
-
-        test('returns false if unchanged', () => {
-          expect(
-            camera._hasBoundsChanged(currentMaxBounds, currentMaxBounds),
-          ).toBe(false);
-        });
-
-        test('returns false if both undefined', () => {
-          expect(camera._hasBoundsChanged(undefined, undefined)).toBe(false);
-        });
-
-        test('does work with currentBounds being undefined', () => {
-          expect(camera._hasBoundsChanged(undefined, nextMaxBounds)).toBe(true);
-        });
-
-        test('does work with nextBounds being undefined', () => {
-          expect(camera._hasBoundsChanged(currentMaxBounds, undefined)).toBe(
-            true,
-          );
-        });
-      });
-    });
-
-    describe('#fitBounds', () => {
-      const camera = new Camera();
-      const ne = [-63.12641, 39.797968];
-      const sw = [-74.143727, 40.772177];
-
-      beforeEach(() => {
-        camera.setCamera = jest.fn();
-      });
-
-      test('works without provided "padding" and/ or "animationDuration"', () => {
-        // FIXME: animationDuration and padding of null lead to malformed setCamera config
-
-        const expectedCallResults = [
-          {
-            animationDuration: null,
-            animationMode: 'easeTo',
-            bounds: {
-              ne: [-63.12641, 39.797968],
-              sw: [-74.143727, 40.772177],
-            },
-            padding: {
-              paddingBottom: null,
-              paddingLeft: null,
-              paddingRight: null,
-              paddingTop: null,
-            },
-          },
-          {
-            animationDuration: 0,
-            animationMode: 'easeTo',
-            bounds: {
-              ne: [-63.12641, 39.797968],
-              sw: [-74.143727, 40.772177],
-            },
-            padding: {
-              paddingBottom: null,
-              paddingLeft: null,
-              paddingRight: null,
-              paddingTop: null,
-            },
-          },
-          {
-            animationDuration: 0,
-            animationMode: 'easeTo',
-            bounds: {
-              ne: [-63.12641, 39.797968],
-              sw: [-74.143727, 40.772177],
-            },
-            padding: {
-              paddingBottom: 0,
-              paddingLeft: 0,
-              paddingRight: 0,
-              paddingTop: 0,
-            },
-          },
-        ];
-
-        camera.fitBounds(ne, sw, null, null);
-        camera.fitBounds(ne, sw, null);
-        camera.fitBounds(ne, sw);
-
-        camera.setCamera.mock.calls.forEach((call, i) => {
-          expect(call[0]).toStrictEqual(expectedCallResults[i]);
-        });
-      });
-
-      // TODO: Refactor #fitBounds to throw when ne or sw aren't provided
-      // This is a public method and people will call it with all sorts of data
-      test.skip('throws when "ne" or "sw" are missing', () => {});
-
-      test('works with "padding" being a single number', () => {
-        const expectedCallResult = {
-          animationDuration: 500,
-          animationMode: 'easeTo',
-          bounds: {
-            ne: [-63.12641, 39.797968],
-            sw: [-74.143727, 40.772177],
-          },
-          padding: {
-            paddingBottom: 3,
-            paddingLeft: 3,
-            paddingRight: 3,
-            paddingTop: 3,
-          },
-        };
-
-        camera.fitBounds(ne, sw, 3, 500);
-        expect(camera.setCamera).toHaveBeenCalledWith(expectedCallResult);
-      });
-
-      test('works with "padding" being an array of two numbers', () => {
-        const expectedCallResult = {
-          animationDuration: 500,
-          animationMode: 'easeTo',
-          bounds: {
-            ne: [-63.12641, 39.797968],
-            sw: [-74.143727, 40.772177],
-          },
-          padding: {
-            paddingBottom: 3,
-            paddingLeft: 5,
-            paddingRight: 5,
-            paddingTop: 3,
-          },
-        };
-
-        camera.fitBounds(ne, sw, [3, 5], 500);
-        expect(camera.setCamera).toHaveBeenCalledWith(expectedCallResult);
-      });
-
-      test('works with "padding" being an array of four numbers', () => {
-        const expectedCallResult = {
-          animationDuration: 500,
-          animationMode: 'easeTo',
-          bounds: {
-            ne: [-63.12641, 39.797968],
-            sw: [-74.143727, 40.772177],
-          },
-          padding: {
-            paddingBottom: 8,
-            paddingLeft: 10,
-            paddingRight: 5,
-            paddingTop: 3,
-          },
-        };
-
-        camera.fitBounds(ne, sw, [3, 5, 8, 10], 500);
-        expect(camera.setCamera).toHaveBeenCalledWith(expectedCallResult);
-      });
-    });
-
-    describe('#flyTo', () => {
-      const camera = new Camera();
-
-      beforeEach(() => {
-        camera.setCamera = jest.fn();
-      });
-
-      test.skip('throws when no coordinates are provided', () => {
-        // TODO: Refactor #flyTo to throw when coordinates aren't provided
-        // This is a public method and people will call it with all sorts of data
-      });
-
-      test('sets default "animationDuration" when called without it', () => {
-        camera.flyTo([-111.8678, 40.2866]);
-        expect(camera.setCamera).toHaveBeenCalledWith({
-          animationDuration: 2000,
-          animationMode: 'flyTo',
-          centerCoordinate: [-111.8678, 40.2866],
-        });
-      });
-
-      test('calls "setCamera" with correct config', () => {
-        camera.flyTo([-111.8678, 40.2866], 5000);
-        expect(camera.setCamera).toHaveBeenCalledWith({
-          animationDuration: 5000,
-          animationMode: 'flyTo',
-          centerCoordinate: [-111.8678, 40.2866],
-        });
-      });
-    });
-
-    describe('#moveTo', () => {
-      const camera = new Camera();
-
-      beforeEach(() => {
-        // FIXME: Why is moveTo calling #_setCamera instead of #setCamera?
-        // let's be consistent here - have all methods use one of both
-        camera._setCamera = jest.fn();
-      });
-
-      test.skip('throws when no coordinates are provided', () => {
-        // TODO: Refactor #moveTo to throw when coordinates aren't provided
-        // This is a public method and people will call it with all sorts of data
-      });
-
-      test('sets default "animationDuration" when called without it', () => {
-        camera.moveTo([-111.8678, 40.2866]);
-        expect(camera._setCamera).toHaveBeenCalledWith({
-          animationDuration: 0,
-          centerCoordinate: [-111.8678, 40.2866],
-        });
-      });
-
-      test('calls "_setCamera" with correct config', () => {
-        camera.moveTo([-111.8678, 40.2866], 5000);
-        expect(camera._setCamera).toHaveBeenCalledWith({
-          animationDuration: 5000,
-          centerCoordinate: [-111.8678, 40.2866],
-        });
-      });
-    });
-
-    describe('#zoomTo', () => {
-      const camera = new Camera();
-
-      beforeEach(() => {
-        camera._setCamera = jest.fn();
-      });
-
-      test.skip('throws when no zoomLevel is provided', () => {
-        // TODO: Refactor #moveTo to throw when coordinates aren't provided
-        // This is a public method and people will call it with all sorts of data
-      });
-
-      test('sets default "animationDuration" when called without it', () => {
-        camera.zoomTo(10);
-        expect(camera._setCamera).toHaveBeenCalledWith({
-          animationDuration: 2000,
-          zoomLevel: 10,
-          animationMode: 'flyTo',
-        });
-      });
-
-      test('calls "_setCamera" with correct config', () => {
-        camera.zoomTo(10, 3000);
-        expect(camera._setCamera).toHaveBeenCalledWith({
-          animationDuration: 3000,
-          zoomLevel: 10,
-          animationMode: 'flyTo',
-        });
-      });
-    });
-
-    describe('#setCamera', () => {
-      const camera = new Camera();
-
-      beforeEach(() => {
-        camera._setCamera = jest.fn();
-      });
-
-      test('sets default empty "config" when called without one', () => {
-        camera.setCamera();
-        expect(camera._setCamera).toHaveBeenCalledWith({});
-      });
-
-      test('calls "_setCamera" with passed config', () => {
-        const config = {
-          animationDuration: 500,
-          animationMode: 'easeTo',
-          bounds: {
-            ne: [-63.12641, 39.797968],
-            paddingBottom: 8,
-            paddingLeft: 10,
-            paddingRight: 5,
-            paddingTop: 3,
-            sw: [-74.143727, 40.772177],
-          },
-        };
-
-        camera.setCamera(config);
-        expect(camera._setCamera).toHaveBeenCalledWith(config);
-      });
-    });
-
-    describe('#_setCamera', () => {
-      const camera = new Camera();
-
-      beforeEach(() => {
-        jest.spyOn(Camera.prototype, '_createStopConfig');
-
-        // set up fake ref
-        camera.refs = {
-          camera: {
-            setNativeProps: jest.fn(),
-          },
-        };
-
-        // set up fake props
-        // we only do this, because we want to test the class methods!
-        camera.props = {};
-
-        jest.clearAllMocks();
-      });
-
-      test('calls "_createStopConfig" and passes stopConfig to "setNativeProps"', () => {
-        const config = {
-          animationDuration: 500,
-          animationMode: 'easeTo',
-          bounds: {
-            ne: [-63.12641, 39.797968],
-            paddingBottom: 8,
-            paddingLeft: 10,
-            paddingRight: 5,
-            paddingTop: 3,
-            sw: [-74.143727, 40.772177],
-          },
-          heading: 100,
-          pitch: 45,
-          zoomLevel: 11,
-        };
-
-        camera._setCamera(config);
-
-        expect(camera._createStopConfig).toHaveBeenCalledWith({
-          animationDuration: 500,
-          animationMode: 'easeTo',
-          bounds: {
-            ne: [-63.12641, 39.797968],
-            paddingBottom: 8,
-            paddingLeft: 10,
-            paddingRight: 5,
-            paddingTop: 3,
-            sw: [-74.143727, 40.772177],
-          },
-          heading: 100,
-          pitch: 45,
-          zoomLevel: 11,
-        });
-
-        expect(camera._createStopConfig).toHaveBeenCalledTimes(1);
-
-        expect(camera.refs.camera.setNativeProps).toHaveBeenCalledWith({
-          stop: {
-            bounds:
-              '{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-63.12641,39.797968]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-74.143727,40.772177]}}]}',
-            paddingBottom: 8,
-            paddingLeft: 10,
-            paddingRight: 5,
-            paddingTop: 3,
-            duration: 500,
-            heading: 100,
-            mode: 'Ease',
-            pitch: 45,
-            zoom: 11,
-          },
-        });
-      });
-
-      test('creates multiple stops when provided', () => {
-        const config = {
-          stops: [
-            {
-              animationDuration: 50,
-              animationMode: 'easeTo',
-              bounds: {
-                ne: [-63.12641, 39.797968],
-                paddingBottom: 2,
-                paddingLeft: 2,
-                paddingRight: 2,
-                paddingTop: 2,
-                sw: [-74.143727, 40.772177],
-              },
-              heading: 20,
-              pitch: 25,
-              zoomLevel: 16,
-            },
-            {
-              animationDuration: 3000,
-              animationMode: 'flyTo',
-              bounds: {
-                ne: [-63.12641, 59.797968],
-                paddingBottom: 8,
-                paddingLeft: 10,
-                paddingRight: 5,
-                paddingTop: 3,
-                sw: [-71.143727, 40.772177],
-              },
-              heading: 40,
-              pitch: 45,
-              zoomLevel: 8,
-            },
-            {
-              animationDuration: 500,
-              animationMode: 'easeTo',
-              bounds: {
-                ne: [-63.12641, 39.797968],
-                paddingBottom: 8,
-                paddingLeft: 10,
-                paddingRight: 5,
-                paddingTop: 3,
-                sw: [-74.143727, 40.772177],
-              },
-              heading: 100,
-              pitch: 45,
-              zoomLevel: 11,
-            },
-          ],
-        };
-
-        camera._setCamera(config);
-
-        expect(camera._createStopConfig).toHaveBeenCalledTimes(3);
-
-        expect(camera._createStopConfig).toHaveBeenCalledWith({
-          animationDuration: 500,
-          animationMode: 'easeTo',
-          bounds: {
-            ne: [-63.12641, 39.797968],
-            paddingBottom: 8,
-            paddingLeft: 10,
-            paddingRight: 5,
-            paddingTop: 3,
-            sw: [-74.143727, 40.772177],
-          },
-          heading: 100,
-          pitch: 45,
-          zoomLevel: 11,
-        });
-
-        expect(camera.refs.camera.setNativeProps).toHaveBeenCalledWith({
-          stop: {
-            stops: [
-              {
-                bounds:
-                  '{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-63.12641,39.797968]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-74.143727,40.772177]}}]}',
-                paddingBottom: 2,
-                paddingLeft: 2,
-                paddingRight: 2,
-                paddingTop: 2,
-                duration: 50,
-                heading: 20,
-                mode: 'Ease',
-                pitch: 25,
-                zoom: 16,
-              },
-              {
-                bounds:
-                  '{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-63.12641,59.797968]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-71.143727,40.772177]}}]}',
-                paddingBottom: 8,
-                paddingLeft: 10,
-                paddingRight: 5,
-                paddingTop: 3,
-                duration: 3000,
-                heading: 40,
-                mode: 'Flight',
-                pitch: 45,
-                zoom: 8,
-              },
-              {
-                bounds:
-                  '{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-63.12641,39.797968]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-74.143727,40.772177]}}]}',
-                paddingBottom: 8,
-                paddingLeft: 10,
-                paddingRight: 5,
-                paddingTop: 3,
-                duration: 500,
-                heading: 100,
-                mode: 'Ease',
-                pitch: 45,
-                zoom: 11,
-              },
-            ],
-          },
-        });
-      });
-    });
-
-    describe('#_createDefaultCamera', () => {
-      const camera = new Camera();
-
-      beforeEach(() => {});
-
-      test('returns null without "defaultSettings"', () => {
-        camera.props = {};
-        expect(camera._createDefaultCamera()).toBe(null);
-      });
-
-      test('returns "defaultCamera" with "defaultSettings" and sets property', () => {
-        camera.props = {
-          defaultSettings: {
-            centerCoordinate: [-111.8678, 40.2866],
-            zoomLevel: 16,
-            animationMode: 'moveTo',
-          },
-        };
-
-        const defaultCamera = {
-          centerCoordinate:
-            '{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-111.8678,40.2866]}}',
-          duration: 0,
-          heading: undefined,
-          mode: 'Move',
-          pitch: undefined,
-          zoom: 16,
-          paddingBottom: 0,
-          paddingLeft: 0,
-          paddingRight: 0,
-          paddingTop: 0,
-        };
-
-        expect(camera.defaultCamera).toStrictEqual(undefined);
-        expect(camera._createDefaultCamera()).toStrictEqual(defaultCamera);
-        expect(camera.defaultCamera).toStrictEqual(defaultCamera);
-      });
-    });
-
-    describe('#_createStopConfig', () => {
-      const camera = new Camera();
-      const configWithoutBounds = {
-        animationDuration: 2000,
-        animationMode: 'easeTo',
-        pitch: 45,
-        heading: 110,
-        zoomLevel: 9,
-      };
-
-      const configWithBounds = {
-        animationDuration: 500,
-        animationMode: 'easeTo',
-        bounds: {
-          ne: [-63.12641, 39.797968],
-          paddingBottom: 8,
-          paddingLeft: 10,
-          paddingRight: 5,
-          paddingTop: 3,
-          sw: [-74.143727, 40.772177],
-        },
-        heading: 100,
-        pitch: 45,
-        zoomLevel: 11,
-      };
-
-      beforeEach(() => {
-        jest.spyOn(Camera.prototype, '_getNativeCameraMode');
-
-        jest.clearAllMocks();
-      });
-
-      test('returns null with "followUserLocation" prop and "!ignoreFollowUserLocation"', () => {
-        camera.props = {
-          followUserLocation: true,
-        };
-        expect(camera._createStopConfig()).toBe(null);
-      });
-
-      test('returns correct "stopConfig" without bounds', () => {
-        camera.props = {
-          followUserLocation: true,
-        };
-
-        expect(
-          camera._createStopConfig(configWithoutBounds, true),
-        ).toStrictEqual({
-          duration: 2000,
-          heading: 110,
-          mode: 'Ease',
-          pitch: 45,
-          zoom: 9,
-          paddingBottom: 0,
-          paddingLeft: 0,
-          paddingRight: 0,
-          paddingTop: 0,
-        });
-
-        // with centerCoordinate
-        expect(
-          camera._createStopConfig(
-            { ...configWithoutBounds, centerCoordinate: [-111.8678, 40.2866] },
-            true,
-          ),
-        ).toStrictEqual({
-          centerCoordinate:
-            '{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-111.8678,40.2866]}}',
-          duration: 2000,
-          heading: 110,
-          mode: 'Ease',
-          pitch: 45,
-          zoom: 9,
-          paddingBottom: 0,
-          paddingLeft: 0,
-          paddingRight: 0,
-          paddingTop: 0,
-        });
-      });
-
-      test('returns correct "stopConfig" with bounds', () => {
-        camera.props = {
-          followUserLocation: true,
-        };
-
-        expect(camera._createStopConfig(configWithBounds, true)).toStrictEqual({
-          bounds:
-            '{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-63.12641,39.797968]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-74.143727,40.772177]}}]}',
-          paddingBottom: 8,
-          paddingLeft: 10,
-          paddingRight: 5,
-          paddingTop: 3,
-          duration: 500,
-          heading: 100,
-          mode: 'Ease',
-          pitch: 45,
-          zoom: 11,
-        });
-
-        // with centerCoordinate
-        expect(
-          camera._createStopConfig(
-            { ...configWithBounds, centerCoordinate: [-111.8678, 40.2866] },
-            true,
-          ),
-        ).toStrictEqual({
-          bounds:
-            '{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-63.12641,39.797968]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-74.143727,40.772177]}}]}',
-          paddingBottom: 8,
-          paddingLeft: 10,
-          paddingRight: 5,
-          paddingTop: 3,
-          centerCoordinate:
-            '{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-111.8678,40.2866]}}',
-          duration: 500,
-          heading: 100,
-          mode: 'Ease',
-          pitch: 45,
-          zoom: 11,
-        });
-      });
-    });
-
-    describe('#_getNativeCameraMode', () => {
-      const camera = new Camera();
-
-      test('returns "Flight" for "flyTo"', () => {
-        expect(
-          camera._getNativeCameraMode({ animationMode: 'flyTo' }),
-        ).toStrictEqual('Flight');
-      });
-
-      test('returns "None" for "moveTo"', () => {
-        expect(
-          camera._getNativeCameraMode({ animationMode: 'moveTo' }),
-        ).toStrictEqual('Move');
-      });
-
-      test('returns "Move" as default (TODO: This should eventually fall back to None)', () => {
-        expect(camera._getNativeCameraMode({})).toStrictEqual('Move');
-      });
-    });
-
-    describe('#_getMaxBounds', () => {
-      const camera = new Camera();
-
-      test('returns null if no "maxBounds"', () => {
-        camera.props = {};
-        expect(camera._getMaxBounds()).toStrictEqual(null);
-
-        camera.props = {
-          maxBounds: {
-            ne: [-74.12641, 40.797968],
-          },
-        };
-        expect(camera._getMaxBounds()).toStrictEqual(null);
-
-        camera.props = {
-          maxBounds: {
-            sw: [-74.143727, 40.772177],
-          },
-        };
-        expect(camera._getMaxBounds()).toStrictEqual(null);
-      });
-
-      test('returns maxBounds when "maxBounds" property is set', () => {
-        camera.props = {
-          maxBounds: {
-            ne: [-74.12641, 40.797968],
-            sw: [-74.143727, 40.772177],
-          },
-        };
-
-        expect(camera._getMaxBounds()).toStrictEqual(
-          '{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-74.12641,40.797968]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-74.143727,40.772177]}}]}',
-        );
-      });
+  test('set location by bounds', () => {
+    const result = render(<Camera bounds={bounds1} />);
+    const { props } = result.queryByTestId('Camera');
+    props.stop.bounds = JSON.parse(props.stop.bounds);
+    expect(props.stop).toStrictEqual({
+      bounds: toFeatureCollection(bounds1),
+      ...paddingZero,
     });
   });
 });

From f3bf118be7dea02576b9a1403c2958afd2a5019e Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Fri, 6 May 2022 15:42:41 -0500
Subject: [PATCH 49/84] Update docs with edited autogenerated comment

---
 docs/Annotation.md         |   2 +-
 docs/BackgroundLayer.md    |   2 +-
 docs/Callout.md            |   2 +-
 docs/CircleLayer.md        |   2 +-
 docs/FillExtrusionLayer.md |   2 +-
 docs/FillLayer.md          |   2 +-
 docs/HeadingIndicator.md   |   2 +-
 docs/HeatmapLayer.md       |   2 +-
 docs/ImageSource.md        |   2 +-
 docs/Images.md             |   2 +-
 docs/Light.md              |   2 +-
 docs/LineLayer.md          |   2 +-
 docs/MapView.md            |   2 +-
 docs/MarkerView.md         |   2 +-
 docs/NativeUserLocation.md |   2 +-
 docs/OfflineManager.md     |   2 +-
 docs/PointAnnotation.md    |   2 +-
 docs/RasterDemSource.md    |   2 +-
 docs/RasterLayer.md        |   2 +-
 docs/RasterSource.md       |   2 +-
 docs/ShapeSource.md        |   2 +-
 docs/SkyLayer.md           |   2 +-
 docs/Style.md              |   2 +-
 docs/SymbolLayer.md        |   2 +-
 docs/Terrain.md            |   2 +-
 docs/UserLocation.md       |   2 +-
 docs/VectorSource.md       |   2 +-
 docs/docs.json             | 155 +++++++++++++++++++++++++++++++++++++
 docs/snapshotManager.md    |   2 +-
 29 files changed, 183 insertions(+), 28 deletions(-)

diff --git a/docs/Annotation.md b/docs/Annotation.md
index 1ec01e548..26141152f 100644
--- a/docs/Annotation.md
+++ b/docs/Annotation.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from Annotation.js do not modify -->
+<!-- Autogenerated from Annotation. Do not modify. -->
 ## <MapboxGL.Annotation />
 ### 
 
diff --git a/docs/BackgroundLayer.md b/docs/BackgroundLayer.md
index 016214525..fda192eec 100644
--- a/docs/BackgroundLayer.md
+++ b/docs/BackgroundLayer.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from BackgroundLayer.js do not modify -->
+<!-- Autogenerated from BackgroundLayer. Do not modify. -->
 ## <MapboxGL.BackgroundLayer />
 ### 
 
diff --git a/docs/Callout.md b/docs/Callout.md
index 7eb28e42a..d025d595a 100644
--- a/docs/Callout.md
+++ b/docs/Callout.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from Callout.js do not modify -->
+<!-- Autogenerated from Callout. Do not modify. -->
 ## <MapboxGL.Callout />
 ### Callout that displays information about a selected annotation near the annotation.
 
diff --git a/docs/CircleLayer.md b/docs/CircleLayer.md
index 2ee395835..3e1df7539 100644
--- a/docs/CircleLayer.md
+++ b/docs/CircleLayer.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from CircleLayer.js do not modify -->
+<!-- Autogenerated from CircleLayer. Do not modify. -->
 ## <MapboxGL.CircleLayer />
 ### CircleLayer is a style layer that renders one or more filled circles on the map.
 
diff --git a/docs/FillExtrusionLayer.md b/docs/FillExtrusionLayer.md
index aaddbf5ff..60a228280 100644
--- a/docs/FillExtrusionLayer.md
+++ b/docs/FillExtrusionLayer.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from FillExtrusionLayer.js do not modify -->
+<!-- Autogenerated from FillExtrusionLayer. Do not modify. -->
 ## <MapboxGL.FillExtrusionLayer />
 ### FillExtrusionLayer is a style layer that renders one or more 3D extruded polygons on the map.
 
diff --git a/docs/FillLayer.md b/docs/FillLayer.md
index b0873407c..1aea7d1f6 100644
--- a/docs/FillLayer.md
+++ b/docs/FillLayer.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from FillLayer.js do not modify -->
+<!-- Autogenerated from FillLayer. Do not modify. -->
 ## <MapboxGL.FillLayer />
 ### FillLayer is a style layer that renders one or more filled (and optionally stroked) polygons on the map.
 
diff --git a/docs/HeadingIndicator.md b/docs/HeadingIndicator.md
index e51321497..ca56fc9ca 100644
--- a/docs/HeadingIndicator.md
+++ b/docs/HeadingIndicator.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from HeadingIndicator.js do not modify -->
+<!-- Autogenerated from HeadingIndicator. Do not modify. -->
 ## <MapboxGL.HeadingIndicator />
 ### 
 
diff --git a/docs/HeatmapLayer.md b/docs/HeatmapLayer.md
index e19e9d3a0..579dd3bc8 100644
--- a/docs/HeatmapLayer.md
+++ b/docs/HeatmapLayer.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from HeatmapLayer.js do not modify -->
+<!-- Autogenerated from HeatmapLayer. Do not modify. -->
 ## <MapboxGL.HeatmapLayer />
 ### HeatmapLayer is a style layer that renders one or more filled circles on the map.
 
diff --git a/docs/ImageSource.md b/docs/ImageSource.md
index 04bc95912..62c98f5eb 100644
--- a/docs/ImageSource.md
+++ b/docs/ImageSource.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from ImageSource.js do not modify -->
+<!-- Autogenerated from ImageSource. Do not modify. -->
 ## <MapboxGL.ImageSource />
 ### ImageSource is a content source that is used for a georeferenced raster image to be shown on the map.<br/>The georeferenced image scales and rotates as the user zooms and rotates the map
 
diff --git a/docs/Images.md b/docs/Images.md
index 7bf0a4b24..bbd1eb09a 100644
--- a/docs/Images.md
+++ b/docs/Images.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from Images.js do not modify -->
+<!-- Autogenerated from Images. Do not modify. -->
 ## <MapboxGL.Images />
 ### Images defines the images used in Symbol etc layers
 
diff --git a/docs/Light.md b/docs/Light.md
index ecafcae8d..47f61033c 100644
--- a/docs/Light.md
+++ b/docs/Light.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from Light.js do not modify -->
+<!-- Autogenerated from Light. Do not modify. -->
 ## <MapboxGL.Light />
 ### Light represents the light source for extruded geometries
 
diff --git a/docs/LineLayer.md b/docs/LineLayer.md
index 0ca1d8a32..4ea130cbf 100644
--- a/docs/LineLayer.md
+++ b/docs/LineLayer.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from LineLayer.js do not modify -->
+<!-- Autogenerated from LineLayer. Do not modify. -->
 ## <MapboxGL.LineLayer />
 ### LineLayer is a style layer that renders one or more stroked polylines on the map.
 
diff --git a/docs/MapView.md b/docs/MapView.md
index e8488a119..3d0ce7565 100644
--- a/docs/MapView.md
+++ b/docs/MapView.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from MapView.js do not modify -->
+<!-- Autogenerated from MapView. Do not modify. -->
 ## <MapboxGL.MapView />
 ### MapView backed by Mapbox Native GL
 
diff --git a/docs/MarkerView.md b/docs/MarkerView.md
index a20bcb603..666e2c7d0 100644
--- a/docs/MarkerView.md
+++ b/docs/MarkerView.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from MarkerView.js do not modify -->
+<!-- Autogenerated from MarkerView. Do not modify. -->
 ## <MapboxGL.MarkerView />
 ### MarkerView allows you to place a interactive react native marker to the map.<br/><br/>If you have static view consider using PointAnnotation or SymbolLayer they'll offer much better performance<br/>.<br/>This is based on [MakerView plugin](https://docs.mapbox.com/android/plugins/overview/markerview/) on Android<br/>and PointAnnotation on iOS.
 
diff --git a/docs/NativeUserLocation.md b/docs/NativeUserLocation.md
index c97db255e..19556f971 100644
--- a/docs/NativeUserLocation.md
+++ b/docs/NativeUserLocation.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from NativeUserLocation.js do not modify -->
+<!-- Autogenerated from NativeUserLocation. Do not modify. -->
 ## <MapboxGL.NativeUserLocation />
 ### 
 
diff --git a/docs/OfflineManager.md b/docs/OfflineManager.md
index 539f7dcb3..ac3786624 100644
--- a/docs/OfflineManager.md
+++ b/docs/OfflineManager.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from offlineManager.js do not modify -->
+<!-- Autogenerated from offlineManager. Do not modify. -->
 ## <MapboxGL.offlineManager />
 ### OfflineManager implements a singleton (shared object) that manages offline packs.<br/>All of this class’s instance methods are asynchronous, reflecting the fact that offline resources are stored in a database.<br/>The shared object maintains a canonical collection of offline packs.
 
diff --git a/docs/PointAnnotation.md b/docs/PointAnnotation.md
index 713b36924..ae115b7f4 100644
--- a/docs/PointAnnotation.md
+++ b/docs/PointAnnotation.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from PointAnnotation.js do not modify -->
+<!-- Autogenerated from PointAnnotation. Do not modify. -->
 ## <MapboxGL.PointAnnotation />
 ### PointAnnotation represents a one-dimensional shape located at a single geographical coordinate.<br/><br/>Consider using ShapeSource and SymbolLayer instead, if you have many points and you have static images,<br/>they'll offer much better performance.<br/><br/>If you need interactive views please use MarkerView,<br/>as with PointAnnotation on Android child views are rendered onto a bitmap for better performance.
 
diff --git a/docs/RasterDemSource.md b/docs/RasterDemSource.md
index 43fe5fb18..e47cdaa3c 100644
--- a/docs/RasterDemSource.md
+++ b/docs/RasterDemSource.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from RasterDemSource.js do not modify -->
+<!-- Autogenerated from RasterDemSource. Do not modify. -->
 ## <MapboxGL.RasterDemSource />
 ### 
 
diff --git a/docs/RasterLayer.md b/docs/RasterLayer.md
index c0df673f0..b3ab5d5b3 100644
--- a/docs/RasterLayer.md
+++ b/docs/RasterLayer.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from RasterLayer.js do not modify -->
+<!-- Autogenerated from RasterLayer. Do not modify. -->
 ## <MapboxGL.RasterLayer />
 ### 
 
diff --git a/docs/RasterSource.md b/docs/RasterSource.md
index ba8073ebc..309458d2a 100644
--- a/docs/RasterSource.md
+++ b/docs/RasterSource.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from RasterSource.js do not modify -->
+<!-- Autogenerated from RasterSource. Do not modify. -->
 ## <MapboxGL.RasterSource />
 ### RasterSource is a map content source that supplies raster image tiles to be shown on the map.<br/>The location of and metadata about the tiles are defined either by an option dictionary<br/>or by an external file that conforms to the TileJSON specification.
 
diff --git a/docs/ShapeSource.md b/docs/ShapeSource.md
index b0789126c..07bf91389 100644
--- a/docs/ShapeSource.md
+++ b/docs/ShapeSource.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from ShapeSource.js do not modify -->
+<!-- Autogenerated from ShapeSource. Do not modify. -->
 ## <MapboxGL.ShapeSource />
 ### ShapeSource is a map content source that supplies vector shapes to be shown on the map.<br/>The shape may be a url or a GeoJSON object
 
diff --git a/docs/SkyLayer.md b/docs/SkyLayer.md
index fd4e289a1..4b656b8d1 100644
--- a/docs/SkyLayer.md
+++ b/docs/SkyLayer.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from SkyLayer.js do not modify -->
+<!-- Autogenerated from SkyLayer. Do not modify. -->
 ## <MapboxGL.SkyLayer />
 ### SkyLayer is a spherical dome around the map that is always rendered behind all other layers
 
diff --git a/docs/Style.md b/docs/Style.md
index 2ca9452fe..f11ce096d 100644
--- a/docs/Style.md
+++ b/docs/Style.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from Style.js do not modify -->
+<!-- Autogenerated from Style. Do not modify. -->
 ## <MapboxGL.Style />
 ### Style is a component that automatically adds sources / layers to the map using Mapbox GL Style Spec.<br/>Only [`sources`](https://docs.mapbox.com/mapbox-gl-js/style-spec/sources) & [`layers`](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/) are supported.<br/>Other fields such as `sprites`, `glyphs` etc. will be ignored. Not all layer / source attributes from the style spec are supported, in general the supported attributes will mentioned under https://github.com/rnmapbox/maps/tree/main/docs.
 
diff --git a/docs/SymbolLayer.md b/docs/SymbolLayer.md
index 3d346fbc9..fcbb8ef56 100644
--- a/docs/SymbolLayer.md
+++ b/docs/SymbolLayer.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from SymbolLayer.js do not modify -->
+<!-- Autogenerated from SymbolLayer. Do not modify. -->
 ## <MapboxGL.SymbolLayer />
 ### SymbolLayer is a style layer that renders icon and text labels at points or along lines on the map.
 
diff --git a/docs/Terrain.md b/docs/Terrain.md
index 47eabc320..9a5771045 100644
--- a/docs/Terrain.md
+++ b/docs/Terrain.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from Terrain.js do not modify -->
+<!-- Autogenerated from Terrain. Do not modify. -->
 ## <MapboxGL.Terrain />
 ### Terrain renders a terran
 
diff --git a/docs/UserLocation.md b/docs/UserLocation.md
index 84e837ae1..3ce940d8f 100644
--- a/docs/UserLocation.md
+++ b/docs/UserLocation.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from UserLocation.js do not modify -->
+<!-- Autogenerated from UserLocation. Do not modify. -->
 ## <MapboxGL.UserLocation />
 ### 
 
diff --git a/docs/VectorSource.md b/docs/VectorSource.md
index 83e528a2d..8992679c3 100644
--- a/docs/VectorSource.md
+++ b/docs/VectorSource.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from VectorSource.js do not modify -->
+<!-- Autogenerated from VectorSource. Do not modify. -->
 ## <MapboxGL.VectorSource />
 ### VectorSource is a map content source that supplies tiled vector data in Mapbox Vector Tile format to be shown on the map.<br/>The location of and metadata about the tiles are defined either by an option dictionary or by an external file that conforms to the TileJSON specification.
 
diff --git a/docs/docs.json b/docs/docs.json
index 6a679066c..d44b1fced 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -208,6 +208,161 @@
     ],
     "name": "Callout"
   },
+  "Camera": {
+    "description": "@param {CameraProps} props\n\n@example\nTo use imperative methods, pass in a ref object:\n```\nconst camera = useRef<CameraRef>(null);\n\nuseEffect(() => {\n  camera.current?.setCamera({\n    centerCoordinate: [lon, lat],\n  });\n}, []);\n\nreturn (\n  <Camera ref={camera} />\n);\n```",
+    "displayName": "Camera",
+    "methods": [],
+    "props": [
+      {
+        "name": "type",
+        "required": false,
+        "type": "literal",
+        "default": "none",
+        "description": "FIX ME NO DESCRIPTION"
+      },
+      {
+        "name": "centerCoordinate",
+        "required": false,
+        "type": "Position",
+        "default": "none",
+        "description": "The location on which the map should center."
+      },
+      {
+        "name": "bounds",
+        "required": false,
+        "type": "CameraBoundsWithPadding",
+        "default": "none",
+        "description": "The corners of a box around which the map should bound. Contains padding props for backwards\ncompatibility; the root `padding` prop should be used instead."
+      },
+      {
+        "name": "heading",
+        "required": false,
+        "type": "number",
+        "default": "none",
+        "description": "The heading (orientation) of the map."
+      },
+      {
+        "name": "pitch",
+        "required": false,
+        "type": "number",
+        "default": "none",
+        "description": "The pitch of the map."
+      },
+      {
+        "name": "zoomLevel",
+        "required": false,
+        "type": "number",
+        "default": "none",
+        "description": "The zoom level of the map."
+      },
+      {
+        "name": "padding",
+        "required": false,
+        "type": "CameraPadding",
+        "default": "none",
+        "description": "The viewport padding in points."
+      },
+      {
+        "name": "animationDuration",
+        "required": false,
+        "type": "number",
+        "default": "none",
+        "description": "The duration the map takes to animate to a new configuration."
+      },
+      {
+        "name": "animationMode",
+        "required": false,
+        "type": "'flyTo' \\| 'easeTo' \\| 'linearTo' \\| 'none' \\| 'moveTo'",
+        "default": "none",
+        "description": "The easing or path the camera uses to animate to a new configuration."
+      },
+      {
+        "name": "followUserMode",
+        "required": false,
+        "type": "'normal' \\| 'compass' \\| 'course'",
+        "default": "none",
+        "description": "The mode used to track the user location on the map."
+      },
+      {
+        "name": "followUserLocation",
+        "required": false,
+        "type": "boolean",
+        "default": "none",
+        "description": "Whether the map orientation follows the user location."
+      },
+      {
+        "name": "followZoomLevel",
+        "required": false,
+        "type": "number",
+        "default": "none",
+        "description": "The zoom level used when following the user location."
+      },
+      {
+        "name": "followPitch",
+        "required": false,
+        "type": "number",
+        "default": "none",
+        "description": "The pitch used when following the user location."
+      },
+      {
+        "name": "followHeading",
+        "required": false,
+        "type": "number",
+        "default": "none",
+        "description": "The heading used when following the user location."
+      },
+      {
+        "name": "minZoomLevel",
+        "required": false,
+        "type": "number",
+        "default": "none",
+        "description": "The lowest allowed zoom level."
+      },
+      {
+        "name": "maxZoomLevel",
+        "required": false,
+        "type": "number",
+        "default": "none",
+        "description": "The highest allowed zoom level."
+      },
+      {
+        "name": "maxBounds",
+        "required": false,
+        "type": "{ne:Position;sw:Position;}",
+        "default": "none",
+        "description": "The corners of a box defining the limits of where the camera can pan or zoom."
+      },
+      {
+        "name": "defaultSettings",
+        "required": false,
+        "type": "CameraStop",
+        "default": "none",
+        "description": "The configuration that the camera falls back on, if no other values are specified."
+      },
+      {
+        "name": "allowUpdates",
+        "required": false,
+        "type": "boolean",
+        "default": "none",
+        "description": "Whether the camera should send any configuration to the native module. Prevents unnecessary tile\nfetching and improves performance when the map is not visible. Defaults to `true`. (Not yet implemented.)"
+      },
+      {
+        "name": "triggerKey",
+        "required": false,
+        "type": "string \\| number",
+        "default": "none",
+        "description": "Any arbitrary primitive value that, when changed, causes the camera to retry moving to its target\nconfiguration. (Not yet implemented.)"
+      },
+      {
+        "name": "onUserTrackingModeChange",
+        "required": false,
+        "type": "(event:MapboxGLEvent<'usertrackingmodechange',{followUserLocation:boolean;followUserMode:UserTrackingMode\\|null;}>,)=>void",
+        "default": "none",
+        "description": "Executes when user tracking mode changes."
+      }
+    ],
+    "name": "Camera"
+  },
   "CircleLayer": {
     "description": "CircleLayer is a style layer that renders one or more filled circles on the map.",
     "displayName": "CircleLayer",
diff --git a/docs/snapshotManager.md b/docs/snapshotManager.md
index b94de31cf..9b7e32f90 100644
--- a/docs/snapshotManager.md
+++ b/docs/snapshotManager.md
@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from snapshotManager.js do not modify -->
+<!-- Autogenerated from snapshotManager. Do not modify. -->
 ## <MapboxGL.snapshotManager />
 ### The snapshotManager generates static raster images of the map.<br/>Each snapshot image depicts a portion of a map defined by an SnapshotOptions object you provide.<br/>The snapshotter generates the snapshot asynchronous.
 

From f98f8c244c0048161c57f5383fc8f12904196696 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 11 May 2022 14:57:57 -0500
Subject: [PATCH 50/84] Remove ts file from exported definitions

---
 tsconfig.json | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/tsconfig.json b/tsconfig.json
index df6bcc750..d2c20e28b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,7 +20,6 @@
     // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
     // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
     "isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
-
     /* Strict Type-Checking Options */
     "strict": true /* Enable all strict type-checking options. */,
     // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
@@ -29,38 +28,39 @@
     // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
     // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
     // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
-
     /* Additional Checks */
     // "noUnusedLocals": true,                /* Report errors on unused locals. */
     // "noUnusedParameters": true,            /* Report errors on unused parameters. */
     // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
     // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
-
     /* Module Resolution Options */
     "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
     "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
     "paths": {
       /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-      "@rnmapbox/maps": ["index.ts"],
-      "react": ["node_modules/@types/react"],
-      "react-native": ["node_modules/@types/react-native"]
+      "@rnmapbox/maps": [
+        "index.ts"
+      ],
+      "react": [
+        "node_modules/@types/react"
+      ],
+      "react-native": [
+        "node_modules/@types/react-native"
+      ]
     },
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
     // "typeRoots": [] /* List of folders to include type definitions from. */,
     "types": [
-      "./index",
       "./definitions"
     ] /* Type declaration files to be included in compilation. */,
     "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
     "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
     // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
-
     /* Source Map Options */
     // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
     // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
     // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
     // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
-
     /* Experimental Options */
     // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
@@ -71,4 +71,4 @@
     "metro.config.js",
     "jest.config.js"
   ]
-}
+}
\ No newline at end of file

From 378793143b37d7b72192962c0191fb4c885d84ab Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 11 May 2022 15:01:46 -0500
Subject: [PATCH 51/84] Fix replace method bug

---
 scripts/autogenHelpers/DocJSONBuilder.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/scripts/autogenHelpers/DocJSONBuilder.js b/scripts/autogenHelpers/DocJSONBuilder.js
index 967f4c6c5..a44036faa 100644
--- a/scripts/autogenHelpers/DocJSONBuilder.js
+++ b/scripts/autogenHelpers/DocJSONBuilder.js
@@ -116,9 +116,7 @@ class DocJSONBuilder {
       }
 
       if (tsType.name === 'signature') {
-        return `${tsType.raw
-          .replaceAll(/(\n|\s)/g, '')
-          .replaceAll(/(\|)/g, '\\|')}`;
+        return `${tsType.raw.replace(/(\n|\s)/g, '').replace(/(\|)/g, '\\|')}`;
       } else if (tsType.name === 'union') {
         return tsType.raw.replace(/\|/g, '\\|');
       } else {

From 9a79894a9464b122df718f8f0966620a58e2ce3d Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 11 May 2022 15:07:40 -0500
Subject: [PATCH 52/84] Add doc comment

---
 docs/Camera.md                   | 2 +-
 docs/docs.json                   | 2 +-
 javascript/components/Camera.tsx | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/Camera.md b/docs/Camera.md
index 16dba8279..1fab4d97e 100644
--- a/docs/Camera.md
+++ b/docs/Camera.md
@@ -5,7 +5,7 @@
 ### props
 | Prop | Type | Default | Required | Description |
 | ---- | :--: | :-----: | :------: | :----------: |
-| type | `literal` | `none` | `false` | FIX ME NO DESCRIPTION |
+| type | `literal` | `none` | `false` | Allows static check of the data type. For internal use only. |
 | centerCoordinate | `Position` | `none` | `false` | The location on which the map should center. |
 | bounds | `CameraBoundsWithPadding` | `none` | `false` | The corners of a box around which the map should bound. Contains padding props for backwards<br/>compatibility; the root `padding` prop should be used instead. |
 | heading | `number` | `none` | `false` | The heading (orientation) of the map. |
diff --git a/docs/docs.json b/docs/docs.json
index d44b1fced..1bf392b4a 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -218,7 +218,7 @@
         "required": false,
         "type": "literal",
         "default": "none",
-        "description": "FIX ME NO DESCRIPTION"
+        "description": "Allows static check of the data type. For internal use only."
       },
       {
         "name": "centerCoordinate",
diff --git a/javascript/components/Camera.tsx b/javascript/components/Camera.tsx
index d57f4323f..a895e7c42 100644
--- a/javascript/components/Camera.tsx
+++ b/javascript/components/Camera.tsx
@@ -63,6 +63,7 @@ export interface CameraProps
 }
 
 interface CameraStop {
+  /** Allows static check of the data type. For internal use only. */
   readonly type?: 'CameraStop';
   /** The location on which the map should center. */
   centerCoordinate?: Position;

From 81916d0ccdf661ae314a8b65fe3327b1875782d8 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Thu, 12 May 2022 12:32:48 -0500
Subject: [PATCH 53/84] Include methods in functional component docs output

---
 package.json                             |  2 +-
 scripts/autogenHelpers/DocJSONBuilder.js | 19 ++++++++++++++++---
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 9fafe9e9e..156cd4968 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,7 @@
     "node-dir": "0.1.17",
     "prettier": "2.6.2",
     "react": "17.0.2",
-    "react-docgen": "^5.0.0-beta.1",
+    "react-docgen": "rnmapbox/react-docgen#rnmapbox",
     "react-native": "0.67.0",
     "react-test-renderer": "17.0.2",
     "typescript": "^4.4.3"
diff --git a/scripts/autogenHelpers/DocJSONBuilder.js b/scripts/autogenHelpers/DocJSONBuilder.js
index a44036faa..5ece09cf3 100644
--- a/scripts/autogenHelpers/DocJSONBuilder.js
+++ b/scripts/autogenHelpers/DocJSONBuilder.js
@@ -40,7 +40,7 @@ class DocJSONBuilder {
 
   get options() {
     return {
-      match: /.(js|tsx)$/,
+      match: /.(js|tsx|ts)$/,
       shortName: true,
     };
   }
@@ -118,7 +118,13 @@ class DocJSONBuilder {
       if (tsType.name === 'signature') {
         return `${tsType.raw.replace(/(\n|\s)/g, '').replace(/(\|)/g, '\\|')}`;
       } else if (tsType.name === 'union') {
-        return tsType.raw.replace(/\|/g, '\\|');
+        if (tsType.raw) {
+          // Props
+          return tsType.raw.replace(/\|/g, '\\|');
+        } else if (tsType.elements) {
+          // Methods
+          return tsType.elements.map((e) => e.name).join(' \\| ');
+        }
       } else {
         return tsType.name;
       }
@@ -224,6 +230,12 @@ class DocJSONBuilder {
     component.methods = component.methods.filter(
       (method) => !privateMethods.includes(method.name),
     );
+
+    component.methods.forEach((method) => {
+      method.params.forEach((param) => {
+        param.type = { name: tsTypeDesc(param.type) };
+      });
+    });
   }
 
   generateReactComponentsTask(results, filePath) {
@@ -243,11 +255,12 @@ class DocJSONBuilder {
           }
 
           content = content.replace(/memo\(forwardRef\((.+?)\)\)/, '$1');
+          content = content.replace(/useCallback\(([^,]+), [^)]+\)/g, '$1');
 
           let parsed = docgen.parse(content, undefined, undefined, {
             filename: fileName,
           });
-          fileName = fileName.replace(/.(tsx)/, '');
+          fileName = fileName.replace(/.(js|tsx|ts)+/, '');
           results[fileName] = parsed;
           this.postprocess(results[fileName], fileName);
 

From b7a0a3017265a41b25ae65f9d4708a91078423fb Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Thu, 12 May 2022 12:33:28 -0500
Subject: [PATCH 54/84] Document methods and improve description

---
 docs/Camera.md                   |  95 ++++++++-
 docs/docs.json                   | 195 ++++++++++++++----
 javascript/components/Camera.tsx | 344 ++++++++++++++++---------------
 3 files changed, 428 insertions(+), 206 deletions(-)

diff --git a/docs/Camera.md b/docs/Camera.md
index 1fab4d97e..e68de003e 100644
--- a/docs/Camera.md
+++ b/docs/Camera.md
@@ -1,6 +1,6 @@
 <!-- Autogenerated from Camera. Do not modify. -->
 ## <MapboxGL.Camera />
-### @param {CameraProps} props<br/><br/>@example<br/>To use imperative methods, pass in a ref object:<br/>```<br/>const camera = useRef<CameraRef>(null);<br/><br/>useEffect(() => {<br/>  camera.current?.setCamera({<br/>    centerCoordinate: [lon, lat],<br/>  });<br/>}, []);<br/><br/>return (<br/>  <Camera ref={camera} /><br/>);<br/>```
+### Controls the perspective from which the user sees the map.<br/><br/>To use imperative methods, pass in a ref object:<br/><br/><pre>const camera = useRef<CameraRef>(null);<br/><br/>useEffect(() => {<br/>  camera.current?.setCamera({<br/>    centerCoordinate: [lon, lat],<br/>  });<br/>}, []);<br/><br/>return (<br/>  \<Camera ref={camera} /><br/>);</pre>
 
 ### props
 | Prop | Type | Default | Required | Description |
@@ -27,4 +27,97 @@
 | triggerKey | `string \| number` | `none` | `false` | Any arbitrary primitive value that, when changed, causes the camera to retry moving to its target<br/>configuration. (Not yet implemented.) |
 | onUserTrackingModeChange | `(event:MapboxGLEvent<'usertrackingmodechange',{followUserLocation:boolean;followUserMode:UserTrackingMode\|null;}>,)=>void` | `none` | `false` | Executes when user tracking mode changes. |
 
+### methods
+#### setCamera(config)
+
+Sets any camera properties, with default fallbacks if unspecified.
+
+##### arguments
+| Name | Type | Required | Description  |
+| ---- | :--: | :------: | :----------: |
+| `config` | `CameraStop \| CameraStops` | `Yes` | null |
+
+
+
+```javascript
+camera.current?.setCamera({
+  centerCoordinate: [lon, lat],
+});
+```
+
+
+#### fitBounds(ne, sw, paddingConfig, animationDuration)
+
+Set the camera position to enclose the provided bounds, with optional<br/>padding and duration.
+
+##### arguments
+| Name | Type | Required | Description  |
+| ---- | :--: | :------: | :----------: |
+| `ne` | `Position` | `Yes` | Northeast coordinate of bounding box |
+| `sw` | `Position` | `Yes` | Southwest coordinate of bounding box |
+| `paddingConfig` | `number \| Array` | `Yes` | The viewport padding, specified as a number (all sides equal), a 2-item array ([vertical, horizontal]), or a 4-item array ([top, right, bottom, left]) |
+| `animationDuration` | `number` | `Yes` | The transition duration |
+
+
+
+```javascript
+camera.fitBounds([lon, lat], [lon, lat]);
+camera.fitBounds([lon, lat], [lon, lat], [20, 0], 1000);
+```
+
+
+#### flyTo(centerCoordinate, animationDuration)
+
+Sets the camera to center around the provided coordinate using a realistic 'travel'<br/>animation, with optional duration.
+
+##### arguments
+| Name | Type | Required | Description  |
+| ---- | :--: | :------: | :----------: |
+| `centerCoordinate` | `Position` | `Yes` | The coordinate to center in the view |
+| `animationDuration` | `number` | `Yes` | The transition duration |
+
+
+
+```javascript
+camera.flyTo([lon, lat]);
+camera.flyTo([lon, lat], 12000);
+```
+
+
+#### moveTo(centerCoordinate, animationDuration)
+
+Sets the camera to center around the provided coordinate, with optional duration.
+
+##### arguments
+| Name | Type | Required | Description  |
+| ---- | :--: | :------: | :----------: |
+| `centerCoordinate` | `Position` | `Yes` | The coordinate to center in the view |
+| `animationDuration` | `number` | `Yes` | The transition duration |
+
+
+
+```javascript
+camera.moveTo([lon, lat], 200);
+camera.moveTo([lon, lat]);
+```
+
+
+#### zoomTo(zoomLevel, animationDuration)
+
+Zooms the camera to the provided level, with optional duration.
+
+##### arguments
+| Name | Type | Required | Description  |
+| ---- | :--: | :------: | :----------: |
+| `zoomLevel` | `number` | `Yes` | The target zoom |
+| `animationDuration` | `number` | `Yes` | The transition duration |
+
+
+
+```javascript
+camera.zoomTo(16);
+camera.zoomTo(16, 100);
+```
+
+
 
diff --git a/docs/docs.json b/docs/docs.json
index 1bf392b4a..9915626a3 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -209,9 +209,158 @@
     "name": "Callout"
   },
   "Camera": {
-    "description": "@param {CameraProps} props\n\n@example\nTo use imperative methods, pass in a ref object:\n```\nconst camera = useRef<CameraRef>(null);\n\nuseEffect(() => {\n  camera.current?.setCamera({\n    centerCoordinate: [lon, lat],\n  });\n}, []);\n\nreturn (\n  <Camera ref={camera} />\n);\n```",
+    "description": "Controls the perspective from which the user sees the map.\n\nTo use imperative methods, pass in a ref object:\n\n<pre>const camera = useRef<CameraRef>(null);\n\nuseEffect(() => {\n  camera.current?.setCamera({\n    centerCoordinate: [lon, lat],\n  });\n}, []);\n\nreturn (\n  \\<Camera ref={camera} />\n);</pre>",
     "displayName": "Camera",
-    "methods": [],
+    "methods": [
+      {
+        "name": "setCamera",
+        "docblock": "Sets any camera properties, with default fallbacks if unspecified.\n\n@example\ncamera.current?.setCamera({\n  centerCoordinate: [lon, lat],\n});\n\n@param {CameraStop | CameraStops} config",
+        "modifiers": [],
+        "params": [
+          {
+            "name": "config",
+            "description": null,
+            "type": {
+              "name": "CameraStop \\| CameraStops"
+            },
+            "optional": false
+          }
+        ],
+        "returns": null,
+        "description": "Sets any camera properties, with default fallbacks if unspecified.",
+        "examples": [
+          "\ncamera.current?.setCamera({\n  centerCoordinate: [lon, lat],\n});\n\n"
+        ]
+      },
+      {
+        "name": "fitBounds",
+        "docblock": "Set the camera position to enclose the provided bounds, with optional\npadding and duration.\n\n@example\ncamera.fitBounds([lon, lat], [lon, lat]);\ncamera.fitBounds([lon, lat], [lon, lat], [20, 0], 1000);\n\n@param {Position} ne Northeast coordinate of bounding box\n@param {Position} sw Southwest coordinate of bounding box\n@param {number | number[]} paddingConfig The viewport padding, specified as a number (all sides equal), a 2-item array ([vertical, horizontal]), or a 4-item array ([top, right, bottom, left])\n@param {number} animationDuration The transition duration",
+        "modifiers": [],
+        "params": [
+          {
+            "name": "ne",
+            "description": "Northeast coordinate of bounding box",
+            "type": {
+              "name": "Position"
+            },
+            "optional": false
+          },
+          {
+            "name": "sw",
+            "description": "Southwest coordinate of bounding box",
+            "type": {
+              "name": "Position"
+            },
+            "optional": false
+          },
+          {
+            "name": "paddingConfig",
+            "description": "The viewport padding, specified as a number (all sides equal), a 2-item array ([vertical, horizontal]), or a 4-item array ([top, right, bottom, left])",
+            "type": {
+              "name": "number \\| Array"
+            },
+            "optional": false
+          },
+          {
+            "name": "animationDuration",
+            "description": "The transition duration",
+            "type": {
+              "name": "number"
+            },
+            "optional": false
+          }
+        ],
+        "returns": null,
+        "description": "Set the camera position to enclose the provided bounds, with optional\npadding and duration.",
+        "examples": [
+          "\ncamera.fitBounds([lon, lat], [lon, lat]);\ncamera.fitBounds([lon, lat], [lon, lat], [20, 0], 1000);\n\n"
+        ]
+      },
+      {
+        "name": "flyTo",
+        "docblock": "Sets the camera to center around the provided coordinate using a realistic 'travel'\nanimation, with optional duration.\n\n@example\ncamera.flyTo([lon, lat]);\ncamera.flyTo([lon, lat], 12000);\n\n @param {Position} centerCoordinate The coordinate to center in the view\n @param {number} animationDuration The transition duration",
+        "modifiers": [],
+        "params": [
+          {
+            "name": "centerCoordinate",
+            "description": "The coordinate to center in the view",
+            "type": {
+              "name": "Position"
+            },
+            "optional": false
+          },
+          {
+            "name": "animationDuration",
+            "description": "The transition duration",
+            "type": {
+              "name": "number"
+            },
+            "optional": false
+          }
+        ],
+        "returns": null,
+        "description": "Sets the camera to center around the provided coordinate using a realistic 'travel'\nanimation, with optional duration.",
+        "examples": [
+          "\ncamera.flyTo([lon, lat]);\ncamera.flyTo([lon, lat], 12000);\n\n "
+        ]
+      },
+      {
+        "name": "moveTo",
+        "docblock": "Sets the camera to center around the provided coordinate, with optional duration.\n\n@example\ncamera.moveTo([lon, lat], 200);\ncamera.moveTo([lon, lat]);\n\n @param {Position} centerCoordinate The coordinate to center in the view\n @param {number} animationDuration The transition duration",
+        "modifiers": [],
+        "params": [
+          {
+            "name": "centerCoordinate",
+            "description": "The coordinate to center in the view",
+            "type": {
+              "name": "Position"
+            },
+            "optional": false
+          },
+          {
+            "name": "animationDuration",
+            "description": "The transition duration",
+            "type": {
+              "name": "number"
+            },
+            "optional": false
+          }
+        ],
+        "returns": null,
+        "description": "Sets the camera to center around the provided coordinate, with optional duration.",
+        "examples": [
+          "\ncamera.moveTo([lon, lat], 200);\ncamera.moveTo([lon, lat]);\n\n "
+        ]
+      },
+      {
+        "name": "zoomTo",
+        "docblock": "Zooms the camera to the provided level, with optional duration.\n\n@example\ncamera.zoomTo(16);\ncamera.zoomTo(16, 100);\n\n@param {number} zoomLevel The target zoom\n@param {number} animationDuration The transition duration",
+        "modifiers": [],
+        "params": [
+          {
+            "name": "zoomLevel",
+            "description": "The target zoom",
+            "type": {
+              "name": "number"
+            },
+            "optional": false
+          },
+          {
+            "name": "animationDuration",
+            "description": "The transition duration",
+            "type": {
+              "name": "number"
+            },
+            "optional": false
+          }
+        ],
+        "returns": null,
+        "description": "Zooms the camera to the provided level, with optional duration.",
+        "examples": [
+          "\ncamera.zoomTo(16);\ncamera.zoomTo(16, 100);\n\n"
+        ]
+      }
+    ],
     "props": [
       {
         "name": "type",
@@ -2121,12 +2270,7 @@
             "name": "coordinate",
             "description": "A point expressed in the map view's coordinate system.",
             "type": {
-              "name": "Array",
-              "elements": [
-                {
-                  "name": "Number"
-                }
-              ]
+              "name": "Array"
             },
             "optional": false
           }
@@ -2153,12 +2297,7 @@
             "name": "point",
             "description": "A point expressed in the given view’s coordinate system.",
             "type": {
-              "name": "Array",
-              "elements": [
-                {
-                  "name": "Number"
-                }
-              ]
+              "name": "Array"
             },
             "optional": false
           }
@@ -2203,12 +2342,7 @@
             "name": "coordinate",
             "description": "A point expressed in the map view’s coordinate system.",
             "type": {
-              "name": "Array",
-              "elements": [
-                {
-                  "name": "Number"
-                }
-              ]
+              "name": "Array"
             },
             "optional": false
           },
@@ -2251,12 +2385,7 @@
             "name": "bbox",
             "description": "A rectangle expressed in the map view’s coordinate system.",
             "type": {
-              "name": "Array",
-              "elements": [
-                {
-                  "name": "Number"
-                }
-              ]
+              "name": "Array"
             },
             "optional": false
           },
@@ -2374,12 +2503,7 @@
             "name": "coordinate",
             "description": "the coordinates to query elevation at",
             "type": {
-              "name": "Array",
-              "elements": [
-                {
-                  "name": "Number"
-                }
-              ]
+              "name": "Array"
             },
             "optional": false
           }
@@ -3519,7 +3643,7 @@
         "params": [
           {
             "name": "event",
-            "type": null
+            "type": {}
           }
         ],
         "returns": null
@@ -5423,7 +5547,8 @@
         ],
         "params": [
           {
-            "name": "{ running }"
+            "name": "{ running }",
+            "type": {}
           }
         ],
         "returns": {
@@ -5568,7 +5693,7 @@
         "params": [
           {
             "name": "event",
-            "type": null
+            "type": {}
           }
         ],
         "returns": null
diff --git a/javascript/components/Camera.tsx b/javascript/components/Camera.tsx
index a895e7c42..9337a6794 100644
--- a/javascript/components/Camera.tsx
+++ b/javascript/components/Camera.tsx
@@ -159,78 +159,24 @@ interface NativeCameraStop {
 }
 
 export interface CameraRef {
-  /**
-   * Sets any camera properties, with default fallbacks if unspecified.
-   */
   setCamera: (config: CameraStop | CameraStops) => void;
-
-  /**
-   * Set the camera position to enclose the provided bounds, with optional
-   * padding and duration.
-   *
-   * @example
-   * camera.fitBounds([lon, lat], [lon, lat]);
-   * camera.fitBounds([lon, lat], [lon, lat], 20, 1000);
-   * camera.fitBounds([lon, lat], [lon, lat], [verticalPadding, horizontalPadding], 1000);
-   * camera.fitBounds([lon, lat], [lon, lat], [top, right, bottom, left], 1000);
-   *
-   * @param {Position} ne Northeast coordinate of bounding box
-   * @param {Position} sw Southwest coordinate of bounding box
-   * @param {number} paddingConfig
-   * @param {number} animationDuration
-   */
   fitBounds: (
     ne: Position,
     sw: Position,
     paddingConfig?: number | number[],
     animationDuration?: number,
   ) => void;
-
-  /**
-   * Sets the camera to center around the provided coordinate using a realistic 'travel'
-   * animation, with optional duration.
-   *
-   * @example
-   * camera.flyTo([lon, lat]);
-   * camera.flyTo([lon, lat], 12000);
-   *
-   *  @param {Position} centerCoordinate
-   *  @param {number} animationDuration
-   */
   flyTo: (centerCoordinate: Position, animationDuration?: number) => void;
-
-  /**
-   * Sets the camera to center around the provided coordinate, with optional duration.
-   *
-   * @example
-   * camera.moveTo([lon, lat], 200);
-   * camera.moveTo([lon, lat]);
-   *
-   *  @param {Position} centerCoordinate
-   *  @param {number} animationDuration
-   */
   moveTo: (centerCoordinate: Position, animationDuration?: number) => void;
-
-  /**
-   * Zooms the camera to the provided level, with optional duration.
-   *
-   * @example
-   * camera.zoomTo(16);
-   * camera.zoomTo(16, 100);
-   *
-   * @param {number} zoomLevel
-   * @param {number} animationDuration
-   */
   zoomTo: (zoomLevel: number, animationDuration?: number) => void;
 }
 
 /**
- * @param {CameraProps} props
+ * Controls the perspective from which the user sees the map.
  *
- * @example
  * To use imperative methods, pass in a ref object:
- * ```
- * const camera = useRef<CameraRef>(null);
+ *
+ * <pre>const camera = useRef<CameraRef>(null);
  *
  * useEffect(() => {
  *   camera.current?.setCamera({
@@ -239,9 +185,8 @@ export interface CameraRef {
  * }, []);
  *
  * return (
- *   <Camera ref={camera} />
- * );
- * ```
+ *   \<Camera ref={camera} />
+ * );</pre>
  */
 const Camera = (props: CameraProps, ref: React.ForwardedRef<CameraRef>) => {
   const {
@@ -271,88 +216,6 @@ const Camera = (props: CameraProps, ref: React.ForwardedRef<CameraRef>) => {
   // @ts-ignore
   const camera: React.RefObject<RCTMGLCamera> = useRef(null);
 
-  const fitBounds: CameraRef['fitBounds'] = (
-    ne,
-    sw,
-    paddingConfig = 0,
-    animationDuration = 0,
-  ) => {
-    let padding = {
-      paddingTop: 0,
-      paddingBottom: 0,
-      paddingLeft: 0,
-      paddingRight: 0,
-    };
-
-    if (Array.isArray(paddingConfig)) {
-      if (paddingConfig.length === 2) {
-        padding = {
-          paddingTop: paddingConfig[0],
-          paddingBottom: paddingConfig[0],
-          paddingLeft: paddingConfig[1],
-          paddingRight: paddingConfig[1],
-        };
-      } else if (paddingConfig.length === 4) {
-        padding = {
-          paddingTop: paddingConfig[0],
-          paddingBottom: paddingConfig[2],
-          paddingLeft: paddingConfig[3],
-          paddingRight: paddingConfig[1],
-        };
-      }
-    } else {
-      padding = {
-        paddingTop: paddingConfig,
-        paddingBottom: paddingConfig,
-        paddingLeft: paddingConfig,
-        paddingRight: paddingConfig,
-      };
-    }
-
-    setCamera({
-      type: 'CameraStop',
-      bounds: {
-        ne,
-        sw,
-      },
-      padding,
-      animationDuration,
-      animationMode: 'easeTo',
-    });
-  };
-
-  const flyTo: CameraRef['flyTo'] = (
-    centerCoordinate,
-    animationDuration = 2000,
-  ) => {
-    setCamera({
-      type: 'CameraStop',
-      centerCoordinate,
-      animationDuration,
-    });
-  };
-
-  const moveTo: CameraRef['moveTo'] = (
-    centerCoordinate,
-    animationDuration = 0,
-  ) => {
-    setCamera({
-      type: 'CameraStop',
-      centerCoordinate,
-      animationDuration,
-      animationMode: 'easeTo',
-    });
-  };
-
-  const zoomTo: CameraRef['zoomTo'] = (zoomLevel, animationDuration = 2000) => {
-    setCamera({
-      type: 'CameraStop',
-      zoomLevel,
-      animationDuration,
-      animationMode: 'flyTo',
-    });
-  };
-
   const nativeAnimationMode = useCallback(
     (_mode?: AnimationMode): NativeAnimationMode | undefined => {
       switch (_mode) {
@@ -475,44 +338,185 @@ const Camera = (props: CameraProps, ref: React.ForwardedRef<CameraRef>) => {
     );
   }, [maxBounds]);
 
-  const setCamera: CameraRef['setCamera'] = useCallback(
-    (config) => {
-      if (!config.type)
-        // @ts-expect-error The compiler doesn't understand that the `config` union type is guaranteed
-        // to be an object type.
-        config = {
-          ...config,
-          // @ts-expect-error Allows JS files to pass in an invalid config (lacking the `type` property),
-          // which would raise a compilation error in TS files.
-          type: config.stops ? 'CameraStops' : 'CameraStop',
-        };
+  const _setCamera: CameraRef['setCamera'] = (config) => {
+    if (!config.type)
+      // @ts-expect-error The compiler doesn't understand that the `config` union type is guaranteed
+      // to be an object type.
+      config = {
+        ...config,
+        // @ts-expect-error Allows JS files to pass in an invalid config (lacking the `type` property),
+        // which would raise a compilation error in TS files.
+        type: config.stops ? 'CameraStops' : 'CameraStop',
+      };
 
-      if (config.type === 'CameraStops') {
-        for (const _stop of config.stops) {
-          let _nativeStops: NativeCameraStop[] = [];
-          const _nativeStop = buildNativeStop(_stop);
-          if (_nativeStop) {
-            _nativeStops = [..._nativeStops, _nativeStop];
-          }
-          camera.current.setNativeProps({
-            stop: { stops: _nativeStops },
-          });
-        }
-      } else if (config.type === 'CameraStop') {
-        const _nativeStop = buildNativeStop(config);
+    if (config.type === 'CameraStops') {
+      for (const _stop of config.stops) {
+        let _nativeStops: NativeCameraStop[] = [];
+        const _nativeStop = buildNativeStop(_stop);
         if (_nativeStop) {
-          camera.current.setNativeProps({ stop: _nativeStop });
+          _nativeStops = [..._nativeStops, _nativeStop];
         }
+        camera.current.setNativeProps({
+          stop: { stops: _nativeStops },
+        });
       }
-    },
-    [buildNativeStop],
-  );
+    } else if (config.type === 'CameraStop') {
+      const _nativeStop = buildNativeStop(config);
+      if (_nativeStop) {
+        camera.current.setNativeProps({ stop: _nativeStop });
+      }
+    }
+  };
+  const setCamera = useCallback(_setCamera, [buildNativeStop]);
+
+  const _fitBounds: CameraRef['fitBounds'] = (
+    ne,
+    sw,
+    paddingConfig = 0,
+    animationDuration = 0,
+  ) => {
+    let padding = {
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingLeft: 0,
+      paddingRight: 0,
+    };
+
+    if (typeof paddingConfig === 'object') {
+      if (paddingConfig.length === 2) {
+        padding = {
+          paddingTop: paddingConfig[0],
+          paddingBottom: paddingConfig[0],
+          paddingLeft: paddingConfig[1],
+          paddingRight: paddingConfig[1],
+        };
+      } else if (paddingConfig.length === 4) {
+        padding = {
+          paddingTop: paddingConfig[0],
+          paddingBottom: paddingConfig[2],
+          paddingLeft: paddingConfig[3],
+          paddingRight: paddingConfig[1],
+        };
+      }
+    } else if (typeof paddingConfig === 'number') {
+      padding = {
+        paddingTop: paddingConfig,
+        paddingBottom: paddingConfig,
+        paddingLeft: paddingConfig,
+        paddingRight: paddingConfig,
+      };
+    }
+
+    setCamera({
+      type: 'CameraStop',
+      bounds: {
+        ne,
+        sw,
+      },
+      padding,
+      animationDuration,
+      animationMode: 'easeTo',
+    });
+  };
+  const fitBounds = useCallback(_fitBounds, [setCamera]);
+
+  const _flyTo: CameraRef['flyTo'] = (
+    centerCoordinate,
+    animationDuration = 2000,
+  ) => {
+    setCamera({
+      type: 'CameraStop',
+      centerCoordinate,
+      animationDuration,
+    });
+  };
+  const flyTo = useCallback(_flyTo, [setCamera]);
+
+  const _moveTo: CameraRef['moveTo'] = (
+    centerCoordinate,
+    animationDuration = 0,
+  ) => {
+    setCamera({
+      type: 'CameraStop',
+      centerCoordinate,
+      animationDuration,
+      animationMode: 'easeTo',
+    });
+  };
+  const moveTo = useCallback(_moveTo, [setCamera]);
+
+  const _zoomTo: CameraRef['zoomTo'] = (
+    zoomLevel,
+    animationDuration = 2000,
+  ) => {
+    setCamera({
+      type: 'CameraStop',
+      zoomLevel,
+      animationDuration,
+      animationMode: 'flyTo',
+    });
+  };
+  const zoomTo = useCallback(_zoomTo, [setCamera]);
 
   useImperativeHandle(ref, () => ({
+    /**
+     * Sets any camera properties, with default fallbacks if unspecified.
+     *
+     * @example
+     * camera.current?.setCamera({
+     *   centerCoordinate: [lon, lat],
+     * });
+     *
+     * @param {CameraStop | CameraStops} config
+     */
     setCamera,
+    /**
+     * Set the camera position to enclose the provided bounds, with optional
+     * padding and duration.
+     *
+     * @example
+     * camera.fitBounds([lon, lat], [lon, lat]);
+     * camera.fitBounds([lon, lat], [lon, lat], [20, 0], 1000);
+     *
+     * @param {Position} ne Northeast coordinate of bounding box
+     * @param {Position} sw Southwest coordinate of bounding box
+     * @param {number | number[]} paddingConfig The viewport padding, specified as a number (all sides equal), a 2-item array ([vertical, horizontal]), or a 4-item array ([top, right, bottom, left])
+     * @param {number} animationDuration The transition duration
+     */
     fitBounds,
+    /**
+     * Sets the camera to center around the provided coordinate using a realistic 'travel'
+     * animation, with optional duration.
+     *
+     * @example
+     * camera.flyTo([lon, lat]);
+     * camera.flyTo([lon, lat], 12000);
+     *
+     *  @param {Position} centerCoordinate The coordinate to center in the view
+     *  @param {number} animationDuration The transition duration
+     */
     flyTo,
+    /**
+     * Sets the camera to center around the provided coordinate, with optional duration.
+     *
+     * @example
+     * camera.moveTo([lon, lat], 200);
+     * camera.moveTo([lon, lat]);
+     *
+     *  @param {Position} centerCoordinate The coordinate to center in the view
+     *  @param {number} animationDuration The transition duration
+     */
     moveTo,
+    /**
+     * Zooms the camera to the provided level, with optional duration.
+     *
+     * @example
+     * camera.zoomTo(16);
+     * camera.zoomTo(16, 100);
+     *
+     * @param {number} zoomLevel The target zoom
+     * @param {number} animationDuration The transition duration
+     */
     zoomTo,
   }));
 

From 14dbebbac5c1ca6f55dbcd76840a84f63c61b1dc Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Mon, 16 May 2022 12:47:53 -0500
Subject: [PATCH 55/84] Refactor .d.ts files and imports

---
 .gitignore                                    |   3 +
 definitions.d.ts                              | 296 ------------------
 index.ts                                      | 127 +++-----
 javascript/components/Camera.tsx              |   4 +-
 javascript/components/index.d.ts              |  95 ++++++
 javascript/components/index.js                |  63 ++++
 .../modules/location/locationManager.d.ts     |   4 +
 .../modules/offline/offlineManager.d.ts       |  26 ++
 .../modules/snapshot/snapshotManager.d.ts     |   3 +
 javascript/utils/Logger.d.ts                  |   4 +
 javascript/utils/animated/index.d.ts          |  24 ++
 javascript/utils/animated/index.js            |  15 +
 javascript/utils/geoUtils.d.ts                |  46 +++
 javascript/utils/index.d.ts                   |   1 +
 package.json                                  |   3 +-
 scripts/autogenHelpers/DocJSONBuilder.js      |   9 +-
 scripts/autogenerate.js                       |  13 +-
 tsconfig.json                                 |  99 ++----
 types/index.d.ts                              |  44 +++
 19 files changed, 411 insertions(+), 468 deletions(-)
 delete mode 100644 definitions.d.ts
 create mode 100644 javascript/components/index.d.ts
 create mode 100644 javascript/components/index.js
 create mode 100644 javascript/modules/location/locationManager.d.ts
 create mode 100644 javascript/modules/offline/offlineManager.d.ts
 create mode 100644 javascript/modules/snapshot/snapshotManager.d.ts
 create mode 100644 javascript/utils/Logger.d.ts
 create mode 100644 javascript/utils/animated/index.d.ts
 create mode 100644 javascript/utils/animated/index.js
 create mode 100644 javascript/utils/geoUtils.d.ts
 create mode 100644 javascript/utils/index.d.ts
 create mode 100644 types/index.d.ts

diff --git a/.gitignore b/.gitignore
index 74642f657..ed0804329 100644
--- a/.gitignore
+++ b/.gitignore
@@ -58,6 +58,9 @@ package-lock.json
 yarn.lock
 /example/yarn.lock
 
+# Compiled
+lib
+
 # Expo
 .expo
 
diff --git a/definitions.d.ts b/definitions.d.ts
deleted file mode 100644
index 610ccc441..000000000
--- a/definitions.d.ts
+++ /dev/null
@@ -1,296 +0,0 @@
-declare module 'rnmapbox__maps';
-
-import { Component } from 'react';
-import ReactNative from 'react-native';
-import {
-  Geometry,
-  Properties,
-  Position,
-  Feature,
-  LineString,
-  Coord,
-  FeatureCollection,
-} from '@turf/helpers';
-import {
-  ShapeSourceProps,
-  ImageSourceProps,
-  FillLayerProps,
-  FillExtrusionLayerProps,
-  LineLayerProps,
-  CircleLayerProps,
-  RasterLayerProps,
-  BackgroundLayerProps,
-  MapViewProps,
-  Expression,
-  UserLocationProps,
-  LightProps,
-  PointAnnotationProps,
-  MarkerViewProps,
-  CalloutProps,
-  StyleProps,
-  VectorSourceProps,
-  RasterSourceProps,
-  HeatmapLayerProps,
-  ImagesProps,
-  OfflineCreatePackOptions,
-  SnapshotOptions,
-  PositionsOptions,
-  InterpolationMode,
-  LogCallback,
-  LogLevel,
-  NamedStyles,
-  OfflineProgressError,
-  OfflineProgressStatus,
-  SymbolLayerProps,
-  UnitsOptions,
-} from '@rnmapbox/maps';
-
-export namespace MapboxGLDefinitions {
-  export function removeCustomHeader(headerName: string): void;
-  export function addCustomHeader(
-    headerName: string,
-    headerValue: string,
-  ): void;
-  export function setAccessToken(accessToken: string | null): void;
-  export function getAccessToken(): Promise<string>;
-  export function setTelemetryEnabled(telemetryEnabled: boolean): void;
-  export function setConnected(connected: boolean): void;
-
-  export const offlineManager: OfflineManager;
-  export const snapshotManager: SnapshotManager;
-  export const locationManager: LocationManager;
-
-  export class geoUtils {
-    makePoint<P = Properties>(
-      coordinates: Position,
-      properties?: P,
-      options?: PositionsOptions,
-    ): Feature<GeoJSON.Point, P>;
-    makeLineString<P = Properties>(
-      coordinates: Position[],
-      properties?: P,
-      options?: PositionsOptions,
-    ): Feature<LineString, P>;
-    makeLatLngBounds<G = Geometry, P = Properties>(
-      northEastCoordinates: Position[],
-      southWestCoordinates: Position[],
-    ): FeatureCollection<G, P>;
-    makeFeature<G = Geometry, P = Properties>(
-      geometry: G,
-      properties?: P,
-    ): Feature<G, P>;
-    makeFeatureCollection<G = Geometry, P = Properties>(
-      features: Array<Feature<G, P>>,
-      options?: PositionsOptions,
-    ): FeatureCollection<G, P>;
-    addToFeatureCollection<G = Geometry, P = Properties>(
-      newFeatureCollection: Array<FeatureCollection<G, P>>,
-      newFeature: Feature<G, P>,
-    ): FeatureCollection<G, P>;
-    calculateDistance(
-      origin: Coord,
-      dest: Coord,
-      options?: UnitsOptions,
-    ): number;
-    pointAlongLine(
-      newLineString: Feature<LineString> | LineString,
-      distAlong: number,
-      options?: UnitsOptions,
-    ): Feature<GeoJSON.Point>;
-    getOrCalculateVisibleRegion(
-      coord: { lon: number; lat: number },
-      zoomLevel: number,
-      width: number,
-      height: number,
-      nativeRegion: {
-        properties: { visibleBounds: number[] };
-        visibleBounds: number[];
-      },
-    ): void;
-  }
-
-  export namespace Animated {
-    // sources
-    class ShapeSource extends Component<ShapeSourceProps> {}
-    class ImageSource extends Component<ImageSourceProps> {}
-
-    // layers
-    class FillLayer extends Component<FillLayerProps> {}
-    class FillExtrusionLayer extends Component<FillExtrusionLayerProps> {}
-    class LineLayer extends Component<LineLayerProps> {}
-    class CircleLayer extends Component<CircleLayerProps> {}
-    class SymbolLayer extends Component<SymbolLayerProps> {}
-    class RasterLayer extends Component<RasterLayerProps> {}
-    class BackgroundLayer extends Component<BackgroundLayerProps> {}
-  }
-
-  export class AnimatedPoint {
-    constructor(point?: GeoJSON.Point);
-    longitude: ReactNative.Animated.Value;
-    latitude: ReactNative.Animated.Value;
-    setValue: (point: GeoJSON.Point) => void;
-    setOffset: (point: GeoJSON.Point) => void;
-    flattenOffset: () => void;
-    stopAnimation: (cb?: () => GeoJSON.Point) => void;
-    addListener: (cb?: () => GeoJSON.Point) => void;
-    removeListener: (id: string) => void;
-    spring: (
-      config: Record<string, any>,
-    ) => ReactNative.Animated.CompositeAnimation;
-    timing: (
-      config: Record<string, any>,
-    ) => ReactNative.Animated.CompositeAnimation;
-  }
-
-  export class MapView extends Component<MapViewProps> {
-    longitude: number;
-    getPointInView(coordinate: GeoJSON.Position): Promise<GeoJSON.Position>;
-    getCoordinateFromView(point: GeoJSON.Position): Promise<GeoJSON.Position>;
-    getVisibleBounds(): Promise<GeoJSON.Position[]>;
-    queryRenderedFeaturesAtPoint(
-      coordinate: GeoJSON.Position,
-      filter?: Expression,
-      layerIds?: Array<string>,
-    ): Promise<GeoJSON.FeatureCollection | undefined>;
-    queryRenderedFeaturesInRect(
-      coordinate: GeoJSON.Position,
-      filter?: Expression,
-      layerIds?: Array<string>,
-    ): Promise<GeoJSON.FeatureCollection | undefined>;
-    takeSnap(writeToDisk?: boolean): Promise<string>;
-    getZoom(): Promise<number>;
-    getCenter(): Promise<GeoJSON.Position>;
-    showAttribution(): void;
-    setSourceVisibility(
-      visible: boolean,
-      sourceId: string,
-      sourceLayerId?: string,
-    ): void;
-  }
-
-  export class UserLocation extends Component<UserLocationProps> {}
-
-  export class Light extends Component<LightProps> {}
-
-  export class StyleSheet extends Component {
-    static create<T extends NamedStyles<T> | NamedStyles<any>>(styles: T): T;
-    camera(
-      stops: { [key: number]: string },
-      interpolationMode?: InterpolationMode,
-    ): void;
-    source(
-      stops: { [key: number]: string },
-      attributeName: string,
-      interpolationMode?: InterpolationMode,
-    ): void;
-    composite(
-      stops: { [key: number]: string },
-      attributeName: string,
-      interpolationMode?: InterpolationMode,
-    ): void;
-
-    identity(attributeName: string): number;
-  }
-
-  export class PointAnnotation extends Component<PointAnnotationProps> {
-    refresh(): void;
-  }
-  export class MarkerView extends Component<MarkerViewProps> {}
-  export class Callout extends Component<CalloutProps> {}
-  export class Style extends Component<StyleProps> {}
-
-  export class VectorSource extends Component<VectorSourceProps> {}
-  export class ShapeSource extends Component<ShapeSourceProps> {
-    features(
-      filter?: Expression,
-    ): Promise<FeatureCollection<Geometry, Properties>>;
-
-    getClusterExpansionZoom(
-      feature: Feature<Geometry, Properties> | number,
-    ): Promise<number>;
-    /**
-     * Returns all the leaves of a cluster with pagination support.
-     * @param cluster feature cluster
-     * @param limit the number of leaves to return
-     * @param offset the amount of points to skip (for pagination)
-     */
-    getClusterLeaves: (
-      feature: Feature<Geometry, Properties> | number,
-      limit: number,
-      offset: number,
-    ) => Promise<FeatureCollection<Geometry, Properties>>;
-    /**
-     * Returns the children of a cluster (on the next zoom level).
-     * @param cluster feature cluster
-     */
-    getClusterChildren: (
-      feature: Feature<Geometry, Properties> | number,
-    ) => Promise<FeatureCollection<Geometry, Properties>>;
-  }
-  export class RasterSource extends Component<RasterSourceProps> {}
-
-  /**
-   * Layers
-   */
-  export class BackgroundLayer extends Component<BackgroundLayerProps> {}
-  export class CircleLayer extends Component<CircleLayerProps> {}
-  export class FillExtrusionLayer extends Component<FillExtrusionLayerProps> {}
-  export class FillLayer extends Component<FillLayerProps> {}
-  export class LineLayer extends Component<LineLayerProps> {}
-  export class RasterLayer extends Component<RasterLayerProps> {}
-  export class SymbolLayer extends Component<SymbolLayerProps> {}
-  export class HeatmapLayer extends Component<HeatmapLayerProps> {}
-  export class Images extends Component<ImagesProps> {}
-  export class ImageSource extends Component<ImageSourceProps> {}
-
-  export class LocationManager extends Component {
-    start(displacement?: number): void;
-    stop(): void;
-  }
-
-  /**
-   * Offline
-   */
-  export class OfflineManager extends Component {
-    createPack(
-      options: OfflineCreatePackOptions,
-      progressListener?: (
-        pack: OfflinePack,
-        status: OfflineProgressStatus,
-      ) => void,
-      errorListener?: (pack: OfflinePack, err: OfflineProgressError) => void,
-    ): Promise<void>;
-    deletePack(name: string): Promise<void>;
-    invalidatePack(name: string): Promise<void>;
-    getPacks(): Promise<Array<OfflinePack>>;
-    getPack(name: string): Promise<OfflinePack | undefined>;
-    invalidateAmbientCache(): Promise<void>;
-    clearAmbientCache(): Promise<void>;
-    setMaximumAmbientCacheSize(size: number): Promise<void>;
-    resetDatabase(): Promise<void>;
-    setTileCountLimit(limit: number): void;
-    setProgressEventThrottle(throttleValue: number): void;
-    subscribe(
-      packName: string,
-      progressListener: (pack: OfflinePack, status: object) => void,
-      errorListener?: (pack: OfflinePack, err: object) => void,
-    ): void;
-    unsubscribe(packName: string): void;
-  }
-  export class OfflinePack extends Component {
-    status(): void;
-    resume(): void;
-    pause(): void;
-  }
-
-  export class SnapshotManager {
-    static takeSnap(options: SnapshotOptions): Promise<string>;
-  }
-
-  export class Logger {
-    public static setLogCallback: (cb: LogCallback) => boolean;
-    public static setLogLevel: (level: LogLevel) => void;
-  }
-}
-
-// export as namespace MapboxGL;
diff --git a/index.ts b/index.ts
index 1c8ca77ce..d0a1a045e 100644
--- a/index.ts
+++ b/index.ts
@@ -1,5 +1,5 @@
-import { ReactNode, SyntheticEvent } from 'react';
-import {
+import type { ReactNode, SyntheticEvent } from 'react';
+import type {
   ViewProps,
   ViewStyle,
   StyleProp,
@@ -7,51 +7,54 @@ import {
   ImageSourcePropType,
 } from 'react-native';
 import { NativeModules, PermissionsAndroid } from 'react-native';
-import { Units, BBox, Id } from '@turf/helpers';
-
-import MapView from './javascript/components/MapView';
-import Light from './javascript/components/Light';
-import PointAnnotation from './javascript/components/PointAnnotation';
-import Annotation from './javascript/components/annotations/Annotation';
-import Callout from './javascript/components/Callout';
-import UserLocation from './javascript/components/UserLocation';
+import type { Units, BBox, Id } from '@turf/helpers';
+
+import {
+  MapView,
+  Light,
+  PointAnnotation,
+  Annotation,
+  Callout,
+  UserLocation,
+  VectorSource,
+  ShapeSource,
+  RasterSource,
+  RasterDemSource,
+  ImageSource,
+  Images,
+  FillLayer,
+  FillExtrusionLayer,
+  HeatmapLayer,
+  LineLayer,
+  CircleLayer,
+  SkyLayer,
+  SymbolLayer,
+  RasterLayer,
+  BackgroundLayer,
+  Terrain,
+  MarkerView,
+  Style,
+} from './javascript/components';
 import Camera, {
   CameraProps,
   CameraRef,
   UserTrackingMode,
   AnimationMode,
 } from './javascript/components/Camera';
-import VectorSource from './javascript/components/VectorSource';
-import ShapeSource from './javascript/components/ShapeSource';
-import RasterSource from './javascript/components/RasterSource';
-import RasterDemSource from './javascript/components/RasterDemSource';
-import ImageSource from './javascript/components/ImageSource';
-import Images from './javascript/components/Images';
-import FillLayer from './javascript/components/FillLayer';
-import FillExtrusionLayer from './javascript/components/FillExtrusionLayer';
-import HeatmapLayer from './javascript/components/HeatmapLayer';
-import LineLayer from './javascript/components/LineLayer';
-import CircleLayer from './javascript/components/CircleLayer';
-import SkyLayer from './javascript/components/SkyLayer';
-import SymbolLayer from './javascript/components/SymbolLayer';
-import RasterLayer from './javascript/components/RasterLayer';
-import BackgroundLayer from './javascript/components/BackgroundLayer';
-import Terrain from './javascript/components/Terrain';
 import locationManager from './javascript/modules/location/locationManager';
 import offlineManager from './javascript/modules/offline/offlineManager';
 import snapshotManager from './javascript/modules/snapshot/snapshotManager';
-import MarkerView from './javascript/components/MarkerView';
-import Animated from './javascript/utils/animated/Animated';
-import AnimatedPoint from './javascript/utils/animated/AnimatedPoint';
-import AnimatedShape from './javascript/utils/animated/AnimatedShape';
-import AnimatedCoordinatesArray from './javascript/utils/animated/AnimatedCoordinatesArray';
-import AnimatedExtractCoordinateFromArray from './javascript/utils/animated/AnimatedExtractCoordinateFromArray';
-import AnimatedRouteCoordinatesArray from './javascript/utils/animated/AnimatedRouteCoordinatesArray';
-import Style from './javascript/components/Style';
+import {
+  Animated,
+  AnimatedPoint,
+  AnimatedShape,
+  AnimatedCoordinatesArray,
+  AnimatedExtractCoordinateFromArray,
+  AnimatedRouteCoordinatesArray,
+} from './javascript/utils/animated';
 import Logger from './javascript/utils/Logger';
 import { isAndroid } from './javascript/utils';
 import geoUtils from './javascript/utils/geoUtils';
-import { MapboxGLDefinitions } from './definitions';
 
 // Types
 
@@ -915,59 +918,7 @@ export type {
   SkyLayerStyle,
 };
 
-interface MapboxGLType {
-  // Components
-  MapView: typeof MapboxGLDefinitions.MapView;
-  Light: typeof MapboxGLDefinitions.Light;
-  PointAnnotation: typeof MapboxGLDefinitions.PointAnnotation;
-  Annotation: any; // typeof MapboxGLDefinitions.Annotation; // TODO: Define in .d.ts file.
-  Callout: typeof MapboxGLDefinitions.Callout;
-  UserLocation: typeof MapboxGLDefinitions.UserLocation;
-  Camera: typeof Camera;
-  VectorSource: typeof MapboxGLDefinitions.VectorSource;
-  ShapeSource: typeof MapboxGLDefinitions.ShapeSource;
-  RasterSource: typeof MapboxGLDefinitions.RasterSource;
-  RasterDemSource: any; // typeof MapboxGLDefinitions.RasterDemSource; // TODO: Define in .d.ts file.
-  ImageSource: typeof MapboxGLDefinitions.ImageSource;
-  Images: typeof MapboxGLDefinitions.Images;
-  FillLayer: typeof MapboxGLDefinitions.FillLayer;
-  FillExtrusionLayer: typeof MapboxGLDefinitions.FillExtrusionLayer;
-  HeatmapLayer: typeof MapboxGLDefinitions.HeatmapLayer;
-  LineLayer: typeof MapboxGLDefinitions.LineLayer;
-  CircleLayer: typeof MapboxGLDefinitions.CircleLayer;
-  SkyLayer: any; // typeof MapboxGLDefinitions.SkyLayer; // TODO: Define in .d.ts file.
-  SymbolLayer: typeof MapboxGLDefinitions.SymbolLayer;
-  RasterLayer: typeof MapboxGLDefinitions.RasterLayer;
-  BackgroundLayer: typeof MapboxGLDefinitions.BackgroundLayer;
-  Terrain: any; // typeof MapboxGLDefinitions.Terrain; // TODO: Define in .d.ts file.
-  locationManager: typeof MapboxGLDefinitions.locationManager;
-  offlineManager: typeof MapboxGLDefinitions.offlineManager;
-  snapshotManager: typeof MapboxGLDefinitions.snapshotManager;
-  MarkerView: typeof MapboxGLDefinitions.MarkerView;
-  Animated: typeof MapboxGLDefinitions.Animated;
-  AnimatedPoint: typeof MapboxGLDefinitions.AnimatedPoint;
-  AnimatedShape: any; // typeof MapboxGLDefinitions.AnimatedShape; // TODO: Define in .d.ts file.
-  AnimatedCoordinatesArray: any; // typeof MapboxGLDefinitions.AnimatedCoordinatesArray; // TODO: Define in .d.ts file.
-  AnimatedExtractCoordinateFromArray: any; // typeof MapboxGLDefinitions.AnimatedExtractCoordinateFromArray; // TODO: Define in .d.ts file.
-  AnimatedRouteCoordinatesArray: any; // typeof MapboxGLDefinitions.AnimatedRouteCoordinatesArray; // TODO: Define in .d.ts file.
-  Style: typeof MapboxGLDefinitions.Style;
-  Logger: typeof MapboxGLDefinitions.Logger;
-  // Enums
-  InterpolationMode: typeof InterpolationMode;
-  StyleURL: typeof StyleURL;
-  // Classes
-  geoUtils: typeof geoUtils;
-  // Methods
-  requestAndroidLocationPermissions: typeof requestAndroidLocationPermissions;
-  removeCustomHeader: typeof MapboxGLDefinitions.removeCustomHeader;
-  addCustomHeader: typeof MapboxGLDefinitions.addCustomHeader;
-  setAccessToken: typeof MapboxGLDefinitions.setAccessToken;
-  getAccessToken: typeof MapboxGLDefinitions.getAccessToken;
-  setTelemetryEnabled: typeof MapboxGLDefinitions.setTelemetryEnabled;
-  setConnected: typeof MapboxGLDefinitions.setConnected;
-}
-
-const MapboxGL: MapboxGLType = {
+const MapboxGL = {
   ...NativeModules.MGLModule,
   // Components
   MapView,
diff --git a/javascript/components/Camera.tsx b/javascript/components/Camera.tsx
index 9337a6794..ba152933c 100644
--- a/javascript/components/Camera.tsx
+++ b/javascript/components/Camera.tsx
@@ -7,8 +7,8 @@ import React, {
   useRef,
 } from 'react';
 import { NativeModules, requireNativeComponent } from 'react-native';
-import { Position } from 'geojson';
-import { MapboxGLEvent } from '@rnmapbox/maps';
+import type { Position } from 'geojson';
+import type { MapboxGLEvent } from 'index';
 
 import geoUtils from '../utils/geoUtils';
 
diff --git a/javascript/components/index.d.ts b/javascript/components/index.d.ts
new file mode 100644
index 000000000..dbb885200
--- /dev/null
+++ b/javascript/components/index.d.ts
@@ -0,0 +1,95 @@
+import type { Component } from 'react';
+
+export class MapView extends Component<MapViewProps> {
+  longitude: number;
+  getPointInView(coordinate: GeoJSON.Position): Promise<GeoJSON.Position>;
+  getCoordinateFromView(point: GeoJSON.Position): Promise<GeoJSON.Position>;
+  getVisibleBounds(): Promise<GeoJSON.Position[]>;
+  queryRenderedFeaturesAtPoint(
+    coordinate: GeoJSON.Position,
+    filter?: Expression,
+    layerIds?: Array<string>,
+  ): Promise<GeoJSON.FeatureCollection | undefined>;
+  queryRenderedFeaturesInRect(
+    coordinate: GeoJSON.Position,
+    filter?: Expression,
+    layerIds?: Array<string>,
+  ): Promise<GeoJSON.FeatureCollection | undefined>;
+  takeSnap(writeToDisk?: boolean): Promise<string>;
+  getZoom(): Promise<number>;
+  getCenter(): Promise<GeoJSON.Position>;
+  showAttribution(): void;
+  setSourceVisibility(
+    visible: boolean,
+    sourceId: string,
+    sourceLayerId?: string,
+  ): void;
+}
+
+export class FillLayer extends Component<FillLayerProps> {}
+export class FillExtrusionLayer extends Component<FillExtrusionLayerProps> {}
+export class LineLayer extends Component<LineLayerProps> {}
+export class CircleLayer extends Component<CircleLayerProps> {}
+export class SymbolLayer extends Component<SymbolLayerProps> {}
+export class RasterLayer extends Component<RasterLayerProps> {}
+export class BackgroundLayer extends Component<BackgroundLayerProps> {}
+
+export class ShapeSource extends Component<ShapeSourceProps> {}
+export class ImageSource extends Component<ImageSourceProps> {}
+
+export class UserLocation extends Component<UserLocationProps> {}
+
+export class Light extends Component<LightProps> {}
+
+export class PointAnnotation extends Component<PointAnnotationProps> {
+  refresh(): void;
+}
+export class MarkerView extends Component<MarkerViewProps> {}
+export class Callout extends Component<CalloutProps> {}
+export class Style extends Component<StyleProps> {}
+
+export class VectorSource extends Component<VectorSourceProps> {}
+export class ShapeSource extends Component<ShapeSourceProps> {
+  features(
+    filter?: Expression,
+  ): Promise<FeatureCollection<Geometry, Properties>>;
+
+  getClusterExpansionZoom(
+    feature: Feature<Geometry, Properties> | number,
+  ): Promise<number>;
+  /**
+   * Returns all the leaves of a cluster with pagination support.
+   * @param cluster feature cluster
+   * @param limit the number of leaves to return
+   * @param offset the amount of points to skip (for pagination)
+   */
+  getClusterLeaves: (
+    feature: Feature<Geometry, Properties> | number,
+    limit: number,
+    offset: number,
+  ) => Promise<FeatureCollection<Geometry, Properties>>;
+  /**
+   * Returns the children of a cluster (on the next zoom level).
+   * @param cluster feature cluster
+   */
+  getClusterChildren: (
+    feature: Feature<Geometry, Properties> | number,
+  ) => Promise<FeatureCollection<Geometry, Properties>>;
+}
+export class RasterSource extends Component<RasterSourceProps> {}
+
+export class BackgroundLayer extends Component<BackgroundLayerProps> {}
+export class CircleLayer extends Component<CircleLayerProps> {}
+export class FillExtrusionLayer extends Component<FillExtrusionLayerProps> {}
+export class FillLayer extends Component<FillLayerProps> {}
+export class LineLayer extends Component<LineLayerProps> {}
+export class RasterLayer extends Component<RasterLayerProps> {}
+export class SymbolLayer extends Component<SymbolLayerProps> {}
+export class HeatmapLayer extends Component<HeatmapLayerProps> {}
+export class Images extends Component<ImagesProps> {}
+export class ImageSource extends Component<ImageSourceProps> {}
+
+export class Annotation extends Component {} // TODO
+export class RasterDemSource extends Component {} // TODO
+export class SkyLayer extends Component {} // TODO
+export class Terrain extends Component {} // TODO
diff --git a/javascript/components/index.js b/javascript/components/index.js
new file mode 100644
index 000000000..6e1cdb92b
--- /dev/null
+++ b/javascript/components/index.js
@@ -0,0 +1,63 @@
+import AbstractLayer from './AbstractLayer';
+import CircleLayer from './CircleLayer';
+import Images from './Images';
+import NativeUserLocation from './NativeUserLocation';
+import SkyLayer from './SkyLayer';
+import AbstractSource from './AbstractSource';
+import FillExtrusionLayer from './FillExtrusionLayer';
+import Light from './Light';
+import PointAnnotation from './PointAnnotation';
+import Style from './Style';
+import Annotation from './Annotation';
+import FillLayer from './FillLayer';
+import LineLayer from './LineLayer';
+import RasterDemSource from './RasterDemSource';
+import SymbolLayer from './SymbolLayer';
+import BackgroundLayer from './BackgroundLayer';
+import HeadingIndicator from './HeadingIndicator';
+import MapView from './MapView';
+import RasterLayer from './RasterLayer';
+import Terrain from './Terrain';
+import Callout from './Callout';
+import HeatmapLayer from './HeatmapLayer';
+import MarkerView from './MarkerView';
+import RasterSource from './RasterSource';
+import UserLocation from './UserLocation';
+import ImageSource from './ImageSource';
+import NativeBridgeComponent from './NativeBridgeComponent';
+import ShapeSource from './ShapeSource';
+import VectorSource from './VectorSource';
+import Camera from './Camera';
+
+export {
+  AbstractLayer,
+  CircleLayer,
+  Images,
+  NativeUserLocation,
+  SkyLayer,
+  AbstractSource,
+  FillExtrusionLayer,
+  Light,
+  PointAnnotation,
+  Style,
+  Annotation,
+  FillLayer,
+  LineLayer,
+  RasterDemSource,
+  SymbolLayer,
+  BackgroundLayer,
+  HeadingIndicator,
+  MapView,
+  RasterLayer,
+  Terrain,
+  Callout,
+  HeatmapLayer,
+  MarkerView,
+  RasterSource,
+  UserLocation,
+  ImageSource,
+  NativeBridgeComponent,
+  ShapeSource,
+  VectorSource,
+  Camera,
+};
diff --git a/javascript/modules/location/locationManager.d.ts b/javascript/modules/location/locationManager.d.ts
new file mode 100644
index 000000000..bd4cc6826
--- /dev/null
+++ b/javascript/modules/location/locationManager.d.ts
@@ -0,0 +1,4 @@
+export class LocationManager extends Component {
+  start(displacement?: number): void;
+  stop(): void;
+}
diff --git a/javascript/modules/offline/offlineManager.d.ts b/javascript/modules/offline/offlineManager.d.ts
new file mode 100644
index 000000000..68b6ab2ec
--- /dev/null
+++ b/javascript/modules/offline/offlineManager.d.ts
@@ -0,0 +1,26 @@
+export class OfflineManager extends Component {
+  createPack(
+    options: OfflineCreatePackOptions,
+    progressListener?: (
+      pack: OfflinePack,
+      status: OfflineProgressStatus,
+    ) => void,
+    errorListener?: (pack: OfflinePack, err: OfflineProgressError) => void,
+  ): Promise<void>;
+  deletePack(name: string): Promise<void>;
+  invalidatePack(name: string): Promise<void>;
+  getPacks(): Promise<Array<OfflinePack>>;
+  getPack(name: string): Promise<OfflinePack | undefined>;
+  invalidateAmbientCache(): Promise<void>;
+  clearAmbientCache(): Promise<void>;
+  setMaximumAmbientCacheSize(size: number): Promise<void>;
+  resetDatabase(): Promise<void>;
+  setTileCountLimit(limit: number): void;
+  setProgressEventThrottle(throttleValue: number): void;
+  subscribe(
+    packName: string,
+    progressListener: (pack: OfflinePack, status: object) => void,
+    errorListener?: (pack: OfflinePack, err: object) => void,
+  ): void;
+  unsubscribe(packName: string): void;
+}
diff --git a/javascript/modules/snapshot/snapshotManager.d.ts b/javascript/modules/snapshot/snapshotManager.d.ts
new file mode 100644
index 000000000..42709f4e1
--- /dev/null
+++ b/javascript/modules/snapshot/snapshotManager.d.ts
@@ -0,0 +1,3 @@
+export class SnapshotManager {
+  static takeSnap(options: SnapshotOptions): Promise<string>;
+}
diff --git a/javascript/utils/Logger.d.ts b/javascript/utils/Logger.d.ts
new file mode 100644
index 000000000..b183fac6f
--- /dev/null
+++ b/javascript/utils/Logger.d.ts
@@ -0,0 +1,4 @@
+export class Logger {
+  public static setLogCallback: (cb: LogCallback) => boolean;
+  public static setLogLevel: (level: LogLevel) => void;
+}
diff --git a/javascript/utils/animated/index.d.ts b/javascript/utils/animated/index.d.ts
new file mode 100644
index 000000000..6d7ef1d0d
--- /dev/null
+++ b/javascript/utils/animated/index.d.ts
@@ -0,0 +1,24 @@
+export class Animated {} // TODO
+
+export class AnimatedPoint {
+  constructor(point?: GeoJSON.Point);
+  longitude: ReactNative.Animated.Value;
+  latitude: ReactNative.Animated.Value;
+  setValue: (point: GeoJSON.Point) => void;
+  setOffset: (point: GeoJSON.Point) => void;
+  flattenOffset: () => void;
+  stopAnimation: (cb?: () => GeoJSON.Point) => void;
+  addListener: (cb?: () => GeoJSON.Point) => void;
+  removeListener: (id: string) => void;
+  spring: (
+    config: Record<string, any>,
+  ) => ReactNative.Animated.CompositeAnimation;
+  timing: (
+    config: Record<string, any>,
+  ) => ReactNative.Animated.CompositeAnimation;
+}
+
+export class AnimatedShape {} // TODO
+export class AnimatedCoordinatesArray {} // TODO
+export class AnimatedExtractCoordinateFromArray {} // TODO
+export class AnimatedRouteCoordinatesArray {} // TODO
diff --git a/javascript/utils/animated/index.js b/javascript/utils/animated/index.js
new file mode 100644
index 000000000..72659fbf9
--- /dev/null
+++ b/javascript/utils/animated/index.js
@@ -0,0 +1,15 @@
+import Animated from './Animated';
+import AnimatedPoint from './AnimatedPoint';
+import AnimatedShape from './AnimatedShape';
+import AnimatedCoordinatesArray from './AnimatedCoordinatesArray';
+import AnimatedExtractCoordinateFromArray from './AnimatedExtractCoordinateFromArray';
+import AnimatedRouteCoordinatesArray from './AnimatedRouteCoordinatesArray';
+
+export {
+  Animated,
+  AnimatedPoint,
+  AnimatedShape,
+  AnimatedCoordinatesArray,
+  AnimatedExtractCoordinateFromArray,
+  AnimatedRouteCoordinatesArray,
+};
diff --git a/javascript/utils/geoUtils.d.ts b/javascript/utils/geoUtils.d.ts
new file mode 100644
index 000000000..7c89fc209
--- /dev/null
+++ b/javascript/utils/geoUtils.d.ts
@@ -0,0 +1,46 @@
+export function makePoint<P = Properties>(
+  coordinates: Position,
+  properties?: P,
+  options?: PositionsOptions,
+): Feature<GeoJSON.Point, P>;
+export function makeLineString<P = Properties>(
+  coordinates: Position[],
+  properties?: P,
+  options?: PositionsOptions,
+): Feature<LineString, P>;
+export function makeLatLngBounds<G = Geometry, P = Properties>(
+  northEastCoordinates: Position[],
+  southWestCoordinates: Position[],
+): FeatureCollection<G, P>;
+export function makeFeature<G = Geometry, P = Properties>(
+  geometry: G,
+  properties?: P,
+): Feature<G, P>;
+export function makeFeatureCollection<G = Geometry, P = Properties>(
+  features: Array<Feature<G, P>>,
+  options?: PositionsOptions,
+): FeatureCollection<G, P>;
+export function addToFeatureCollection<G = Geometry, P = Properties>(
+  newFeatureCollection: Array<FeatureCollection<G, P>>,
+  newFeature: Feature<G, P>,
+): FeatureCollection<G, P>;
+export function calculateDistance(
+  origin: Coord,
+  dest: Coord,
+  options?: UnitsOptions,
+): number;
+export function pointAlongLine(
+  newLineString: Feature<LineString> | LineString,
+  distAlong: number,
+  options?: UnitsOptions,
+): Feature<GeoJSON.Point>;
+export function getOrCalculateVisibleRegion(
+  coord: { lon: number; lat: number },
+  zoomLevel: number,
+  width: number,
+  height: number,
+  nativeRegion: {
+    properties: { visibleBounds: number[] };
+    visibleBounds: number[];
+  },
+): void;
diff --git a/javascript/utils/index.d.ts b/javascript/utils/index.d.ts
new file mode 100644
index 000000000..478a81e62
--- /dev/null
+++ b/javascript/utils/index.d.ts
@@ -0,0 +1 @@
+export function isAndroid(): boolean;
diff --git a/package.json b/package.json
index 82c4d6eed..00feddf69 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
     "access": "public"
   },
   "author": "React Native Mapbox Team",
-  "main": "index.ts",
+  "main": "./lib/index.js",
+  "types": "./types",
   "keywords": [
     "gl",
     "ios",
diff --git a/scripts/autogenHelpers/DocJSONBuilder.js b/scripts/autogenHelpers/DocJSONBuilder.js
index 5ece09cf3..7a4d67b70 100644
--- a/scripts/autogenHelpers/DocJSONBuilder.js
+++ b/scripts/autogenHelpers/DocJSONBuilder.js
@@ -19,6 +19,7 @@ const MODULES_PATH = path.join(__dirname, '..', '..', 'javascript', 'modules');
 
 const OUTPUT_PATH = path.join(__dirname, '..', '..', 'docs', 'docs.json');
 const IGNORE_FILES = [
+  'index',
   'AbstractLayer',
   'AbstractSource',
   'NativeBridgeComponent',
@@ -26,6 +27,8 @@ const IGNORE_FILES = [
 
 const IGNORE_METHODS = ['setNativeProps'];
 
+const fileExtensionsRegex = /.(js|tsx|(?<!d.)ts)$/;
+
 class DocJSONBuilder {
   constructor(styledLayers) {
     this._styledLayers = {};
@@ -40,7 +43,7 @@ class DocJSONBuilder {
 
   get options() {
     return {
-      match: /.(js|tsx|ts)$/,
+      match: fileExtensionsRegex,
       shortName: true,
     };
   }
@@ -260,7 +263,7 @@ class DocJSONBuilder {
           let parsed = docgen.parse(content, undefined, undefined, {
             filename: fileName,
           });
-          fileName = fileName.replace(/.(js|tsx|ts)+/, '');
+          fileName = fileName.replace(fileExtensionsRegex, '');
           results[fileName] = parsed;
           this.postprocess(results[fileName], fileName);
 
@@ -303,7 +306,7 @@ class DocJSONBuilder {
     });
   }
 
-  generate() {
+  async generate() {
     this.generateModulesTask({}, MODULES_PATH);
 
     const results = {};
diff --git a/scripts/autogenerate.js b/scripts/autogenerate.js
index 810efdb71..e597b3de7 100644
--- a/scripts/autogenerate.js
+++ b/scripts/autogenerate.js
@@ -416,11 +416,6 @@ async function generate() {
       output: path.join(IOS_OUTPUT_PATH, 'RCTMGLStyle.h'),
       only: 'gl',
     },
-    // TODO: This doesn't seem right?
-    // {
-    //   input: path.join(TMPL_PATH, 'definitions.d.ts.ejs'),
-    //   output: path.join(IOS_OUTPUT_PATH, 'definitions.d.ts'),
-    // },
     {
       input: path.join(TMPL_PATH, 'RCTMGLStyle.m.ejs'),
       output: path.join(IOS_OUTPUT_PATH, 'RCTMGLStyle.m'),
@@ -476,11 +471,15 @@ async function generate() {
   execSync('yarn build:plugin');
   outputPaths.push('plugin/build');
 
+  // compile TS and JS
+  console.log('Compiling ./lib directory');
+  execSync('npx tsc; cp -R ./assets ./lib/assets');
+
   // autogenerate docs
   const docBuilder = new DocJSONBuilder(layers);
-  const markdownBuilder = new MarkdownBuilder();
   await docBuilder.generate();
-  await markdownBuilder.generate();
+  const markdownBuilder = new MarkdownBuilder();
+  markdownBuilder.generate();
 
   // Check if any generated files changed
   try {
diff --git a/tsconfig.json b/tsconfig.json
index d2c20e28b..0da47fc70 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,74 +1,31 @@
 {
   "compilerOptions": {
-    /* Basic Options */
-    "target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
-    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
-    "lib": [
-      "es6"
-    ] /* Specify library files to be included in the compilation. */,
-    "allowJs": true /* Allow javascript files to be compiled. */,
-    // "checkJs": true,                       /* Report errors in .js files. */
-    "jsx": "react-native" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
-    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
-    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
-    // "outFile": "./",                       /* Concatenate and emit output to single file. */
-    // "outDir": "./",                        /* Redirect output structure to the directory. */
-    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
-    // "removeComments": true,                /* Do not emit comments to output. */
-    "noEmit": true /* Do not emit outputs. */,
-    // "incremental": true,                   /* Enable incremental compilation */
-    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
-    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
-    "isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
-    /* Strict Type-Checking Options */
-    "strict": true /* Enable all strict type-checking options. */,
-    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
-    // "strictNullChecks": true,              /* Enable strict null checks. */
-    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
-    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
-    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
-    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
-    /* Additional Checks */
-    // "noUnusedLocals": true,                /* Report errors on unused locals. */
-    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
-    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
-    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
-    /* Module Resolution Options */
-    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
-    "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
-    "paths": {
-      /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-      "@rnmapbox/maps": [
-        "index.ts"
-      ],
-      "react": [
-        "node_modules/@types/react"
-      ],
-      "react-native": [
-        "node_modules/@types/react-native"
-      ]
-    },
-    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
-    // "typeRoots": [] /* List of folders to include type definitions from. */,
-    "types": [
-      "./definitions"
-    ] /* Type declaration files to be included in compilation. */,
-    "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
-    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
-    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
-    /* Source Map Options */
-    // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
-    // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
-    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
-    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
-    /* Experimental Options */
-    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
-    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+    "baseUrl": "./",
+    "outDir": "./lib",
+    "types": ["./types"],
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowJs": true,
+    "jsx": "react-native",
+    "lib": ["esnext"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
+    "importsNotUsedAsValues": "preserve",
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "noImplicitUseStrict": false,
+    "noStrictGenericChecks": false,
+    // "noUnusedLocals": true,
+    // "noUnusedParameters": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "esnext",
   },
-  "exclude": [
-    "node_modules",
-    "babel.config.js",
-    "metro.config.js",
-    "jest.config.js"
-  ]
-}
\ No newline at end of file
+  "include": [
+    "javascript",
+    "index.ts",
+  ],
+}
diff --git a/types/index.d.ts b/types/index.d.ts
new file mode 100644
index 000000000..35543218e
--- /dev/null
+++ b/types/index.d.ts
@@ -0,0 +1,44 @@
+import { Component } from 'react';
+import { InterpolationMode, NamedStyles } from '@rnmapbox/maps';
+
+declare namespace MapboxGL {
+  export function removeCustomHeader(headerName: string): void;
+  export function addCustomHeader(
+    headerName: string,
+    headerValue: string,
+  ): void;
+  export function setAccessToken(accessToken: string | null): void;
+  export function getAccessToken(): Promise<string>;
+  export function setTelemetryEnabled(telemetryEnabled: boolean): void;
+  export function setConnected(connected: boolean): void;
+
+  export const offlineManager: OfflineManager;
+  export const snapshotManager: SnapshotManager;
+  export const locationManager: LocationManager;
+
+  export class StyleSheet extends Component {
+    static create<T extends NamedStyles<T> | NamedStyles<any>>(styles: T): T;
+    camera(
+      stops: { [key: number]: string },
+      interpolationMode?: InterpolationMode,
+    ): void;
+    source(
+      stops: { [key: number]: string },
+      attributeName: string,
+      interpolationMode?: InterpolationMode,
+    ): void;
+    composite(
+      stops: { [key: number]: string },
+      attributeName: string,
+      interpolationMode?: InterpolationMode,
+    ): void;
+
+    identity(attributeName: string): number;
+  }
+
+  export class OfflinePack extends Component {
+    status(): void;
+    resume(): void;
+    pause(): void;
+  }
+}

From 51e3cef4f0678f72a349ada6ad856b61265c1b0f Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Mon, 16 May 2022 13:01:29 -0500
Subject: [PATCH 56/84] Reorganize Camera types

---
 docs/Camera.md                   |  6 +++---
 docs/docs.json                   |  6 +++---
 example/ios/Podfile.lock         | 28 ++++++++++++++--------------
 javascript/components/Camera.tsx | 26 ++++++++------------------
 tsconfig.json                    |  1 +
 types/Camera.ts                  | 20 ++++++++++++++++++++
 6 files changed, 49 insertions(+), 38 deletions(-)
 create mode 100644 types/Camera.ts

diff --git a/docs/Camera.md b/docs/Camera.md
index e68de003e..831e6d653 100644
--- a/docs/Camera.md
+++ b/docs/Camera.md
@@ -13,8 +13,8 @@
 | zoomLevel | `number` | `none` | `false` | The zoom level of the map. |
 | padding | `CameraPadding` | `none` | `false` | The viewport padding in points. |
 | animationDuration | `number` | `none` | `false` | The duration the map takes to animate to a new configuration. |
-| animationMode | `'flyTo' \| 'easeTo' \| 'linearTo' \| 'none' \| 'moveTo'` | `none` | `false` | The easing or path the camera uses to animate to a new configuration. |
-| followUserMode | `'normal' \| 'compass' \| 'course'` | `none` | `false` | The mode used to track the user location on the map. |
+| animationMode | `CameraAnimationMode` | `none` | `false` | The easing or path the camera uses to animate to a new configuration. |
+| followUserMode | `UserTrackingMode` | `none` | `false` | The mode used to track the user location on the map. |
 | followUserLocation | `boolean` | `none` | `false` | Whether the map orientation follows the user location. |
 | followZoomLevel | `number` | `none` | `false` | The zoom level used when following the user location. |
 | followPitch | `number` | `none` | `false` | The pitch used when following the user location. |
@@ -25,7 +25,7 @@
 | defaultSettings | `CameraStop` | `none` | `false` | The configuration that the camera falls back on, if no other values are specified. |
 | allowUpdates | `boolean` | `none` | `false` | Whether the camera should send any configuration to the native module. Prevents unnecessary tile<br/>fetching and improves performance when the map is not visible. Defaults to `true`. (Not yet implemented.) |
 | triggerKey | `string \| number` | `none` | `false` | Any arbitrary primitive value that, when changed, causes the camera to retry moving to its target<br/>configuration. (Not yet implemented.) |
-| onUserTrackingModeChange | `(event:MapboxGLEvent<'usertrackingmodechange',{followUserLocation:boolean;followUserMode:UserTrackingMode\|null;}>,)=>void` | `none` | `false` | Executes when user tracking mode changes. |
+| onUserTrackingModeChange | `UserTrackingModeChangeCallback` | `none` | `false` | Executes when user tracking mode changes. |
 
 ### methods
 #### setCamera(config)
diff --git a/docs/docs.json b/docs/docs.json
index 9f9fa7f64..9dcbb00ce 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -421,14 +421,14 @@
       {
         "name": "animationMode",
         "required": false,
-        "type": "'flyTo' \\| 'easeTo' \\| 'linearTo' \\| 'none' \\| 'moveTo'",
+        "type": "CameraAnimationMode",
         "default": "none",
         "description": "The easing or path the camera uses to animate to a new configuration."
       },
       {
         "name": "followUserMode",
         "required": false,
-        "type": "'normal' \\| 'compass' \\| 'course'",
+        "type": "UserTrackingMode",
         "default": "none",
         "description": "The mode used to track the user location on the map."
       },
@@ -505,7 +505,7 @@
       {
         "name": "onUserTrackingModeChange",
         "required": false,
-        "type": "(event:MapboxGLEvent<'usertrackingmodechange',{followUserLocation:boolean;followUserMode:UserTrackingMode\\|null;}>,)=>void",
+        "type": "UserTrackingModeChangeCallback",
         "default": "none",
         "description": "Executes when user tracking mode changes."
       }
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
index 927ef1dab..083aa9f7d 100644
--- a/example/ios/Podfile.lock
+++ b/example/ios/Podfile.lock
@@ -291,7 +291,7 @@ PODS:
   - React-jsinspector (0.68.1)
   - React-logger (0.68.1):
     - glog
-  - react-native-safe-area-context (3.2.0):
+  - react-native-safe-area-context (3.4.1):
     - React-Core
   - React-perflogger (0.68.1)
   - React-RCTActionSheet (0.68.1):
@@ -358,24 +358,24 @@ PODS:
     - React-jsi (= 0.68.1)
     - React-logger (= 0.68.1)
     - React-perflogger (= 0.68.1)
-  - RNGestureHandler (1.9.0):
+  - RNGestureHandler (1.10.3):
     - React-Core
-  - rnmapbox-maps (10.0.0-beta.3):
+  - rnmapbox-maps (10.0.0-beta.7):
     - MapboxMaps (~> 10.5.0)
     - React
     - React-Core
-    - rnmapbox-maps/DynamicLibrary (= 10.0.0-beta.3)
+    - rnmapbox-maps/DynamicLibrary (= 10.0.0-beta.7)
     - Turf
-  - rnmapbox-maps/DynamicLibrary (10.0.0-beta.3):
+  - rnmapbox-maps/DynamicLibrary (10.0.0-beta.7):
     - MapboxMaps (~> 10.5.0)
     - React
     - React-Core
     - Turf
-  - RNScreens (3.8.0):
+  - RNScreens (3.13.1):
     - React-Core
     - React-RCTImage
-  - RNSVG (12.1.0):
-    - React
+  - RNSVG (12.3.0):
+    - React-Core
   - RNVectorIcons (9.0.0):
     - React-Core
   - SocketRocket (0.6.0)
@@ -582,7 +582,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 4a4bae5671b064a2248a690cf75957669489d08c
   React-jsinspector: 218a2503198ff28a085f8e16622a8d8f507c8019
   React-logger: f79dd3cc0f9b44f5611c6c7862badd891a862cf8
-  react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79
+  react-native-safe-area-context: 9e40fb181dac02619414ba1294d6c2a807056ab9
   React-perflogger: 30ab8d6db10e175626069e742eead3ebe8f24fd5
   React-RCTActionSheet: 4b45da334a175b24dabe75f856b98fed3dfd6201
   React-RCTAnimation: d6237386cb04500889877845b3e9e9291146bc2e
@@ -595,10 +595,10 @@ SPEC CHECKSUMS:
   React-RCTVibration: 9e344c840176b0af9c84d5019eb4fed8b3c105a1
   React-runtimeexecutor: 7285b499d0339104b2813a1f58ad1ada4adbd6c0
   ReactCommon: bf2888a826ceedf54b99ad1b6182d1bc4a8a3984
-  RNGestureHandler: 9b7e605a741412e20e13c512738a31bd1611759b
-  rnmapbox-maps: 75c78ebf20cbe15a72418cf7b616d45bcf245c2d
-  RNScreens: 6e1ea5787989f92b0671049b808aef64fa1ef98c
-  RNSVG: ce9d996113475209013317e48b05c21ee988d42e
+  RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
+  rnmapbox-maps: c3ac5adc02b0ca6870758127e088ae40ab6eade0
+  RNScreens: 40a2cb40a02a609938137a1e0acfbf8fc9eebf19
+  RNSVG: 302bfc9905bd8122f08966dc2ce2d07b7b52b9f8
   RNVectorIcons: 4143ba35feebab8fdbe6bc43d1e776b393d47ac8
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Turf: 60b93cfdc62758526bc7bf1ef191a829aeb9694d
@@ -607,4 +607,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 4b8dadcc679d57c909588d625f8a25f9c79719e3
 
-COCOAPODS: 1.11.2
+COCOAPODS: 1.11.3
diff --git a/javascript/components/Camera.tsx b/javascript/components/Camera.tsx
index ba152933c..5a8a0ca65 100644
--- a/javascript/components/Camera.tsx
+++ b/javascript/components/Camera.tsx
@@ -8,7 +8,11 @@ import React, {
 } from 'react';
 import { NativeModules, requireNativeComponent } from 'react-native';
 import type { Position } from 'geojson';
-import type { MapboxGLEvent } from 'index';
+import type {
+  CameraAnimationMode,
+  UserTrackingMode,
+  UserTrackingModeChangeCallback,
+} from 'types/Camera';
 
 import geoUtils from '../utils/geoUtils';
 
@@ -16,7 +20,7 @@ const NativeModule = NativeModules.MGLModule;
 
 export const NATIVE_MODULE_NAME = 'RCTMGLCamera';
 
-const Modes: Record<string, AnimationMode> = {
+const Modes: Record<string, CameraAnimationMode> = {
   Flight: 'flyTo',
   Ease: 'easeTo',
   Linear: 'linearTo',
@@ -32,20 +36,6 @@ export const UserTrackingModes: Record<string, UserTrackingMode> = {
 
 // Component types.
 
-export type AnimationMode = 'flyTo' | 'easeTo' | 'linearTo' | 'none' | 'moveTo';
-
-export type UserTrackingMode = 'normal' | 'compass' | 'course';
-
-type UserTrackingModeChangeCallback = (
-  event: MapboxGLEvent<
-    'usertrackingmodechange',
-    {
-      followUserLocation: boolean;
-      followUserMode: UserTrackingMode | null;
-    }
-  >,
-) => void;
-
 export interface CameraProps
   extends CameraStop,
     CameraFollowConfig,
@@ -81,7 +71,7 @@ interface CameraStop {
   /** The duration the map takes to animate to a new configuration. */
   animationDuration?: number;
   /** The easing or path the camera uses to animate to a new configuration. */
-  animationMode?: AnimationMode;
+  animationMode?: CameraAnimationMode;
 }
 
 interface CameraFollowConfig {
@@ -217,7 +207,7 @@ const Camera = (props: CameraProps, ref: React.ForwardedRef<CameraRef>) => {
   const camera: React.RefObject<RCTMGLCamera> = useRef(null);
 
   const nativeAnimationMode = useCallback(
-    (_mode?: AnimationMode): NativeAnimationMode | undefined => {
+    (_mode?: CameraAnimationMode): NativeAnimationMode | undefined => {
       switch (_mode) {
         case Modes.Flight:
           return NativeModule.CameraModes.Flight;
diff --git a/tsconfig.json b/tsconfig.json
index 0da47fc70..8946dae55 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -27,5 +27,6 @@
   "include": [
     "javascript",
     "index.ts",
+    "types"
   ],
 }
diff --git a/types/Camera.ts b/types/Camera.ts
new file mode 100644
index 000000000..cdd2d4d1d
--- /dev/null
+++ b/types/Camera.ts
@@ -0,0 +1,20 @@
+import type { MapboxGLEvent } from 'index';
+
+export type CameraAnimationMode =
+  | 'flyTo'
+  | 'easeTo'
+  | 'linearTo'
+  | 'none'
+  | 'moveTo';
+
+export type UserTrackingMode = 'normal' | 'compass' | 'course';
+
+export type UserTrackingModeChangeCallback = (
+  event: MapboxGLEvent<
+    'usertrackingmodechange',
+    {
+      followUserLocation: boolean;
+      followUserMode: UserTrackingMode | null;
+    }
+  >,
+) => void;

From 1568b2e49f4ddb75aceab46ef2847eebca0b976e Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Mon, 16 May 2022 13:03:03 -0500
Subject: [PATCH 57/84] Fix imports

---
 index.ts | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/index.ts b/index.ts
index 3092b6ee0..b29a65958 100644
--- a/index.ts
+++ b/index.ts
@@ -8,6 +8,7 @@ import type {
 } from 'react-native';
 import { NativeModules, PermissionsAndroid } from 'react-native';
 import type { Units, BBox, Id } from '@turf/helpers';
+import type { CameraAnimationMode, UserTrackingMode } from 'types/Camera';
 
 import {
   MapView,
@@ -35,12 +36,7 @@ import {
   MarkerView,
   Style,
 } from './javascript/components';
-import Camera, {
-  CameraProps,
-  CameraRef,
-  UserTrackingMode,
-  AnimationMode,
-} from './javascript/components/Camera';
+import Camera, { CameraProps, CameraRef } from './javascript/components/Camera';
 import locationManager from './javascript/modules/location/locationManager';
 import offlineManager from './javascript/modules/offline/offlineManager';
 import snapshotManager from './javascript/modules/snapshot/snapshotManager';
@@ -847,7 +843,7 @@ export type {
   // Types
   CameraProps,
   CameraRef,
-  AnimationMode,
+  CameraAnimationMode,
   OfflineProgressStatus,
   OfflineProgressError,
   OfflinePack,

From 688de764c75691c4989822f8696f1049f7f16297 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Mon, 16 May 2022 14:51:02 -0500
Subject: [PATCH 58/84] Fix animationMode returns and add test

---
 __tests__/components/Camera.test.js |  5 +++
 javascript/components/Camera.tsx    | 51 +++++++++++++++--------------
 types/Camera.ts                     |  4 +--
 3 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/__tests__/components/Camera.test.js b/__tests__/components/Camera.test.js
index b0347f881..00bb408aa 100644
--- a/__tests__/components/Camera.test.js
+++ b/__tests__/components/Camera.test.js
@@ -64,4 +64,9 @@ describe('Camera', () => {
       ...paddingZero,
     });
   });
+  test('animation mode', () => {
+    const result = render(<Camera bounds={bounds1} animationMode={'none'} />);
+    const { props } = result.queryByTestId('Camera');
+    expect(props.stop.mode).toEqual('Move');
+  });
 });
diff --git a/javascript/components/Camera.tsx b/javascript/components/Camera.tsx
index 5a8a0ca65..6790169f0 100644
--- a/javascript/components/Camera.tsx
+++ b/javascript/components/Camera.tsx
@@ -18,14 +18,35 @@ import geoUtils from '../utils/geoUtils';
 
 const NativeModule = NativeModules.MGLModule;
 
+const nativeAnimationMode = (
+  mode?: CameraAnimationMode,
+): NativeAnimationMode => {
+  const NativeCameraModes = NativeModule.CameraModes;
+
+  switch (mode) {
+    case CameraModes.Flight:
+      return NativeCameraModes.Flight;
+    case CameraModes.Ease:
+      return NativeCameraModes.Ease;
+    case CameraModes.Linear:
+      return NativeCameraModes.Linear;
+    case CameraModes.Move:
+      return NativeCameraModes.Move;
+    case CameraModes.None:
+      return NativeCameraModes.Move;
+    default:
+      return NativeCameraModes.Ease;
+  }
+};
+
 export const NATIVE_MODULE_NAME = 'RCTMGLCamera';
 
-const Modes: Record<string, CameraAnimationMode> = {
+const CameraModes: Record<string, CameraAnimationMode> = {
   Flight: 'flyTo',
   Ease: 'easeTo',
   Linear: 'linearTo',
-  None: 'none',
   Move: 'moveTo',
+  None: 'none',
 };
 
 export const UserTrackingModes: Record<string, UserTrackingMode> = {
@@ -206,26 +227,6 @@ const Camera = (props: CameraProps, ref: React.ForwardedRef<CameraRef>) => {
   // @ts-ignore
   const camera: React.RefObject<RCTMGLCamera> = useRef(null);
 
-  const nativeAnimationMode = useCallback(
-    (_mode?: CameraAnimationMode): NativeAnimationMode | undefined => {
-      switch (_mode) {
-        case Modes.Flight:
-          return NativeModule.CameraModes.Flight;
-        case Modes.Ease:
-          return NativeModule.CameraModes.Ease;
-        case Modes.Linear:
-          return NativeModule.CameraModes.Linear;
-        case Modes.None:
-          return NativeModule.CameraModes.None;
-        case Modes.Move:
-          return NativeModule.CameraModes.Move;
-        default:
-          return undefined;
-      }
-    },
-    [],
-  );
-
   const nativeDefaultStop = useMemo((): NativeCameraStop | null => {
     if (!defaultSettings) {
       return null;
@@ -241,10 +242,10 @@ const Camera = (props: CameraProps, ref: React.ForwardedRef<CameraRef>) => {
       paddingLeft: defaultSettings.padding?.paddingLeft ?? 0,
       paddingRight: defaultSettings.padding?.paddingRight ?? 0,
       duration: defaultSettings.animationDuration ?? 2000,
-      mode: nativeAnimationMode(defaultSettings.animationMode) ?? 'flight',
+      mode: nativeAnimationMode(defaultSettings.animationMode),
     };
     return _defaultStop;
-  }, [defaultSettings, nativeAnimationMode]);
+  }, [defaultSettings]);
 
   const buildNativeStop = useCallback(
     (
@@ -292,7 +293,7 @@ const Camera = (props: CameraProps, ref: React.ForwardedRef<CameraRef>) => {
 
       return _nativeStop;
     },
-    [props.followUserLocation, nativeDefaultStop, nativeAnimationMode],
+    [props.followUserLocation, nativeDefaultStop],
   );
 
   const nativeStop = useMemo(() => {
diff --git a/types/Camera.ts b/types/Camera.ts
index cdd2d4d1d..406a2122c 100644
--- a/types/Camera.ts
+++ b/types/Camera.ts
@@ -4,8 +4,8 @@ export type CameraAnimationMode =
   | 'flyTo'
   | 'easeTo'
   | 'linearTo'
-  | 'none'
-  | 'moveTo';
+  | 'moveTo'
+  | 'none';
 
 export type UserTrackingMode = 'normal' | 'compass' | 'course';
 

From 3bdd44a4f0ffeaa3ee35aa0a701e1b6c0a06d8a4 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Mon, 16 May 2022 15:28:51 -0500
Subject: [PATCH 59/84] Refactor camera types for docs purposes

---
 docs/Camera.md                   | 10 ++--
 docs/docs.json                   |  6 +--
 index.ts                         |  8 +++-
 javascript/components/Camera.tsx | 78 ++++++++++++++++++--------------
 types/Camera.ts                  | 20 --------
 5 files changed, 59 insertions(+), 63 deletions(-)
 delete mode 100644 types/Camera.ts

diff --git a/docs/Camera.md b/docs/Camera.md
index 831e6d653..69bb8481c 100644
--- a/docs/Camera.md
+++ b/docs/Camera.md
@@ -13,8 +13,12 @@
 | zoomLevel | `number` | `none` | `false` | The zoom level of the map. |
 | padding | `CameraPadding` | `none` | `false` | The viewport padding in points. |
 | animationDuration | `number` | `none` | `false` | The duration the map takes to animate to a new configuration. |
-| animationMode | `CameraAnimationMode` | `none` | `false` | The easing or path the camera uses to animate to a new configuration. |
-| followUserMode | `UserTrackingMode` | `none` | `false` | The mode used to track the user location on the map. |
+| animationMode | `\| 'flyTo'
+\| 'easeTo'
+\| 'linearTo'
+\| 'moveTo'
+\| 'none'` | `none` | `false` | The easing or path the camera uses to animate to a new configuration. |
+| followUserMode | `'normal' \| 'compass' \| 'course'` | `none` | `false` | The mode used to track the user location on the map. |
 | followUserLocation | `boolean` | `none` | `false` | Whether the map orientation follows the user location. |
 | followZoomLevel | `number` | `none` | `false` | The zoom level used when following the user location. |
 | followPitch | `number` | `none` | `false` | The pitch used when following the user location. |
@@ -25,7 +29,7 @@
 | defaultSettings | `CameraStop` | `none` | `false` | The configuration that the camera falls back on, if no other values are specified. |
 | allowUpdates | `boolean` | `none` | `false` | Whether the camera should send any configuration to the native module. Prevents unnecessary tile<br/>fetching and improves performance when the map is not visible. Defaults to `true`. (Not yet implemented.) |
 | triggerKey | `string \| number` | `none` | `false` | Any arbitrary primitive value that, when changed, causes the camera to retry moving to its target<br/>configuration. (Not yet implemented.) |
-| onUserTrackingModeChange | `UserTrackingModeChangeCallback` | `none` | `false` | Executes when user tracking mode changes. |
+| onUserTrackingModeChange | `(event:MapboxGLEvent<'usertrackingmodechange',{followUserLocation:boolean;followUserMode:UserTrackingMode\|null;}>,)=>void` | `none` | `false` | Executes when user tracking mode changes. |
 
 ### methods
 #### setCamera(config)
diff --git a/docs/docs.json b/docs/docs.json
index 9dcbb00ce..2b0f764ff 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -421,14 +421,14 @@
       {
         "name": "animationMode",
         "required": false,
-        "type": "CameraAnimationMode",
+        "type": "\\| 'flyTo'\n\\| 'easeTo'\n\\| 'linearTo'\n\\| 'moveTo'\n\\| 'none'",
         "default": "none",
         "description": "The easing or path the camera uses to animate to a new configuration."
       },
       {
         "name": "followUserMode",
         "required": false,
-        "type": "UserTrackingMode",
+        "type": "'normal' \\| 'compass' \\| 'course'",
         "default": "none",
         "description": "The mode used to track the user location on the map."
       },
@@ -505,7 +505,7 @@
       {
         "name": "onUserTrackingModeChange",
         "required": false,
-        "type": "UserTrackingModeChangeCallback",
+        "type": "(event:MapboxGLEvent<'usertrackingmodechange',{followUserLocation:boolean;followUserMode:UserTrackingMode\\|null;}>,)=>void",
         "default": "none",
         "description": "Executes when user tracking mode changes."
       }
diff --git a/index.ts b/index.ts
index b29a65958..88c2c2030 100644
--- a/index.ts
+++ b/index.ts
@@ -8,7 +8,6 @@ import type {
 } from 'react-native';
 import { NativeModules, PermissionsAndroid } from 'react-native';
 import type { Units, BBox, Id } from '@turf/helpers';
-import type { CameraAnimationMode, UserTrackingMode } from 'types/Camera';
 
 import {
   MapView,
@@ -36,7 +35,12 @@ import {
   MarkerView,
   Style,
 } from './javascript/components';
-import Camera, { CameraProps, CameraRef } from './javascript/components/Camera';
+import Camera, {
+  CameraAnimationMode,
+  CameraProps,
+  CameraRef,
+  UserTrackingMode,
+} from './javascript/components/Camera';
 import locationManager from './javascript/modules/location/locationManager';
 import offlineManager from './javascript/modules/offline/offlineManager';
 import snapshotManager from './javascript/modules/snapshot/snapshotManager';
diff --git a/javascript/components/Camera.tsx b/javascript/components/Camera.tsx
index 6790169f0..2c2a1a0b9 100644
--- a/javascript/components/Camera.tsx
+++ b/javascript/components/Camera.tsx
@@ -8,11 +8,7 @@ import React, {
 } from 'react';
 import { NativeModules, requireNativeComponent } from 'react-native';
 import type { Position } from 'geojson';
-import type {
-  CameraAnimationMode,
-  UserTrackingMode,
-  UserTrackingModeChangeCallback,
-} from 'types/Camera';
+import type { MapboxGLEvent } from 'index';
 
 import geoUtils from '../utils/geoUtils';
 
@@ -49,31 +45,26 @@ const CameraModes: Record<string, CameraAnimationMode> = {
   None: 'none',
 };
 
-export const UserTrackingModes: Record<string, UserTrackingMode> = {
-  Follow: 'normal',
-  FollowWithHeading: 'compass',
-  FollowWithCourse: 'course',
-};
-
-// Component types.
-
-export interface CameraProps
-  extends CameraStop,
-    CameraFollowConfig,
-    CameraMinMaxConfig {
-  /** The configuration that the camera falls back on, if no other values are specified. */
-  defaultSettings?: CameraStop;
-  /** Whether the camera should send any configuration to the native module. Prevents unnecessary tile
-   * fetching and improves performance when the map is not visible. Defaults to `true`. (Not yet implemented.) */
-  allowUpdates?: boolean;
-  /** Any arbitrary primitive value that, when changed, causes the camera to retry moving to its target
-   * configuration. (Not yet implemented.) */
-  triggerKey?: string | number;
-  /** Executes when user tracking mode changes. */
-  onUserTrackingModeChange?: UserTrackingModeChangeCallback;
-}
+export type CameraAnimationMode =
+  | 'flyTo'
+  | 'easeTo'
+  | 'linearTo'
+  | 'moveTo'
+  | 'none';
+
+export type UserTrackingMode = 'normal' | 'compass' | 'course';
+
+export type UserTrackingModeChangeCallback = (
+  event: MapboxGLEvent<
+    'usertrackingmodechange',
+    {
+      followUserLocation: boolean;
+      followUserMode: UserTrackingMode | null;
+    }
+  >,
+) => void;
 
-interface CameraStop {
+export interface CameraStop {
   /** Allows static check of the data type. For internal use only. */
   readonly type?: 'CameraStop';
   /** The location on which the map should center. */
@@ -95,7 +86,7 @@ interface CameraStop {
   animationMode?: CameraAnimationMode;
 }
 
-interface CameraFollowConfig {
+export interface CameraFollowConfig {
   /** The mode used to track the user location on the map. */
   followUserMode?: UserTrackingMode;
   /** Whether the map orientation follows the user location. */
@@ -108,7 +99,7 @@ interface CameraFollowConfig {
   followHeading?: number;
 }
 
-interface CameraMinMaxConfig {
+export interface CameraMinMaxConfig {
   /** The lowest allowed zoom level. */
   minZoomLevel?: number;
   /** The highest allowed zoom level. */
@@ -120,23 +111,24 @@ interface CameraMinMaxConfig {
   };
 }
 
-interface CameraBounds {
+export interface CameraBounds {
   ne: Position;
   sw: Position;
 }
 
-interface CameraPadding {
+export interface CameraPadding {
   paddingLeft: number;
   paddingRight: number;
   paddingTop: number;
   paddingBottom: number;
 }
 
-interface CameraBoundsWithPadding
+export interface CameraBoundsWithPadding
   extends CameraBounds,
     Partial<CameraPadding> {}
 
-interface CameraStops {
+export interface CameraStops {
+  /** Allows static check of the data type. For internal use only. */
   readonly type: 'CameraStops';
   stops: CameraStop[];
 }
@@ -182,6 +174,22 @@ export interface CameraRef {
   zoomTo: (zoomLevel: number, animationDuration?: number) => void;
 }
 
+export interface CameraProps
+  extends CameraStop,
+    CameraFollowConfig,
+    CameraMinMaxConfig {
+  /** The configuration that the camera falls back on, if no other values are specified. */
+  defaultSettings?: CameraStop;
+  /** Whether the camera should send any configuration to the native module. Prevents unnecessary tile
+   * fetching and improves performance when the map is not visible. Defaults to `true`. (Not yet implemented.) */
+  allowUpdates?: boolean;
+  /** Any arbitrary primitive value that, when changed, causes the camera to retry moving to its target
+   * configuration. (Not yet implemented.) */
+  triggerKey?: string | number;
+  /** Executes when user tracking mode changes. */
+  onUserTrackingModeChange?: UserTrackingModeChangeCallback;
+}
+
 /**
  * Controls the perspective from which the user sees the map.
  *
diff --git a/types/Camera.ts b/types/Camera.ts
deleted file mode 100644
index 406a2122c..000000000
--- a/types/Camera.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { MapboxGLEvent } from 'index';
-
-export type CameraAnimationMode =
-  | 'flyTo'
-  | 'easeTo'
-  | 'linearTo'
-  | 'moveTo'
-  | 'none';
-
-export type UserTrackingMode = 'normal' | 'compass' | 'course';
-
-export type UserTrackingModeChangeCallback = (
-  event: MapboxGLEvent<
-    'usertrackingmodechange',
-    {
-      followUserLocation: boolean;
-      followUserMode: UserTrackingMode | null;
-    }
-  >,
-) => void;

From aeb7ca9bb8b183db1f965696eb7a2a1b2dd23a74 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Mon, 16 May 2022 15:32:49 -0500
Subject: [PATCH 60/84] Reimplement allowUpdates

---
 docs/Camera.md                   | 2 +-
 docs/docs.json                   | 2 +-
 javascript/components/Camera.tsx | 8 ++++++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/docs/Camera.md b/docs/Camera.md
index 69bb8481c..994654a5b 100644
--- a/docs/Camera.md
+++ b/docs/Camera.md
@@ -27,7 +27,7 @@
 | maxZoomLevel | `number` | `none` | `false` | The highest allowed zoom level. |
 | maxBounds | `{ne:Position;sw:Position;}` | `none` | `false` | The corners of a box defining the limits of where the camera can pan or zoom. |
 | defaultSettings | `CameraStop` | `none` | `false` | The configuration that the camera falls back on, if no other values are specified. |
-| allowUpdates | `boolean` | `none` | `false` | Whether the camera should send any configuration to the native module. Prevents unnecessary tile<br/>fetching and improves performance when the map is not visible. Defaults to `true`. (Not yet implemented.) |
+| allowUpdates | `boolean` | `none` | `false` | Whether the camera should send any configuration to the native module. Prevents unnecessary tile<br/>fetching and improves performance when the map is not visible. Defaults to `true`. |
 | triggerKey | `string \| number` | `none` | `false` | Any arbitrary primitive value that, when changed, causes the camera to retry moving to its target<br/>configuration. (Not yet implemented.) |
 | onUserTrackingModeChange | `(event:MapboxGLEvent<'usertrackingmodechange',{followUserLocation:boolean;followUserMode:UserTrackingMode\|null;}>,)=>void` | `none` | `false` | Executes when user tracking mode changes. |
 
diff --git a/docs/docs.json b/docs/docs.json
index 2b0f764ff..ce689f185 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -493,7 +493,7 @@
         "required": false,
         "type": "boolean",
         "default": "none",
-        "description": "Whether the camera should send any configuration to the native module. Prevents unnecessary tile\nfetching and improves performance when the map is not visible. Defaults to `true`. (Not yet implemented.)"
+        "description": "Whether the camera should send any configuration to the native module. Prevents unnecessary tile\nfetching and improves performance when the map is not visible. Defaults to `true`."
       },
       {
         "name": "triggerKey",
diff --git a/javascript/components/Camera.tsx b/javascript/components/Camera.tsx
index 2c2a1a0b9..38bc21ecd 100644
--- a/javascript/components/Camera.tsx
+++ b/javascript/components/Camera.tsx
@@ -181,7 +181,7 @@ export interface CameraProps
   /** The configuration that the camera falls back on, if no other values are specified. */
   defaultSettings?: CameraStop;
   /** Whether the camera should send any configuration to the native module. Prevents unnecessary tile
-   * fetching and improves performance when the map is not visible. Defaults to `true`. (Not yet implemented.) */
+   * fetching and improves performance when the map is not visible. Defaults to `true`. */
   allowUpdates?: boolean;
   /** Any arbitrary primitive value that, when changed, causes the camera to retry moving to its target
    * configuration. (Not yet implemented.) */
@@ -338,6 +338,10 @@ const Camera = (props: CameraProps, ref: React.ForwardedRef<CameraRef>) => {
   }, [maxBounds]);
 
   const _setCamera: CameraRef['setCamera'] = (config) => {
+    if (!allowUpdates) {
+      return;
+    }
+
     if (!config.type)
       // @ts-expect-error The compiler doesn't understand that the `config` union type is guaranteed
       // to be an object type.
@@ -366,7 +370,7 @@ const Camera = (props: CameraProps, ref: React.ForwardedRef<CameraRef>) => {
       }
     }
   };
-  const setCamera = useCallback(_setCamera, [buildNativeStop]);
+  const setCamera = useCallback(_setCamera, [allowUpdates, buildNativeStop]);
 
   const _fitBounds: CameraRef['fitBounds'] = (
     ne,

From 1f5704168c1011c0e0c5321273ed19c2bcb8bd65 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Mon, 16 May 2022 16:24:01 -0500
Subject: [PATCH 61/84] Fix exported types namespace

---
 types/MapboxGL.d.ts | 39 +++++++++++++++++++++++++++++++++++++++
 types/index.d.ts    | 44 --------------------------------------------
 2 files changed, 39 insertions(+), 44 deletions(-)
 create mode 100644 types/MapboxGL.d.ts
 delete mode 100644 types/index.d.ts

diff --git a/types/MapboxGL.d.ts b/types/MapboxGL.d.ts
new file mode 100644
index 000000000..dcdfc8f64
--- /dev/null
+++ b/types/MapboxGL.d.ts
@@ -0,0 +1,39 @@
+import { Component } from 'react';
+import { InterpolationMode, NamedStyles } from '@rnmapbox/maps';
+
+export function removeCustomHeader(headerName: string): void;
+export function addCustomHeader(headerName: string, headerValue: string): void;
+export function setAccessToken(accessToken: string | null): void;
+export function getAccessToken(): Promise<string>;
+export function setTelemetryEnabled(telemetryEnabled: boolean): void;
+export function setConnected(connected: boolean): void;
+
+export const offlineManager: OfflineManager;
+export const snapshotManager: SnapshotManager;
+export const locationManager: LocationManager;
+
+export class StyleSheet extends Component {
+  static create<T extends NamedStyles<T> | NamedStyles<any>>(styles: T): T;
+  camera(
+    stops: { [key: number]: string },
+    interpolationMode?: InterpolationMode,
+  ): void;
+  source(
+    stops: { [key: number]: string },
+    attributeName: string,
+    interpolationMode?: InterpolationMode,
+  ): void;
+  composite(
+    stops: { [key: number]: string },
+    attributeName: string,
+    interpolationMode?: InterpolationMode,
+  ): void;
+
+  identity(attributeName: string): number;
+}
+
+export class OfflinePack extends Component {
+  status(): void;
+  resume(): void;
+  pause(): void;
+}
diff --git a/types/index.d.ts b/types/index.d.ts
deleted file mode 100644
index 35543218e..000000000
--- a/types/index.d.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Component } from 'react';
-import { InterpolationMode, NamedStyles } from '@rnmapbox/maps';
-
-declare namespace MapboxGL {
-  export function removeCustomHeader(headerName: string): void;
-  export function addCustomHeader(
-    headerName: string,
-    headerValue: string,
-  ): void;
-  export function setAccessToken(accessToken: string | null): void;
-  export function getAccessToken(): Promise<string>;
-  export function setTelemetryEnabled(telemetryEnabled: boolean): void;
-  export function setConnected(connected: boolean): void;
-
-  export const offlineManager: OfflineManager;
-  export const snapshotManager: SnapshotManager;
-  export const locationManager: LocationManager;
-
-  export class StyleSheet extends Component {
-    static create<T extends NamedStyles<T> | NamedStyles<any>>(styles: T): T;
-    camera(
-      stops: { [key: number]: string },
-      interpolationMode?: InterpolationMode,
-    ): void;
-    source(
-      stops: { [key: number]: string },
-      attributeName: string,
-      interpolationMode?: InterpolationMode,
-    ): void;
-    composite(
-      stops: { [key: number]: string },
-      attributeName: string,
-      interpolationMode?: InterpolationMode,
-    ): void;
-
-    identity(attributeName: string): number;
-  }
-
-  export class OfflinePack extends Component {
-    status(): void;
-    resume(): void;
-    pause(): void;
-  }
-}

From 0c865216feeb1d9c70b8feb00f7352b158e7fd63 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Mon, 16 May 2022 16:25:34 -0500
Subject: [PATCH 62/84] Set up example as ts project

---
 .eslintignore                                |  3 ++-
 example/package.json                         |  2 ++
 example/src/examples/V10/CameraAnimation.tsx |  7 +++----
 example/tsconfig.json                        | 15 +++++++++++++++
 4 files changed, 22 insertions(+), 5 deletions(-)
 create mode 100644 example/tsconfig.json

diff --git a/.eslintignore b/.eslintignore
index 51f7f14ab..4d6919d71 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1 +1,2 @@
-/plugin/build
\ No newline at end of file
+/plugin/build
+/example
\ No newline at end of file
diff --git a/example/package.json b/example/package.json
index c80d449e6..0c104a950 100644
--- a/example/package.json
+++ b/example/package.json
@@ -2,6 +2,7 @@
   "name": "RNMapboxGLExample",
   "version": "1.0.0",
   "private": true,
+  "main": "./lib",
   "scripts": {
     "android": "react-native run-android",
     "ios": "react-native run-ios --simulator=\"iPhone SE (2nd generation)\"",
@@ -18,6 +19,7 @@
   "dependencies": {
     "@mapbox/geo-viewport": "^0.5.0",
     "@mapbox/mapbox-sdk": "^0.13.0",
+    "@rnmapbox/maps": "file:..",
     "@turf/along": "^6.5.0",
     "@turf/bbox": "^6.5.0",
     "@turf/bbox-polygon": "^6.5.0",
diff --git a/example/src/examples/V10/CameraAnimation.tsx b/example/src/examples/V10/CameraAnimation.tsx
index 616e7eaa3..7a511aaa1 100644
--- a/example/src/examples/V10/CameraAnimation.tsx
+++ b/example/src/examples/V10/CameraAnimation.tsx
@@ -2,7 +2,7 @@ import React, { useMemo, useRef, useState } from 'react';
 import { Button, SafeAreaView, StyleSheet, View } from 'react-native';
 import MapboxGL, {
   CameraProps,
-  AnimationMode,
+  CameraAnimationMode,
   CameraRef,
 } from '@rnmapbox/maps';
 import bbox from '@turf/bbox';
@@ -16,7 +16,6 @@ const styles = StyleSheet.create({
   map: {
     flex: 1,
   },
-
   sheet: {
     paddingTop: 10,
     paddingHorizontal: 10,
@@ -84,7 +83,7 @@ const CameraAnimation = (props: any) => {
   );
   const camera = useRef<CameraRef>(null);
 
-  const [animationMode, setAnimationMode] = useState<AnimationMode>('moveTo');
+  const [animationMode, setAnimationMode] = useState<CameraAnimationMode>('moveTo');
   const [positions, setPositions] = useState([initialPosition]);
   const [padding, setPadding] = useState(zeroPadding);
 
@@ -93,7 +92,7 @@ const CameraAnimation = (props: any) => {
   }, [padding]);
 
   const move = (
-    _animationMode: AnimationMode,
+    _animationMode: CameraAnimationMode,
     shouldCreateMultiple: boolean,
   ) => {
     setAnimationMode(_animationMode);
diff --git a/example/tsconfig.json b/example/tsconfig.json
new file mode 100644
index 000000000..4c55c2482
--- /dev/null
+++ b/example/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "es2016",
+    "module": "commonjs",
+    "rootDir": "./",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "files": [
+    "./src/**"
+  ]
+}
\ No newline at end of file

From b24828600e5f3f886c3ce1bb6f2729abb52a96e5 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Mon, 16 May 2022 16:36:56 -0500
Subject: [PATCH 63/84] Fix types paths

---
 example/tsconfig.json | 5 +----
 package.json          | 2 +-
 tsconfig.json         | 7 ++++---
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/example/tsconfig.json b/example/tsconfig.json
index 4c55c2482..d59b1a5e9 100644
--- a/example/tsconfig.json
+++ b/example/tsconfig.json
@@ -8,8 +8,5 @@
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "skipLibCheck": true
-  },
-  "files": [
-    "./src/**"
-  ]
+  }
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index 660a75d87..12c0864d5 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
   },
   "author": "React Native Mapbox Team",
   "main": "./lib/index.js",
-  "types": "./types",
+  "types": "./types/MapboxGL.d.ts",
   "keywords": [
     "gl",
     "ios",
diff --git a/tsconfig.json b/tsconfig.json
index 8946dae55..977929490 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,12 +2,13 @@
   "compilerOptions": {
     "baseUrl": "./",
     "outDir": "./lib",
-    "types": ["./types"],
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "allowJs": true,
     "jsx": "react-native",
-    "lib": ["esnext"],
+    "lib": [
+      "esnext"
+    ],
     "module": "esnext",
     "moduleResolution": "node",
     "allowUnreachableCode": false,
@@ -29,4 +30,4 @@
     "index.ts",
     "types"
   ],
-}
+}
\ No newline at end of file

From 2c6e1bb70238db35baf81ae3ac502b001ac8fe17 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 17 May 2022 11:19:27 -0500
Subject: [PATCH 64/84] Ignore example project

---
 .eslintignore | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.eslintignore b/.eslintignore
index 4d6919d71..46e6b1d6f 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,2 +1,3 @@
 /plugin/build
-/example
\ No newline at end of file
+/example
+/lib
\ No newline at end of file

From 28871a0cb1c8013c844798ebb5984f58a0dd8589 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 17 May 2022 11:19:54 -0500
Subject: [PATCH 65/84] Upgrade types

---
 package.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 12c0864d5..34bc424df 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,6 @@
   },
   "author": "React Native Mapbox Team",
   "main": "./lib/index.js",
-  "types": "./types/MapboxGL.d.ts",
   "keywords": [
     "gl",
     "ios",
@@ -57,8 +56,9 @@
     "@react-native-community/eslint-config": "^3.0.1",
     "@sinonjs/fake-timers": "^8.0.1",
     "@testing-library/react-native": "^8.0.0",
-    "@types/react": "^18.0.5",
-    "@types/react-native": "^0.67.4",
+    "@types/node": "^17.0.34",
+    "@types/react": "^18.0.9",
+    "@types/react-native": "^0.67.7",
     "@typescript-eslint/eslint-plugin": "^5.20.0",
     "@typescript-eslint/parser": "^5.20.0",
     "babel-jest": "^27.5.1",
@@ -81,7 +81,7 @@
     "react-docgen": "rnmapbox/react-docgen#rnmapbox",
     "react-native": "0.67.0",
     "react-test-renderer": "17.0.2",
-    "typescript": "^4.4.3"
+    "typescript": "^4.6.4"
   },
   "jest": {
     "preset": "react-native",

From 3ceeea6e059d74ee73eae07068c2536f69bf584b Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 17 May 2022 11:20:22 -0500
Subject: [PATCH 66/84] Fix paths, remove unused

---
 types/MapboxGL.d.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/types/MapboxGL.d.ts b/types/MapboxGL.d.ts
index dcdfc8f64..8b878788c 100644
--- a/types/MapboxGL.d.ts
+++ b/types/MapboxGL.d.ts
@@ -1,5 +1,6 @@
 import { Component } from 'react';
-import { InterpolationMode, NamedStyles } from '@rnmapbox/maps';
+
+import { InterpolationMode, NamedStyles } from '..';
 
 export function removeCustomHeader(headerName: string): void;
 export function addCustomHeader(headerName: string, headerValue: string): void;
@@ -8,10 +9,6 @@ export function getAccessToken(): Promise<string>;
 export function setTelemetryEnabled(telemetryEnabled: boolean): void;
 export function setConnected(connected: boolean): void;
 
-export const offlineManager: OfflineManager;
-export const snapshotManager: SnapshotManager;
-export const locationManager: LocationManager;
-
 export class StyleSheet extends Component {
   static create<T extends NamedStyles<T> | NamedStyles<any>>(styles: T): T;
   camera(

From c7251792d1e0326342023321d8f031ed7bf2cf70 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 17 May 2022 11:20:48 -0500
Subject: [PATCH 67/84] Expand and fix types

---
 example/package.json                          |  6 ++-
 .../examples/Annotations/CustomCallout.tsx    |  1 +
 example/src/examples/V10/SkyAndTerran.tsx     |  8 +--
 example/tsconfig.json                         | 22 ++++++--
 javascript/components/Camera.tsx              | 22 +++-----
 javascript/components/index.d.ts              | 54 +++++++++++++------
 .../modules/location/locationManager.d.ts     |  2 +
 .../modules/offline/offlineManager.d.ts       |  6 +++
 .../modules/snapshot/snapshotManager.d.ts     |  2 +
 javascript/utils/Logger.d.ts                  |  8 +--
 javascript/utils/animated/index.d.ts          | 14 +++--
 javascript/utils/geoUtils.d.ts                | 15 +++++-
 tsconfig.json                                 | 14 +++--
 13 files changed, 117 insertions(+), 57 deletions(-)

diff --git a/example/package.json b/example/package.json
index 0c104a950..405f00752 100644
--- a/example/package.json
+++ b/example/package.json
@@ -2,7 +2,7 @@
   "name": "RNMapboxGLExample",
   "version": "1.0.0",
   "private": true,
-  "main": "./lib",
+  "main": "./index.js",
   "scripts": {
     "android": "react-native run-android",
     "ios": "react-native run-ios --simulator=\"iPhone SE (2nd generation)\"",
@@ -45,6 +45,8 @@
   "devDependencies": {
     "@babel/core": "^7.12.9",
     "@babel/runtime": "^7.12.5",
+    "@types/react": "^18.0.9",
+    "@types/react-native": "^0.67.7",
     "babel-plugin-module-resolver": "^4.1.0",
     "detox": "^19.1.0 <19.5.2 || >19.5.2",
     "glob-to-regexp": "^0.4.0",
@@ -52,7 +54,7 @@
     "jest-circus": "^27.1.1",
     "jetifier": "^2.0.0",
     "metro-react-native-babel-preset": "^0.64.0",
-    "typescript": "^4.4.3"
+    "typescript": "^4.6.4"
   },
   "detox": {
     "testRunner": "jest",
diff --git a/example/src/examples/Annotations/CustomCallout.tsx b/example/src/examples/Annotations/CustomCallout.tsx
index 3eb08a703..4a550150e 100644
--- a/example/src/examples/Annotations/CustomCallout.tsx
+++ b/example/src/examples/Annotations/CustomCallout.tsx
@@ -3,6 +3,7 @@ import MapboxGL, { SymbolLayerStyle } from '@rnmapbox/maps';
 import { Feature } from '@turf/helpers/dist/js';
 import { View, Text, ViewStyle, StyleProp, TextStyle } from 'react-native';
 
+// @ts-ignore
 import exampleIcon from '../../assets/pin.png';
 import sheet from '../../styles/sheet';
 import Page from '../common/Page';
diff --git a/example/src/examples/V10/SkyAndTerran.tsx b/example/src/examples/V10/SkyAndTerran.tsx
index d1996d302..46a39aff2 100644
--- a/example/src/examples/V10/SkyAndTerran.tsx
+++ b/example/src/examples/V10/SkyAndTerran.tsx
@@ -3,6 +3,7 @@ import { Button } from 'react-native';
 import {
   MapView,
   SkyLayer,
+  CameraRef,
   Camera,
   Logger,
   Terrain,
@@ -19,7 +20,8 @@ const styles = {
 };
 
 function SkyAndTerran(props: BaseExampleProps) {
-  const cameraRef = useRef<Camera>();
+  const cameraRef = useRef<CameraRef>(null);
+  
   return (
     <Page {...props}>
       <Button
@@ -37,14 +39,14 @@ function SkyAndTerran(props: BaseExampleProps) {
         styleURL={'mapbox://styles/mapbox-map-design/ckhqrf2tz0dt119ny6azh975y'}
       >
         <Camera
+          ref={cameraRef}
           centerCoordinate={[
             // -74.00597, 40.71427
             //-122.4189591, 37.6614238,
             -114.34411, 32.6141,
           ]}
-          ref={cameraRef}
           zoomLevel={13.1}
-          bearing={80}
+          heading={80}
           pitch={85}
         />
 
diff --git a/example/tsconfig.json b/example/tsconfig.json
index d59b1a5e9..2e937b215 100644
--- a/example/tsconfig.json
+++ b/example/tsconfig.json
@@ -1,12 +1,28 @@
 {
   "compilerOptions": {
-    "target": "es2016",
-    "module": "commonjs",
+    "jsx": "react-native",
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "Node",
+    "lib": [
+      "ESNext"
+    ],
     "rootDir": "./",
+    "outDir": "./lib",
+    "types": [],
     "allowJs": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "skipLibCheck": true
-  }
+  },
+  "files": [
+    "index.js",
+  ],
+  "include": [
+    "../assets/**/*"
+  ],
+  "exclude": [
+    "node_modules/**/*",
+  ]
 }
\ No newline at end of file
diff --git a/javascript/components/Camera.tsx b/javascript/components/Camera.tsx
index 38bc21ecd..7d2965c5c 100644
--- a/javascript/components/Camera.tsx
+++ b/javascript/components/Camera.tsx
@@ -7,9 +7,9 @@ import React, {
   useRef,
 } from 'react';
 import { NativeModules, requireNativeComponent } from 'react-native';
-import type { Position } from 'geojson';
-import type { MapboxGLEvent } from 'index';
+import { Position } from '@turf/helpers';
 
+import { MapboxGLEvent } from '../..';
 import geoUtils from '../utils/geoUtils';
 
 const NativeModule = NativeModules.MGLModule;
@@ -20,15 +20,15 @@ const nativeAnimationMode = (
   const NativeCameraModes = NativeModule.CameraModes;
 
   switch (mode) {
-    case CameraModes.Flight:
+    case 'flyTo':
       return NativeCameraModes.Flight;
-    case CameraModes.Ease:
+    case 'easeTo':
       return NativeCameraModes.Ease;
-    case CameraModes.Linear:
+    case 'linearTo':
       return NativeCameraModes.Linear;
-    case CameraModes.Move:
+    case 'moveTo':
       return NativeCameraModes.Move;
-    case CameraModes.None:
+    case 'none':
       return NativeCameraModes.Move;
     default:
       return NativeCameraModes.Ease;
@@ -37,14 +37,6 @@ const nativeAnimationMode = (
 
 export const NATIVE_MODULE_NAME = 'RCTMGLCamera';
 
-const CameraModes: Record<string, CameraAnimationMode> = {
-  Flight: 'flyTo',
-  Ease: 'easeTo',
-  Linear: 'linearTo',
-  Move: 'moveTo',
-  None: 'none',
-};
-
 export type CameraAnimationMode =
   | 'flyTo'
   | 'easeTo'
diff --git a/javascript/components/index.d.ts b/javascript/components/index.d.ts
index dbb885200..3b07c2488 100644
--- a/javascript/components/index.d.ts
+++ b/javascript/components/index.d.ts
@@ -1,4 +1,30 @@
+import { Properties } from '@turf/helpers';
+import { FeatureCollection, Geometry, Feature } from 'geojson';
+import {
+  BackgroundLayerProps,
+  CalloutProps,
+  CircleLayerProps,
+  Expression,
+  FillExtrusionLayerProps,
+  FillLayerProps,
+  HeatmapLayerProps,
+  ImageSourceProps,
+  ImagesProps,
+  LightProps,
+  LineLayerProps,
+  MapViewProps,
+  MarkerViewProps,
+  PointAnnotationProps,
+  RasterLayerProps,
+  RasterSourceProps,
+  ShapeSourceProps,
+  StyleProps,
+  SymbolLayerProps,
+  UserLocationProps,
+  VectorSourceProps,
+} from 'index';
 import type { Component } from 'react';
+import { ViewPropTypes } from 'react-native';
 
 export class MapView extends Component<MapViewProps> {
   longitude: number;
@@ -26,17 +52,6 @@ export class MapView extends Component<MapViewProps> {
   ): void;
 }
 
-export class FillLayer extends Component<FillLayerProps> {}
-export class FillExtrusionLayer extends Component<FillExtrusionLayerProps> {}
-export class LineLayer extends Component<LineLayerProps> {}
-export class CircleLayer extends Component<CircleLayerProps> {}
-export class SymbolLayer extends Component<SymbolLayerProps> {}
-export class RasterLayer extends Component<RasterLayerProps> {}
-export class BackgroundLayer extends Component<BackgroundLayerProps> {}
-
-export class ShapeSource extends Component<ShapeSourceProps> {}
-export class ImageSource extends Component<ImageSourceProps> {}
-
 export class UserLocation extends Component<UserLocationProps> {}
 
 export class Light extends Component<LightProps> {}
@@ -82,14 +97,23 @@ export class BackgroundLayer extends Component<BackgroundLayerProps> {}
 export class CircleLayer extends Component<CircleLayerProps> {}
 export class FillExtrusionLayer extends Component<FillExtrusionLayerProps> {}
 export class FillLayer extends Component<FillLayerProps> {}
-export class LineLayer extends Component<LineLayerProps> {}
 export class RasterLayer extends Component<RasterLayerProps> {}
 export class SymbolLayer extends Component<SymbolLayerProps> {}
 export class HeatmapLayer extends Component<HeatmapLayerProps> {}
 export class Images extends Component<ImagesProps> {}
 export class ImageSource extends Component<ImageSourceProps> {}
+export class LineLayer extends Component<LineLayerProps> {}
 
 export class Annotation extends Component {} // TODO
-export class RasterDemSource extends Component {} // TODO
-export class SkyLayer extends Component {} // TODO
-export class Terrain extends Component {} // TODO
+export class RasterDemSource extends Component<ViewPropTypes> {
+  id: string;
+  url: string;
+  tileSize: number;
+  maxZoomLevel: number;
+}
+export class SkyLayer extends Component<ViewPropTypes> {
+  id: string;
+}
+export class Terrain extends Component<ViewPropTypes> {
+  exaggeration: number;
+}
diff --git a/javascript/modules/location/locationManager.d.ts b/javascript/modules/location/locationManager.d.ts
index bd4cc6826..169d5ae39 100644
--- a/javascript/modules/location/locationManager.d.ts
+++ b/javascript/modules/location/locationManager.d.ts
@@ -1,3 +1,5 @@
+import { Component } from 'react';
+
 export class LocationManager extends Component {
   start(displacement?: number): void;
   stop(): void;
diff --git a/javascript/modules/offline/offlineManager.d.ts b/javascript/modules/offline/offlineManager.d.ts
index 68b6ab2ec..0899d0a86 100644
--- a/javascript/modules/offline/offlineManager.d.ts
+++ b/javascript/modules/offline/offlineManager.d.ts
@@ -1,3 +1,9 @@
+import { Component } from 'react';
+import { OfflineProgressStatus, OfflineProgressError } from 'index';
+
+import OfflineCreatePackOptions from './OfflineCreatePackOptions';
+import OfflinePack from './OfflinePack';
+
 export class OfflineManager extends Component {
   createPack(
     options: OfflineCreatePackOptions,
diff --git a/javascript/modules/snapshot/snapshotManager.d.ts b/javascript/modules/snapshot/snapshotManager.d.ts
index 42709f4e1..846b94349 100644
--- a/javascript/modules/snapshot/snapshotManager.d.ts
+++ b/javascript/modules/snapshot/snapshotManager.d.ts
@@ -1,3 +1,5 @@
+import SnapshotOptions from './SnapshotOptions';
+
 export class SnapshotManager {
   static takeSnap(options: SnapshotOptions): Promise<string>;
 }
diff --git a/javascript/utils/Logger.d.ts b/javascript/utils/Logger.d.ts
index b183fac6f..847afe0f6 100644
--- a/javascript/utils/Logger.d.ts
+++ b/javascript/utils/Logger.d.ts
@@ -1,4 +1,4 @@
-export class Logger {
-  public static setLogCallback: (cb: LogCallback) => boolean;
-  public static setLogLevel: (level: LogLevel) => void;
-}
+import { LogCallback, LogLevel } from 'index';
+
+export function setLogCallback(cb: LogCallback): boolean;
+export function setLogLevel(level: LogLevel): void;
diff --git a/javascript/utils/animated/index.d.ts b/javascript/utils/animated/index.d.ts
index 6d7ef1d0d..2596e1070 100644
--- a/javascript/utils/animated/index.d.ts
+++ b/javascript/utils/animated/index.d.ts
@@ -1,21 +1,19 @@
+import RN from 'react-native';
+
 export class Animated {} // TODO
 
 export class AnimatedPoint {
   constructor(point?: GeoJSON.Point);
-  longitude: ReactNative.Animated.Value;
-  latitude: ReactNative.Animated.Value;
+  longitude: RN.Animated.Value;
+  latitude: RN.Animated.Value;
   setValue: (point: GeoJSON.Point) => void;
   setOffset: (point: GeoJSON.Point) => void;
   flattenOffset: () => void;
   stopAnimation: (cb?: () => GeoJSON.Point) => void;
   addListener: (cb?: () => GeoJSON.Point) => void;
   removeListener: (id: string) => void;
-  spring: (
-    config: Record<string, any>,
-  ) => ReactNative.Animated.CompositeAnimation;
-  timing: (
-    config: Record<string, any>,
-  ) => ReactNative.Animated.CompositeAnimation;
+  spring: (config: Record<string, any>) => RN.Animated.CompositeAnimation;
+  timing: (config: Record<string, any>) => RN.Animated.CompositeAnimation;
 }
 
 export class AnimatedShape {} // TODO
diff --git a/javascript/utils/geoUtils.d.ts b/javascript/utils/geoUtils.d.ts
index 7c89fc209..dd1a3f30b 100644
--- a/javascript/utils/geoUtils.d.ts
+++ b/javascript/utils/geoUtils.d.ts
@@ -1,3 +1,14 @@
+import {
+  Coord,
+  Feature,
+  FeatureCollection,
+  Geometry,
+  LineString,
+  Position,
+  Properties,
+} from '@turf/helpers';
+import { PositionsOptions, UnitsOptions } from 'index';
+
 export function makePoint<P = Properties>(
   coordinates: Position,
   properties?: P,
@@ -9,8 +20,8 @@ export function makeLineString<P = Properties>(
   options?: PositionsOptions,
 ): Feature<LineString, P>;
 export function makeLatLngBounds<G = Geometry, P = Properties>(
-  northEastCoordinates: Position[],
-  southWestCoordinates: Position[],
+  northEastCoordinates: Position,
+  southWestCoordinates: Position,
 ): FeatureCollection<G, P>;
 export function makeFeature<G = Geometry, P = Properties>(
   geometry: G,
diff --git a/tsconfig.json b/tsconfig.json
index 977929490..f859160c0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,6 +11,7 @@
     ],
     "module": "esnext",
     "moduleResolution": "node",
+    "target": "esnext",
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,
     "importsNotUsedAsValues": "preserve",
@@ -18,16 +19,19 @@
     "noImplicitReturns": true,
     "noImplicitUseStrict": false,
     "noStrictGenericChecks": false,
-    // "noUnusedLocals": true,
-    // "noUnusedParameters": true,
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "target": "esnext",
   },
+  "files": [
+    "index.ts",
+  ],
   "include": [
     "javascript",
-    "index.ts",
-    "types"
+    "types/**/*"
   ],
+  "exclude": [
+    "example/**/*",
+    "node_modules/**/*",
+  ]
 }
\ No newline at end of file

From a1b5c07ec529fd69b2063184461312248b0c3c6e Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 17 May 2022 12:50:00 -0500
Subject: [PATCH 68/84] Remove lib before rebuilding

---
 scripts/autogenerate.js             | 2 +-
 types/{MapboxGL.d.ts => index.d.ts} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename types/{MapboxGL.d.ts => index.d.ts} (100%)

diff --git a/scripts/autogenerate.js b/scripts/autogenerate.js
index e597b3de7..c8b459b2a 100644
--- a/scripts/autogenerate.js
+++ b/scripts/autogenerate.js
@@ -473,7 +473,7 @@ async function generate() {
 
   // compile TS and JS
   console.log('Compiling ./lib directory');
-  execSync('npx tsc; cp -R ./assets ./lib/assets');
+  execSync('rm -rf ./lib; npx tsc; cp -R ./assets ./lib/assets');
 
   // autogenerate docs
   const docBuilder = new DocJSONBuilder(layers);
diff --git a/types/MapboxGL.d.ts b/types/index.d.ts
similarity index 100%
rename from types/MapboxGL.d.ts
rename to types/index.d.ts

From 40e666d6985fe3f21d584c1e937f1f4674fb48b0 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 17 May 2022 12:50:19 -0500
Subject: [PATCH 69/84] Edit types

---
 javascript/components/Camera.tsx |  2 +-
 package.json                     | 13 ++++++-
 types/index.d.ts                 | 61 +++++++++++++++++---------------
 3 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/javascript/components/Camera.tsx b/javascript/components/Camera.tsx
index 7d2965c5c..2fe528468 100644
--- a/javascript/components/Camera.tsx
+++ b/javascript/components/Camera.tsx
@@ -8,8 +8,8 @@ import React, {
 } from 'react';
 import { NativeModules, requireNativeComponent } from 'react-native';
 import { Position } from '@turf/helpers';
+import { MapboxGLEvent } from 'index';
 
-import { MapboxGLEvent } from '../..';
 import geoUtils from '../utils/geoUtils';
 
 const NativeModule = NativeModules.MGLModule;
diff --git a/package.json b/package.json
index 34bc424df..4909fc574 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,18 @@
     "access": "public"
   },
   "author": "React Native Mapbox Team",
-  "main": "./lib/index.js",
+  "main": "./lib/index",
+  "module": "./lib/index",
+  "react-native": "src/index",
+  "source": "src/index",
+  "types": "./types/index.d.ts",
+  "files": [
+    "lib",
+    "android",
+    "!android/build",
+    "ios",
+    "!ios/build"
+  ],
   "keywords": [
     "gl",
     "ios",
diff --git a/types/index.d.ts b/types/index.d.ts
index 8b878788c..1c0a46eb0 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -2,35 +2,40 @@ import { Component } from 'react';
 
 import { InterpolationMode, NamedStyles } from '..';
 
-export function removeCustomHeader(headerName: string): void;
-export function addCustomHeader(headerName: string, headerValue: string): void;
-export function setAccessToken(accessToken: string | null): void;
-export function getAccessToken(): Promise<string>;
-export function setTelemetryEnabled(telemetryEnabled: boolean): void;
-export function setConnected(connected: boolean): void;
-
-export class StyleSheet extends Component {
-  static create<T extends NamedStyles<T> | NamedStyles<any>>(styles: T): T;
-  camera(
-    stops: { [key: number]: string },
-    interpolationMode?: InterpolationMode,
-  ): void;
-  source(
-    stops: { [key: number]: string },
-    attributeName: string,
-    interpolationMode?: InterpolationMode,
-  ): void;
-  composite(
-    stops: { [key: number]: string },
-    attributeName: string,
-    interpolationMode?: InterpolationMode,
+declare namespace MapboxGL {
+  export function removeCustomHeader(headerName: string): void;
+  export function addCustomHeader(
+    headerName: string,
+    headerValue: string,
   ): void;
+  export function setAccessToken(accessToken: string | null): void;
+  export function getAccessToken(): Promise<string>;
+  export function setTelemetryEnabled(telemetryEnabled: boolean): void;
+  export function setConnected(connected: boolean): void;
 
-  identity(attributeName: string): number;
-}
+  export class StyleSheet extends Component {
+    static create<T extends NamedStyles<T> | NamedStyles<any>>(styles: T): T;
+    camera(
+      stops: { [key: number]: string },
+      interpolationMode?: InterpolationMode,
+    ): void;
+    source(
+      stops: { [key: number]: string },
+      attributeName: string,
+      interpolationMode?: InterpolationMode,
+    ): void;
+    composite(
+      stops: { [key: number]: string },
+      attributeName: string,
+      interpolationMode?: InterpolationMode,
+    ): void;
+
+    identity(attributeName: string): number;
+  }
 
-export class OfflinePack extends Component {
-  status(): void;
-  resume(): void;
-  pause(): void;
+  export class OfflinePack extends Component {
+    status(): void;
+    resume(): void;
+    pause(): void;
+  }
 }

From 1962e38769f4396ecdd100f5083d14e8c5499a17 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 17 May 2022 13:43:19 -0500
Subject: [PATCH 70/84] Adjust build flow

---
 package.json  | 15 +++------------
 tsconfig.json | 12 +++++++-----
 2 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index 4909fc574..f82b413df 100644
--- a/package.json
+++ b/package.json
@@ -6,18 +6,8 @@
     "access": "public"
   },
   "author": "React Native Mapbox Team",
-  "main": "./lib/index",
-  "module": "./lib/index",
-  "react-native": "src/index",
-  "source": "src/index",
-  "types": "./types/index.d.ts",
-  "files": [
-    "lib",
-    "android",
-    "!android/build",
-    "ios",
-    "!ios/build"
-  ],
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "keywords": [
     "gl",
     "ios",
@@ -40,6 +30,7 @@
     "lint:fix": "eslint . --fix",
     "prepare": "npm run build:plugin",
     "test:plugin": "expo-module test plugin",
+    "build": "rm -rf lib; npx tsc",
     "build:plugin": "tsc --build plugin",
     "lint:plugin": "eslint plugin/src/*"
   },
diff --git a/tsconfig.json b/tsconfig.json
index f859160c0..c788de79f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,13 +22,15 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
+    "paths": {
+      "types": [
+        "types/index.d.ts"
+      ]
+    },
+    "declaration": true
   },
-  "files": [
-    "index.ts",
-  ],
   "include": [
-    "javascript",
-    "types/**/*"
+    "javascript/**/*",
   ],
   "exclude": [
     "example/**/*",

From 6d498bea6e31d7a5315075d554b208464b7dd72b Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 17 May 2022 13:54:51 -0500
Subject: [PATCH 71/84] Fix build

---
 package.json     |  1 -
 tsconfig.json    |  2 ++
 types/index.d.ts | 61 ++++++++++++++++++++++--------------------------
 3 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/package.json b/package.json
index f82b413df..f240bdcbf 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,6 @@
     "lint:fix": "eslint . --fix",
     "prepare": "npm run build:plugin",
     "test:plugin": "expo-module test plugin",
-    "build": "rm -rf lib; npx tsc",
     "build:plugin": "tsc --build plugin",
     "lint:plugin": "eslint plugin/src/*"
   },
diff --git a/tsconfig.json b/tsconfig.json
index c788de79f..1845c17c9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -30,7 +30,9 @@
     "declaration": true
   },
   "include": [
+    "index.ts",
     "javascript/**/*",
+    "types/**/*"
   ],
   "exclude": [
     "example/**/*",
diff --git a/types/index.d.ts b/types/index.d.ts
index 1c0a46eb0..8b878788c 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -2,40 +2,35 @@ import { Component } from 'react';
 
 import { InterpolationMode, NamedStyles } from '..';
 
-declare namespace MapboxGL {
-  export function removeCustomHeader(headerName: string): void;
-  export function addCustomHeader(
-    headerName: string,
-    headerValue: string,
-  ): void;
-  export function setAccessToken(accessToken: string | null): void;
-  export function getAccessToken(): Promise<string>;
-  export function setTelemetryEnabled(telemetryEnabled: boolean): void;
-  export function setConnected(connected: boolean): void;
+export function removeCustomHeader(headerName: string): void;
+export function addCustomHeader(headerName: string, headerValue: string): void;
+export function setAccessToken(accessToken: string | null): void;
+export function getAccessToken(): Promise<string>;
+export function setTelemetryEnabled(telemetryEnabled: boolean): void;
+export function setConnected(connected: boolean): void;
 
-  export class StyleSheet extends Component {
-    static create<T extends NamedStyles<T> | NamedStyles<any>>(styles: T): T;
-    camera(
-      stops: { [key: number]: string },
-      interpolationMode?: InterpolationMode,
-    ): void;
-    source(
-      stops: { [key: number]: string },
-      attributeName: string,
-      interpolationMode?: InterpolationMode,
-    ): void;
-    composite(
-      stops: { [key: number]: string },
-      attributeName: string,
-      interpolationMode?: InterpolationMode,
-    ): void;
+export class StyleSheet extends Component {
+  static create<T extends NamedStyles<T> | NamedStyles<any>>(styles: T): T;
+  camera(
+    stops: { [key: number]: string },
+    interpolationMode?: InterpolationMode,
+  ): void;
+  source(
+    stops: { [key: number]: string },
+    attributeName: string,
+    interpolationMode?: InterpolationMode,
+  ): void;
+  composite(
+    stops: { [key: number]: string },
+    attributeName: string,
+    interpolationMode?: InterpolationMode,
+  ): void;
 
-    identity(attributeName: string): number;
-  }
+  identity(attributeName: string): number;
+}
 
-  export class OfflinePack extends Component {
-    status(): void;
-    resume(): void;
-    pause(): void;
-  }
+export class OfflinePack extends Component {
+  status(): void;
+  resume(): void;
+  pause(): void;
 }

From a80a9a3c241ded2d3dbfb2a61a6c283cd68a8f38 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 17 May 2022 14:04:03 -0500
Subject: [PATCH 72/84] Fix imports

---
 javascript/components/Camera.tsx               | 2 +-
 javascript/components/index.d.ts               | 7 ++++---
 javascript/modules/offline/offlineManager.d.ts | 3 ++-
 javascript/utils/Logger.d.ts                   | 2 +-
 javascript/utils/geoUtils.d.ts                 | 3 ++-
 5 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/javascript/components/Camera.tsx b/javascript/components/Camera.tsx
index 2fe528468..7a8bef6dd 100644
--- a/javascript/components/Camera.tsx
+++ b/javascript/components/Camera.tsx
@@ -8,9 +8,9 @@ import React, {
 } from 'react';
 import { NativeModules, requireNativeComponent } from 'react-native';
 import { Position } from '@turf/helpers';
-import { MapboxGLEvent } from 'index';
 
 import geoUtils from '../utils/geoUtils';
+import { MapboxGLEvent } from '../..';
 
 const NativeModule = NativeModules.MGLModule;
 
diff --git a/javascript/components/index.d.ts b/javascript/components/index.d.ts
index 3b07c2488..b9c587afb 100644
--- a/javascript/components/index.d.ts
+++ b/javascript/components/index.d.ts
@@ -1,5 +1,8 @@
 import { Properties } from '@turf/helpers';
 import { FeatureCollection, Geometry, Feature } from 'geojson';
+import type { Component } from 'react';
+import { ViewPropTypes } from 'react-native';
+
 import {
   BackgroundLayerProps,
   CalloutProps,
@@ -22,9 +25,7 @@ import {
   SymbolLayerProps,
   UserLocationProps,
   VectorSourceProps,
-} from 'index';
-import type { Component } from 'react';
-import { ViewPropTypes } from 'react-native';
+} from '.';
 
 export class MapView extends Component<MapViewProps> {
   longitude: number;
diff --git a/javascript/modules/offline/offlineManager.d.ts b/javascript/modules/offline/offlineManager.d.ts
index 0899d0a86..990a5427c 100644
--- a/javascript/modules/offline/offlineManager.d.ts
+++ b/javascript/modules/offline/offlineManager.d.ts
@@ -1,9 +1,10 @@
 import { Component } from 'react';
-import { OfflineProgressStatus, OfflineProgressError } from 'index';
 
 import OfflineCreatePackOptions from './OfflineCreatePackOptions';
 import OfflinePack from './OfflinePack';
 
+import { OfflineProgressStatus, OfflineProgressError } from '.';
+
 export class OfflineManager extends Component {
   createPack(
     options: OfflineCreatePackOptions,
diff --git a/javascript/utils/Logger.d.ts b/javascript/utils/Logger.d.ts
index 847afe0f6..cbf7e3c5f 100644
--- a/javascript/utils/Logger.d.ts
+++ b/javascript/utils/Logger.d.ts
@@ -1,4 +1,4 @@
-import { LogCallback, LogLevel } from 'index';
+import { LogCallback, LogLevel } from '.';
 
 export function setLogCallback(cb: LogCallback): boolean;
 export function setLogLevel(level: LogLevel): void;
diff --git a/javascript/utils/geoUtils.d.ts b/javascript/utils/geoUtils.d.ts
index dd1a3f30b..f6dee7c85 100644
--- a/javascript/utils/geoUtils.d.ts
+++ b/javascript/utils/geoUtils.d.ts
@@ -7,7 +7,8 @@ import {
   Position,
   Properties,
 } from '@turf/helpers';
-import { PositionsOptions, UnitsOptions } from 'index';
+
+import { PositionsOptions, UnitsOptions } from '../..';
 
 export function makePoint<P = Properties>(
   coordinates: Position,

From 68fb18efcbe3724385b9a4f52232b2cfcfc21009 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 17 May 2022 14:23:19 -0500
Subject: [PATCH 73/84] Include lib dir

---
 package.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/package.json b/package.json
index f240bdcbf..20f654163 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,9 @@
   "author": "React Native Mapbox Team",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
+  "files": [
+    "lib"
+  ],
   "keywords": [
     "gl",
     "ios",

From 96d189d99d0cb1243bfa837741e1a44a475f32cb Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 17 May 2022 14:31:38 -0500
Subject: [PATCH 74/84] Fix glob

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 20f654163..6dcc9e619 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [
-    "lib"
+    "lib/**/*"
   ],
   "keywords": [
     "gl",

From 9a3f1f2bae93d1c255745e3677fc9be637bfeabf Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 17 May 2022 14:37:00 -0500
Subject: [PATCH 75/84] Add dir

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6dcc9e619..5096ea113 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [
-    "lib/**/*"
+    "lib",
+    "javascript"
   ],
   "keywords": [
     "gl",

From 170c8ace811e1ab2b79635b79f35c0cfdab26238 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Tue, 17 May 2022 14:53:31 -0500
Subject: [PATCH 76/84] Don't compile output files

---
 tsconfig.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tsconfig.json b/tsconfig.json
index 1845c17c9..a32692e8c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -35,6 +35,7 @@
     "types/**/*"
   ],
   "exclude": [
+    "lib/**/*",
     "example/**/*",
     "node_modules/**/*",
   ]

From 83db6579f588b89b97c208170b1743a4ca923d09 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 18 May 2022 11:07:59 -0500
Subject: [PATCH 77/84] Ignore output of npm pack

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index ed0804329..0e1097636 100644
--- a/.gitignore
+++ b/.gitignore
@@ -60,6 +60,7 @@ yarn.lock
 
 # Compiled
 lib
+*.tgz
 
 # Expo
 .expo

From c913bf790fdc0edb43e08637e53abac935a577d5 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 18 May 2022 11:49:48 -0500
Subject: [PATCH 78/84] Update included files and eslint plugin

---
 package.json | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 5096ea113..30bb61cc9 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,10 @@
   "types": "lib/index.d.ts",
   "files": [
     "lib",
-    "javascript"
+    "ios",
+    "android",
+    "scripts",
+    "rnmapbox-maps.podspec"
   ],
   "keywords": [
     "gl",
@@ -74,6 +77,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-fp": "^2.3.0",
     "eslint-plugin-import": "2.25.3",
+    "eslint-plugin-react-native": "^4.0.0",
     "expo-module-scripts": "^2.0.0",
     "husky": "4.3.8",
     "jest": "27.5.1",
@@ -113,4 +117,4 @@
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": "eslint --fix"
   }
-}
\ No newline at end of file
+}

From 94fe97febd6ef72b1019e222721c9f454c6212b9 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 18 May 2022 11:51:30 -0500
Subject: [PATCH 79/84] Fix import

---
 javascript/components/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/javascript/components/index.js b/javascript/components/index.js
index 6e1cdb92b..6bc04a466 100644
--- a/javascript/components/index.js
+++ b/javascript/components/index.js
@@ -8,7 +8,7 @@ import FillExtrusionLayer from './FillExtrusionLayer';
 import Light from './Light';
 import PointAnnotation from './PointAnnotation';
 import Style from './Style';
-import Annotation from './Annotation';
+import Annotation from './annotations/Annotation';
 import FillLayer from './FillLayer';
 import LineLayer from './LineLayer';
 import RasterDemSource from './RasterDemSource';

From 6d5898094f0fd318ab164b8f73b2d8f5f9b7ee58 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 18 May 2022 11:51:49 -0500
Subject: [PATCH 80/84] Fix imports

---
 example/package.json                         | 2 +-
 example/src/examples/V10/CameraAnimation.tsx | 1 -
 example/src/examples/V10/SkyAndTerran.tsx    | 6 +++---
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/example/package.json b/example/package.json
index 405f00752..6321f3b0c 100644
--- a/example/package.json
+++ b/example/package.json
@@ -19,7 +19,7 @@
   "dependencies": {
     "@mapbox/geo-viewport": "^0.5.0",
     "@mapbox/mapbox-sdk": "^0.13.0",
-    "@rnmapbox/maps": "file:..",
+    "@rnmapbox/maps": "file:../rnmapbox-maps-10.0.0-beta.7.tgz",
     "@turf/along": "^6.5.0",
     "@turf/bbox": "^6.5.0",
     "@turf/bbox-polygon": "^6.5.0",
diff --git a/example/src/examples/V10/CameraAnimation.tsx b/example/src/examples/V10/CameraAnimation.tsx
index 7a511aaa1..26981f3d0 100644
--- a/example/src/examples/V10/CameraAnimation.tsx
+++ b/example/src/examples/V10/CameraAnimation.tsx
@@ -281,7 +281,6 @@ const CameraAnimation = (props: any) => {
           animationDuration={1000}
           animationMode={animationMode}
         />
-
         {inputKind === 'declarative' &&
           features.map((f) => {
             const id = JSON.stringify(f.geometry.coordinates);
diff --git a/example/src/examples/V10/SkyAndTerran.tsx b/example/src/examples/V10/SkyAndTerran.tsx
index 46a39aff2..24c7262d7 100644
--- a/example/src/examples/V10/SkyAndTerran.tsx
+++ b/example/src/examples/V10/SkyAndTerran.tsx
@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import { Button } from 'react-native';
-import {
+import MapboxGL, {
   MapView,
   SkyLayer,
   CameraRef,
@@ -34,7 +34,7 @@ function SkyAndTerran(props: BaseExampleProps) {
           })
         }
       />
-      <MapView
+      <MapboxGL.MapView
         style={styles.mapView}
         styleURL={'mapbox://styles/mapbox-map-design/ckhqrf2tz0dt119ny6azh975y'}
       >
@@ -67,7 +67,7 @@ function SkyAndTerran(props: BaseExampleProps) {
 
           <Terrain exaggeration={1.5} />
         </RasterDemSource>
-      </MapView>
+      </MapboxGL.MapView>
     </Page>
   );
 }

From 02ea695e4aa5ff0002ede10e0faf5b838cd1cb86 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 18 May 2022 13:51:47 -0500
Subject: [PATCH 81/84] Add podspec path to instructions

---
 ios/install.md | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/ios/install.md b/ios/install.md
index 107470902..37864f55b 100644
--- a/ios/install.md
+++ b/ios/install.md
@@ -2,9 +2,7 @@
 
 ## React-Native > `0.60.0`
 
-The following assumes, that you're using autolinking and installed
-
-`@rnmapbox/maps` via `npm` or `yarn`.
+The following assumes that you're using autolinking and installed `@rnmapbox/maps` via `npm` or `yarn`.
 
 <br>
 
@@ -12,6 +10,10 @@ The following is required for every following setup
 
 Add the following to your `ios/Podfile`:
 
+```ruby
+  pod 'rnmapbox-maps', :path => '../node_modules/@rnmapbox/maps', :inhibit_warnings => false
+```
+
 ```ruby
   pre_install do |installer|
     $RNMapboxMaps.pre_install(installer)

From 24cf619c76e861d0b2fcad7dc72cf7e3c48913a9 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 18 May 2022 14:26:45 -0500
Subject: [PATCH 82/84] Cleanup

---
 example/src/examples/V10/SkyAndTerran.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/example/src/examples/V10/SkyAndTerran.tsx b/example/src/examples/V10/SkyAndTerran.tsx
index 24c7262d7..6d32ee770 100644
--- a/example/src/examples/V10/SkyAndTerran.tsx
+++ b/example/src/examples/V10/SkyAndTerran.tsx
@@ -1,7 +1,6 @@
 import React, { useRef } from 'react';
 import { Button } from 'react-native';
 import MapboxGL, {
-  MapView,
   SkyLayer,
   CameraRef,
   Camera,
@@ -21,7 +20,7 @@ const styles = {
 
 function SkyAndTerran(props: BaseExampleProps) {
   const cameraRef = useRef<CameraRef>(null);
-  
+
   return (
     <Page {...props}>
       <Button

From d278889930bf76f55dd34f0503d5fab60f9a7fb7 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 18 May 2022 14:27:39 -0500
Subject: [PATCH 83/84] Use unpacked parent dir

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

diff --git a/example/package.json b/example/package.json
index 6321f3b0c..405f00752 100644
--- a/example/package.json
+++ b/example/package.json
@@ -19,7 +19,7 @@
   "dependencies": {
     "@mapbox/geo-viewport": "^0.5.0",
     "@mapbox/mapbox-sdk": "^0.13.0",
-    "@rnmapbox/maps": "file:../rnmapbox-maps-10.0.0-beta.7.tgz",
+    "@rnmapbox/maps": "file:..",
     "@turf/along": "^6.5.0",
     "@turf/bbox": "^6.5.0",
     "@turf/bbox-polygon": "^6.5.0",

From fec8430018b80761b2f7d3b251dab3bea7303f33 Mon Sep 17 00:00:00 2001
From: Naftali Beder <naftali@naftalibeder.com>
Date: Wed, 18 May 2022 14:52:55 -0500
Subject: [PATCH 84/84] Reference Camera directly

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

diff --git a/example/src/examples/V10/CameraAnimation.tsx b/example/src/examples/V10/CameraAnimation.tsx
index 26981f3d0..d450446a3 100644
--- a/example/src/examples/V10/CameraAnimation.tsx
+++ b/example/src/examples/V10/CameraAnimation.tsx
@@ -4,6 +4,7 @@ import MapboxGL, {
   CameraProps,
   CameraAnimationMode,
   CameraRef,
+  Camera,
 } from '@rnmapbox/maps';
 import bbox from '@turf/bbox';
 import { Feature, LineString, Point, Position } from '@turf/helpers';
@@ -271,7 +272,7 @@ const CameraAnimation = (props: any) => {
   return (
     <Page {...props}>
       <MapboxGL.MapView style={styles.map}>
-        <MapboxGL.Camera
+        <Camera
           ref={camera}
           {...centerOrBounds}
           zoomLevel={12}