react-native-maps 1.20.1 → 1.21.0-alpha.2

package/lib/FabricMapView.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 });
+exports.FabricMap = void 0;
+const react_1 = __importStar(require("react"));
+const NativeAirMapsModule_1 = __importDefault(require("./specs/NativeAirMapsModule"));
+const NativeComponentMapView_1 = __importStar(require("./specs/NativeComponentMapView"));
+const react_native_1 = require("react-native");
+exports.FabricMap = (0, react_1.forwardRef)((props, ref) => {
+    const fabricRef = (0, react_1.useRef)(null);
+    // Use Imperative Handle to expose commands
+    (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 {
+                    NativeComponentMapView_1.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 {
+                    NativeComponentMapView_1.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 {
+                    NativeComponentMapView_1.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 {
+                    NativeComponentMapView_1.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 {
+                    NativeComponentMapView_1.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 {
+                    NativeComponentMapView_1.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.');
+            }
+        },
+    }));
+    return <NativeComponentMapView_1.default {...props} ref={fabricRef}/>;
+});
+exports.default = exports.FabricMap;

package/lib/MapView.d.ts

@@ -615,6 +615,7 @@ type State = {
 declare class MapView extends React.Component<MapViewProps, State> {
     static Animated: Animated.AnimatedComponent<typeof MapView>;
     private map;
+    private fabricMap;
     constructor(props: MapViewProps);
     setNativeProps(props: Partial<NativeProps>): void;
     private _onMapReady;
@@ -702,9 +703,12 @@ declare class MapView extends React.Component<MapViewProps, State> {
      * @return Object Object bounding box ({ northEast: <LatLng>, southWest: <LatLng> })
      */
     boundingBoxForRegion(region: Region): BoundingBox;
-    private _mapManagerCommand;
     private _getHandle;
-    private _runCommand;
+    private handleMapPress;
+    private handleMarkerPress;
+    private handleMarkerSelect;
+    private handleMarkerDeselect;
+    private handleRegionChange;
     render(): React.JSX.Element;
 }
 export declare const AnimatedMapView: RNAnimated.AnimatedComponent<typeof MapView>;

package/lib/MapView.js

@@ -22,6 +22,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 });
 exports.AnimatedMapView = exports.MAP_TYPES = void 0;
 const React = __importStar(require("react"));
@@ -29,6 +32,7 @@ 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"));
 exports.MAP_TYPES = {
     STANDARD: 'standard',
     SATELLITE: 'satellite',
@@ -43,9 +47,11 @@ const GOOGLE_MAPS_ONLY_TYPES = [exports.MAP_TYPES.TERRAIN, exports.MAP_TYPES.NON
 class MapView extends React.Component {
     static Animated;
     map;
+    fabricMap;
     constructor(props) {
         super(props);
         this.map = React.createRef();
+        this.fabricMap = React.createRef();
         this.state = {
             isReady: react_native_1.Platform.OS === 'ios',
         };
@@ -81,40 +87,60 @@ class MapView extends React.Component {
             return react_native_1.NativeModules.AirMapModule.getCamera(this._getHandle());
         }
         else if (react_native_1.Platform.OS === 'ios') {
-            return this._runCommand('getCamera', []);
+            if (this.fabricMap.current) {
+                return this.fabricMap.current.getCamera();
+            }
         }
         return Promise.reject('getCamera not supported on this platform');
     }
     setCamera(camera) {
-        if (this.map.current) {
+        if (this.fabricMap.current) {
+            this.fabricMap.current.setCamera(camera);
+        }
+        else if (this.map.current) {
             MapViewNativeComponent_1.Commands.setCamera(this.map.current, camera);
         }
     }
     animateCamera(camera, opts) {
-        if (this.map.current) {
+        if (this.fabricMap.current) {
+            this.fabricMap.current.animateCamera(camera, opts?.duration ? opts.duration : 500);
+        }
+        else if (this.map.current) {
             MapViewNativeComponent_1.Commands.animateCamera(this.map.current, camera, opts?.duration ? opts.duration : 500);
         }
     }
     animateToRegion(region, duration = 500) {
-        if (this.map.current) {
+        if (this.fabricMap.current) {
+            this.fabricMap.current.animateToRegion(region, duration);
+        }
+        else if (this.map.current) {
             MapViewNativeComponent_1.Commands.animateToRegion(this.map.current, region, duration);
         }
     }
     fitToElements(options = {}) {
-        if (this.map.current) {
-            const { edgePadding = { top: 0, right: 0, bottom: 0, left: 0 }, animated = true, } = options;
+        const { edgePadding = { top: 0, right: 0, bottom: 0, left: 0 }, animated = true, } = options;
+        if (this.fabricMap.current) {
+            this.fabricMap.current.fitToElements(edgePadding, animated);
+        }
+        else if (this.map.current) {
             MapViewNativeComponent_1.Commands.fitToElements(this.map.current, edgePadding, animated);
         }
     }
     fitToSuppliedMarkers(markers, options = {}) {
-        if (this.map.current) {
-            const { edgePadding = { top: 0, right: 0, bottom: 0, left: 0 }, animated = true, } = options;
+        const { edgePadding = { top: 0, right: 0, bottom: 0, left: 0 }, animated = true, } = options;
+        if (this.fabricMap.current) {
+            this.fabricMap.current.fitToSuppliedMarkers(markers, edgePadding, animated);
+        }
+        else if (this.map.current) {
             MapViewNativeComponent_1.Commands.fitToSuppliedMarkers(this.map.current, markers, edgePadding, animated);
         }
     }
     fitToCoordinates(coordinates = [], options = {}) {
-        if (this.map.current) {
-            const { edgePadding = { top: 0, right: 0, bottom: 0, left: 0 }, animated = true, } = options;
+        const { edgePadding = { top: 0, right: 0, bottom: 0, left: 0 }, animated = true, } = options;
+        if (this.fabricMap.current) {
+            this.fabricMap.current.fitToCoordinates(coordinates, edgePadding, animated);
+        }
+        else if (this.map.current) {
             MapViewNativeComponent_1.Commands.fitToCoordinates(this.map.current, coordinates, edgePadding, animated);
         }
     }
@@ -128,7 +154,9 @@ class MapView extends React.Component {
             return await react_native_1.NativeModules.AirMapModule.getMapBoundaries(this._getHandle());
         }
         else if (react_native_1.Platform.OS === 'ios') {
-            return await this._runCommand('getMapBoundaries', []);
+            if (this.fabricMap.current) {
+                return this.fabricMap.current.getMapBoundaries();
+            }
         }
         return Promise.reject('getMapBoundaries not supported on this platform');
     }
@@ -177,24 +205,10 @@ class MapView extends React.Component {
             return react_native_1.NativeModules.AirMapModule.takeSnapshot(this._getHandle(), config);
         }
         else if (react_native_1.Platform.OS === 'ios') {
-            return new Promise((resolve, reject) => {
-                this._runCommand('takeSnapshot', [
-                    config.width,
-                    config.height,
-                    config.region,
-                    config.format,
-                    config.quality,
-                    config.result,
-                    (err, snapshot) => {
-                        if (err) {
-                            reject(err);
-                        }
-                        else {
-                            resolve(snapshot);
-                        }
-                    },
-                ]);
-            });
+            if (this.fabricMap.current) {
+                // @ts-ignore
+                return this.fabricMap.current.takeSnapshot(config);
+            }
         }
         return Promise.reject('takeSnapshot not supported on this platform');
     }
@@ -212,7 +226,9 @@ class MapView extends React.Component {
             return react_native_1.NativeModules.AirMapModule.getAddressFromCoordinates(this._getHandle(), coordinate);
         }
         else if (react_native_1.Platform.OS === 'ios') {
-            return this._runCommand('getAddressFromCoordinates', [coordinate]);
+            if (this.fabricMap.current) {
+                return this.fabricMap.current.getAddressFromCoordinates(coordinate);
+            }
         }
         return Promise.reject('getAddress not supported on this platform');
     }
@@ -230,7 +246,9 @@ class MapView extends React.Component {
             return react_native_1.NativeModules.AirMapModule.pointForCoordinate(this._getHandle(), coordinate);
         }
         else if (react_native_1.Platform.OS === 'ios') {
-            return this._runCommand('pointForCoordinate', [coordinate]);
+            if (this.fabricMap.current) {
+                return this.fabricMap.current.getPointForCoordinate(coordinate);
+            }
         }
         return Promise.reject('pointForCoordinate not supported on this platform');
     }
@@ -248,7 +266,9 @@ class MapView extends React.Component {
             return react_native_1.NativeModules.AirMapModule.coordinateForPoint(this._getHandle(), point);
         }
         else if (react_native_1.Platform.OS === 'ios') {
-            return this._runCommand('coordinateForPoint', [point]);
+            if (this.fabricMap.current) {
+                return this.fabricMap.current.getCoordinateForPoint(point);
+            }
         }
         return Promise.reject('coordinateForPoint not supported on this platform');
     }
@@ -261,7 +281,10 @@ class MapView extends React.Component {
      */
     getMarkersFrames(onlyVisible = false) {
         if (react_native_1.Platform.OS === 'ios') {
-            return this._runCommand('getMarkersFrames', [onlyVisible]);
+            if (this.fabricMap.current) {
+                // @ts-ignore
+                return this.fabricMap.current.getMarkersFrames(onlyVisible);
+            }
         }
         return Promise.reject('getMarkersFrames not supported on this platform');
     }
@@ -284,69 +307,119 @@ class MapView extends React.Component {
             },
         };
     }
-    _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) {
-        if (react_native_1.Platform.OS === 'ios') {
-            return this._mapManagerCommand(name)(this._getHandle(), ...args);
+    handleMapPress = (event) => {
+        if (this.props.onPress) {
+            this.props.onPress(event);
         }
-        else {
-            return Promise.reject(`Invalid platform was passed: ${react_native_1.Platform.OS}`);
+    };
+    handleMarkerPress = (event) => {
+        if (this.props.onMarkerPress) {
+            this.props.onMarkerPress(event);
         }
-    }
+    };
+    handleMarkerSelect = (event) => {
+        if (this.props.onMarkerSelect) {
+            this.props.onMarkerSelect(event);
+        }
+    };
+    handleMarkerDeselect = (event) => {
+        if (this.props.onMarkerDeselect) {
+            this.props.onMarkerDeselect(event);
+        }
+    };
+    handleRegionChange = (event) => {
+        const isGesture = event.nativeEvent.isGesture;
+        const details = { isGesture };
+        if (event.nativeEvent.continuous) {
+            if (this.props.onRegionChange) {
+                this.props.onRegionChange(event.nativeEvent.region, details);
+            }
+        }
+        else if (this.props.onRegionChangeComplete) {
+            this.props.onRegionChangeComplete(event.nativeEvent.region, details);
+        }
+    };
     render() {
-        let props;
-        if (this.state.isReady) {
-            props = {
-                region: null,
-                initialRegion: null,
-                onChange: this._onChange,
+        if (react_native_1.Platform.OS === 'ios' &&
+            this.props.provider === ProviderConstants.PROVIDER_DEFAULT) {
+            const AIRMap = FabricMapView_1.default;
+            // 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;
+            /* eslint-enable @typescript-eslint/no-unused-vars */
+            const userInterfaceStyle = this.props.userInterfaceStyle || 'system';
+            const props = {
                 onMapReady: this._onMapReady,
                 liteMode: this.props.liteMode,
                 googleMapId: this.props.googleMapId,
                 googleRenderer: this.props.googleRenderer,
-                ref: this.map,
-                customMapStyleString: this.props.customMapStyle
-                    ? JSON.stringify(this.props.customMapStyle)
-                    : undefined,
-                ...this.props,
+                onPress: this.handleMapPress,
+                onMarkerPress: this.handleMarkerPress,
+                onMarkerSelect: this.handleMarkerSelect,
+                onMarkerDeselect: this.handleMarkerDeselect,
+                userInterfaceStyle: userInterfaceStyle,
+                onRegionChange: this.handleRegionChange,
+                ...restProps,
             };
-            if (react_native_1.Platform.OS === 'ios' &&
-                props.provider === ProviderConstants.PROVIDER_DEFAULT &&
-                props.mapType &&
-                GOOGLE_MAPS_ONLY_TYPES.includes(props.mapType)) {
-                props.mapType = exports.MAP_TYPES.STANDARD;
+            if (this.props.region) {
+                props.region = {
+                    latitude: this.props.region.latitude,
+                    longitude: this.props.region.longitude,
+                    latitudeDelta: this.props.region.latitudeDelta,
+                    longitudeDelta: this.props.region.longitudeDelta,
+                };
             }
-            if (props.onPanDrag) {
-                props.handlePanDrag = !!props.onPanDrag;
+            if (this.state.isReady) {
+                if (props.mapType && GOOGLE_MAPS_ONLY_TYPES.includes(props.mapType)) {
+                    props.mapType = exports.MAP_TYPES.STANDARD;
+                    console.log('ready');
+                }
             }
+            else {
+                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>);
         }
         else {
-            props = {
-                style: this.props.style,
+            const AIRMap = getNativeMapComponent(this.props.provider);
+            // Define props specifically for NativeProps
+            const props = {
                 region: null,
+                initialRegion: null,
+                onChange: this._onChange,
+                onMapReady: this._onMapReady,
                 liteMode: this.props.liteMode,
                 googleMapId: this.props.googleMapId,
                 googleRenderer: this.props.googleRenderer,
-                initialRegion: this.props.initialRegion || null,
-                initialCamera: this.props.initialCamera,
                 ref: this.map,
-                onChange: this._onChange,
-                onMapReady: this._onMapReady,
-                onLayout: this.props.onLayout,
                 customMapStyleString: this.props.customMapStyle
                     ? JSON.stringify(this.props.customMapStyle)
                     : undefined,
+                ...this.props,
             };
+            if (this.state.isReady) {
+                if (props.onPanDrag) {
+                    props.handlePanDrag = !!props.onPanDrag;
+                }
+            }
+            else {
+                props.style = this.props.style;
+                props.initialCamera = this.props.initialCamera;
+                props.onLayout = this.props.onLayout;
+            }
+            // Render AIRMap with NativeProps
+            return (<decorateMapComponent_1.ProviderContext.Provider value={this.props.provider}>
+          <AIRMap {...props}/>
+        </decorateMapComponent_1.ProviderContext.Provider>);
         }
-        const AIRMap = getNativeMapComponent(this.props.provider);
-        return (<decorateMapComponent_1.ProviderContext.Provider value={this.props.provider}>
-        <AIRMap {...props}/>
-      </decorateMapComponent_1.ProviderContext.Provider>);
     }
 }
 const airMaps = {

package/lib/specs/NativeAirMapsModule.d.ts

@@ -0,0 +1,31 @@
+import type { TurboModule } from 'react-native';
+import type { Double, UnsafeObject } from 'react-native/Libraries/Types/CodegenTypes';
+import type { Camera } from './NativeComponentMapView';
+import { Address } from 'react-native-maps';
+type LatLng = {
+    latitude: Double;
+    longitude: Double;
+};
+type Point = Readonly<{
+    x: Double;
+    y: Double;
+}>;
+export type Region = Readonly<LatLng & {
+    latitudeDelta: Double;
+    longitudeDelta: Double;
+}>;
+export type MapBoundaries = {
+    northEast: LatLng;
+    southWest: LatLng;
+};
+export interface Spec extends TurboModule {
+    getCamera(tag: Double): Promise<Camera>;
+    getMarkersFrames(tag: Double, onlyVisible: boolean): Promise<unknown>;
+    getMapBoundaries(tag: Double): Promise<MapBoundaries>;
+    takeSnapshot(tag: Double, config: UnsafeObject): Promise<string>;
+    getAddressFromCoordinates(tag: Double, coordinate: LatLng): Promise<Address>;
+    getPointForCoordinate(tag: Double, coordinate: LatLng): Promise<Point>;
+    getCoordinateForPoint(tag: Double, point: Point): Promise<LatLng>;
+}
+declare const _default: Spec;
+export default _default;

package/lib/specs/NativeAirMapsModule.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_native_1 = require("react-native");
+exports.default = react_native_1.TurboModuleRegistry.getEnforcing('RNMapsAirModule');