react-native-maps 1.21.0-alpha.1 → 1.21.0-alpha.11

package/ios/AirMaps/RNMapsMapView.h

@@ -5,17 +5,20 @@
 //  Created by Salah Ghanim on 23.11.24.
 //  Copyright © 2024 react-native-maps. All rights reserved.
 //
+#ifdef RCT_NEW_ARCH_ENABLED
 
 #import <React/RCTViewComponentView.h>
 #import <UIKit/UIKit.h>
+#import "RNMapsHostVewDelegate.h"
+
 @class AIRMap;
 
 NS_ASSUME_NONNULL_BEGIN
 
-@interface RNMapsMapView : RCTViewComponentView
-
-- (AIRMap *) mapView;
+@interface RNMapsMapView : RCTViewComponentView<RNMapsHostVewDelegate>
 
 @end
 
 NS_ASSUME_NONNULL_END
+
+#endif

package/ios/AirMaps/RNMapsMapView.mm

@@ -14,9 +14,9 @@
 #import <react/renderer/components/RNMapsSpecs/EventEmitters.h>
 #import <react/renderer/components/RNMapsSpecs/Props.h>
 #import <react/renderer/components/RNMapsSpecs/RCTComponentViewHelpers.h>
-
 #import "RCTFabricComponentsPlugins.h"
 #import <React/RCTConversions.h>
+#import "UIView+AirMap.h"
 
 using namespace facebook::react;
 
@@ -29,7 +29,7 @@ using namespace facebook::react;
 }
 
 
-- (AIRMap *) mapView {
+- (id<RNMapsAirModuleDelegate>) mapView {
     return _view;
 }
 
@@ -76,6 +76,16 @@ using namespace facebook::react;
 
 }
 - (void)fitToCoordinates:(NSString *)coordinatesJSON edgePaddingJSON:(NSString *)edgePaddingJSON animated:(BOOL)animated {
+    NSArray* coordinatesArr = [RCTConvert arrayFromString:coordinatesJSON];
+    NSMutableArray<AIRMapCoordinate*>* mutableArray = [NSMutableArray new];
+    for (id json : coordinatesArr){
+        [mutableArray addObject:[RCTConvert AIRMapCoordinate:json]];
+    }
+
+    NSDictionary* edgePadding = [RCTConvert dictonaryFromString:edgePaddingJSON];
+
+    UIEdgeInsets edgeInsets = [RCTConvert UIEdgeInsets:edgePadding];
+    [_view fitToCoordinates:mutableArray edgePadding:edgeInsets animated:animated];
 
 }
 
@@ -255,28 +265,6 @@ using namespace facebook::react;
                   .width = [positionDict[@"width"] doubleValue],
                   .height = [positionDict[@"height"] doubleValue],
               };
-/*
- std::string action;
-OnCalloutPressFrame frame;
-std::string id;
-OnCalloutPressPoint point;
-OnCalloutPressCoordinate coordinate;
-OnCalloutPressPosition position;
- id event = @{
-              @"action": calloutSubview ? @"callout-inside-press" : @"callout-press",
-              @"id": marker.identifier ?: @"unknown",
-              @"point": @{
-                      @"x": @(touchPointReal.x),
-                      @"y": @(touchPointReal.y),
-                      },
-              @"frame": @{
-                  @"x": @(bubbleFrame.origin.x),
-                  @"y": @(bubbleFrame.origin.y),
-                  @"width": @(bubbleFrame.size.width),
-                  @"height": @(bubbleFrame.size.height),
-                  }
-              };
- */
 
               auto mapViewEventEmitter = std::static_pointer_cast<RNMapsMapViewEventEmitter const>(_eventEmitter);
               facebook::react::RNMapsMapViewEventEmitter::OnCalloutPress data = {
@@ -371,27 +359,22 @@ OnCalloutPressPosition position;
   return self;
 }
 
-- (id)getPaperViewFromChildComponentView:(UIView *)childComponentView {
-    // Check if the childComponentView responds to the "adapter" selector
-    if ([childComponentView respondsToSelector:@selector(paperView)]) {
-        // Safely return the paperView
-        return [childComponentView valueForKey:@"paperView"];
-    }
-    // Return nil if paperView is not accessible
-    return nil;
-}
 
 - (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index{
-    id<RCTComponent> paperView = [self getPaperViewFromChildComponentView:childComponentView];
+    id<RCTComponent> paperView = [childComponentView getPaperViewFromChildComponentView];
     if (paperView){
         [_view insertReactSubview:paperView atIndex:index];
+    } else {
+        [_view insertReactSubview:childComponentView atIndex:index];
     }
 }
 - (void) unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
 {
-    id<RCTComponent> paperView = [self getPaperViewFromChildComponentView:childComponentView];
+    id<RCTComponent> paperView = [childComponentView getPaperViewFromChildComponentView];
     if (paperView){
         [_view removeReactSubview:paperView];
+    } else {
+        [_view removeReactSubview:childComponentView];
     }
 }
 
@@ -482,9 +465,9 @@ MKMapType mapRNTypeToMKMapType(RNMapsMapViewMapType rnMapType) {
     REMAP_MAPVIEW_PROP(scrollEnabled)
 
     REMAP_MAPVIEW_PROP(maxDelta)
-    REMAP_MAPVIEW_PROP(maxZoomLevel)
+    REMAP_MAPVIEW_PROP(maxZoom)
     REMAP_MAPVIEW_PROP(minDelta)
-    REMAP_MAPVIEW_PROP(minZoomLevel)
+    REMAP_MAPVIEW_PROP(minZoom)
 
     REMAP_MAPVIEW_PROP(showsCompass)
     REMAP_MAPVIEW_PROP(showsScale)
@@ -508,7 +491,6 @@ MKMapType mapRNTypeToMKMapType(RNMapsMapViewMapType rnMapType) {
     REMAP_MAPVIEW_COLOR_PROP(loadingIndicatorColor)
     REMAP_MAPVIEW_COLOR_PROP(tintColor)
 
-    // userLocationAnnotationTitle
     REMAP_MAPVIEW_STRING_PROP(userLocationAnnotationTitle)
 
     if (oldViewProps.mapType != newViewProps.mapType){

package/ios/AirMaps/UIView +AirMap.m

@@ -0,0 +1,20 @@
+//
+// Created by Leland Richardson on 12/27/15.
+// Copyright (c) 2015 Facebook. All rights reserved.
+//
+
+#import "UIView+AirMap.h"
+
+@implementation UIView (AirMap)
+
+- (UIView *) getPaperViewFromChildComponentView {
+    // Check if the childComponentView responds to the "adapter" selector
+    if ([self respondsToSelector:@selector(paperView)]) {
+        // Safely return the paperView
+        return [self valueForKey:@"paperView"];
+    }
+    // Return nil if paperView is not accessible
+    return nil;
+}
+
+@end

package/ios/AirMaps/UIView+AirMap.h

@@ -0,0 +1,11 @@
+//
+// Created by Salah Ghanim on 29/12/2024.
+// Copyright (c) 2015 Facebook. All rights reserved.
+//
+
+#import <UIKit/UIKit.h>
+
+@interface UIView (AirMap)
+- (UIView *) getPaperViewFromChildComponentView;
+
+@end

package/lib/MapOverlay.d.ts

@@ -70,7 +70,7 @@ type OverlayPressEvent = NativeSyntheticEvent<{
      */
     action: 'overlay-press' | 'image-overlay-press';
     /**
-     * @platform iOS: Apple maps
+     * @platform iOS: Apple Maps
      */
     name?: string;
     /**

package/lib/MapView.d.ts

@@ -11,7 +11,7 @@ export type MapViewProps = ViewProps & {
      * If `true` map will be cached and displayed as an image instead of being interactable, for performance usage.
      *
      * @default false
-     * @platform iOS: Apple maps only
+     * @platform iOS: Apple Maps only
      * @platform Android: Supported
      */
     cacheEnabled?: boolean;
@@ -92,7 +92,7 @@ export type MapViewProps = ViewProps & {
      */
     kmlSrc?: string;
     /**
-     * If set, changes the position of the "Legal" label link in Apple maps.
+     * If set, changes the position of the "Legal" label link in Apple Maps.
      *
      * @platform iOS: Apple Maps only
      * @platform Android: Not supported

package/lib/MapView.js

@@ -30,9 +30,12 @@ exports.AnimatedMapView = exports.MAP_TYPES = void 0;
 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");
-const FabricMapView_1 = __importDefault(require("./FabricMapView"));
+const NativeComponentMapView_1 = __importStar(require("./specs/NativeComponentMapView"));
+const NativeComponentGoogleMapView_1 = __importStar(require("./specs/NativeComponentGoogleMapView"));
+const createFabricMap_1 = __importDefault(require("./createFabricMap"));
+const FabricMap = (0, createFabricMap_1.default)(NativeComponentMapView_1.default, NativeComponentMapView_1.Commands);
+const FabricGoogleMap = (0, createFabricMap_1.default)(NativeComponentGoogleMapView_1.default, NativeComponentGoogleMapView_1.Commands);
 exports.MAP_TYPES = {
     STANDARD: 'standard',
     SATELLITE: 'satellite',
@@ -43,7 +46,6 @@ exports.MAP_TYPES = {
     SATELLITE_FLYOVER: 'satelliteFlyover',
     HYBRID_FLYOVER: 'hybridFlyover',
 };
-const GOOGLE_MAPS_ONLY_TYPES = [exports.MAP_TYPES.TERRAIN, exports.MAP_TYPES.NONE];
 class MapView extends React.Component {
     static Animated;
     map;
@@ -343,12 +345,10 @@ class MapView extends React.Component {
         }
     };
     render() {
-        if (react_native_1.Platform.OS === 'ios' &&
-            this.props.provider === ProviderConstants.PROVIDER_DEFAULT) {
-            const AIRMap = FabricMapView_1.default;
+        if (react_native_1.Platform.OS === 'ios') {
             // Define props specifically for MapFabricNativeProps
             /* eslint-disable @typescript-eslint/no-unused-vars */
-            const { onCalloutPress, onIndoorBuildingFocused, onKmlReady, onLongPress, onMarkerDeselect, onMarkerPress, onMarkerSelect, onRegionChangeStart, onRegionChange, onRegionChangeComplete, onPress, region, ...restProps } = this.props;
+            const { onCalloutPress, onIndoorBuildingFocused, onKmlReady, onLongPress, onMarkerDeselect, onMarkerPress, onMarkerSelect, onRegionChangeStart, onRegionChange, onRegionChangeComplete, onPress, minZoomLevel, maxZoomLevel, region, provider, ...restProps } = this.props;
             /* eslint-enable @typescript-eslint/no-unused-vars */
             const userInterfaceStyle = this.props.userInterfaceStyle || 'system';
             const props = {
@@ -361,6 +361,8 @@ class MapView extends React.Component {
                 onMarkerSelect: this.handleMarkerSelect,
                 onMarkerDeselect: this.handleMarkerDeselect,
                 userInterfaceStyle: userInterfaceStyle,
+                minZoom: minZoomLevel,
+                maxZoom: maxZoomLevel,
                 onRegionChange: this.handleRegionChange,
                 ...restProps,
             };
@@ -372,21 +374,21 @@ class MapView extends React.Component {
                     longitudeDelta: this.props.region.longitudeDelta,
                 };
             }
-            if (this.state.isReady) {
-                if (props.mapType && GOOGLE_MAPS_ONLY_TYPES.includes(props.mapType)) {
-                    props.mapType = exports.MAP_TYPES.STANDARD;
-                    console.log('ready');
-                }
-            }
-            else {
+            if (!this.state.isReady) {
                 props.style = this.props.style;
                 props.initialCamera = this.props.initialCamera;
                 props.onLayout = this.props.onLayout;
             }
-            // Render AIRMap with MapFabricNativeProps
-            return (<decorateMapComponent_1.ProviderContext.Provider value={this.props.provider}>
-          <AIRMap {...props} ref={this.fabricMap}/>
-        </decorateMapComponent_1.ProviderContext.Provider>);
+            if (provider === 'google') {
+                return (<decorateMapComponent_1.ProviderContext.Provider value={this.props.provider}>
+            <FabricGoogleMap {...props} ref={this.fabricMap}/>
+          </decorateMapComponent_1.ProviderContext.Provider>);
+            }
+            else {
+                return (<decorateMapComponent_1.ProviderContext.Provider value={this.props.provider}>
+            <FabricMap {...props} ref={this.fabricMap}/>
+          </decorateMapComponent_1.ProviderContext.Provider>);
+            }
         }
         else {
             const AIRMap = getNativeMapComponent(this.props.provider);

package/lib/{FabricMapView.d.ts → createFabricMap.d.ts}

@@ -1,8 +1,9 @@
 import React from 'react';
-import type { MapBoundaries } from './specs/NativeAirMapsModule';
-import type { MapFabricNativeProps, Camera, Point } from './specs/NativeComponentMapView';
-import { LatLng, Region } from './sharedTypes';
-import { Address, EdgePadding, SnapshotOptions } from './MapView.types';
+import type { LatLng, Point, Region } from './sharedTypes';
+import type { Address, Camera, EdgePadding, SnapshotOptions } from './MapView.types';
+import { MapBoundaries } from './specs/NativeAirMapsModule';
+import { MapFabricNativeProps } from './specs/NativeComponentMapView';
+export type FabricMapViewProps = MapFabricNativeProps;
 export interface FabricMapHandle {
     getCamera: () => Promise<Camera>;
     setCamera: (camera: Partial<Camera>) => void;
@@ -18,5 +19,5 @@ export interface FabricMapHandle {
     getPointForCoordinate: (coordinate: LatLng) => Promise<Point>;
     getCoordinateForPoint: (point: Point) => Promise<LatLng>;
 }
-export declare const FabricMap: React.ForwardRefExoticComponent<MapFabricNativeProps & React.RefAttributes<FabricMapHandle>>;
-export default FabricMap;
+declare const createFabricMap: (ViewComponent: React.ComponentType, Commands: any) => React.ForwardRefExoticComponent<MapFabricNativeProps & React.RefAttributes<FabricMapHandle>>;
+export default createFabricMap;

package/lib/createFabricMap.js

@@ -0,0 +1,175 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const NativeAirMapsModule_1 = __importDefault(require("./specs/NativeAirMapsModule"));
+const createFabricMap = (ViewComponent, Commands) => {
+    return (0, react_1.forwardRef)((props, ref) => {
+        const fabricRef = (0, react_1.useRef)(null);
+        (0, react_1.useImperativeHandle)(ref, () => ({
+            async getMarkersFrames(onlyVisible) {
+                if (fabricRef.current) {
+                    return NativeAirMapsModule_1.default.getMarkersFrames((0, react_native_1.findNodeHandle)(fabricRef.current) ?? -1, onlyVisible);
+                }
+                else {
+                    throw new Error('getMarkersFrames is only supported on iOS with Fabric.');
+                }
+            },
+            async getCoordinateForPoint(point) {
+                if (fabricRef.current) {
+                    return NativeAirMapsModule_1.default.getCoordinateForPoint((0, react_native_1.findNodeHandle)(fabricRef.current) ?? -1, point);
+                }
+                else {
+                    throw new Error('getCoordinateForPoint is only supported on iOS with Fabric.');
+                }
+            },
+            async getPointForCoordinate(coordinate) {
+                if (fabricRef.current) {
+                    return NativeAirMapsModule_1.default.getPointForCoordinate((0, react_native_1.findNodeHandle)(fabricRef.current) ?? -1, coordinate);
+                }
+                else {
+                    throw new Error('getPointForCoordinate is only supported on iOS with Fabric.');
+                }
+            },
+            async getAddressFromCoordinates(coordinate) {
+                if (fabricRef.current) {
+                    return NativeAirMapsModule_1.default.getAddressFromCoordinates((0, react_native_1.findNodeHandle)(fabricRef.current) ?? -1, coordinate);
+                }
+                else {
+                    throw new Error('getAddressFromCoordinates is only supported on iOS with Fabric.');
+                }
+            },
+            async takeSnapshot(config) {
+                if (fabricRef.current) {
+                    return NativeAirMapsModule_1.default.takeSnapshot((0, react_native_1.findNodeHandle)(fabricRef.current) ?? -1, config);
+                }
+                else {
+                    throw new Error('takeSnapshot is only supported on iOS with Fabric.');
+                }
+            },
+            async getCamera() {
+                if (fabricRef.current) {
+                    return NativeAirMapsModule_1.default.getCamera((0, react_native_1.findNodeHandle)(fabricRef.current) ?? -1);
+                }
+                else {
+                    throw new Error('getCamera is only supported on iOS with Fabric.');
+                }
+            },
+            async getMapBoundaries() {
+                if (fabricRef.current) {
+                    return NativeAirMapsModule_1.default.getMapBoundaries((0, react_native_1.findNodeHandle)(fabricRef.current) ?? -1);
+                }
+                else {
+                    throw new Error('getMapBoundaries is only supported on iOS with Fabric.');
+                }
+            },
+            animateToRegion(region, duration) {
+                if (fabricRef.current) {
+                    try {
+                        Commands.animateToRegion(fabricRef.current, JSON.stringify(region), duration);
+                    }
+                    catch (error) {
+                        throw new Error('Failed to animateToRegion');
+                    }
+                }
+                else {
+                    throw new Error('animateToRegion is only supported on iOS with Fabric.');
+                }
+            },
+            fitToElements(edgePadding, animated) {
+                if (fabricRef.current) {
+                    try {
+                        Commands.fitToElements(fabricRef.current, JSON.stringify(edgePadding), animated);
+                    }
+                    catch (error) {
+                        throw new Error('Failed to fitToElements');
+                    }
+                }
+                else {
+                    throw new Error('fitToElements is only supported on iOS with Fabric.');
+                }
+            },
+            fitToSuppliedMarkers(markers, edgePadding, animated) {
+                if (fabricRef.current) {
+                    try {
+                        Commands.fitToSuppliedMarkers(fabricRef.current, JSON.stringify(markers), JSON.stringify(edgePadding), animated);
+                    }
+                    catch (error) {
+                        throw new Error('Failed to fitToSuppliedMarkers');
+                    }
+                }
+                else {
+                    throw new Error('fitToSuppliedMarkers is only supported on iOS with Fabric.');
+                }
+            },
+            animateCamera(camera, duration) {
+                if (fabricRef.current) {
+                    try {
+                        Commands.animateCamera(fabricRef.current, JSON.stringify(camera), duration);
+                    }
+                    catch (error) {
+                        throw new Error('Failed to animateCamera');
+                    }
+                }
+                else {
+                    throw new Error('animateCamera is only supported on iOS with Fabric.');
+                }
+            },
+            fitToCoordinates(coordinates, edgePadding, animated) {
+                if (fabricRef.current) {
+                    try {
+                        Commands.fitToCoordinates(fabricRef.current, JSON.stringify(coordinates), JSON.stringify(edgePadding), animated);
+                    }
+                    catch (error) {
+                        throw new Error('Failed to fitToCoordinates');
+                    }
+                }
+                else {
+                    throw new Error('fitToCoordinates is only supported on iOS with Fabric.');
+                }
+            },
+            setCamera(camera) {
+                if (fabricRef.current) {
+                    try {
+                        Commands.setCamera(fabricRef.current, JSON.stringify(camera));
+                    }
+                    catch (error) {
+                        console.error('Failed to set camera:', error);
+                    }
+                }
+                else {
+                    console.warn('setCamera is only supported on iOS with Fabric.');
+                }
+            },
+        }));
+        // @ts-ignore
+        return <ViewComponent {...props} ref={fabricRef}/>;
+    });
+};
+exports.default = createFabricMap;