react-native-maps 1.21.0-alpha.14 → 1.21.0-alpha.140

package/src/decorateMapComponent.ts

@@ -0,0 +1,227 @@
+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) => () => {
+  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/src/specs/NativeAirMapsModule.ts

@@ -0,0 +1,36 @@
+import type {TurboModule} from 'react-native';
+import {TurboModuleRegistry} from 'react-native';
+import type {Double} 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; // Non-nullable Double for x
+  y: Double; // Non-nullable Double for y
+}>;
+
+export type Region = Readonly<
+  LatLng & {
+    latitudeDelta: Double; // Non-nullable Double for latitudeDelta
+    longitudeDelta: Double; // Non-nullable Double for longitudeDelta
+  }
+>;
+
+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: string): Promise<string>;
+  getAddressFromCoordinates(tag: Double, coordinate: LatLng): Promise<Address>;
+  getPointForCoordinate(tag: Double, coordinate: LatLng): Promise<Point>;
+  getCoordinateForPoint(tag: Double, point: Point): Promise<LatLng>;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('RNMapsAirModule');

package/src/specs/NativeComponentCallout.ts

@@ -0,0 +1,63 @@
+import type {HostComponent, ViewProps} from 'react-native';
+
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import {
+  Double,
+  BubblingEventHandler,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+export type LatLng = Readonly<{
+  latitude: Double; // Non-nullable Double for latitude
+  longitude: Double; // Non-nullable Double for longitude
+}>;
+
+export type CalloutPressEvent = BubblingEventHandler<
+  Readonly<{
+    action?: string;
+    id: string;
+    coordinate: {
+      latitude: Double; // Inlined LatLng
+      longitude: Double;
+    };
+    position?: {
+      x: Double; // Inlined Point
+      y: Double;
+    }; // Optional position for Android
+  }>
+>;
+
+export interface CalloutFabricNativeProps extends ViewProps {
+  /**
+   * If `true`, clicks on transparent areas in callout will be passed to map.
+   *
+   * @default false
+   * @platform iOS: Supported
+   * @platform Android: Not supported
+   */
+  alphaHitTest?: boolean;
+
+  /**
+   * Callback that is called when the user presses on the callout
+   *
+   * @platform iOS: Apple Maps only
+   * @platform Android: Supported
+   */
+  onPress?: CalloutPressEvent;
+
+  /**
+   * If `false`, a default "tooltip" bubble window will be drawn around this callouts children.
+   * If `true`, the child views can fully customize their appearance, including any "bubble" like styles.
+   *
+   * @default false
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  tooltip?: boolean;
+}
+
+export default codegenNativeComponent<CalloutFabricNativeProps>(
+  'RNMapsCallout',
+  {
+    excludedPlatforms: ['iOS'],
+  },
+) as HostComponent<CalloutFabricNativeProps>;

package/src/specs/NativeComponentCircle.ts

@@ -0,0 +1,93 @@
+import type {HostComponent, ViewProps, ColorValue} from 'react-native';
+
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import {
+  Double,
+  Float,
+  BubblingEventHandler,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+export type LatLng = Readonly<{
+  latitude: Double; // Non-nullable Double for latitude
+  longitude: Double; // Non-nullable Double for longitude
+}>;
+
+export type CirclePressEventHandler = BubblingEventHandler<
+  Readonly<{
+    action?: string;
+    id: string;
+    coordinate: {
+      latitude: Double; // Inlined LatLng
+      longitude: Double;
+    };
+    position?: {
+      x: Double; // Inlined Point
+      y: Double;
+    }; // Optional position for Android
+  }>
+>;
+
+export interface CircleFabricNativeProps extends ViewProps {
+  /**
+   * The coordinates of the center of the circle.
+   *
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  center: LatLng;
+
+  /**
+   * The stroke color to use for the path.
+   *
+   * @default `#000`, `rgba(r,g,b,0.5)`
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  fillColor?: ColorValue;
+
+  /**
+   * The radius of the circle to be drawn (in meters)
+   *
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  radius: Double;
+
+  /**
+   * The stroke color to use for the path.
+   *
+   * @default `#000`, `rgba(r,g,b,0.5)`
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  strokeColor?: ColorValue;
+
+  /**
+   * Callback that is called when user taps on the map.
+   *
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  onPress?: CirclePressEventHandler;
+
+  /**
+   * The stroke width to use for the path.
+   *
+   * @default 1
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  strokeWidth?: Float;
+
+  /**
+   * Boolean to allow a polygon to be tappable and use the onPress function.
+   *
+   * @platform iOS: Google Maps only
+   * @platform Android: Supported
+   */
+  tappable?: boolean;
+}
+
+export default codegenNativeComponent<CircleFabricNativeProps>('RNMapsCircle', {
+  excludedPlatforms: ['iOS'],
+}) as HostComponent<CircleFabricNativeProps>;