react-native-maps 1.25.0-alpha.8 → 1.25.0

package/src/MapHeatmap.tsx

@@ -1,15 +1,20 @@
 import * as React from 'react';
-import {processColor, ProcessedColorValue, View, ViewProps} from 'react-native';
+import {
+  processColor,
+  View,
+  type ProcessedColorValue,
+  type ViewProps,
+} from 'react-native';
 import decorateMapComponent, {
-  MapManagerCommand,
-  NativeComponent,
   ProviderContext,
   SUPPORTED,
-  UIManagerCommand,
   USES_DEFAULT_IMPLEMENTATION,
+  type MapManagerCommand,
+  type NativeComponent,
+  type UIManagerCommand,
 } from './decorateMapComponent';
-import {LatLng} from './sharedTypes';
-import {Modify} from './sharedTypesInternal';
+import type {LatLng} from './sharedTypes';
+import type {Modify} from './sharedTypesInternal';
 
 export type MapHeatmapProps = ViewProps & {
   gradient?: {

package/src/MapLocalTile.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import {ViewProps} from 'react-native';
+import type {ViewProps} from 'react-native';
 
 import decorateMapComponent, {
   USES_DEFAULT_IMPLEMENTATION,
   SUPPORTED,
   ProviderContext,
-  NativeComponent,
-  MapManagerCommand,
-  UIManagerCommand,
+  type NativeComponent,
+  type MapManagerCommand,
+  type UIManagerCommand,
 } from './decorateMapComponent';
 
 export type MapLocalTileProps = ViewProps & {

package/src/MapMarker.tsx

@@ -2,29 +2,29 @@ import * as React from 'react';
 import {
   StyleSheet,
   Animated,
-  ViewProps,
-  ImageURISource,
-  ImageRequireSource,
   Platform,
+  type ViewProps,
+  type ImageURISource,
+  type ImageRequireSource,
 } from 'react-native';
 
 import decorateMapComponent, {
-  MapManagerCommand,
-  NativeComponent,
   ProviderContext,
   SUPPORTED,
-  UIManagerCommand,
   USES_DEFAULT_IMPLEMENTATION,
+  type MapManagerCommand,
+  type NativeComponent,
+  type UIManagerCommand,
 } from './decorateMapComponent';
 import {
   Commands,
-  MapMarkerNativeComponentType,
+  type MapMarkerNativeComponentType,
 } from './MapMarkerNativeComponent';
 
 import {Commands as FabricCommands} from './specs/NativeComponentMarker';
 import type {AppleMarkerPriority} from './specs/NativeComponentMarker';
 
-import {
+import type {
   CalloutPressEvent,
   LatLng,
   MarkerDeselectEvent,
@@ -34,7 +34,7 @@ import {
   MarkerSelectEvent,
   Point,
 } from './sharedTypes';
-import {Modify} from './sharedTypesInternal';
+import type {Modify} from './sharedTypesInternal';
 
 import {PROVIDER_GOOGLE} from './ProviderConstants';
 import {fixImageProp} from './fixImageProp';
@@ -468,7 +468,12 @@ export class MapMarker extends React.Component<MapMarkerProps> {
 
   redraw() {
     if (this.marker.current) {
-      Commands.redraw(this.marker.current);
+      if (this.fabricMarker) {
+        // @ts-ignore
+        FabricCommands.redraw(this.marker.current);
+      } else {
+        Commands.redraw(this.marker.current);
+      }
     }
   }
 
@@ -481,13 +486,29 @@ export class MapMarker extends React.Component<MapMarkerProps> {
       );
     }
 
-    let icon;
-    if (this.props.icon && this.fabricMarker) {
-      icon = fixImageProp(this.props.icon);
-    }
-    let image;
-    if (this.props.image && this.fabricMarker) {
-      image = fixImageProp(this.props.image);
+    let icon: any = this.props.icon;
+    let image: any = this.props.image;
+
+    if (this.fabricMarker) {
+      if (this.props.image) {
+        image = fixImageProp(this.props.image);
+      }
+      if (this.props.icon) {
+        icon = fixImageProp(this.props.icon);
+      }
+    } else {
+      if (this.props.image) {
+        image = fixImageProp(this.props.image);
+        if (image.uri) {
+          image = image.uri;
+        }
+      }
+      if (this.props.icon) {
+        icon = fixImageProp(this.props.icon);
+        if (icon.uri) {
+          icon = icon.uri;
+        }
+      }
     }
 
     const AIRMapMarker = this.getNativeComponent();

package/src/MapMarkerNativeComponent.ts

@@ -1,7 +1,7 @@
 import type {HostComponent} from 'react-native';
 import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
-import {NativeProps} from './MapMarker';
-import {LatLng} from './sharedTypes';
+import type {NativeProps} from './MapMarker';
+import type {LatLng} from './sharedTypes';
 
 export type MapMarkerNativeComponentType = HostComponent<NativeProps>;
 
@@ -47,5 +47,6 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
     'hideCallout',
     'animateMarkerToCoordinate',
     'setCoordinates',
+    'redraw',
   ],
 });

package/src/MapOverlay.tsx

@@ -2,23 +2,23 @@ import * as React from 'react';
 import {
   StyleSheet,
   Animated,
-  ViewProps,
-  ImageURISource,
-  ImageRequireSource,
-  NativeSyntheticEvent,
   Platform,
+  type ViewProps,
+  type ImageURISource,
+  type ImageRequireSource,
+  type NativeSyntheticEvent,
 } from 'react-native';
 
 import decorateMapComponent, {
-  MapManagerCommand,
-  NativeComponent,
   ProviderContext,
   SUPPORTED,
-  UIManagerCommand,
   USES_DEFAULT_IMPLEMENTATION,
+  type MapManagerCommand,
+  type NativeComponent,
+  type UIManagerCommand,
 } from './decorateMapComponent';
-import {LatLng, Point} from './sharedTypes';
-import {Modify} from './sharedTypesInternal';
+import type {LatLng, Point} from './sharedTypes';
+import type {Modify} from './sharedTypesInternal';
 import {fixImageProp} from './fixImageProp';
 
 export type MapOverlayProps = ViewProps & {
@@ -32,7 +32,7 @@ export type MapOverlayProps = ViewProps & {
   bearing?: number;
 
   /**
-   * The coordinates for the image (left-top corner, right-bottom corner). ie.```[[lat, long], [lat, long]]```
+   * The coordinates for the image (right-top corner, left-bottom corner). ie.```[[lat, long], [lat, long]]```
    *
    * @platform iOS: Supported
    * @platform Android: Supported

package/src/MapPolygon.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import {View, ViewProps} from 'react-native';
+import {View, type ViewProps} from 'react-native';
 import decorateMapComponent, {
   USES_DEFAULT_IMPLEMENTATION,
   SUPPORTED,
   ProviderContext,
-  NativeComponent,
-  MapManagerCommand,
-  UIManagerCommand,
+  type NativeComponent,
+  type MapManagerCommand,
+  type UIManagerCommand,
 } from './decorateMapComponent';
-import {PolygonPressEvent} from './MapPolygon.types';
-import {LatLng, LineCapType, LineJoinType} from './sharedTypes';
+import type {PolygonPressEvent} from './MapPolygon.types';
+import type {LatLng, LineCapType, LineJoinType} from './sharedTypes';
 
 export type MapPolygonProps = ViewProps & {
   /**

package/src/MapPolygon.types.ts

@@ -1,5 +1,5 @@
-import {NativeSyntheticEvent} from 'react-native';
-import {LatLng, Point} from './sharedTypes';
+import type {NativeSyntheticEvent} from 'react-native';
+import type {LatLng, Point} from './sharedTypes';
 
 // All types in this file are directly exported with the package for external
 // use.

package/src/MapPolyline.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import {NativeSyntheticEvent, View, ViewProps} from 'react-native';
+import {View, type NativeSyntheticEvent, type ViewProps} from 'react-native';
 import decorateMapComponent, {
   USES_DEFAULT_IMPLEMENTATION,
   SUPPORTED,
   ProviderContext,
-  NativeComponent,
-  MapManagerCommand,
-  UIManagerCommand,
+  type NativeComponent,
+  type MapManagerCommand,
+  type UIManagerCommand,
 } from './decorateMapComponent';
-import {LatLng, LineCapType, LineJoinType, Point} from './sharedTypes';
+import type {LatLng, LineCapType, LineJoinType, Point} from './sharedTypes';
 
 export type MapPolylineProps = ViewProps & {
   /**

package/src/MapUrlTile.tsx

@@ -4,11 +4,11 @@ import decorateMapComponent, {
   USES_DEFAULT_IMPLEMENTATION,
   SUPPORTED,
   ProviderContext,
-  NativeComponent,
-  MapManagerCommand,
-  UIManagerCommand,
+  type NativeComponent,
+  type MapManagerCommand,
+  type UIManagerCommand,
 } from './decorateMapComponent';
-import {ViewProps} from 'react-native';
+import type {ViewProps} from 'react-native';
 
 export type MapUrlTileProps = ViewProps & {
   /**

package/src/MapView.tsx

@@ -3,18 +3,18 @@ import {
   Animated as RNAnimated,
   Animated,
   findNodeHandle,
-  HostComponent,
-  NativeSyntheticEvent,
   Platform,
   requireNativeComponent,
-  ViewProps,
+  type HostComponent,
+  type NativeSyntheticEvent,
+  type ViewProps,
 } from 'react-native';
 import {
   createNotSupportedComponent,
-  NativeComponent,
   ProviderContext,
+  type NativeComponent,
 } from './decorateMapComponent';
-import {
+import type {
   CalloutPressEvent,
   ClickEvent,
   Frame,
@@ -28,7 +28,7 @@ import {
   Provider,
   Region,
 } from './sharedTypes';
-import {
+import type {
   ActiveIndoorLevel,
   Address,
   BoundingBox,
@@ -50,17 +50,20 @@ import {
   SnapshotOptions,
   UserLocationChangeEvent,
 } from './MapView.types';
-import {Modify} from './sharedTypesInternal';
-import {Commands, MapViewNativeComponentType} from './MapViewNativeComponent';
+import type {Modify} from './sharedTypesInternal';
+import {
+  Commands,
+  type MapViewNativeComponentType,
+} from './MapViewNativeComponent';
 
 import FabricMapView, {
   Commands as FabricCommands,
-  MapFabricNativeProps,
+  type MapFabricNativeProps,
 } from './specs/NativeComponentMapView';
 import GoogleMapView, {
   Commands as GoogleCommands,
 } from './specs/NativeComponentGoogleMapView';
-import createFabricMap, {FabricMapHandle} from './createFabricMap';
+import createFabricMap, {type FabricMapHandle} from './createFabricMap';
 
 const FabricMap = createFabricMap(FabricMapView, FabricCommands);
 var FabricGoogleMap: any = null;
@@ -445,7 +448,7 @@ export type MapViewProps = ViewProps & {
    * @platform iOS: Supported
    * @platform Android: Supported
    */
-  onRegionChangeStart?: (event: NativeSyntheticEvent<Details>) => void;
+  onRegionChangeStart?: (region: Region, details: Details) => void;
 
   /**
    * Callback that is called continuously when the region changes, such as when a user is dragging the map.
@@ -593,6 +596,15 @@ export type MapViewProps = ViewProps & {
    */
   showsScale?: boolean;
 
+  /**
+   * A Boolean value indicating whether the map displays traffic information.
+   *
+   * @default false
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  showsTraffic?: boolean;
+
   /**
    * If `true` the users location will be displayed on the map.
    *
@@ -762,7 +774,6 @@ class MapView extends React.Component<MapViewProps, State> {
     };
 
     this._onMapReady = this._onMapReady.bind(this);
-    this._onChange = this._onChange.bind(this);
   }
 
   setNativeProps(props: Partial<NativeProps>) {
@@ -779,19 +790,6 @@ class MapView extends React.Component<MapViewProps, State> {
     });
   }
 
-  private _onChange({nativeEvent}: ChangeEvent) {
-    const isGesture = nativeEvent.isGesture;
-    const details = {isGesture};
-
-    if (nativeEvent.continuous) {
-      if (this.props.onRegionChange) {
-        this.props.onRegionChange(nativeEvent.region, details);
-      }
-    } else if (this.props.onRegionChangeComplete) {
-      this.props.onRegionChangeComplete(nativeEvent.region, details);
-    }
-  }
-
   getCamera(): Promise<Camera> {
     if (this.fabricMap.current) {
       return this.fabricMap.current.getCamera();
@@ -1038,6 +1036,7 @@ class MapView extends React.Component<MapViewProps, State> {
     };
   }
 
+  // @ts-ignore
   private _getHandle() {
     return findNodeHandle(this.map.current);
   }
@@ -1072,19 +1071,17 @@ class MapView extends React.Component<MapViewProps, State> {
     }
   };
   private handleRegionChange = (event: NativeSyntheticEvent<any>) => {
-    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);
+    if (this.props.onRegionChange) {
+      this.props.onRegionChange(event.nativeEvent.region, {
+        isGesture: event.nativeEvent.isGesture,
+      });
     }
   };
   private handleRegionChangeStarted = (event: NativeSyntheticEvent<any>) => {
     if (this.props.onRegionChangeStart) {
-      this.props.onRegionChangeStart(event);
+      this.props.onRegionChangeStart(event.nativeEvent.region, {
+        isGesture: event.nativeEvent.isGesture,
+      });
     }
   };
 
@@ -1104,10 +1101,10 @@ class MapView extends React.Component<MapViewProps, State> {
   };
 
   private handleRegionChangeComplete = (event: NativeSyntheticEvent<any>) => {
-    const isGesture = event.nativeEvent.isGesture;
-    const details = {isGesture};
     if (this.props.onRegionChangeComplete) {
-      this.props.onRegionChangeComplete(event.nativeEvent.region, details);
+      this.props.onRegionChangeComplete(event.nativeEvent.region, {
+        isGesture: event.nativeEvent.isGesture,
+      });
     }
   };
 

package/src/MapView.types.ts

@@ -1,5 +1,5 @@
-import {ClickEvent, LatLng, Point, Region} from './sharedTypes';
-import {NativeSyntheticEvent} from 'react-native';
+import type {ClickEvent, LatLng, Point, Region} from './sharedTypes';
+import type {NativeSyntheticEvent} from 'react-native';
 
 // All types in this file are directly exported with the package for external
 // use.
@@ -148,7 +148,6 @@ export type UserLocationChangeEvent = NativeSyntheticEvent<{
 }>;
 
 export type ChangeEvent = NativeSyntheticEvent<{
-  continuous: boolean;
   region: Region;
   isGesture?: boolean;
 }>;

package/src/MapViewNativeComponent.ts

@@ -1,8 +1,8 @@
 import type {HostComponent} from 'react-native';
 import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
-import {NativeProps} from './MapView';
-import {Camera, EdgePadding} from './MapView.types';
-import {LatLng, Region} from './sharedTypes';
+import type {NativeProps} from './MapView';
+import type {Camera, EdgePadding} from './MapView.types';
+import type {LatLng, Region} from './sharedTypes';
 
 export type MapViewNativeComponentType = HostComponent<NativeProps>;
 

package/src/MapWMSTile.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import {ViewProps} from 'react-native';
+import type {ViewProps} from 'react-native';
 
 import decorateMapComponent, {
   USES_DEFAULT_IMPLEMENTATION,
   SUPPORTED,
   ProviderContext,
-  NativeComponent,
-  MapManagerCommand,
-  UIManagerCommand,
+  type NativeComponent,
+  type MapManagerCommand,
+  type UIManagerCommand,
 } from './decorateMapComponent';
 
 export type MapWMSTileProps = ViewProps & {

package/src/createFabricMap.tsx

@@ -7,10 +7,18 @@ import type {
   EdgePadding,
   SnapshotOptions,
 } from './MapView.types';
-import NativeAirMapsModule, {MapBoundaries} from './specs/NativeAirMapsModule';
-import {MapFabricNativeProps} from './specs/NativeComponentMapView';
-
-export type FabricMapViewProps = MapFabricNativeProps;
+import NativeAirMapsModule, {
+  type MapBoundaries,
+} from './specs/NativeAirMapsModule';
+import FabricMapView, {
+  Commands as FabricCommands,
+  type MapFabricNativeProps,
+} from './specs/NativeComponentMapView';
+import GoogleMapView, {
+  Commands as GoogleCommands,
+  type MapFabricNativeProps as GoogleMapFabricNativeProps,
+} from './specs/NativeComponentGoogleMapView';
+export type MapViewProps = MapFabricNativeProps | GoogleMapFabricNativeProps;
 
 export interface FabricMapHandle {
   getCamera: () => Promise<Camera>;
@@ -40,17 +48,21 @@ export interface FabricMapHandle {
   setIndoorActiveLevelIndex: (activeLevelIndex: number) => void;
 }
 
-const createFabricMap = (ViewComponent: React.ComponentType, Commands: any) => {
-  return forwardRef<FabricMapHandle, FabricMapViewProps>((props, ref) => {
-    const fabricRef = useRef<React.ElementRef<typeof ViewComponent>>(null);
+const createFabricMap = (
+  ViewComponent: typeof GoogleMapView | typeof FabricMapView,
+  Commands: typeof FabricCommands | typeof GoogleCommands,
+) => {
+  return forwardRef<FabricMapHandle | null, MapViewProps>((props, ref) => {
+    const fabricRef =
+      useRef<React.ElementRef<typeof GoogleMapView | typeof FabricMapView>>(
+        null,
+      );
+    const node = findNodeHandle(fabricRef.current) ?? -1;
 
     useImperativeHandle(ref, () => ({
       async getMarkersFrames(onlyVisible: boolean) {
         if (fabricRef.current) {
-          return NativeAirMapsModule.getMarkersFrames(
-            findNodeHandle(fabricRef.current) ?? -1,
-            onlyVisible,
-          );
+          return NativeAirMapsModule.getMarkersFrames(node, onlyVisible);
         } else {
           throw new Error(
             'getMarkersFrames is only supported on iOS with Fabric.',
@@ -59,10 +71,7 @@ const createFabricMap = (ViewComponent: React.ComponentType, Commands: any) => {
       },
       async getCoordinateForPoint(point: Point) {
         if (fabricRef.current) {
-          return NativeAirMapsModule.getCoordinateForPoint(
-            findNodeHandle(fabricRef.current) ?? -1,
-            point,
-          );
+          return NativeAirMapsModule.getCoordinateForPoint(node, point);
         } else {
           throw new Error(
             'getCoordinateForPoint is only supported on iOS with Fabric.',
@@ -71,10 +80,7 @@ const createFabricMap = (ViewComponent: React.ComponentType, Commands: any) => {
       },
       async getPointForCoordinate(coordinate: LatLng) {
         if (fabricRef.current) {
-          return NativeAirMapsModule.getPointForCoordinate(
-            findNodeHandle(fabricRef.current) ?? -1,
-            coordinate,
-          );
+          return NativeAirMapsModule.getPointForCoordinate(node, coordinate);
         } else {
           throw new Error(
             'getPointForCoordinate is not supported on this platform.',
@@ -84,7 +90,7 @@ const createFabricMap = (ViewComponent: React.ComponentType, Commands: any) => {
       async getAddressFromCoordinates(coordinate: LatLng) {
         if (fabricRef.current) {
           return NativeAirMapsModule.getAddressFromCoordinates(
-            findNodeHandle(fabricRef.current) ?? -1,
+            node,
             coordinate,
           );
         } else {
@@ -95,28 +101,21 @@ const createFabricMap = (ViewComponent: React.ComponentType, Commands: any) => {
       },
       async takeSnapshot(config: SnapshotOptions) {
         if (fabricRef.current) {
-          return NativeAirMapsModule.takeSnapshot(
-            findNodeHandle(fabricRef.current) ?? -1,
-            JSON.stringify(config),
-          );
+          return NativeAirMapsModule.takeSnapshot(node, JSON.stringify(config));
         } else {
           throw new Error('takeSnapshot is only supported on iOS with Fabric.');
         }
       },
       async getCamera() {
         if (fabricRef.current) {
-          return NativeAirMapsModule.getCamera(
-            findNodeHandle(fabricRef.current) ?? -1,
-          );
+          return NativeAirMapsModule.getCamera(node);
         } else {
           throw new Error('getCamera is only supported on iOS with Fabric.');
         }
       },
       async getMapBoundaries() {
         if (fabricRef.current) {
-          return NativeAirMapsModule.getMapBoundaries(
-            findNodeHandle(fabricRef.current) ?? -1,
-          );
+          return NativeAirMapsModule.getMapBoundaries(node);
         } else {
           throw new Error(
             'getMapBoundaries is only supported on iOS with Fabric.',
@@ -126,7 +125,7 @@ const createFabricMap = (ViewComponent: React.ComponentType, Commands: any) => {
       animateToRegion(region: Region, duration: number) {
         if (fabricRef.current) {
           try {
-            Commands.animateToRegion(
+            (Commands as any).animateToRegion(
               fabricRef.current,
               JSON.stringify(region),
               duration,
@@ -143,7 +142,7 @@ const createFabricMap = (ViewComponent: React.ComponentType, Commands: any) => {
       fitToElements(edgePadding: EdgePadding, animated: boolean) {
         if (fabricRef.current) {
           try {
-            Commands.fitToElements(
+            (Commands as any).fitToElements(
               fabricRef.current,
               JSON.stringify(edgePadding),
               animated,
@@ -164,7 +163,7 @@ const createFabricMap = (ViewComponent: React.ComponentType, Commands: any) => {
       ) {
         if (fabricRef.current) {
           try {
-            Commands.fitToSuppliedMarkers(
+            (Commands as any).fitToSuppliedMarkers(
               fabricRef.current,
               JSON.stringify(markers),
               JSON.stringify(edgePadding),
@@ -182,7 +181,7 @@ const createFabricMap = (ViewComponent: React.ComponentType, Commands: any) => {
       animateCamera(camera: Partial<Camera>, duration: number) {
         if (fabricRef.current) {
           try {
-            Commands.animateCamera(
+            (Commands as any).animateCamera(
               fabricRef.current,
               JSON.stringify(camera),
               duration,
@@ -203,7 +202,7 @@ const createFabricMap = (ViewComponent: React.ComponentType, Commands: any) => {
       ) {
         if (fabricRef.current) {
           try {
-            Commands.fitToCoordinates(
+            (Commands as any).fitToCoordinates(
               fabricRef.current,
               JSON.stringify(coordinates),
               JSON.stringify(edgePadding),
@@ -221,7 +220,7 @@ const createFabricMap = (ViewComponent: React.ComponentType, Commands: any) => {
       setIndoorActiveLevelIndex(activeLevelIndex: number) {
         if (fabricRef.current) {
           try {
-            Commands.setIndoorActiveLevelIndex(
+            (Commands as any).setIndoorActiveLevelIndex(
               fabricRef.current,
               activeLevelIndex,
             );
@@ -235,7 +234,10 @@ const createFabricMap = (ViewComponent: React.ComponentType, Commands: any) => {
       setCamera(camera: Partial<Camera>) {
         if (fabricRef.current) {
           try {
-            Commands.setCamera(fabricRef.current, JSON.stringify(camera));
+            (Commands as any).setCamera(
+              fabricRef.current,
+              JSON.stringify(camera),
+            );
           } catch (error) {
             console.error('Failed to set camera:', error);
           }