react-native-maps 1.21.0-alpha.99 → 1.22.0

package/src/decorateMapComponent.ts

@@ -0,0 +1,229 @@
+import {createContext} from 'react';
+import {
+  requireNativeComponent,
+  NativeModules,
+  Platform,
+  UIManager,
+  HostComponent,
+} from 'react-native';
+import {PROVIDER_DEFAULT, PROVIDER_GOOGLE} from './ProviderConstants';
+import {Provider} from './sharedTypes';
+import {MapCallout} from './MapCallout';
+import {MapOverlay} from './MapOverlay';
+import {MapCalloutSubview} from './MapCalloutSubview';
+import {MapCircle} from './MapCircle';
+import {MapHeatmap} from './MapHeatmap';
+import {MapLocalTile} from './MapLocalTile';
+import {MapMarker} from './MapMarker';
+import {MapPolygon} from './MapPolygon';
+import {MapPolyline} from './MapPolyline';
+import {MapUrlTile} from './MapUrlTile';
+import {MapWMSTile} from './MapWMSTile';
+import {Commands} from './MapViewNativeComponent';
+import GooglePolygon from './specs/NativeComponentGooglePolygon';
+import FabricMarker from './specs/NativeComponentMarker';
+import FabricUrlTile from './specs/NativeComponentUrlTile';
+import FabricWMSTile from './specs/NativeComponentWMSTile.ts';
+import FabricCallout from './specs/NativeComponentCallout';
+import FabricPolyline from './specs/NativeComponentPolyline';
+import FabricCircle from './specs/NativeComponentCircle';
+import FabricOverlay from './specs/NativeComponentOverlay';
+
+export const SUPPORTED: ImplementationStatus = 'SUPPORTED';
+export const USES_DEFAULT_IMPLEMENTATION: ImplementationStatus =
+  'USES_DEFAULT_IMPLEMENTATION';
+export const NOT_SUPPORTED: ImplementationStatus = 'NOT_SUPPORTED';
+
+export const ProviderContext = createContext<Provider>(undefined);
+
+export function getNativeMapName(provider: Provider) {
+  if (Platform.OS === 'android') {
+    return 'AIRMap';
+  }
+  if (provider === PROVIDER_GOOGLE) {
+    return 'AIRGoogleMap';
+  }
+  return 'AIRMap';
+}
+
+function getNativeComponentName(provider: Provider, component: ComponentName) {
+  return `${getNativeMapName(provider)}${component}`;
+}
+
+export const createNotSupportedComponent = (message: string): (() => null) => {
+  return () => {
+    console.error(message);
+    return null;
+  };
+};
+
+export const googleMapIsInstalled = !!UIManager.hasViewManagerConfig(
+  getNativeMapName(PROVIDER_GOOGLE),
+);
+
+export default function decorateMapComponent<Type extends Component>(
+  Component: Type,
+  componentName: ComponentName,
+  providers: Providers,
+): Type {
+  const components: {
+    [key: string]: NativeComponent;
+  } = {};
+
+  const getDefaultComponent = () =>
+    requireNativeComponent(getNativeComponentName(undefined, componentName));
+
+  Component.contextType = ProviderContext;
+
+  Component.prototype.getNativeComponent =
+    function getNativeComponent(): NativeComponent {
+      const provider = this.context;
+      if (
+        componentName === 'Marker' &&
+        (Platform.OS !== 'ios' || provider !== PROVIDER_GOOGLE)
+      ) {
+        // @ts-ignore
+        return FabricMarker;
+      }
+      if (
+        componentName === 'Polygon' &&
+        ((provider === PROVIDER_GOOGLE &&
+          Platform.OS === 'ios' &&
+          googleMapIsInstalled) ||
+          Platform.OS === 'android')
+      ) {
+        // @ts-ignore
+        return GooglePolygon;
+      }
+      if (Platform.OS === 'android') {
+        if (componentName === 'Callout') {
+          // @ts-ignore
+          return FabricCallout;
+        } else if (componentName === 'Polyline') {
+          // @ts-ignore
+          return FabricPolyline;
+        } else if (componentName === 'Circle') {
+          // @ts-ignore
+          return FabricCircle;
+        } else if (componentName === 'Overlay') {
+          // @ts-ignore
+          return FabricOverlay;
+        } else if (componentName === 'UrlTile') {
+          // @ts-ignore
+          return FabricUrlTile;
+        } else if (componentName === 'WMSTile') {
+          // @ts-ignore
+          return FabricWMSTile;
+        }
+      }
+      const key = provider || 'default';
+      if (components[key]) {
+        return components[key];
+      }
+
+      if (provider === PROVIDER_DEFAULT) {
+        components[key] = getDefaultComponent();
+        return components[key];
+      }
+
+      const providerInfo = providers[provider];
+      // quick fix. Previous code assumed android | ios
+      if (Platform.OS !== 'android' && Platform.OS !== 'ios') {
+        throw new Error(`react-native-maps doesn't support ${Platform.OS}`);
+      }
+
+      const platformSupport = providerInfo[Platform.OS];
+      const nativeComponentName = getNativeComponentName(
+        provider,
+        componentName,
+      );
+      if (platformSupport === NOT_SUPPORTED) {
+        components[key] = createNotSupportedComponent(
+          `react-native-maps: ${nativeComponentName} is not supported on ${Platform.OS}`,
+        );
+      } else if (platformSupport === SUPPORTED) {
+        if (
+          provider !== PROVIDER_GOOGLE ||
+          (Platform.OS === 'ios' && googleMapIsInstalled)
+        ) {
+          components[key] = requireNativeComponent(nativeComponentName);
+        }
+      } else {
+        // (platformSupport === USES_DEFAULT_IMPLEMENTATION)
+        if (!components.default) {
+          components.default = getDefaultComponent();
+        }
+        components[key] = components.default;
+      }
+
+      return components[key];
+    };
+
+  Component.prototype.getUIManagerCommand = function getUIManagerCommand(
+    name: string,
+  ): UIManagerCommand {
+    const nativeComponentName = getNativeComponentName(
+      this.context,
+      componentName,
+    );
+    return UIManager.getViewManagerConfig(nativeComponentName).Commands[name];
+  };
+
+  Component.prototype.getMapManagerCommand = function getMapManagerCommand(
+    name: string,
+  ): MapManagerCommand {
+    const nativeComponentName = `${getNativeComponentName(
+      this.context,
+      componentName,
+    )}Manager`;
+    return NativeModules[nativeComponentName][name];
+  };
+
+  return Component;
+}
+
+type ImplementationStatus =
+  | 'SUPPORTED'
+  | 'USES_DEFAULT_IMPLEMENTATION'
+  | 'NOT_SUPPORTED';
+
+type Providers = {
+  google: {
+    ios: ImplementationStatus;
+    android: ImplementationStatus;
+  };
+};
+
+export type UIManagerCommand = number;
+
+export type MapManagerCommand = keyof typeof Commands;
+
+export type NativeComponent<H = unknown> =
+  | HostComponent<H>
+  | ReturnType<typeof createNotSupportedComponent>;
+
+type Component =
+  | typeof MapCallout
+  | typeof MapCalloutSubview
+  | typeof MapCircle
+  | typeof MapHeatmap
+  | typeof MapLocalTile
+  | typeof MapMarker
+  | typeof MapOverlay
+  | typeof MapPolygon
+  | typeof MapPolyline
+  | typeof MapUrlTile
+  | typeof MapWMSTile;
+
+type ComponentName =
+  | 'Callout'
+  | 'CalloutSubview'
+  | 'Circle'
+  | 'Heatmap'
+  | 'LocalTile'
+  | 'Marker'
+  | 'Overlay'
+  | 'Polygon'
+  | 'Polyline'
+  | 'UrlTile'
+  | 'WMSTile';

package/src/fixImageProp.ts

@@ -0,0 +1,17 @@
+import {Image, ImageSourcePropType} from 'react-native';
+
+export function fixImageProp(
+  image: ImageSourcePropType,
+): {uri: string} | ImageSourcePropType {
+  if (typeof image === 'string') {
+    return {uri: image};
+  }
+
+  if (typeof image === 'number') {
+    // Handle local image asset (require('./image.png'))
+    const resolvedImage = Image.resolveAssetSource(image);
+    return resolvedImage?.uri ? {uri: resolvedImage.uri} : image;
+  }
+
+  return image;
+}

package/src/index.ts

@@ -0,0 +1,52 @@
+import MapView, {
+  AnimatedMapView as Animated,
+  MAP_TYPES,
+  MapViewProps,
+} from './MapView';
+
+import Marker from './MapMarker';
+export {MapMarker} from './MapMarker';
+export type {MapMarkerProps} from './MapMarker';
+
+import Overlay from './MapOverlay';
+export {MapOverlay} from './MapOverlay';
+export type {MapOverlayProps} from './MapOverlay';
+
+export {default as Polyline, MapPolyline} from './MapPolyline';
+export type {MapPolylineProps} from './MapPolyline';
+export {default as Heatmap, MapHeatmap} from './MapHeatmap';
+export type {MapHeatmapProps} from './MapHeatmap';
+export {default as Polygon, MapPolygon} from './MapPolygon';
+export type {MapPolygonProps} from './MapPolygon';
+export {default as Circle, MapCircle} from './MapCircle';
+export type {MapCircleProps} from './MapCircle';
+export {default as UrlTile, MapUrlTile} from './MapUrlTile';
+export type {MapUrlTileProps} from './MapUrlTile';
+export {default as WMSTile, MapWMSTile} from './MapWMSTile';
+export type {MapWMSTileProps} from './MapWMSTile';
+export {default as LocalTile, MapLocalTile} from './MapLocalTile';
+export type {MapLocalTileProps} from './MapLocalTile';
+export {default as Callout, MapCallout} from './MapCallout';
+export type {MapCalloutProps} from './MapCallout';
+export {
+  default as CalloutSubview,
+  MapCalloutSubview,
+} from './MapCalloutSubview';
+export type {MapCalloutSubviewProps} from './MapCalloutSubview';
+export {default as AnimatedRegion} from './AnimatedRegion';
+export {default as Geojson} from './Geojson';
+export type {GeojsonProps} from './Geojson';
+
+export {Marker, Overlay};
+export type {MapViewProps};
+export {Animated, MAP_TYPES};
+
+export * from './ProviderConstants';
+export * from './MapView.types';
+export * from './MapPolygon.types';
+export * from './sharedTypes';
+
+export const MarkerAnimated = Marker.Animated;
+export const OverlayAnimated = Overlay.Animated;
+
+export default MapView;

package/src/sharedTypes.ts

@@ -0,0 +1,101 @@
+import {NativeSyntheticEvent} from 'react-native';
+
+export type Provider = 'google' | undefined;
+
+export type LatLng = {
+  latitude: number;
+  longitude: number;
+};
+
+export type Point = {
+  x: number;
+  y: number;
+};
+
+export type Region = LatLng & {
+  latitudeDelta: number;
+  longitudeDelta: number;
+};
+
+export type Frame = Point & {height: number; width: number};
+
+export type CalloutPressEvent = NativeSyntheticEvent<{
+  action: 'callout-press';
+
+  /**
+   * @platform iOS
+   */
+  frame?: Frame;
+
+  /**
+   * @platform iOS
+   */
+  id?: string;
+
+  /**
+   * @platform iOS
+   */
+  point?: Point;
+
+  /**
+   * @platform Android
+   */
+  coordinate?: LatLng;
+
+  /**
+   * @platform Android
+   */
+  position?: Point;
+}>;
+
+export type LineCapType = 'butt' | 'round' | 'square';
+export type LineJoinType = 'miter' | 'round' | 'bevel';
+
+export type ClickEvent<T = {}> = NativeSyntheticEvent<
+  {coordinate: LatLng; position: Point} & T
+>;
+
+export type MarkerDeselectEvent = Omit<
+  ClickEvent<{
+    action: 'marker-deselect';
+    id: string;
+  }>,
+  'position'
+>;
+
+export type MarkerSelectEvent = Omit<
+  ClickEvent<{id: string; action: 'marker-select'}>,
+  'position'
+>;
+
+export type MarkerDragEvent = ClickEvent<{
+  /**
+   * @platform iOS
+   */
+  id?: string;
+}>;
+
+export type MarkerDragStartEndEvent = NativeSyntheticEvent<{
+  coordinate: LatLng;
+
+  /**
+   * @platform iOS
+   */
+  id?: string;
+
+  /**
+   * @platform Android
+   */
+  position?: Point;
+}>;
+
+export type MarkerPressEvent = NativeSyntheticEvent<{
+  id: string;
+  action: 'marker-press';
+  coordinate: LatLng;
+
+  /**
+   * @platform Android
+   */
+  position?: Point;
+}>;

package/{specs → src/specs}/NativeComponentCircle.ts

@@ -88,7 +88,6 @@ export interface CircleFabricNativeProps extends ViewProps {
   tappable?: boolean;
 }
 
-export default codegenNativeComponent<CircleFabricNativeProps>(
-  'RNMapsCircle',
-  {},
-) as HostComponent<CircleFabricNativeProps>;
+export default codegenNativeComponent<CircleFabricNativeProps>('RNMapsCircle', {
+  excludedPlatforms: ['iOS'],
+}) as HostComponent<CircleFabricNativeProps>;

package/{specs → src/specs}/NativeComponentGoogleMapView.ts

@@ -181,11 +181,9 @@ export type IndoorLevel = Readonly<{
 
 export type IndoorLevelActivatedEventHandler = DirectEventHandler<
   Readonly<{
-    indoorLevel: {
-      activeLevelIndex: Int32; // Int32 for integers
-      name: string; // Non-nullable string
-      shortName: string; // Non-nullable string
-    }; // Nested ActiveIndoorLevel type
+    activeLevelIndex: Int32; // Int32 for integers
+    name: string; // Non-nullable string
+    shortName: string; // Non-nullable string
   }>
 >;
 
@@ -197,10 +195,9 @@ export type IndoorBuilding = Readonly<{
 
 export type IndoorBuildingEventHandler = DirectEventHandler<
   Readonly<{
-    indoorBuilding: {
-      underground: boolean; // Non-nullable boolean
-      activeLevelIndex: Int32; // Int32 for integers
-    };
+    underground: boolean; // Non-nullable boolean
+    activeLevelIndex: Int32; // Int32 for integers
+    levels: string; // Immutable array of IndoorLevel
   }>
 >;
 
@@ -777,6 +774,15 @@ export interface MapFabricNativeProps extends ViewProps {
    */
   userInterfaceStyle?: WithDefault<'system' | 'light' | 'dark', 'system'>;
 
+  /**
+   * Adds custom styling to the map component.
+   * See [README](https://github.com/react-native-maps/react-native-maps#customizing-the-map-style) for more information.
+   *
+   * @platform iOS: Google Maps only
+   * @platform Android: Supported
+   */
+  customMapStyleString?: string;
+
   /**
    * If `true` clicking user location will show the default callout for userLocation annotation.
    *

package/{specs → src/specs}/NativeComponentMapView.ts

@@ -33,7 +33,7 @@ export type Frame = Readonly<{
   height: Double;
 }>;
 
-export type ClickEvent = BubblingEventHandler<
+export type ClickEvent = DirectEventHandler<
   Readonly<{
     coordinate: {
       latitude: Double; // Inlined LatLng
@@ -74,7 +74,7 @@ export type LongPressEventHandler = BubblingEventHandler<
   }>
 >;
 
-export type MarkerDeselectEventHandler = BubblingEventHandler<
+export type MarkerDeselectEventHandler = DirectEventHandler<
   Readonly<{
     action?: string;
     id: string;
@@ -85,7 +85,7 @@ export type MarkerDeselectEventHandler = BubblingEventHandler<
   }>
 >;
 
-export type MarkerSelectEventHandler = BubblingEventHandler<
+export type MarkerSelectEventHandler = DirectEventHandler<
   Readonly<{
     action?: string;
     id: string;
@@ -96,7 +96,7 @@ export type MarkerSelectEventHandler = BubblingEventHandler<
   }>
 >;
 
-export type CalloutPressEvent = BubblingEventHandler<{
+export type CalloutPressEvent = DirectEventHandler<{
   action?: string;
 
   /**
@@ -204,17 +204,11 @@ export type IndoorBuildingEventHandler = DirectEventHandler<
   }>
 >;
 
-export type KmlMapEventHandler = DirectEventHandler<Readonly<{}>>;
-
-export type MapLoadedEventHandler = DirectEventHandler<Readonly<{}>>;
-
-export type MapReadyEventHandler = DirectEventHandler<Readonly<{}>>;
-
 export type Details = Readonly<{
   isGesture?: boolean; // Optional boolean for gesture detail
 }>;
 
-export type MarkerDragEventHandler = BubblingEventHandler<
+export type MarkerDragEventHandler = DirectEventHandler<
   Readonly<{
     coordinate: {
       latitude: Double; // Inlined LatLng
@@ -228,7 +222,7 @@ export type MarkerDragEventHandler = BubblingEventHandler<
   }>
 >;
 
-export type MarkerDragStartEndEventHandler = BubblingEventHandler<
+export type MarkerDragStartEndEventHandler = DirectEventHandler<
   Readonly<{
     coordinate: {
       latitude: Double; // Inlined LatLng
@@ -242,7 +236,7 @@ export type MarkerDragStartEndEventHandler = BubblingEventHandler<
   }>
 >;
 
-export type MarkerPressEventHandler = BubblingEventHandler<
+export type MarkerPressEventHandler = DirectEventHandler<
   Readonly<{
     action?: string;
     id: string;
@@ -257,7 +251,7 @@ export type MarkerPressEventHandler = BubblingEventHandler<
   }>
 >;
 
-export type PanDragEventHandler = BubblingEventHandler<
+export type PanDragEventHandler = DirectEventHandler<
   Readonly<{
     coordinate: {
       latitude: Double; // Inlined LatLng
@@ -270,7 +264,7 @@ export type PanDragEventHandler = BubblingEventHandler<
   }>
 >;
 
-export type PoiClickEventHandler = BubblingEventHandler<
+export type PoiClickEventHandler = DirectEventHandler<
   Readonly<{
     placeId: string;
     name: string;
@@ -298,9 +292,6 @@ export type MapPressEventHandler = BubblingEventHandler<
     action?: string;
   }>
 >;
-
-export type RegionChangeStartEventHandler = DirectEventHandler<Details>;
-
 export type RegionChangeEvent = Readonly<{
   region: {
     latitude: Double; // Non-nullable Double for latitude
@@ -310,9 +301,6 @@ export type RegionChangeEvent = Readonly<{
   }; // The region object
   continuous?: boolean;
 }>;
-
-export type RegionChangeEventHandler = BubblingEventHandler<RegionChangeEvent>;
-
 export type UserLocationChangeEvent = Readonly<{
   coordinate?: {
     latitude: Double; // Non-nullable Double for latitude
@@ -369,7 +357,23 @@ export interface MapFabricNativeProps extends ViewProps {
    * @platform iOS: Supported
    * @platform Android: Supported
    */
-  camera?: Camera;
+  camera?: Readonly<{
+    /**
+     * Apple Maps
+     */
+    altitude?: Double; // Nullable Double for altitude
+    center: {
+      latitude: Double; // Inlined LatLng
+      longitude: Double;
+    }; // Non-nullable center
+    heading: Double; // Non-nullable Double for heading
+    pitch: Double; // Non-nullable Double for pitch
+
+    /**
+     * Google Maps
+     */
+    zoom?: Float; // Nullable Double for zoom
+  }>;
 
   /**
    * If set, changes the position of the compass.
@@ -413,7 +417,23 @@ export interface MapFabricNativeProps extends ViewProps {
    * @platform iOS: Supported
    * @platform Android: Supported
    */
-  initialCamera?: Camera;
+  initialCamera?: Readonly<{
+    /**
+     * Apple Maps
+     */
+    altitude?: Double; // Nullable Double for altitude
+    center: {
+      latitude: Double; // Inlined LatLng
+      longitude: Double;
+    }; // Non-nullable center
+    heading: Double; // Non-nullable Double for heading
+    pitch: Double; // Non-nullable Double for pitch
+
+    /**
+     * Google Maps
+     */
+    zoom?: Float; // Nullable Double for zoom
+  }>;
 
   /**
    * The initial region to be displayed by the map.  Use this prop instead of `region`
@@ -604,7 +624,7 @@ export interface MapFabricNativeProps extends ViewProps {
    * @platform iOS: Google Maps only
    * @platform Android: Supported
    */
-  onKmlReady?: KmlMapEventHandler;
+  onKmlReady?: DirectEventHandler<null>;
 
   /**
    * Callback that is called when user makes a "long press" somewhere on the map.
@@ -620,7 +640,7 @@ export interface MapFabricNativeProps extends ViewProps {
    * @platform iOS: Google Maps only
    * @platform Android: Supported
    */
-  onMapLoaded?: MapLoadedEventHandler;
+  onMapLoaded?: DirectEventHandler<null>;
 
   /**
    * Callback that is called once the map is ready.
@@ -631,7 +651,7 @@ export interface MapFabricNativeProps extends ViewProps {
    * @platform iOS: Supported
    * @platform Android: Supported
    */
-  onMapReady?: MapReadyEventHandler;
+  onMapReady?: DirectEventHandler<null>;
 
   /**
    * Callback that is called when a marker on the map becomes deselected.
@@ -694,9 +714,9 @@ export interface MapFabricNativeProps extends ViewProps {
   onPanDrag?: PanDragEventHandler;
 
   /*
-  internal flag to enable pan gesture handling on iOS manually
-  * see MapView.ts line 1228
-   */
+    internal flag to enable pan gesture handling on iOS manually
+    * see MapView.ts line 1228
+     */
   handlePanDrag?: boolean;
 
   /**
@@ -723,7 +743,7 @@ export interface MapFabricNativeProps extends ViewProps {
    * @platform iOS: Supported
    * @platform Android: Supported
    */
-  onRegionChangeStart?: RegionChangeEventHandler;
+  onRegionChangeStart?: DirectEventHandler<RegionChangeEvent>;
 
   /**
    * Callback that is called continuously when the region changes, such as when a user is dragging the map.
@@ -733,7 +753,7 @@ export interface MapFabricNativeProps extends ViewProps {
    * @platform iOS: Supported
    * @platform Android: Supported
    */
-  onRegionChange?: RegionChangeEventHandler;
+  onRegionChange?: DirectEventHandler<RegionChangeEvent>;
 
   /**
    * Callback that is called once when the region changes, such as when the user is done moving the map.
@@ -743,7 +763,7 @@ export interface MapFabricNativeProps extends ViewProps {
    * @platform iOS: Supported
    * @platform Android: Supported
    */
-  onRegionChangeComplete?: RegionChangeEventHandler;
+  onRegionChangeComplete?: DirectEventHandler<RegionChangeEvent>;
 
   /**
    * Callback that is called when the underlying map figures our users current location
@@ -903,6 +923,15 @@ export interface MapFabricNativeProps extends ViewProps {
    */
   userInterfaceStyle?: WithDefault<'system' | 'light' | 'dark', 'system'>;
 
+  /**
+   * Adds custom styling to the map component.
+   * See [README](https://github.com/react-native-maps/react-native-maps#customizing-the-map-style) for more information.
+   *
+   * @platform iOS: Google Maps only
+   * @platform Android: Supported
+   */
+  customMapStyleString?: string;
+
   /**
    * The title of the annotation for current user location.
    *