feat(MapView): migrate setMapBoundaries to boundary prop

BREAKING CHANGE: migrated `setMapBoundaries` method to `boundary` prop.

android/src/main/java/com/rnmaps/maps/MapManager.java

@@ -274,6 +274,11 @@ public void setKmlSrc(MapView view, String kmlUrl) {
     }
   }
 
+  @ReactProp(name = "boundary")
+  public void setBoundary(MapView view, ReadableMap boundary) {
+    view.setBoundary(boundary);
+  }
+
   @Override
   public void receiveCommand(@NonNull MapView view, String commandId, @Nullable ReadableArray args) {
     ReadableMap camera;
@@ -287,13 +292,6 @@ public void receiveCommand(@NonNull MapView view, String commandId, @Nullable Re
         view.animateToCamera(camera, 0);
         break;
 
-      case "setMapBoundaries":
-        if(args == null) {
-          break;
-        }
-        view.setMapBoundaries(args.getMap(0), args.getMap(1));
-        break;
-
       case "setIndoorActiveLevelIndex":
         if(args == null) {
           break;

android/src/main/java/com/rnmaps/maps/MapView.java

@@ -110,6 +110,7 @@ public class MapView extends com.google.android.gms.maps.MapView implements Goog
   private boolean initialCameraSet = false;
   private LatLngBounds cameraLastIdleBounds;
   private int cameraMoveReason = 0;
+  private LatLngBounds boundary;
 
   private static final String[] PERMISSIONS = new String[]{
       "android.permission.ACCESS_FINE_LOCATION", "android.permission.ACCESS_COARSE_LOCATION"};
@@ -500,7 +501,42 @@ public void setInitialCamera(ReadableMap initialCamera) {
     }
   }
 
+  public void setBoundary(ReadableMap boundary) {
+    if(boundary == null) {
+      this.boundary = null;
+      if(map != null) {
+        // consumers can pass null to clear boundary
+        map.setLatLngBoundsForCameraTarget(null);
+      }
+    } else {
+      LatLngBounds.Builder builder = new LatLngBounds.Builder();
+
+      ReadableMap northEast = boundary.getMap("northEast");
+      ReadableMap southWest = boundary.getMap("southWest");
+
+      double neLat = northEast.getDouble("latitude");
+      double neLng = northEast.getDouble("longitude");
+      builder.include(new LatLng(neLat, neLng));
+
+      double swLat = southWest.getDouble("latitude");
+      double swLng = southWest.getDouble("longitude");
+      builder.include(new LatLng(swLat, swLng));
+
+      LatLngBounds bounds = builder.build();
+
+      this.boundary = bounds;
+
+      if(map != null) {
+        map.setLatLngBoundsForCameraTarget(bounds);
+      }
+    }
+  }
+
+  // called as soon as the map is ready. Assuming nothing was set on the map at this point.
   private void applyBridgedProps() {
+    if(boundary != null) {
+      map.setLatLngBoundsForCameraTarget(boundary);
+    }
     if(initialRegion != null) {
       moveToRegion(initialRegion);
       initialRegionSet = true;
@@ -905,24 +941,6 @@ public double[][] getMapBoundaries() {
     };
   }
 
-  public void setMapBoundaries(ReadableMap northEast, ReadableMap southWest) {
-    if (map == null) return;
-
-    LatLngBounds.Builder builder = new LatLngBounds.Builder();
-
-    double latNE = northEast.getDouble("latitude");
-    double lngNE = northEast.getDouble("longitude");
-    builder.include(new LatLng(latNE, lngNE));
-
-    double latSW = southWest.getDouble("latitude");
-    double lngSW = southWest.getDouble("longitude");
-    builder.include(new LatLng(latSW, lngSW));
-
-    LatLngBounds bounds = builder.build();
-
-    map.setLatLngBoundsForCameraTarget(bounds);
-  }
-
   // InfoWindowAdapter interface
 
   @Override

docs/mapview.md

@@ -4,6 +4,7 @@
 
 | Prop                              | Type                                 | Default      | Note                                                                                                                                                                                                                                                                                                                                                               |
 | --------------------------------- | ------------------------------------ | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `boundary`                        | `BoundingBox`                        |              | A boundary of an area within which the map’s center needs to remain. **Note:** Google Maps only.                                                                                                                                                                                                                                                                   |
 | `cacheEnabled`                    | `Boolean`                            | `false`      | If `true` map will be cached and displayed as an image instead of being interactable, for performance usage. **Note:** Apple Maps only                                                                                                                                                                                                                             |
 | `camera`                          | `Camera`                             |              | The camera view the map should display. If you use this, the `region` property is ignored.                                                                                                                                                                                                                                                                         |
 | `compassOffset`                   | `Point`                              |              | If set, changes the position of the compass. **Note:** iOS Maps only.                                                                                                                                                                                                                                                                                              |
@@ -94,7 +95,6 @@ To access event data, you will need to use `e.nativeEvent`. For example, `onPres
 | `pointForCoordinate`        | `coordinate: LatLng`                                                                     | Converts a map coordinate to a view coordinate (`Point`). Returns a `Promise<Point>`.                                                                                                                                  |
 | `setCamera`                 | `camera: Camera`                                                                         | Like `animateCamera`, but sets the new view instantly, without an animation.                                                                                                                                           |
 | `setIndoorActiveLevelIndex` | `levelIndex: Number`                                                                     |
-| `setMapBoundaries`          | `northEast: LatLng`, `southWest: LatLng`                                                 | The boundary is defined by the map's center coordinates, not the device's viewport itself. **Note:** Google Maps only.                                                                                                 |
 
 ## Types
 
@@ -124,6 +124,19 @@ type Camera = {
 }
 ```
 
+```ts
+interface BoundingBox {
+  northEast: {
+    latitude: number;
+    longitude: number;
+  };
+  southWest: {
+    latitude: number;
+    longitude: number;
+  };
+}
+```
+
 Latitude and longitude are self explanatory while latitudeDelta and longitudeDelta may not.
 On the [developer.apple.com](https://developer.apple.com/reference/mapkit/mkcoordinatespan/1452417-latitudedelta) website this is how the "latitudeDelta" property is explained:
 

ios/GoogleMaps/RCTConvert+GMSMapViewType.m

@@ -30,6 +30,14 @@ + (GMSCameraPosition*)GMSCameraPosition:(id)json
     return [RCTConvert GMSCameraPositionWithDefaults:json existingCamera:nil];
 }
 
++ (GMSCoordinateBounds*)GMSCoordinateBounds:(id)json
+{
+    json = [self NSDictionary:json];
+    CLLocationCoordinate2D northEast = [self CLLocationCoordinate2D:json[@"northEast"]];
+    CLLocationCoordinate2D southWest = [self CLLocationCoordinate2D:json[@"southWest"]];
+    return [[GMSCoordinateBounds alloc] initWithCoordinate:northEast coordinate:southWest];
+}
+
 + (GMSCameraPosition*)GMSCameraPositionWithDefaults:(id)json existingCamera:(GMSCameraPosition*)existingCamera
 {
     CLLocationDegrees latitude = 0;

ios/GoogleMaps/RNMGoogleMap.m

@@ -305,6 +305,10 @@ - (void)setOnMapReady:(RCTBubblingEventBlock)onMapReady {
     }
 }
 
+- (void)setBoundary:(GMSCoordinateBounds*)boundary {
+    self.cameraTargetBounds = boundary;
+}
+
 - (void)didPrepareMap {
   UIView* mapView = [self valueForKey:@"mapView"]; //GMSVectorMapView
   [self overrideGestureRecognizersForView:mapView];

ios/GoogleMaps/RNMGoogleMapManager.m

@@ -65,47 +65,47 @@ - (UIView *)view
   return map;
 }
 
-RCT_EXPORT_VIEW_PROPERTY(isAccessibilityElement, BOOL)
-RCT_REMAP_VIEW_PROPERTY(testID, accessibilityIdentifier, NSString)
+RCT_EXPORT_VIEW_PROPERTY(boundary, GMSCoordinateBounds*)
+RCT_EXPORT_VIEW_PROPERTY(customMapStyleString, NSString)
 RCT_EXPORT_VIEW_PROPERTY(initialCamera, GMSCameraPosition)
-RCT_REMAP_VIEW_PROPERTY(camera, cameraProp, GMSCameraPosition)
 RCT_EXPORT_VIEW_PROPERTY(initialRegion, MKCoordinateRegion)
+RCT_EXPORT_VIEW_PROPERTY(isAccessibilityElement, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(kmlSrc, NSString)
+RCT_EXPORT_VIEW_PROPERTY(mapPadding, UIEdgeInsets)
+RCT_EXPORT_VIEW_PROPERTY(mapType, GMSMapViewType)
+RCT_EXPORT_VIEW_PROPERTY(maxZoomLevel, CGFloat)
+RCT_EXPORT_VIEW_PROPERTY(minZoomLevel, CGFloat)
+RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onIndoorBuildingFocused, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onIndoorLevelActivated, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onKmlReady, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onLongPress, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onMapLoaded, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onMapReady, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onMarkerPress, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onPanDrag, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onPoiClick, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onPress, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onRegionChangeComplete, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onUserLocationChange, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(pitchEnabled, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(region, MKCoordinateRegion)
+RCT_EXPORT_VIEW_PROPERTY(rotateEnabled, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(scrollDuringRotateOrZoomEnabled, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(scrollEnabled, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(showsBuildings, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(showsCompass, BOOL)
-//RCT_EXPORT_VIEW_PROPERTY(showsScale, BOOL)  // Not supported by GoogleMaps
+RCT_EXPORT_VIEW_PROPERTY(showsIndoorLevelPicker, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(showsIndoors, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(showsMyLocationButton, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(showsTraffic, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(showsUserLocation, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(rotateEnabled, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(scrollEnabled, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(scrollDuringRotateOrZoomEnabled, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(pitchEnabled, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(zoomTapEnabled, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(showsUserLocation, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(showsMyLocationButton, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(showsIndoors, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(showsIndoorLevelPicker, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(customMapStyleString, NSString)
-RCT_EXPORT_VIEW_PROPERTY(mapPadding, UIEdgeInsets)
+RCT_REMAP_VIEW_PROPERTY(camera, cameraProp, GMSCameraPosition)
 RCT_REMAP_VIEW_PROPERTY(paddingAdjustmentBehavior, paddingAdjustmentBehaviorString, NSString)
-RCT_EXPORT_VIEW_PROPERTY(onMapReady, RCTBubblingEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onMapLoaded, RCTBubblingEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onKmlReady, RCTBubblingEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onPress, RCTBubblingEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onLongPress, RCTBubblingEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onPanDrag, RCTBubblingEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onUserLocationChange, RCTBubblingEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onMarkerPress, RCTDirectEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTDirectEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onRegionChangeComplete, RCTDirectEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onPoiClick, RCTDirectEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onIndoorLevelActivated, RCTDirectEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onIndoorBuildingFocused, RCTDirectEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(mapType, GMSMapViewType)
-RCT_EXPORT_VIEW_PROPERTY(minZoomLevel, CGFloat)
-RCT_EXPORT_VIEW_PROPERTY(maxZoomLevel, CGFloat)
-RCT_EXPORT_VIEW_PROPERTY(kmlSrc, NSString)
+RCT_REMAP_VIEW_PROPERTY(testID, accessibilityIdentifier, NSString)
 
 RCT_EXPORT_METHOD(setCamera:(nonnull NSNumber *)reactTag
                   camera:(id)json)
@@ -122,24 +122,6 @@ - (UIView *)view
     }];
 }
 
-RCT_EXPORT_METHOD(setMapBoundaries:(nonnull NSNumber *)reactTag
-                  northEast:(CLLocationCoordinate2D)northEast
-                  southWest:(CLLocationCoordinate2D)southWest)
-{
-  [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
-    id view = viewRegistry[reactTag];
-    if (![view isKindOfClass:[RNMGoogleMap class]]) {
-      RCTLogError(@"Invalid view returned from registry, expecting RNMGoogleMap, got: %@", view);
-    } else {
-      RNMGoogleMap *mapView = (RNMGoogleMap *)view;
-
-      GMSCoordinateBounds *bounds = [[GMSCoordinateBounds alloc] initWithCoordinate:northEast coordinate:southWest];
-
-      mapView.cameraTargetBounds = bounds;
-    }
-  }];
-}
-
 RCT_EXPORT_METHOD(setIndoorActiveLevelIndex:(nonnull NSNumber *)reactTag
                   levelIndex:(NSInteger) levelIndex)
 {

src/MapView.tsx

@@ -69,6 +69,12 @@ export const MAP_TYPES: MapTypes = {
 const GOOGLE_MAPS_ONLY_TYPES: MapType[] = [MAP_TYPES.TERRAIN, MAP_TYPES.NONE];
 
 export type MapViewProps = ViewProps & {
+  /**
+   * A boundary of an area within which the map’s center needs to remain.
+   * @platform iOS: Google Maps only
+   * @platform Android: Supported
+   */
+  boundary?: BoundingBox;
   /**
    * If `true` map will be cached and displayed as an image instead of being interactable, for performance usage.
    *
@@ -873,12 +879,6 @@ class MapView extends React.Component<MapViewProps, State> {
     return mapViewModuleMethod('getMapBoundaries')(this._getHandle());
   }
 
-  setMapBoundaries(northEast: LatLng, southWest: LatLng) {
-    if (this.map.current) {
-      Commands.setMapBoundaries(this.map.current, northEast, southWest);
-    }
-  }
-
   setIndoorActiveLevelIndex(activeLevelIndex: number) {
     if (this.map.current) {
       Commands.setIndoorActiveLevelIndex(this.map.current, activeLevelIndex);
@@ -1081,6 +1081,7 @@ class MapView extends React.Component<MapViewProps, State> {
         customMapStyleString: this.props.customMapStyle
           ? JSON.stringify(this.props.customMapStyle)
           : undefined,
+        boundary: this.props.boundary,
       };
     }
 

src/MapView.types.ts

@@ -186,20 +186,3 @@ export type Address = {
 export interface MarkersFrames {
   [key: string]: {point: Point; frame: Frame};
 }
-
-export type NativeCommandName =
-  | 'animateCamera'
-  | 'animateToRegion'
-  | 'coordinateForPoint'
-  | 'fitToCoordinates'
-  | 'fitToElements'
-  | 'fitToSuppliedMarkers'
-  | 'getAddressFromCoordinates'
-  | 'getCamera'
-  | 'getMapBoundaries'
-  | 'getMarkersFrames'
-  | 'pointForCoordinate'
-  | 'setCamera'
-  | 'setIndoorActiveLevelIndex'
-  | 'setMapBoundaries'
-  | 'takeSnapshot';

src/MapViewNativeComponent.ts

@@ -2,7 +2,6 @@ import type {HostComponent} from 'react-native';
 import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
 import {NativeProps} from './MapView';
 import {Camera} from './MapView.types';
-import {LatLng} from './sharedTypes';
 
 export type MapViewNativeComponentType = HostComponent<NativeProps>;
 
@@ -14,14 +13,6 @@ interface NativeCommands {
     camera: Partial<Camera>,
   ) => void;
 
-  setMapBoundaries: (
-    viewRef: NonNullable<
-      React.RefObject<MapViewNativeComponentType>['current']
-    >,
-    northEast: LatLng,
-    southWest: LatLng,
-  ) => void;
-
   setIndoorActiveLevelIndex: (
     viewRef: NonNullable<
       React.RefObject<MapViewNativeComponentType>['current']
@@ -31,9 +22,5 @@ interface NativeCommands {
 }
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
-  supportedCommands: [
-    'setCamera',
-    'setMapBoundaries',
-    'setIndoorActiveLevelIndex',
-  ],
+  supportedCommands: ['setCamera', 'setIndoorActiveLevelIndex'],
 });