react-native-maps 1.21.0-alpha.96 → 1.21.0-alpha.98

package/specs/NativeComponentMarker.ts

@@ -0,0 +1,326 @@
+import {HostComponent} from 'react-native';
+import type {
+  ViewProps,
+  ColorValue,
+  ImageSourcePropType as ImageSource,
+} from 'react-native';
+
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+import {
+  Int32,
+  Double,
+  BubblingEventHandler,
+  DirectEventHandler,
+  WithDefault,
+} 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 MarkerPressEventHandler = BubblingEventHandler<
+  Readonly<{
+    action: string;
+    id?: string;
+    coordinate?: {
+      latitude: Double; // Inlined LatLng
+      longitude: Double;
+    };
+    position?: {
+      x: Double;
+      y: Double;
+    };
+  }>
+>;
+
+export type MarkerDragEventHandler = DirectEventHandler<
+  Readonly<{
+    id?: string;
+    coordinate?: {
+      latitude: Double; // Inlined LatLng
+      longitude: Double;
+    };
+  }>
+>;
+
+export type CalloutPressEventHandler = BubblingEventHandler<
+  Readonly<{
+    action: string;
+    id?: string;
+    frame?: {
+      x: Double; // Inlined LatLng
+      y: Double;
+      width: Double; // Inlined LatLng
+      height: Double;
+    };
+    point?: {
+      x: Double;
+      y: Double;
+    };
+  }>
+>;
+
+type AppleMarkerVisibility = 'hidden' | 'adaptive' | 'visible';
+
+export type AppleMarkerPriority = 'required' | 'high' | 'low';
+
+export type Point = Readonly<{
+  x: Double; // Non-nullable Double for x
+  y: Double; // Non-nullable Double for y
+}>;
+
+export interface MarkerFabricNativeProps extends ViewProps {
+  /**
+   * Sets the anchor point for the marker.
+   * The anchor specifies the point in the icon image that is anchored to the marker's position on the Earth's surface.
+   *
+   * The anchor point is specified in the continuous space [0.0, 1.0] x [0.0, 1.0],
+   * where (0, 0) is the top-left corner of the image, and (1, 1) is the bottom-right corner.
+   *
+   * The anchoring point in a W x H image is the nearest discrete grid point in a (W + 1) x (H + 1) grid, obtained by scaling the then rounding.
+   * For example, in a 4 x 2 image, the anchor point (0.7, 0.6) resolves to the grid point at (3, 1).
+   *
+   * @default {x: 0.5, y: 1.0}
+   * @platform iOS: Google Maps only. For Apple Maps, see the `centerOffset` prop
+   * @platform Android: Supported
+   */
+  anchor?: Point;
+  /**
+   * Specifies the point in the marker image at which to anchor the callout when it is displayed.
+   * This is specified in the same coordinate system as the anchor.
+   *
+   * See the `anchor` prop for more details.
+   *
+   * @default {x: 0.5, y: 0.0}
+   * @platform iOS: Google Maps only. For Apple Maps, see the `calloutOffset` prop
+   * @platform Android: Supported
+   */
+  calloutAnchor?: Point;
+
+  /**
+   * A custom image to be used as the marker's icon. Only local image resources are allowed to be used.
+   *
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  image?: ImageSource | null;
+
+  /**
+   * The offset (in points) at which to place the callout bubble.
+   * When this property is set to (0, 0),
+   * the anchor point of the callout bubble is placed on the top-center point of the marker view’s frame.
+   *
+   * Specifying positive offset values moves the callout bubble down and to the right,
+   * while specifying negative values moves it up and to the left
+   *
+   * @default {x: 0.0, y: 0.0}
+   * @platform iOS: Apple Maps only. For Google Maps, see the `calloutAnchor` prop
+   * @platform Android: Not supported. See the `calloutAnchor` prop
+   */
+  calloutOffset?: Point;
+  /**
+     Constants that indicates the display priority for annotations.
+     @default required
+     @platform iOS: Apple Maps only.
+     @platform Android: Not supported
+
+      Required: A constant indicating that the item is required.
+      High: A constant indicating that the item’s display priority is high.
+      Low: A constant indicating that the item’s display priority is Low.
+     */
+  displayPriority?: WithDefault<AppleMarkerPriority, 'required'>;
+
+  /**
+   * The coordinate for the marker.
+   *
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  coordinate: LatLng;
+
+  /**
+   * The description of the marker.
+   *
+   * This is only used if the <Marker /> component has no children that are a `<Callout />`,
+   * in which case the default callout behavior will be used,
+   * which will show both the `title` and the `description`, if provided.
+   *
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  description?: string;
+
+  /**
+   * if `true` allows the marker to be draggable (re-positioned).
+   *
+   * @default false
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  draggable?: boolean;
+
+  /**
+   * The title of the marker.
+   * This is only used if the <Marker /> component has no `<Callout />` children.
+   *
+   * If the marker has <Callout /> children, default callout behavior will be used,
+   * which will show both the `title` and the `description`, if provided.
+   *
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  title?: string;
+
+  /**
+   * A string that can be used to identify this marker.
+   *
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  identifier?: string;
+
+  /**
+   * When true, the marker will be pre-selected.
+   * Setting this to true allows the user to drag the marker without needing to tap on it first to focus it.
+   *
+   * @default false
+   * @platform iOS: Apple Maps only
+   * @platform Android: Not supported
+   */
+  isPreselected?: boolean;
+
+  /**
+   * Callback that is called when the user taps the callout view.
+   *
+   * @platform iOS: Apple Maps only
+   * @platform Android: Supported
+   */
+  onCalloutPress?: CalloutPressEventHandler;
+
+  /**
+   * Callback that is called when the marker is deselected, before the callout is hidden.
+   *
+   * @platform iOS: Apple Maps only
+   * @platform Android: supported
+   */
+  onDeselect?: MarkerPressEventHandler;
+
+  /**
+   * Callback called continuously as the marker is dragged
+   *
+   * @platform iOS: Apple Maps only
+   * @platform Android: Supported
+   */
+  onDrag?: MarkerDragEventHandler;
+
+  /**
+   * Callback that is called when a drag on the marker finishes.
+   * This is usually the point you will want to setState on the marker's coordinate again
+   *
+   * @platform iOS: Apple Maps only
+   * @platform Android: Supported
+   */
+  onDragEnd?: MarkerDragEventHandler;
+
+  /**
+   * Callback that is called when the user initiates a drag on the marker (if it is draggable)
+   *
+   * @platform iOS: Apple Maps only
+   * @platform Android: Supported
+   */
+  onDragStart?: MarkerDragEventHandler;
+
+  /**
+   * Callback that is called when the marker is tapped by the user.
+   *
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  onPress?: MarkerPressEventHandler;
+
+  /**
+   * Callback that is called when the marker becomes selected.
+   * This will be called when the callout for that marker is about to be shown.
+   *
+   * @platform iOS: Supported.
+   * @platform Android: Supported
+   */
+  onSelect?: MarkerPressEventHandler;
+
+  /**
+   * The marker's opacity between 0.0 and 1.0.
+   *
+   * @default 1.0
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  opacity?: WithDefault<Double, 1.0>;
+
+  /**
+   * If no custom marker view or custom image is provided, the platform default pin will be used, which can be customized by this color.
+   * Ignored if a custom marker is being used.<br/><br/>
+   * For Android, the set of available colors is limited. Unsupported colors will fall back to red.
+   * See [#887](https://github.com/react-community/react-native-maps/issues/887) for more information.
+   *
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  pinColor?: ColorValue;
+
+  /**
+   * Visibility of the title text rendered beneath Marker balloon
+   * @platform iOS: Apple Maps only
+   * @platform Android: Not supported
+   */
+  titleVisibility?: WithDefault<AppleMarkerVisibility, 'visible'>;
+
+  /**
+   * Visibility of the subtitle text rendered beneath Marker balloon
+   * @platform iOS: Apple Maps only
+   * @platform Android: Not supported
+   */
+  subtitleVisibility?: WithDefault<AppleMarkerVisibility, 'adaptive'>;
+
+  /**
+   * Indicate type of default markers if it's true MKPinAnnotationView will be used and MKMarkerAnnotationView if it's false
+   * It doesn't change anything if you are using custom Markers
+   * @platform iOS: Apple Maps only
+   * @platform Android: Not supported
+   */
+  useLegacyPinView?: boolean;
+}
+export interface NativeCommands {
+  animateToCoordinates: (
+    viewRef: React.ElementRef<React.ComponentType>,
+    latitude: Double,
+    longitude: Double,
+    duration: Int32,
+  ) => void;
+  setCoordinates: (
+    viewRef: React.ElementRef<React.ComponentType>,
+    latitude: Double,
+    longitude: Double,
+  ) => void;
+  showCallout: (viewRef: React.ElementRef<React.ComponentType>) => void;
+  hideCallout: (viewRef: React.ElementRef<React.ComponentType>) => void;
+  redrawCallout: (viewRef: React.ElementRef<React.ComponentType>) => void;
+  redraw: (viewRef: React.ElementRef<React.ComponentType>) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: [
+    'setCoordinates',
+    'animateToCoordinates',
+    'showCallout',
+    'hideCallout',
+    'redrawCallout',
+    'redraw',
+  ],
+});
+
+export default codegenNativeComponent<MarkerFabricNativeProps>(
+  'RNMapsMarker',
+  {},
+) as HostComponent<MarkerFabricNativeProps>;

package/specs/NativeComponentOverlay.ts

@@ -0,0 +1,89 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import {
+  Double,
+  Float,
+  BubblingEventHandler,
+  WithDefault,
+} from 'react-native/Libraries/Types/CodegenTypes';
+import type {
+  ViewProps,
+  HostComponent,
+  ImageSourcePropType as ImageSource,
+} from 'react-native';
+export type LatLng = Readonly<{
+  latitude: Double; // Non-nullable Double for latitude
+  longitude: Double; // Non-nullable Double for longitude
+}>;
+
+export type OverlayPressEventHandler = 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 OverlayFabricNativeProps extends ViewProps {
+  /**
+   * The bearing in degrees clockwise from north. Values outside the range [0, 360) will be normalized.
+   *
+   * @default 0
+   * @platform iOS: Google Maps only
+   * @platform Android: Supported
+   */
+  bearing?: Float;
+
+  /**
+   * The coordinates for the image (left-top corner, right-bottom corner). ie.```[[lat, long], [lat, long]]```
+   *
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  bounds: ReadonlyArray<LatLng>;
+
+  /**
+   * A custom image to be used as the overlay.
+   * Only required local image resources and uri (as for images located in the net) are allowed to be used.
+   *
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  image?: ImageSource | null;
+
+  /**
+   * Callback that is called when user taps on the map.
+   *
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  onPress?: OverlayPressEventHandler;
+
+  /**
+   * The overlay's opacity between 0.0 and 1.0.
+   *
+   * @default 1.0
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  opacity?: WithDefault<Float, 1.0>;
+
+  /**
+   * 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<OverlayFabricNativeProps>(
+  'RNMapsOverlay',
+  {},
+) as HostComponent<OverlayFabricNativeProps>;

package/specs/NativeComponentPolyline.ts

@@ -0,0 +1,124 @@
+import type {HostComponent, ViewProps, ColorValue} from 'react-native';
+
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import {
+  Double,
+  Float,
+  BubblingEventHandler,
+  WithDefault,
+} 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 PolylinePressEventHandler = 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 PolylineFabricNativeProps extends ViewProps {
+  /**
+   * An array of coordinates to describe the polygon
+   *
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  coordinates: ReadonlyArray<LatLng>;
+
+  /**
+   * Boolean to indicate whether to draw each segment of the line as a geodesic as opposed to straight lines on the Mercator projection.
+   * A geodesic is the shortest path between two points on the Earth's surface.
+   * The geodesic curve is constructed assuming the Earth is a sphere.
+   *
+   * @platform iOS: Google Maps only
+   * @platform Android: Supported
+   */
+  geodesic?: boolean;
+
+  /**
+   * The line cap style to apply to the open ends of the path
+   *
+   * @default `round`
+   * @platform iOS: Apple Maps only
+   * @platform Android: supported
+   * */
+  lineCap?: WithDefault<'butt' | 'round' | 'square', 'butt'>;
+
+  /**
+   * An array of numbers specifying the dash pattern to use for the path.
+   * The array contains one or more numbers that indicate the lengths (measured in points)
+   * of the line segments and gaps in the pattern.
+   * The values in the array alternate, starting with the first line segment length,
+   * followed by the first gap length, followed by the second line segment length, and so on.
+   *
+   * @platform iOS: Apple Maps only
+   * @platform Android: supported
+   */
+  lineDashPattern?: ReadonlyArray<Double>;
+
+  /**
+   * The line join style to apply to corners of the path.
+   *
+   * @platform iOS: Apple Maps only
+   * @platform Android: supported
+   */
+  lineJoin?: WithDefault<'miter' | 'round' | 'bevel', 'miter'>;
+
+  /**
+   * Callback that is called when user taps on the map.
+   *
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  onPress?: PolylinePressEventHandler;
+
+  /**
+   * The stroke color to use for the path.
+   *
+   * @default `#000`, `rgba(r,g,b,0.5)`
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  strokeColor?: ColorValue;
+
+  /**
+   * The stroke colors to use for the path.
+   * @default `#000`, `rgba(r,g,b,0.5)`
+   * @platform iOS: Supported
+   * @platform Android: Supported
+   */
+  strokeColors?: ReadonlyArray<ColorValue>;
+  /**
+   * 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<PolylineFabricNativeProps>(
+  'RNMapsPolyline',
+  {},
+) as HostComponent<PolylineFabricNativeProps>;