Provide focal point

android/src/main/java/com/rnmapbox/rnmbx/components/mapview/RNMBXMapViewManager.kt

@@ -15,6 +15,7 @@ import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.viewmanagers.RNMBXMapViewManagerDelegate
 import com.facebook.react.viewmanagers.RNMBXMapViewManagerInterface
 import com.mapbox.maps.MapInitOptions
+import com.mapbox.maps.ScreenCoordinate
 import com.mapbox.maps.extension.style.layers.properties.generated.ProjectionName
 import com.mapbox.maps.plugin.gestures.gestures
 import com.mapbox.maps.plugin.logo.logo
@@ -26,6 +27,7 @@ import com.rnmapbox.rnmbx.utils.Logger
 import com.rnmapbox.rnmbx.utils.ViewTagResolver
 import com.rnmapbox.rnmbx.utils.extensions.getAndLogIfNotBoolean
 import com.rnmapbox.rnmbx.utils.extensions.getAndLogIfNotDouble
+import com.rnmapbox.rnmbx.utils.extensions.getAndLogIfNotMap
 import com.rnmapbox.rnmbx.utils.extensions.toCoordinate
 import com.rnmapbox.rnmbx.utils.extensions.toRectF
 import com.rnmapbox.rnmbx.utils.extensions.toScreenCoordinate
@@ -209,8 +211,20 @@ open class RNMBXMapViewManager(context: ReactApplicationContext, val viewTagReso
                    map.getAndLogIfNotDouble("zoomAnimationAmount", LOG_TAG)?.let {
                        this.zoomAnimationAmount = it.toFloat()
                    }
-               }
-           }
+                   val focalPointMap = map.getAndLogIfNotMap("focalPoint", LOG_TAG)
+                   if (focalPointMap != null) {
+                       val x = focalPointMap.getAndLogIfNotDouble("x", LOG_TAG)
+                       val y = focalPointMap.getAndLogIfNotDouble("y", LOG_TAG)
+                       if (x != null && y != null) {
+                           this.focalPoint = ScreenCoordinate(x, y)
+                       } else {
+                           this.focalPoint = null
+                       }
+                   } else {
+                       this.focalPoint = null
+                   }
+                }
+            }
         }
     }
 

ios/RNMBX/RNMBXMapView.swift

@@ -605,6 +605,7 @@ open class RNMBXMapView: UIView, RCTInvalidating {
     #if RNMBX_11
     var simultaneousRotateAndPinchZoomEnabled: Bool? = nil;
     #endif
+    var focalPoint: CGPoint? = nil;
   }
 
   var gestureSettings = GestureSettings()
@@ -654,6 +655,16 @@ open class RNMBXMapView: UIView, RCTInvalidating {
         options.simultaneousRotateAndPinchZoomEnabled = simultaneousRotateAndPinchZoomEnabled.boolValue
       }
 #endif
+      if let focalPoint = value["focalPoint"] as? NSDictionary {
+        if let x = focalPoint["x"] as? NSNumber, let y = focalPoint["y"] as? NSNumber {
+          options.focalPoint = CGPoint(x: x.doubleValue, y: y.doubleValue)
+        } else {
+          options.focalPoint = nil
+        }
+      } else {
+        options.focalPoint = nil
+      }
+
       /* android only
        if let zoomAnimationAmount = value["zoomAnimationAmount"] as? NSNumber {
        options.zoomAnimationAmount = zoomAnimationAmount.CGFloat
@@ -704,6 +715,7 @@ open class RNMBXMapView: UIView, RCTInvalidating {
         options.simultaneousRotateAndPinchZoomEnabled = simultaneousRotateAndPinchZoomEnabled
       }
 #endif
+      options.focalPoint = settings.focalPoint
       /* android only
        if let zoomAnimationAmount = value["zoomAnimationAmount"] as? NSNumber {
        options.zoomAnimationAmount = zoomAnimationAmount.CGFloat

src/components/MapView.tsx

@@ -74,6 +74,12 @@ export type GestureSettings = {
    * Whether single tapping the map with two touches results in a zoom-out animation.
    */
   doubleTouchToZoomOutEnabled?: boolean;
+  /**
+   * By default, gestures rotate and zoom around the center of the gesture. Set
+   * this property to rotate and zoom around a fixed point instead.
+   */
+  focalPoint?: Point;
+
   /**
    * Whether pan/scroll is enabled for the pinch gesture.
    */

src/specs/RNMBXMapViewNativeComponent.ts

@@ -18,6 +18,7 @@ type GestureSettings = {
   doubleTouchToZoomOutEnabled?: boolean;
   pinchScrollEnabled?: boolean;
   pinchToZoomDecelerationEnabled?: boolean;
+  focalPoint?: Point;
 };
 
 type LocalizeLabels =