react-native-maps 1.2.0-beta.2 → 1.3.0-beta.2

package/android/src/main/java/com/airbnb/android/react/maps/AirMapManager.java

@@ -2,6 +2,7 @@ package com.airbnb.android.react.maps;
 
 import android.view.View;
 
+import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 
 import com.facebook.react.bridge.Arguments;
@@ -22,21 +23,11 @@ import com.google.android.gms.maps.GoogleMapOptions;
 import com.google.android.gms.maps.model.LatLng;
 import com.google.android.gms.maps.model.LatLngBounds;
 
-import java.util.HashMap;
 import java.util.Map;
 
 public class AirMapManager extends ViewGroupManager<AirMapView> {
 
   private static final String REACT_CLASS = "AIRMap";
-  private static final int ANIMATE_TO_REGION = 1;
-  private static final int FIT_TO_ELEMENTS = 2;
-  private static final int FIT_TO_SUPPLIED_MARKERS = 3;
-  private static final int FIT_TO_COORDINATES = 4;
-  private static final int SET_MAP_BOUNDARIES = 5;
-  private static final int SET_INDOOR_ACTIVE_LEVEL_INDEX = 6;
-  private static final int SET_CAMERA = 7;
-  private static final int ANIMATE_CAMERA = 8;
-
 
   private final Map<String, Integer> MAP_TYPES = MapBuilder.of(
       "standard", GoogleMap.MAP_TYPE_NORMAL,
@@ -286,30 +277,37 @@ public class AirMapManager extends ViewGroupManager<AirMapView> {
   }
 
   @Override
-  public void receiveCommand(AirMapView view, int commandId, @Nullable ReadableArray args) {
-    Integer duration;
-    Double lat;
-    Double lng;
-    Double lngDelta;
-    Double latDelta;
-    float bearing;
-    float angle;
+  public void receiveCommand(@NonNull AirMapView view, String commandId, @Nullable ReadableArray args) {
+    int duration;
+    double lat;
+    double lng;
+    double lngDelta;
+    double latDelta;
     ReadableMap region;
     ReadableMap camera;
 
     switch (commandId) {
-      case SET_CAMERA:
+      case "setCamera":
+        if(args == null) {
+          break;
+        }
         camera = args.getMap(0);
         view.animateToCamera(camera, 0);
         break;
 
-      case ANIMATE_CAMERA:
+      case "animateCamera":
+        if(args == null) {
+          break;
+        }
         camera = args.getMap(0);
         duration = args.getInt(1);
         view.animateToCamera(camera, duration);
         break;
 
-      case ANIMATE_TO_REGION:
+      case "animateToRegion":
+        if(args == null) {
+          break;
+        }
         region = args.getMap(0);
         duration = args.getInt(1);
         lng = region.getDouble("longitude");
@@ -323,23 +321,38 @@ public class AirMapManager extends ViewGroupManager<AirMapView> {
         view.animateToRegion(bounds, duration);
         break;
 
-      case FIT_TO_ELEMENTS:
+      case "fitToElements":
+        if(args == null) {
+          break;
+        }
         view.fitToElements(args.getMap(0), args.getBoolean(1));
         break;
 
-      case FIT_TO_SUPPLIED_MARKERS:
+      case "fitToSuppliedMarkers":
+        if(args == null) {
+          break;
+        }
         view.fitToSuppliedMarkers(args.getArray(0), args.getMap(1), args.getBoolean(2));
         break;
 
-      case FIT_TO_COORDINATES:
+      case "fitToCoordinates":
+        if(args == null) {
+          break;
+        }
         view.fitToCoordinates(args.getArray(0), args.getMap(1), args.getBoolean(2));
         break;
 
-      case SET_MAP_BOUNDARIES:
+      case "setMapBoundaries":
+        if(args == null) {
+          break;
+        }
         view.setMapBoundaries(args.getMap(0), args.getMap(1));
         break;
 
-      case SET_INDOOR_ACTIVE_LEVEL_INDEX:
+      case "setIndoorActiveLevelIndex":
+        if(args == null) {
+          break;
+        }
         view.setIndoorActiveLevelIndex(args.getInt(0));
         break;
     }
@@ -377,38 +390,6 @@ public class AirMapManager extends ViewGroupManager<AirMapView> {
 
     return map;
   }
-  
-  @Nullable
-  @Override
-  public Map<String, Integer> getCommandsMap() {
-    Map<String, Integer> map = this.CreateMap(
-        "setCamera", SET_CAMERA,
-        "animateCamera", ANIMATE_CAMERA,
-        "animateToRegion", ANIMATE_TO_REGION,
-        "fitToElements", FIT_TO_ELEMENTS,
-        "fitToSuppliedMarkers", FIT_TO_SUPPLIED_MARKERS,
-        "fitToCoordinates", FIT_TO_COORDINATES
-    );
-
-    map.putAll(MapBuilder.of(
-      "setMapBoundaries", SET_MAP_BOUNDARIES,
-      "setIndoorActiveLevelIndex", SET_INDOOR_ACTIVE_LEVEL_INDEX
-    ));
-
-    return map;
-  }
-
-  public static <K, V> Map<K, V> CreateMap(
-  K k1, V v1, K k2, V v2, K k3, V v3, K k4, V v4, K k5, V v5, K k6, V v6) {
-    Map map = new HashMap<K, V>();
-    map.put(k1, v1);
-    map.put(k2, v2);
-    map.put(k3, v3);
-    map.put(k4, v4);
-    map.put(k5, v5);
-    map.put(k6, v6);
-    return map;
-  }
 
   @Override
   public LayoutShadowNode createShadowNodeInstance() {

package/android/src/main/java/com/airbnb/android/react/maps/AirMapMarkerManager.java

@@ -4,6 +4,7 @@ import android.graphics.Bitmap;
 import android.graphics.Color;
 import android.view.View;
 
+import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 
 import com.facebook.react.bridge.ReadableArray;
@@ -24,11 +25,6 @@ import java.util.concurrent.ConcurrentHashMap;
 
 public class AirMapMarkerManager extends ViewGroupManager<AirMapMarker> {
 
-  private static final int SHOW_INFO_WINDOW = 1;
-  private static final int HIDE_INFO_WINDOW = 2;
-  private static final int ANIMATE_MARKER_TO_COORDINATE = 3;
-  private static final int REDRAW = 4;
-
   public static class AirMapMarkerSharedIcon {
     private BitmapDescriptor iconBitmapDescriptor;
     private Bitmap bitmap;
@@ -289,33 +285,25 @@ public class AirMapMarkerManager extends ViewGroupManager<AirMapMarker> {
   }
 
   @Override
-  @Nullable
-  public Map<String, Integer> getCommandsMap() {
-    return MapBuilder.of(
-        "showCallout", SHOW_INFO_WINDOW,
-        "hideCallout", HIDE_INFO_WINDOW,
-        "animateMarkerToCoordinate", ANIMATE_MARKER_TO_COORDINATE,
-        "redraw", REDRAW
-    );
-  }
-
-  @Override
-  public void receiveCommand(AirMapMarker view, int commandId, @Nullable ReadableArray args) {
-    Integer duration;
-    Double lat;
-    Double lng;
+  public void receiveCommand(@NonNull AirMapMarker view, String commandId, @Nullable ReadableArray args) {
+    int duration;
+    double lat;
+    double lng;
     ReadableMap region;
 
     switch (commandId) {
-      case SHOW_INFO_WINDOW:
+      case "showCallout":
         ((Marker) view.getFeature()).showInfoWindow();
         break;
 
-      case HIDE_INFO_WINDOW:
+      case "hideCallout":
         ((Marker) view.getFeature()).hideInfoWindow();
         break;
 
-      case ANIMATE_MARKER_TO_COORDINATE:
+      case "animateMarkerToCoordinate":
+        if(args == null) {
+          break;
+        }
         region = args.getMap(0);
         duration = args.getInt(1);
 
@@ -324,7 +312,7 @@ public class AirMapMarkerManager extends ViewGroupManager<AirMapMarker> {
         view.animateToCoodinate(new LatLng(lat, lng), duration);
         break;
 
-      case REDRAW:
+      case "redraw":
         view.updateMarkerIcon();
         break;
     }

package/ios/AirGoogleMaps/AIRGoogleMapCircle.h

@@ -14,9 +14,9 @@
 @property (nonatomic, strong) GMSCircle *circle;
 @property (nonatomic, assign) double radius;
 @property (nonatomic, assign) CLLocationCoordinate2D centerCoordinate;
-@property (nonatomic, assign) UIColor *strokeColor;
+@property (nonatomic, strong) UIColor *strokeColor;
 @property (nonatomic, assign) double strokeWidth;
-@property (nonatomic, assign) UIColor *fillColor;
+@property (nonatomic, strong) UIColor *fillColor;
 @property (nonatomic, assign) int zIndex;
 
 @end

package/ios/AirGoogleMaps/AIRGoogleMapCircle.m

@@ -11,15 +11,34 @@
 #import <React/RCTUtils.h>
 
 @implementation AIRGoogleMapCircle
+{
+  BOOL _didMoveToWindow;
+}
 
 - (instancetype)init
 {
   if (self = [super init]) {
+    _didMoveToWindow = false;
     _circle = [[GMSCircle alloc] init];
   }
   return self;
 }
 
+- (void)didMoveToWindow {
+  [super didMoveToWindow];
+  if(_didMoveToWindow) return;
+  _didMoveToWindow = true;
+  if(_fillColor) {
+    _circle.fillColor = _fillColor;
+  }
+  if(_strokeColor) {
+    _circle.strokeColor = _strokeColor;
+  }
+  if(_strokeWidth) {
+    _circle.strokeWidth = _strokeWidth;
+  }
+}
+
 - (void)setRadius:(double)radius
 {
   _radius = radius;
@@ -35,19 +54,25 @@
 -(void)setStrokeColor:(UIColor *)strokeColor
 {
   _strokeColor = strokeColor;
-  _circle.strokeColor = strokeColor;
+  if(_didMoveToWindow) {
+    _circle.strokeColor = strokeColor;
+  }
 }
 
 -(void)setStrokeWidth:(double)strokeWidth
 {
   _strokeWidth = strokeWidth;
-  _circle.strokeWidth = strokeWidth;
+  if(_didMoveToWindow) {
+    _circle.strokeWidth = strokeWidth;
+  }
 }
 
 -(void)setFillColor:(UIColor *)fillColor
 {
   _fillColor = fillColor;
-  _circle.fillColor = fillColor;
+  if(_didMoveToWindow) {
+    _circle.fillColor = fillColor;
+  }
 }
 
 -(void)setZIndex:(int)zIndex

package/ios/AirGoogleMaps/AIRGoogleMapPolygon.h

@@ -20,9 +20,9 @@
 @property (nonatomic, strong) NSArray<NSArray<AIRMapCoordinate *> *> *holes;
 @property (nonatomic, copy) RCTBubblingEventBlock onPress;
 
-@property (nonatomic, assign) UIColor *fillColor;
+@property (nonatomic, strong) UIColor *fillColor;
 @property (nonatomic, assign) double strokeWidth;
-@property (nonatomic, assign) UIColor *strokeColor;
+@property (nonatomic, strong) UIColor *strokeColor;
 @property (nonatomic, assign) BOOL geodesic;
 @property (nonatomic, assign) int zIndex;
 @property (nonatomic, assign) BOOL tappable;

package/ios/AirGoogleMaps/AIRGoogleMapPolygon.m

@@ -11,16 +11,35 @@
 #import <GoogleMaps/GoogleMaps.h>
 
 @implementation AIRGoogleMapPolygon
+{
+  BOOL _didMoveToWindow;
+}
 
 - (instancetype)init
 {
   if (self = [super init]) {
+    _didMoveToWindow = false;
     _polygon = [[AIRGMSPolygon alloc] init];
   }
 
   return self;
 }
 
+- (void)didMoveToWindow {
+  [super didMoveToWindow];
+  if(_didMoveToWindow) return;
+  _didMoveToWindow = true;
+  if(_fillColor) {
+    _polygon.fillColor = _fillColor;
+  }
+  if(_strokeColor) {
+    _polygon.strokeColor = _strokeColor;
+  }
+  if(_strokeWidth) {
+    _polygon.strokeWidth = _strokeWidth;
+  }
+}
+
 - (void)setCoordinates:(NSArray<AIRMapCoordinate *> *)coordinates
 {
   _coordinates = coordinates;
@@ -58,19 +77,25 @@
 -(void)setFillColor:(UIColor *)fillColor
 {
   _fillColor = fillColor;
-  _polygon.fillColor = fillColor;
+  if(_didMoveToWindow) {
+    _polygon.fillColor = fillColor;
+  }
 }
 
 -(void)setStrokeWidth:(double)strokeWidth
 {
   _strokeWidth = strokeWidth;
-  _polygon.strokeWidth = strokeWidth;
+  if(_didMoveToWindow) {
+    _polygon.strokeWidth = strokeWidth;
+  }
 }
 
 -(void)setStrokeColor:(UIColor *) strokeColor
 {
   _strokeColor = strokeColor;
-  _polygon.strokeColor = strokeColor;
+  if(_didMoveToWindow) {
+    _polygon.strokeColor = strokeColor;
+  }
 }
 
 -(void)setGeodesic:(BOOL)geodesic

package/lib/MapMarker.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { Animated, ViewProps, ImageURISource, ImageRequireSource, View } from 'react-native';
+import { Animated, ViewProps, ImageURISource, ImageRequireSource } from 'react-native';
 import { MapManagerCommand, NativeComponent, ProviderContext, UIManagerCommand } from './decorateMapComponent';
+import { MapMarkerNativeComponentType } from './MapMarkerNativeComponent';
 import { CalloutPressEvent, LatLng, MarkerDeselectEvent, MarkerDragEvent, MarkerDragStartEndEvent, MarkerPressEvent, MarkerSelectEvent, Point } from './sharedTypes';
 import { Modify } from './sharedTypesInternal';
 export declare type MapMarkerProps = ViewProps & {
@@ -261,11 +262,11 @@ export declare type MapMarkerProps = ViewProps & {
     zIndex?: number;
 };
 declare type OmittedProps = Omit<MapMarkerProps, 'stopPropagation'>;
-declare type NativeProps = Modify<OmittedProps, {
+export declare type NativeProps = Modify<OmittedProps, {
     icon?: string;
     image?: MapMarkerProps['image'] | string;
 }> & {
-    ref: React.RefObject<View>;
+    ref: React.RefObject<MapMarkerNativeComponentType>;
 };
 export declare class MapMarker extends React.Component<MapMarkerProps> {
     context: React.ContextType<typeof ProviderContext>;
@@ -275,16 +276,17 @@ export declare class MapMarker extends React.Component<MapMarkerProps> {
     static Animated: Animated.AnimatedComponent<typeof MapMarker>;
     private marker;
     constructor(props: MapMarkerProps);
+    /**
+     * @deprecated Will be removed in v2.0.0, as setNativeProps is not a thing in fabric.
+     * See https://reactnative.dev/docs/new-architecture-library-intro#migrating-off-setnativeprops
+     */
     setNativeProps(props: Partial<NativeProps>): void;
     showCallout(): void;
     hideCallout(): void;
     redrawCallout(): void;
     animateMarkerToCoordinate(coordinate: LatLng, duration?: number): void;
     redraw(): void;
-    _getHandle(): number | null;
-    _runCommand(name: NativeCommandName, args: any[]): void;
     render(): JSX.Element;
 }
 declare const _default: typeof MapMarker;
 export default _default;
-declare type NativeCommandName = 'showCallout' | 'hideCallout' | 'redrawCallout' | 'animateMarkerToCoordinate' | 'redraw';

package/lib/MapMarker.js

@@ -27,6 +27,7 @@ exports.MapMarker = void 0;
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const decorateMapComponent_1 = __importStar(require("./decorateMapComponent"));
+const MapMarkerNativeComponent_1 = require("./MapMarkerNativeComponent");
 class MapMarker extends React.Component {
     getNativeComponent;
     getMapManagerCommand;
@@ -41,37 +42,38 @@ class MapMarker extends React.Component {
         this.redrawCallout = this.redrawCallout.bind(this);
         this.animateMarkerToCoordinate = this.animateMarkerToCoordinate.bind(this);
     }
+    /**
+     * @deprecated Will be removed in v2.0.0, as setNativeProps is not a thing in fabric.
+     * See https://reactnative.dev/docs/new-architecture-library-intro#migrating-off-setnativeprops
+     */
     setNativeProps(props) {
+        console.warn('setNativeProps is deprecated and will be removed in next major release');
+        // @ts-ignore
         this.marker.current?.setNativeProps(props);
     }
     showCallout() {
-        this._runCommand('showCallout', []);
+        if (this.marker.current) {
+            MapMarkerNativeComponent_1.Commands.showCallout(this.marker.current);
+        }
     }
     hideCallout() {
-        this._runCommand('hideCallout', []);
+        if (this.marker.current) {
+            MapMarkerNativeComponent_1.Commands.hideCallout(this.marker.current);
+        }
     }
     redrawCallout() {
-        this._runCommand('redrawCallout', []);
+        if (this.marker.current) {
+            MapMarkerNativeComponent_1.Commands.redrawCallout(this.marker.current);
+        }
     }
     animateMarkerToCoordinate(coordinate, duration = 500) {
-        this._runCommand('animateMarkerToCoordinate', [coordinate, duration]);
+        if (this.marker.current) {
+            MapMarkerNativeComponent_1.Commands.animateMarkerToCoordinate(this.marker.current, coordinate, duration);
+        }
     }
     redraw() {
-        this._runCommand('redraw', []);
-    }
-    _getHandle() {
-        return (0, react_native_1.findNodeHandle)(this.marker.current);
-    }
-    _runCommand(name, args) {
-        switch (react_native_1.Platform.OS) {
-            case 'android':
-                react_native_1.UIManager.dispatchViewManagerCommand(this._getHandle(), this.getUIManagerCommand(name), args);
-                break;
-            case 'ios':
-                this.getMapManagerCommand(name)(this._getHandle(), ...args);
-                break;
-            default:
-                break;
+        if (this.marker.current) {
+            MapMarkerNativeComponent_1.Commands.redraw(this.marker.current);
         }
     }
     render() {

package/lib/MapMarkerNativeComponent.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { HostComponent } from 'react-native';
+import { NativeProps } from './MapMarker';
+import { LatLng } from './sharedTypes';
+export declare type MapMarkerNativeComponentType = HostComponent<NativeProps>;
+interface NativeCommands {
+    showCallout: (viewRef: NonNullable<React.RefObject<MapMarkerNativeComponentType>['current']>) => void;
+    hideCallout: (viewRef: NonNullable<React.RefObject<MapMarkerNativeComponentType>['current']>) => void;
+    redrawCallout: (viewRef: NonNullable<React.RefObject<MapMarkerNativeComponentType>['current']>) => void;
+    animateMarkerToCoordinate: (viewRef: NonNullable<React.RefObject<MapMarkerNativeComponentType>['current']>, coordinate: LatLng, duration: number) => void;
+    redraw: (viewRef: NonNullable<React.RefObject<MapMarkerNativeComponentType>['current']>) => void;
+}
+export declare const Commands: NativeCommands;
+export {};

package/lib/MapMarkerNativeComponent.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Commands = void 0;
+const codegenNativeCommands_1 = __importDefault(require("react-native/Libraries/Utilities/codegenNativeCommands"));
+exports.Commands = (0, codegenNativeCommands_1.default)({
+    supportedCommands: [
+        'showCallout',
+        'hideCallout',
+        'redrawCallout',
+        'animateMarkerToCoordinate',
+        'redraw',
+    ],
+});

package/lib/MapPolygon.d.ts

@@ -133,7 +133,6 @@ export declare class MapPolygon extends React.Component<MapPolygonProps> {
     private polygon;
     constructor(props: MapPolygonProps);
     setNativeProps(props: Partial<MapPolygonProps>): void;
-    updateNativeProps(): () => void;
     render(): JSX.Element;
 }
 declare const _default: typeof MapPolygon;

package/lib/MapPolygon.js

@@ -26,7 +26,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MapPolygon = void 0;
 const React = __importStar(require("react"));
 const decorateMapComponent_1 = __importStar(require("./decorateMapComponent"));
-const ProviderConstants = __importStar(require("./ProviderConstants"));
 class MapPolygon extends React.Component {
     getNativeComponent;
     getMapManagerCommand;
@@ -39,30 +38,10 @@ class MapPolygon extends React.Component {
     setNativeProps(props) {
         this.polygon.current?.setNativeProps(props);
     }
-    updateNativeProps() {
-        return () => {
-            const { fillColor, strokeColor, strokeWidth } = this.props;
-            let polygonNativeProps = {};
-            if (fillColor) {
-                polygonNativeProps.fillColor = fillColor;
-            }
-            if (strokeColor) {
-                polygonNativeProps.strokeColor = strokeColor;
-            }
-            if (strokeWidth) {
-                polygonNativeProps.strokeWidth = strokeWidth;
-            }
-            if (polygonNativeProps) {
-                this.setNativeProps(polygonNativeProps);
-            }
-        };
-    }
     render() {
         const { strokeColor = '#000', strokeWidth = 1 } = this.props;
         const AIRMapPolygon = this.getNativeComponent();
-        return (<AIRMapPolygon {...this.props} strokeColor={strokeColor} strokeWidth={strokeWidth} ref={this.polygon} onLayout={this.context === ProviderConstants.PROVIDER_GOOGLE
-                ? this.updateNativeProps()
-                : undefined}/>);
+        return (<AIRMapPolygon {...this.props} strokeColor={strokeColor} strokeWidth={strokeWidth} ref={this.polygon}/>);
     }
 }
 exports.MapPolygon = MapPolygon;

package/lib/MapView.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { Animated as RNAnimated, Animated, NativeSyntheticEvent, View, ViewProps } from 'react-native';
+import { Animated as RNAnimated, Animated, NativeSyntheticEvent, ViewProps } from 'react-native';
 import { CalloutPressEvent, ClickEvent, Frame, LatLng, MarkerDeselectEvent, MarkerDragEvent, MarkerDragStartEndEvent, MarkerPressEvent, MarkerSelectEvent, Point, Provider, Region } from './sharedTypes';
 import { Address, BoundingBox, Camera, ChangeEvent, Details, EdgePadding, FitToOptions, IndoorBuildingEvent, IndoorLevelActivatedEvent, KmlMapEvent, LongPressEvent, MapPressEvent, MapStyleElement, MapType, MapTypes, PanDragEvent, PoiClickEvent, SnapshotOptions, UserLocationChangeEvent } from './MapView.types';
 import { Modify } from './sharedTypesInternal';
+import { MapViewNativeComponentType } from './MapViewNativeComponent';
 export declare const MAP_TYPES: MapTypes;
 export declare type MapViewProps = ViewProps & {
     /**
@@ -559,8 +560,8 @@ declare type ModifiedProps = Modify<MapViewProps, {
     region?: MapViewProps['region'] | null;
     initialRegion?: MapViewProps['initialRegion'] | null;
 }>;
-declare type NativeProps = Omit<ModifiedProps, 'customMapStyle' | 'onRegionChange' | 'onRegionChangeComplete'> & {
-    ref: React.RefObject<View>;
+export declare type NativeProps = Omit<ModifiedProps, 'customMapStyle' | 'onRegionChange' | 'onRegionChangeComplete'> & {
+    ref: React.RefObject<MapViewNativeComponentType>;
     customMapStyleString?: string;
     handlePanDrag?: boolean;
     onChange?: (e: ChangeEvent) => void;
@@ -572,6 +573,10 @@ declare class MapView extends React.Component<MapViewProps, State> {
     static Animated: Animated.AnimatedComponent<typeof MapView>;
     private map;
     constructor(props: MapViewProps);
+    /**
+     * @deprecated Will be removed in v2.0.0, as setNativeProps is not a thing in fabric.
+     * See https://reactnative.dev/docs/new-architecture-library-intro#migrating-off-setnativeprops
+     */
     setNativeProps(props: Partial<NativeProps>): void;
     private _onMapReady;
     private _onChange;
@@ -658,9 +663,7 @@ declare class MapView extends React.Component<MapViewProps, State> {
      * @return Object Object bounding box ({ northEast: <LatLng>, southWest: <LatLng> })
      */
     boundingBoxForRegion(region: Region): BoundingBox;
-    private _uiManagerCommand;
     private _mapManagerCommand;
-    private _getHandle;
     private _runCommand;
     render(): JSX.Element;
 }

package/lib/MapView.js

@@ -28,6 +28,7 @@ const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const decorateMapComponent_1 = require("./decorateMapComponent");
 const ProviderConstants = __importStar(require("./ProviderConstants"));
+const MapViewNativeComponent_1 = require("./MapViewNativeComponent");
 exports.MAP_TYPES = {
     STANDARD: 'standard',
     SATELLITE: 'satellite',
@@ -49,7 +50,13 @@ class MapView extends React.Component {
         this._onMapReady = this._onMapReady.bind(this);
         this._onChange = this._onChange.bind(this);
     }
+    /**
+     * @deprecated Will be removed in v2.0.0, as setNativeProps is not a thing in fabric.
+     * See https://reactnative.dev/docs/new-architecture-library-intro#migrating-off-setnativeprops
+     */
     setNativeProps(props) {
+        console.warn('setNativeProps is deprecated and will be removed in next major release');
+        // @ts-ignore
         this.map.current?.setNativeProps(props);
     }
     _onMapReady() {
@@ -74,7 +81,7 @@ class MapView extends React.Component {
     }
     getCamera() {
         if (react_native_1.Platform.OS === 'android') {
-            return react_native_1.NativeModules.AirMapModule.getCamera(this._getHandle());
+            return react_native_1.NativeModules.AirMapModule.getCamera(this.map.current);
         }
         else if (react_native_1.Platform.OS === 'ios') {
             return this._runCommand('getCamera', []);
@@ -82,25 +89,37 @@ class MapView extends React.Component {
         return Promise.reject('getCamera not supported on this platform');
     }
     setCamera(camera) {
-        this._runCommand('setCamera', [camera]);
+        if (this.map.current) {
+            MapViewNativeComponent_1.Commands.setCamera(this.map.current, camera);
+        }
     }
     animateCamera(camera, opts) {
-        this._runCommand('animateCamera', [camera, opts ? opts.duration : 500]);
+        if (this.map.current) {
+            MapViewNativeComponent_1.Commands.animateCamera(this.map.current, camera, opts?.duration ? opts.duration : 500);
+        }
     }
     animateToRegion(region, duration = 500) {
-        this._runCommand('animateToRegion', [region, duration]);
+        if (this.map.current) {
+            MapViewNativeComponent_1.Commands.animateToRegion(this.map.current, region, duration);
+        }
     }
     fitToElements(options = {}) {
-        const { edgePadding = { top: 0, right: 0, bottom: 0, left: 0 }, animated = true, } = options;
-        this._runCommand('fitToElements', [edgePadding, animated]);
+        if (this.map.current) {
+            const { edgePadding = { top: 0, right: 0, bottom: 0, left: 0 }, animated = true, } = options;
+            MapViewNativeComponent_1.Commands.fitToElements(this.map.current, edgePadding, animated);
+        }
     }
     fitToSuppliedMarkers(markers, options = {}) {
-        const { edgePadding = { top: 0, right: 0, bottom: 0, left: 0 }, animated = true, } = options;
-        this._runCommand('fitToSuppliedMarkers', [markers, edgePadding, animated]);
+        if (this.map.current) {
+            const { edgePadding = { top: 0, right: 0, bottom: 0, left: 0 }, animated = true, } = options;
+            MapViewNativeComponent_1.Commands.fitToSuppliedMarkers(this.map.current, markers, edgePadding, animated);
+        }
     }
     fitToCoordinates(coordinates = [], options = {}) {
-        const { edgePadding = { top: 0, right: 0, bottom: 0, left: 0 }, animated = true, } = options;
-        this._runCommand('fitToCoordinates', [coordinates, edgePadding, animated]);
+        if (this.map.current) {
+            const { edgePadding = { top: 0, right: 0, bottom: 0, left: 0 }, animated = true, } = options;
+            MapViewNativeComponent_1.Commands.fitToCoordinates(this.map.current, coordinates, edgePadding, animated);
+        }
     }
     /**
      * Get visible boudaries
@@ -109,7 +128,7 @@ class MapView extends React.Component {
      */
     async getMapBoundaries() {
         if (react_native_1.Platform.OS === 'android') {
-            return await react_native_1.NativeModules.AirMapModule.getMapBoundaries(this._getHandle());
+            return await react_native_1.NativeModules.AirMapModule.getMapBoundaries(this.map.current);
         }
         else if (react_native_1.Platform.OS === 'ios') {
             return await this._runCommand('getMapBoundaries', []);
@@ -117,10 +136,14 @@ class MapView extends React.Component {
         return Promise.reject('getMapBoundaries not supported on this platform');
     }
     setMapBoundaries(northEast, southWest) {
-        this._runCommand('setMapBoundaries', [northEast, southWest]);
+        if (this.map.current) {
+            MapViewNativeComponent_1.Commands.setMapBoundaries(this.map.current, northEast, southWest);
+        }
     }
     setIndoorActiveLevelIndex(activeLevelIndex) {
-        this._runCommand('setIndoorActiveLevelIndex', [activeLevelIndex]);
+        if (this.map.current) {
+            MapViewNativeComponent_1.Commands.setIndoorActiveLevelIndex(this.map.current, activeLevelIndex);
+        }
     }
     /**
      * Takes a snapshot of the map and saves it to a picture
@@ -154,7 +177,7 @@ class MapView extends React.Component {
         }
         // Call native function
         if (react_native_1.Platform.OS === 'android') {
-            return react_native_1.NativeModules.AirMapModule.takeSnapshot(this._getHandle(), config);
+            return react_native_1.NativeModules.AirMapModule.takeSnapshot(this.map.current, config);
         }
         else if (react_native_1.Platform.OS === 'ios') {
             return new Promise((resolve, reject) => {
@@ -189,7 +212,7 @@ class MapView extends React.Component {
      */
     addressForCoordinate(coordinate) {
         if (react_native_1.Platform.OS === 'android') {
-            return react_native_1.NativeModules.AirMapModule.getAddressFromCoordinates(this._getHandle(), coordinate);
+            return react_native_1.NativeModules.AirMapModule.getAddressFromCoordinates(this.map.current, coordinate);
         }
         else if (react_native_1.Platform.OS === 'ios') {
             return this._runCommand('getAddressFromCoordinates', [coordinate]);
@@ -207,7 +230,7 @@ class MapView extends React.Component {
      */
     pointForCoordinate(coordinate) {
         if (react_native_1.Platform.OS === 'android') {
-            return react_native_1.NativeModules.AirMapModule.pointForCoordinate(this._getHandle(), coordinate);
+            return react_native_1.NativeModules.AirMapModule.pointForCoordinate(this.map.current, coordinate);
         }
         else if (react_native_1.Platform.OS === 'ios') {
             return this._runCommand('pointForCoordinate', [coordinate]);
@@ -225,7 +248,7 @@ class MapView extends React.Component {
      */
     coordinateForPoint(point) {
         if (react_native_1.Platform.OS === 'android') {
-            return react_native_1.NativeModules.AirMapModule.coordinateForPoint(this._getHandle(), point);
+            return react_native_1.NativeModules.AirMapModule.coordinateForPoint(this.map.current, point);
         }
         else if (react_native_1.Platform.OS === 'ios') {
             return this._runCommand('coordinateForPoint', [point]);
@@ -264,24 +287,15 @@ class MapView extends React.Component {
             },
         };
     }
-    _uiManagerCommand(name) {
-        const componentName = (0, decorateMapComponent_1.getNativeMapName)(this.props.provider);
-        return react_native_1.UIManager.getViewManagerConfig(componentName).Commands[name];
-    }
     _mapManagerCommand(name) {
         return react_native_1.NativeModules[`${(0, decorateMapComponent_1.getNativeMapName)(this.props.provider)}Manager`][name];
     }
-    _getHandle() {
-        return (0, react_native_1.findNodeHandle)(this.map.current);
-    }
     _runCommand(name, args) {
-        switch (react_native_1.Platform.OS) {
-            case 'android':
-                return react_native_1.UIManager.dispatchViewManagerCommand(this._getHandle(), this._uiManagerCommand(name), args);
-            case 'ios':
-                return this._mapManagerCommand(name)(this._getHandle(), ...args);
-            default:
-                return Promise.reject(`Invalid platform was passed: ${react_native_1.Platform.OS}`);
+        if (react_native_1.Platform.OS === 'ios') {
+            return this._mapManagerCommand(name)(this.map.current, ...args);
+        }
+        else {
+            return Promise.reject(`Invalid platform was passed: ${react_native_1.Platform.OS}`);
         }
     }
     render() {

package/lib/MapViewNativeComponent.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import type { HostComponent } from 'react-native';
+import { NativeProps } from './MapView';
+import { Camera, EdgePadding } from './MapView.types';
+import { LatLng, Region } from './sharedTypes';
+export declare type MapViewNativeComponentType = HostComponent<NativeProps>;
+interface NativeCommands {
+    animateToRegion: (viewRef: NonNullable<React.RefObject<MapViewNativeComponentType>['current']>, region: Region, duration: number) => void;
+    setCamera: (viewRef: NonNullable<React.RefObject<MapViewNativeComponentType>['current']>, camera: Partial<Camera>) => void;
+    animateCamera: (viewRef: NonNullable<React.RefObject<MapViewNativeComponentType>['current']>, camera: Partial<Camera>, duration: number) => void;
+    fitToElements: (viewRef: NonNullable<React.RefObject<MapViewNativeComponentType>['current']>, edgePadding: EdgePadding, animated: boolean) => void;
+    fitToSuppliedMarkers: (viewRef: NonNullable<React.RefObject<MapViewNativeComponentType>['current']>, markers: string[], edgePadding: EdgePadding, animated: boolean) => void;
+    fitToCoordinates: (viewRef: NonNullable<React.RefObject<MapViewNativeComponentType>['current']>, coordinates: LatLng[], edgePadding: EdgePadding, animated: boolean) => void;
+    setMapBoundaries: (viewRef: NonNullable<React.RefObject<MapViewNativeComponentType>['current']>, northEast: LatLng, southWest: LatLng) => void;
+    setIndoorActiveLevelIndex: (viewRef: NonNullable<React.RefObject<MapViewNativeComponentType>['current']>, activeLevelIndex: number) => void;
+}
+export declare const Commands: NativeCommands;
+export {};

package/lib/MapViewNativeComponent.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Commands = void 0;
+const codegenNativeCommands_1 = __importDefault(require("react-native/Libraries/Utilities/codegenNativeCommands"));
+exports.Commands = (0, codegenNativeCommands_1.default)({
+    supportedCommands: [
+        'animateToRegion',
+        'setCamera',
+        'animateCamera',
+        'fitToElements',
+        'fitToSuppliedMarkers',
+        'fitToCoordinates',
+        'setMapBoundaries',
+        'setIndoorActiveLevelIndex',
+    ],
+});

package/package.json

@@ -5,7 +5,7 @@
   "main": "lib/index.js",
   "author": "Leland Richardson <leland.m.richardson@gmail.com>",
   "homepage": "https://github.com/react-native-maps/react-native-maps#readme",
-  "version": "1.2.0-beta.2",
+  "version": "1.3.0-beta.2",
   "license": "MIT",
   "scripts": {
     "lint": "eslint . --max-warnings 0",