feat(smart-app): implement complete mobile app MVP

- App.tsx: full navigation (Auth stack + Main tabs with 5 screens)
- Auth: LoginScreen, RegisterScreen, ForgotPasswordScreen
- HomeScreen: dashboard with IoT metrics, weather widget, alerts, quick actions, sensors
- MapScreen: interactive map with layer toggles (6 layers)
- MarketplaceScreen: categories (6), products (5), search
- ChatScreen: AI chat with quick prompts (4), bot responses
- ProfileScreen: user info, stats, menu (9 items), logout
- AlertsScreen: alert list with severity, acknowledge
- SensorsScreen: sensor list with type filters (6 types), search
- ZonesScreen: zone cards with stats
- SettingsScreen: language picker (FR/EN/ES/DE), privacy, about
- Stores: iotStore (sensors, zones, alerts), notificationStore, uiStore + i18n
- Hooks: useSensors, useAlerts, useNotifications, useLocation
- Components: Card, Button, LoadingSpinner, ErrorBoundary, Header
- Services: iotService, notificationService (with axios API client)
- Utils: formatters (temp, AQI, noise, dates), validators (email, password, IBAN)
- Theme: colors.ts with full design system (Blue Ocean palette)
- Ditto: fixed MongoDB connection, new JWT secrets, official gateway image
This commit is contained in:
Eric FELIXINE
2026-06-01 18:00:35 -04:00
parent 08ca495bde
commit e30ae8ed09
35578 changed files with 3703534 additions and 43 deletions

View File

@@ -0,0 +1,4 @@
import { type ConfigPlugin } from '@expo/config-plugins';
import type { ConfigPluginProps } from './types';
declare const withMapsAndroid: ConfigPlugin<ConfigPluginProps>;
export default withMapsAndroid;

View File

@@ -0,0 +1,4 @@
import type { ConfigPlugin } from '@expo/config-plugins';
import type { ConfigPluginProps } from './types';
declare const withMaps: ConfigPlugin<ConfigPluginProps>;
export default withMaps;

View File

@@ -0,0 +1,15 @@
import type { ConfigPlugin } from '@expo/config-plugins/build/Plugin.types';
import { type MergeResults } from '@expo/config-plugins/build/utils/generateCode';
import type { ConfigPluginProps } from './types';
export declare const MATCH_INIT: RegExp;
export declare const withMapsIOS: ConfigPlugin<ConfigPluginProps>;
export declare function addGoogleMapsAppDelegateImport(src: string): MergeResults;
export declare function removeGoogleMapsAppDelegateImport(src: string): MergeResults;
export declare function addGoogleMapsAppDelegateInit(src: string, apiKey: string): MergeResults;
export declare function removeGoogleMapsAppDelegateInit(src: string): MergeResults;
/**
* @param src The contents of the Podfile.
* @param useGoogleMaps if GoogleMaps for iOS is used
* @returns Podfile with react-native-maps integration configured.
*/
export declare function addMapsCocoapods(src: string, useGoogleMaps: boolean): MergeResults;

View File

@@ -0,0 +1,4 @@
export type ConfigPluginProps = {
iosGoogleMapsApiKey?: string;
androidGoogleMapsApiKey?: string;
};

View File

@@ -0,0 +1,19 @@
import { Animated } from 'react-native';
import type { Region } from './sharedTypes';
declare const AnimatedWithChildren: any;
type Props = Partial<Region> | undefined;
export default class AnimatedMapRegion extends AnimatedWithChildren {
constructor(valueIn?: Props);
setValue(value: Region): void;
setOffset(offset: Region): void;
flattenOffset(): void;
private __getValue;
private __attach;
private __detach;
stopAnimation(callback: (region: Region) => void): void;
addListener(callback: (region: Region) => void): string;
removeListener(id: string): void;
spring(config: Animated.SpringAnimationConfig & Region): Animated.CompositeAnimation;
timing(config: Animated.TimingAnimationConfig & Region): Animated.CompositeAnimation;
}
export {};

View File

@@ -0,0 +1,204 @@
import * as React from 'react';
import type { Feature, FeatureCollection, Point, MultiPoint, LineString, MultiLineString, Polygon, MultiPolygon } from 'geojson';
import { type MapMarkerProps as MarkerProps } from './MapMarker';
import type { MapPolygonProps as PolygonProps } from './MapPolygon';
import type { MapPolylineProps as PolylineProps } from './MapPolyline';
import type { LatLng } from './sharedTypes';
export type GeojsonProps = {
/**
* 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?: MarkerProps['anchor'];
/**
* The offset (in points) at which to display the annotation view.
*
* By default, the center point of an annotation view is placed at the coordinate point of the associated annotation.
*
* Positive offset values move the annotation view down and to the right, while negative values move it up and to the left.
*
* @default {x: 0.0, y: 0.0}
* @platform iOS: Apple Maps only. For Google Maps, see the `anchor` prop
* @platform Android: Not supported. See see the `anchor` prop
*/
centerOffset?: MarkerProps['centerOffset'];
/**
* The pincolor used on markers
*
* @platform iOS: Supported
* @platform Android: Supported
*/
color?: MarkerProps['pinColor'];
/**
* The fill color to use for the path.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
fillColor?: PolygonProps['fillColor'];
/**
* [Geojson](https://geojson.org/) description of object.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
geojson: FeatureCollection;
/**
* 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?: MarkerProps['image'];
/**
* The line cap style to apply to the open ends of the path.
* The default style is `round`.
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
lineCap?: PolylineProps['lineCap'];
/**
* 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.
*
* This property is set to `null` by default, which indicates no line dash pattern.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
lineDashPattern?: PolygonProps['lineDashPattern'] | PolylineProps['lineDashPattern'];
/**
* The offset (in points) at which to start drawing the dash pattern.
*
* Use this property to start drawing a dashed line partway through a segment or gap. For
* example, a phase value of 6 for the patter 5-2-3-2 would cause drawing to begin in the
* middle of the first gap.
*
* The default value of this property is 0.
*
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
lineDashPhase?: PolylineProps['lineDashPhase'];
/**
* The line join style to apply to corners of the path.
* The default style is `round`.
*
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
lineJoin?: PolylineProps['lineJoin'];
/**
* Component to render in place of the default marker when the overlay type is a `point`
*
* @platform iOS: Supported
* @platform Android: Supported
*/
markerComponent?: MarkerProps['children'];
/**
* The limiting value that helps avoid spikes at junctions between connected line segments.
* The miter limit helps you avoid spikes in paths that use the `miter` `lineJoin` style. If
* the ratio of the miter length—that is, the diagonal length of the miter join—to the line
* thickness exceeds the miter limit, the joint is converted to a bevel join. The default
* miter limit is 10, which results in the conversion of miters whose angle at the joint
* is less than 11 degrees.
*
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
miterLimit?: PolylineProps['miterLimit'];
/**
* Callback that is called when the user presses any of the overlays
*/
onPress?: (event: OverlayPressEvent) => void;
/**
* The stroke color to use for the path.
*
* @platform — iOS: Supported
* @platform — Android: Supported
*/
strokeColor?: PolygonProps['strokeColor'] | PolylineProps['strokeColor'];
/**
* The stroke width to use for the path.
*
* @platform — iOS: Supported
* @platform — Android: Supported
*/
strokeWidth?: PolygonProps['strokeWidth'] | PolylineProps['strokeWidth'];
/**
* Make the `Polygon` or `Polyline` tappable
*
* @platform — iOS: Google Maps only
* @platform — Android: Supported
*/
tappable?: PolygonProps['tappable'] | PolylineProps['tappable'];
/**
* The title 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
*/
title?: MarkerProps['title'];
/**
* Sets whether this marker should track view changes.
* It's recommended to turn it off whenever it's possible to improve custom marker performance.
* This is the default value for all point markers in your geojson data. It can be overriden
* on a per point basis by adding a `trackViewChanges` property to the `properties` object on the point.
*
* @default true
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
tracksViewChanges?: boolean;
/**
* The order in which this tile overlay is drawn with respect to other overlays. An overlay
* with a larger z-index is drawn over overlays with smaller z-indices. The order of overlays
* with the same z-index is arbitrary. The default zIndex is 0.
*
* @platform iOS: Apple Maps: [Marker], Google Maps: [Marker, Polygon, Polyline]
* @platform Android: Supported
*/
zIndex?: MarkerProps['zIndex'] | PolygonProps['zIndex'] | PolylineProps['zIndex'];
};
declare const Geojson: (props: GeojsonProps) => React.JSX.Element;
export default Geojson;
type OverlayPressEvent = {
type: AnyPointOverlay['type'] | AnyLineStringOverlay['type'] | AnyPolygonOverlay['type'];
feature: AnyPointOverlay['feature'] | AnyLineStringOverlay['feature'] | AnyPolygonOverlay['feature'];
coordinates: AnyPointOverlay['coordinates'] | AnyLineStringOverlay['coordinates'] | AnyPolygonOverlay['coordinates'];
holes?: AnyPolygonOverlay['holes'];
};
type AnyPointOverlay = {
type: 'point';
feature: Feature<Point | MultiPoint>;
coordinates: LatLng;
};
type AnyLineStringOverlay = {
type: 'polyline';
feature: Feature<LineString | MultiLineString>;
coordinates: LatLng[];
};
type AnyPolygonOverlay = {
type: 'polygon';
feature: Feature<Polygon | MultiPolygon>;
coordinates: LatLng[];
holes?: LatLng[][];
};

View File

@@ -0,0 +1,40 @@
import * as React from 'react';
import { type ViewProps } from 'react-native';
import { ProviderContext, type MapManagerCommand, type NativeComponent, type UIManagerCommand } from './decorateMapComponent';
import type { CalloutPressEvent } from './sharedTypes';
export type MapCalloutProps = 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?: (event: CalloutPressEvent) => void;
/**
* 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;
};
type NativeProps = MapCalloutProps;
export declare class MapCallout extends React.Component<MapCalloutProps> {
context: React.ContextType<typeof ProviderContext>;
getNativeComponent: () => NativeComponent<NativeProps>;
getMapManagerCommand: (name: string) => MapManagerCommand;
getUIManagerCommand: (name: string) => UIManagerCommand;
render(): React.JSX.Element;
}
declare const _default: typeof MapCallout;
export default _default;

View File

@@ -0,0 +1,34 @@
import * as React from 'react';
import { type NativeSyntheticEvent, type ViewProps } from 'react-native';
import { ProviderContext, type NativeComponent, type MapManagerCommand, type UIManagerCommand } from './decorateMapComponent';
import type { Frame, Point } from './sharedTypes';
export type MapCalloutSubviewProps = ViewProps & {
/**
* Callback that is called when the user presses on this subview inside callout
*
* @platform iOS: Supported
* @platform Android: Not supported
*/
onPress?: (event: CalloutSubviewPressEvent) => void;
};
type NativeProps = MapCalloutSubviewProps;
export declare class MapCalloutSubview extends React.Component<MapCalloutSubviewProps> {
context: React.ContextType<typeof ProviderContext>;
getNativeComponent: () => NativeComponent<NativeProps>;
getMapManagerCommand: (name: string) => MapManagerCommand;
getUIManagerCommand: (name: string) => UIManagerCommand;
render(): React.JSX.Element;
}
declare const _default: typeof MapCalloutSubview;
export default _default;
type CalloutSubviewPressEvent = NativeSyntheticEvent<{
/**
* Apple Maps: `callout-inside-press`
*
* Google Maps: `marker-inside-overlay-press`
*/
action: 'callout-inside-press' | 'marker-inside-overlay-press';
frame: Frame;
id: string;
point: Point;
}>;

View File

@@ -0,0 +1,117 @@
import * as React from 'react';
import { View, type ViewProps } from 'react-native';
import { ProviderContext, type NativeComponent, type MapManagerCommand, type UIManagerCommand } from './decorateMapComponent';
import type { LatLng, LineCapType, LineJoinType } from './sharedTypes';
export type MapCircleProps = ViewProps & {
/**
* The coordinates of the center of the circle.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
center: LatLng;
/**
* The fill color to use for the path.
*
* @default `#000`, `rgba(r,g,b,0.5)`
* @platform iOS: Supported
* @platform Android: Supported
*/
fillColor?: string;
/**
* The line cap style to apply to the open ends of the path
*
* @default `round`
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
lineCap?: LineCapType;
/**
* 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: Not supported
*/
lineDashPattern?: number[];
/**
* The offset (in points) at which to start drawing the dash pattern.
* Use this property to start drawing a dashed line partway through a segment or gap.
* For example, a phase value of 6 for the patter 5-2-3-2 would cause drawing to begin in the middle of the first gap.
*
* @default 0
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
lineDashPhase?: number;
/**
* The line join style to apply to corners of the path.
*
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
lineJoin?: LineJoinType;
/**
* The limiting value that helps avoid spikes at junctions between connected line segments.
* The miter limit helps you avoid spikes in paths that use the `miter` `lineJoin` style.
* If the ratio of the miter length—that is, the diagonal length of the miter join—to the line thickness exceeds the miter limit,
* the joint is converted to a bevel join.
* The default miter limit is 10, which results in the conversion of miters whose angle at the joint is less than 11 degrees.
*
* @default 10
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
miterLimit?: number;
/**
* The radius of the circle to be drawn (in meters)
*
* @platform iOS: Supported
* @platform Android: Supported
*/
radius: number;
/**
* The stroke color to use for the path.
*
* @default `#000`, `rgba(r,g,b,0.5)`
* @platform iOS: Supported
* @platform Android: Supported
*/
strokeColor?: string;
/**
* The stroke width to use for the path.
*
* @default 1
* @platform iOS: Supported
* @platform Android: Supported
*/
strokeWidth?: number;
/**
* The order in which this tile overlay is drawn with respect to other overlays.
* An overlay with a larger z-index is drawn over overlays with smaller z-indices.
* The order of overlays with the same z-index is arbitrary.
*
* @default 0
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
zIndex?: number;
};
type NativeProps = MapCircleProps & {
ref: React.RefObject<View | null>;
};
export declare class MapCircle extends React.Component<MapCircleProps> {
context: React.ContextType<typeof ProviderContext>;
getNativeComponent: () => NativeComponent<NativeProps>;
getMapManagerCommand: (name: string) => MapManagerCommand;
getUIManagerCommand: (name: string) => UIManagerCommand;
private circle;
constructor(props: MapCircleProps);
setNativeProps(props: Partial<NativeProps>): void;
render(): React.JSX.Element;
}
declare const _default: typeof MapCircle;
export default _default;

View File

@@ -0,0 +1,78 @@
import * as React from 'react';
import { View, type ProcessedColorValue, type ViewProps } from 'react-native';
import { ProviderContext, type MapManagerCommand, type NativeComponent, type UIManagerCommand } from './decorateMapComponent';
import type { LatLng } from './sharedTypes';
import type { Modify } from './sharedTypesInternal';
export type MapHeatmapProps = ViewProps & {
gradient?: {
/**
* Resolution of color map -- number corresponding to the number of steps colors are interpolated into.
*
* @default 256
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
colorMapSize: number;
/**
* Colors (one or more) to used for gradient.
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
colors: string[];
/**
* Array of floating point values from 0 to 1 representing where each color starts.
*
* Array length must be equal to `colors` array length.
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
startPoints: number[];
};
/**
* The opacity of the heatmap.
*
* @default 0.7
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
opacity?: number;
/**
* Array of heatmap entries to apply towards density.
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
points?: WeightedLatLng[];
/**
* The radius of the heatmap points in pixels, between 10 and 50.
*
* @default 20
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
radius?: number;
};
type NativeProps = Modify<MapHeatmapProps, {
gradient?: Modify<MapHeatmapProps['gradient'], {
colors: (ProcessedColorValue | null | undefined)[];
}>;
}> & {
ref: React.RefObject<View | null>;
};
export declare class MapHeatmap extends React.Component<MapHeatmapProps> {
context: React.ContextType<typeof ProviderContext>;
getNativeComponent: () => NativeComponent<NativeProps>;
getMapManagerCommand: (name: string) => MapManagerCommand;
getUIManagerCommand: (name: string) => UIManagerCommand;
private heatmap;
constructor(props: MapHeatmapProps);
setNativeProps(props: Partial<NativeProps>): void;
render(): React.JSX.Element;
}
declare const _default: typeof MapHeatmap;
export default _default;
type WeightedLatLng = LatLng & {
weight?: number;
};

View File

@@ -0,0 +1,35 @@
import * as React from 'react';
import type { ViewProps } from 'react-native';
import { ProviderContext, type NativeComponent, type MapManagerCommand, type UIManagerCommand } from './decorateMapComponent';
export type MapLocalTileProps = ViewProps & {
/**
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
pathTemplate: string;
/**
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
tileSize?: number;
/**
* Set to true to use pathTemplate to open files from Android's AssetManager. The default is false.
* @platform android
*/
useAssets?: boolean;
/**
* @platform iOS: Not supported
* @platform Android: Supported
*/
zIndex?: number;
};
type NativeProps = MapLocalTileProps;
export declare class MapLocalTile extends React.Component<MapLocalTileProps> {
context: React.ContextType<typeof ProviderContext>;
getNativeComponent: () => NativeComponent<NativeProps>;
getMapManagerCommand: (name: string) => MapManagerCommand;
getUIManagerCommand: (name: string) => UIManagerCommand;
render(): React.JSX.Element;
}
declare const _default: typeof MapLocalTile;
export default _default;

View File

@@ -0,0 +1,322 @@
import * as React from 'react';
import { Animated, type ViewProps, type ImageURISource, type ImageRequireSource } from 'react-native';
import { ProviderContext, type MapManagerCommand, type NativeComponent, type UIManagerCommand } from './decorateMapComponent';
import { type MapMarkerNativeComponentType } from './MapMarkerNativeComponent';
import type { AppleMarkerPriority } from './specs/NativeComponentMarker';
import type { CalloutPressEvent, LatLng, MarkerDeselectEvent, MarkerDragEvent, MarkerDragStartEndEvent, MarkerPressEvent, MarkerSelectEvent, Point } from './sharedTypes';
import type { Modify } from './sharedTypesInternal';
type AppleMarkerVisibility = 'hidden' | 'adaptive' | 'visible';
export type MapMarkerProps = 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;
/**
* 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 views 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;
/**
* The offset (in points) at which to display the annotation view.
*
* By default, the center point of an annotation view is placed at the coordinate point of the associated annotation.
*
* Positive offset values move the annotation view down and to the right, while negative values move it up and to the left.
*
* @default {x: 0.0, y: 0.0}
* @platform iOS: Apple Maps only. For Google Maps, see the `anchor` prop
* @platform Android: Not supported. see the `anchor` prop
*/
centerOffset?: Point;
/**
* 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;
/**
* Sets whether this marker should be flat against the map true or a billboard facing the camera.
*
* @default false
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
flat?: boolean;
/**
* Marker icon to render (equivalent to `icon` property of GMSMarker Class).
* Only local image resources are allowed to be used.
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
icon?: ImageURISource | ImageRequireSource;
/**
* A string that can be used to identify this marker.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
identifier?: string;
/**
* 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?: ImageURISource | ImageRequireSource;
/**
* 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?: (event: CalloutPressEvent) => void;
/**
* Callback that is called when the marker is deselected, before the callout is hidden.
*
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
onDeselect?: (event: MarkerDeselectEvent) => void;
/**
* Callback called continuously as the marker is dragged
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
onDrag?: (event: MarkerDragEvent) => void;
/**
* 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?: (event: MarkerDragStartEndEvent) => void;
/**
* 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?: (event: MarkerDragStartEndEvent) => void;
/**
* Callback that is called when the marker is tapped by the user.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onPress?: (event: MarkerPressEvent) => void;
/**
* 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?: (event: MarkerSelectEvent) => void;
/**
* The marker's opacity between 0.0 and 1.0.
*
* @default 1.0
* @platform iOS: Supported
* @platform Android: Supported
*/
opacity?: number;
/**
* 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?: string;
/**
* A float number indicating marker's rotation angle, in degrees.
*
* @default 0
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
rotation?: number;
/**
* Sets whether this marker should propagate `onPress` events.
* Enabling it will stop the parent `MapView`'s `onPress` from being called.
*
* Android does not propagate `onPress` events.
*
* See [#1132](https://github.com/react-community/react-native-maps/issues/1132) for more information.
*
* @default false
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
stopPropagation?: boolean;
/**
* Sets whether marker should be tappable.
* If set to false, the marker will not have onPress events.
*
* @default true
* @platform iOS: Google Maps only
* @platform Android: Not supported
*/
tappable?: 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;
/**
* Sets whether this marker should track view changes in info window.
* Enabling it will let marker change content of info window after first render pass, but will lead to decreased performance,
* so it's recommended to disable it whenever you don't need it.
* **Note**: iOS Google Maps only.
*
* @default false
* @platform iOS: Google Maps only
* @platform Android: Not supported
*/
tracksInfoWindowChanges?: boolean;
/**
* Sets whether this marker should track view changes.
* It's recommended to turn it off whenever it's possible to improve custom marker performance.
*
* @default true
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
tracksViewChanges?: boolean;
/**
* The order in which this tile overlay is drawn with respect to other overlays.
* An overlay with a larger z-index is drawn over overlays with smaller z-indices.
* The order of overlays with the same z-index is arbitrary.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
zIndex?: number;
/**
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 items display priority is high.
Low: A constant indicating that the items display priority is Low.
*/
displayPriority?: AppleMarkerPriority;
/**
* Visibility of the title text rendered beneath Marker balloon
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
titleVisibility?: AppleMarkerVisibility;
/**
* Visibility of the subtitle text rendered beneath Marker balloon
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
subtitleVisibility?: AppleMarkerVisibility;
/**
* 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;
};
type OmittedProps = Omit<MapMarkerProps, 'stopPropagation'>;
export type NativeProps = Modify<OmittedProps, {
icon?: string;
image?: MapMarkerProps['image'] | string;
}> & {
ref: React.RefObject<MapMarkerNativeComponentType | null>;
};
export declare class MapMarker extends React.Component<MapMarkerProps> {
context: React.ContextType<typeof ProviderContext>;
getNativeComponent: () => NativeComponent<NativeProps>;
getMapManagerCommand: (name: string) => MapManagerCommand;
getUIManagerCommand: (name: string) => UIManagerCommand;
static Animated: Animated.AnimatedComponent<typeof MapMarker>;
private marker;
private fabricMarker?;
constructor(props: MapMarkerProps);
setNativeProps(props: Partial<NativeProps>): void;
showCallout(): void;
hideCallout(): void;
setCoordinates(coordinate: LatLng): void;
redrawCallout(): void;
animateMarkerToCoordinate(coordinate: LatLng, duration?: number): void;
redraw(): void;
render(): React.JSX.Element;
}
declare const _default: typeof MapMarker;
export default _default;

View File

@@ -0,0 +1,14 @@
import type { HostComponent } from 'react-native';
import type { NativeProps } from './MapMarker';
import type { LatLng } from './sharedTypes';
export type MapMarkerNativeComponentType = HostComponent<NativeProps>;
interface NativeCommands {
showCallout: (viewRef: NonNullable<React.RefObject<MapMarkerNativeComponentType>['current']>) => void;
hideCallout: (viewRef: NonNullable<React.RefObject<MapMarkerNativeComponentType>['current']>) => void;
setCoordinates: (viewRef: NonNullable<React.RefObject<MapMarkerNativeComponentType>['current']>, coordinate: LatLng) => void;
redrawCallout: (viewRef: NonNullable<React.RefObject<MapMarkerNativeComponentType>['current']>) => void;
animateMarkerToCoordinate: (viewRef: NonNullable<React.RefObject<MapMarkerNativeComponentType>['current']>, coordinate: LatLng, duration: number) => void;
redraw: (viewRef: NonNullable<React.RefObject<MapMarkerNativeComponentType>['current']>) => void;
}
export declare const Commands: NativeCommands;
export {};

View File

@@ -0,0 +1,88 @@
import * as React from 'react';
import { Animated, type ViewProps, type ImageURISource, type ImageRequireSource, type NativeSyntheticEvent } from 'react-native';
import { ProviderContext, type MapManagerCommand, type NativeComponent, type UIManagerCommand } from './decorateMapComponent';
import type { LatLng, Point } from './sharedTypes';
import type { Modify } from './sharedTypesInternal';
export type MapOverlayProps = 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?: number;
/**
* The coordinates for the image (right-top corner, left-bottom corner). ie.```[[lat, long], [lat, long]]```
*
* @platform iOS: Supported
* @platform Android: Supported
*/
bounds: [Coordinate, Coordinate];
/**
* 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: ImageURISource | ImageRequireSource;
/**
* Callback that is called when the user presses on the overlay
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
onPress?: (event: OverlayPressEvent) => void;
/**
* The opacity of the overlay.
*
* @default 1
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
opacity?: number;
/**
* Boolean to allow an overlay to be tappable and use the onPress function.
*
* @default false
* @platform iOS: Not supported
* @platform Android: Supported
*/
tappable?: boolean;
};
type NativeProps = Modify<MapOverlayProps, {
image?: string;
}>;
export declare class MapOverlay extends React.Component<MapOverlayProps> {
context: React.ContextType<typeof ProviderContext>;
getNativeComponent: () => NativeComponent<NativeProps>;
getMapManagerCommand: (name: string) => MapManagerCommand;
getUIManagerCommand: (name: string) => UIManagerCommand;
static Animated: Animated.AnimatedComponent<typeof MapOverlay>;
private fabricOverlay?;
render(): React.JSX.Element;
}
type Coordinate = [number, number];
type OverlayPressEvent = NativeSyntheticEvent<{
/**
* @platform iOS: Apple Maps: `image-overlay-press`
* @platform Android: `overlay-press`
*/
action: 'overlay-press' | 'image-overlay-press';
/**
* @platform iOS: Apple Maps
*/
name?: string;
/**
* @platform iOS: Apple Maps
* @platform Android
*/
coordinate?: LatLng;
/**
* @platform Android
*/
position?: Point;
}>;
declare const _default: typeof MapOverlay;
export default _default;

View File

@@ -0,0 +1,140 @@
import * as React from 'react';
import { View, type ViewProps } from 'react-native';
import { ProviderContext, type NativeComponent, type MapManagerCommand, type UIManagerCommand } from './decorateMapComponent';
import type { PolygonPressEvent } from './MapPolygon.types';
import type { LatLng, LineCapType, LineJoinType } from './sharedTypes';
export type MapPolygonProps = ViewProps & {
/**
* An array of coordinates to describe the polygon
*
* @platform iOS: Supported
* @platform Android: Supported
*/
coordinates: LatLng[];
/**
* The fill color to use for the path.
*
* @default `#000`, `rgba(r,g,b,0.5)`
* @platform iOS: Supported
* @platform Android: Supported
*/
fillColor?: string;
/**
* 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;
/**
* A 2d array of coordinates to describe holes of the polygon where each hole has at least 3 points.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
holes?: LatLng[][];
/**
* The line cap style to apply to the open ends of the path
*
* @default `round`
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
lineCap?: LineCapType;
/**
* 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?: number[];
/**
* The offset (in points) at which to start drawing the dash pattern.
* Use this property to start drawing a dashed line partway through a segment or gap.
* For example, a phase value of 6 for the patter 5-2-3-2 would cause drawing to begin in the middle of the first gap.
*
* @default 0
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
lineDashPhase?: number;
/**
* The line join style to apply to corners of the path.
*
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
lineJoin?: LineJoinType;
/**
* The limiting value that helps avoid spikes at junctions between connected line segments.
* The miter limit helps you avoid spikes in paths that use the `miter` `lineJoin` style.
* If the ratio of the miter length—that is, the diagonal length of the miter join—to the line thickness exceeds the miter limit,
* the joint is converted to a bevel join.
* The default miter limit is 10, which results in the conversion of miters whose angle at the joint is less than 11 degrees.
*
* @default 10
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
miterLimit?: number;
/**
* Callback that is called when the user presses on the polygon
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onPress?: (event: PolygonPressEvent) => void;
/**
* The stroke color to use for the path.
*
* @default `#000`, `rgba(r,g,b,0.5)`
* @platform iOS: Supported
* @platform Android: Supported
*/
strokeColor?: string;
/**
* The stroke width to use for the path.
*
* @default 1
* @platform iOS: Supported
* @platform Android: Supported
*/
strokeWidth?: number;
/**
* Boolean to allow a polygon to be tappable and use the onPress function.
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
tappable?: boolean;
/**
* The order in which this tile overlay is drawn with respect to other overlays.
* An overlay with a larger z-index is drawn over overlays with smaller z-indices.
* The order of overlays with the same z-index is arbitrary.
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
zIndex?: number;
};
type NativeProps = MapPolygonProps & {
ref: React.RefObject<View | null>;
};
export declare class MapPolygon extends React.Component<MapPolygonProps> {
context: React.ContextType<typeof ProviderContext>;
getNativeComponent: () => NativeComponent<NativeProps>;
getMapManagerCommand: (name: string) => MapManagerCommand;
getUIManagerCommand: (name: string) => UIManagerCommand;
private polygon;
constructor(props: MapPolygonProps);
setNativeProps(props: Partial<MapPolygonProps>): void;
render(): React.JSX.Element;
}
declare const _default: typeof MapPolygon;
export default _default;

View File

@@ -0,0 +1,18 @@
import type { NativeSyntheticEvent } from 'react-native';
import type { LatLng, Point } from './sharedTypes';
export type PolygonPressEvent = NativeSyntheticEvent<{
action: 'polygon-press';
/**
* @platform iOS: Google Maps
*/
id?: string;
/**
* @platform iOS: Apple Maps
* @platform Android
*/
coordinate?: LatLng;
/**
* @platform Android
*/
position?: Point;
}>;

View File

@@ -0,0 +1,156 @@
import * as React from 'react';
import { View, type NativeSyntheticEvent, type ViewProps } from 'react-native';
import { ProviderContext, type NativeComponent, type MapManagerCommand, type UIManagerCommand } from './decorateMapComponent';
import type { LatLng, LineCapType, LineJoinType, Point } from './sharedTypes';
export type MapPolylineProps = ViewProps & {
/**
* An array of coordinates to describe the polyline
*
* @platform iOS: Supported
* @platform Android: Supported
*/
coordinates: LatLng[];
/**
* The fill color to use for the path.
*
* @default `#000`, `rgba(r,g,b,0.5)`
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
fillColor?: string;
/**
* 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?: LineCapType;
/**
* 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?: number[];
/**
* The offset (in points) at which to start drawing the dash pattern.
* Use this property to start drawing a dashed line partway through a segment or gap.
* For example, a phase value of 6 for the patter 5-2-3-2 would cause drawing to begin in the middle of the first gap.
*
* @default 0
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
lineDashPhase?: number;
/**
* The line join style to apply to corners of the path.
*
* @platform iOS: Apple Maps only
* @platform Android: supported
*/
lineJoin?: LineJoinType;
/**
* The limiting value that helps avoid spikes at junctions between connected line segments.
* The miter limit helps you avoid spikes in paths that use the `miter` `lineJoin` style.
* If the ratio of the miter length—that is, the diagonal length of the miter join—to the line thickness exceeds the miter limit,
* the joint is converted to a bevel join.
* The default miter limit is 10, which results in the conversion of miters whose angle at the joint is less than 11 degrees.
*
* @default 10
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
miterLimit?: number;
/**
* Callback that is called when the user presses on the polyline
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onPress?: (event: PolylinePressEvent) => void;
/**
* The stroke color to use for the path.
*
* @default `#000`, `rgba(r,g,b,0.5)`
* @platform iOS: Supported
* @platform Android: Supported
*/
strokeColor?: string;
/**
* The stroke colors to use for the path.
*
* Must be the same length as `coordinates`
*
* @platform iOS: Supported
* @platform Android: Supported
*/
strokeColors?: string[];
/**
* The stroke width to use for the path.
*
* @default 1
* @platform iOS: Supported
* @platform Android: Supported
*/
strokeWidth?: number;
/**
* Boolean to allow the polyline to be tappable and use the onPress function.
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
tappable?: boolean;
/**
* The order in which this tile overlay is drawn with respect to other overlays.
* An overlay with a larger z-index is drawn over overlays with smaller z-indices.
* The order of overlays with the same z-index is arbitrary.
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
zIndex?: number;
};
type NativeProps = MapPolylineProps & {
ref: React.RefObject<View | null>;
};
export declare class MapPolyline extends React.Component<MapPolylineProps> {
context: React.ContextType<typeof ProviderContext>;
getNativeComponent: () => NativeComponent<NativeProps>;
getMapManagerCommand: (name: string) => MapManagerCommand;
getUIManagerCommand: (name: string) => UIManagerCommand;
private polyline;
constructor(props: MapPolylineProps);
setNativeProps(props: Partial<NativeProps>): void;
render(): React.JSX.Element;
}
declare const _default: typeof MapPolyline;
export default _default;
export type PolylinePressEvent = NativeSyntheticEvent<{
action: 'polyline-press';
/**
* @platform iOS: Google Maps
*/
id?: string;
/**
* @platform Android
*/
coordinate?: LatLng;
/**
* @platform Android
*/
position?: Point;
}>;

View File

@@ -0,0 +1,134 @@
import * as React from 'react';
import { ProviderContext, type NativeComponent, type MapManagerCommand, type UIManagerCommand } from './decorateMapComponent';
import type { ViewProps } from 'react-native';
export type MapUrlTileProps = ViewProps & {
/**
* Doubles tile size from 256 to 512 utilising higher zoom levels
* i.e loading 4 higher zoom level tiles and combining them for one high-resolution tile.
* iOS does this automatically, even if it is not desirable always.
* NB! using this makes text labels smaller than in the original map style.
*
* @platform iOS: Not supported
* @platform Android: Supported
*/
doubleTileSize?: boolean;
/**
* Allow tiles using the TMS coordinate system (origin bottom left) to be used,
* and displayed at their correct coordinates.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
flipY?: boolean;
/**
* The maximum native zoom level for this tile overlay i.e. the highest zoom level that the tile server provides.
* Tiles are auto-scaled for higher zoom levels.
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
maximumNativeZ?: number;
/**
* The maximum zoom level for this tile overlay.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
maximumZ?: number;
/**
* The minimum zoom level for this tile overlay.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
minimumZ?: number;
/**
* In offline-mode tiles are not fetched from the tile servers, rather only tiles stored in the cache directory are used.
* Furthermore automated tile scaling is activated: if tile at a desired zoom level is not found from the cache directory,
* then lower zoom level tile is used (up to 4 levels lower) and scaled.
*
* @default false
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
offlineMode?: boolean;
/**
* Map layer opacity. Value between 0 - 1, with 0 meaning fully transparent.
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
opacity?: number;
/**
* Corresponds to MKTileOverlay canReplaceMapContent i.e. if true then underlying iOS basemap is not shown.
*
* @default false
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
shouldReplaceMapContent?: boolean;
/**
* Defines maximum age in seconds for a cached tile before it's refreshed.
*
* NB! Refresh logic is "serve-stale-while-refresh"
* i.e. to ensure map availability a stale (over max age) tile is served
* while a tile refresh process is started in the background.
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
tileCacheMaxAge?: number;
/**
* Enable caching of tiles in the specified directory.
* Directory can be specified either as a normal path or in URL format (`file://`).
*
* Tiles are stored in tileCachePath directory as `/{z}/{x}/{y}` i.e. in sub-directories 2-levels deep,
* filename is tile y-coordinate without any filetype-extension.
*
* NB! All cache management needs to be implemented by client e.g. deleting tiles to manage use of storage space etc.
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
tileCachePath?: string;
/**
* Tile size, default size is 256 (for tiles of 256 _ 256 pixels).
* High-res (aka 'retina') tiles are 512 (tiles of 512 _ 512 pixels)
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
tileSize?: number;
/**
* The url template of the map tileserver.
* (URLTile) The patterns {x} {y} {z} will be replaced at runtime.
* For example, http://c.tile.openstreetmap.org/{z}/{x}/{y}.png.
*
* It is also possible to refer to tiles in local filesystem with file:///top-level-directory/sub-directory/{z}/{x}/{y}.png URL-format.
* (WMSTile) The patterns {minX} {maxX} {minY} {maxY} {width} {height} will be replaced at runtime according to EPSG:900913 specification bounding box.
* For example, https://demo.geo-solutions.it/geoserver/tiger/wms?service=WMS&version=1.1.0&request=GetMap&layers=tiger:poi&styles=&bbox={minX},{minY},{maxX},{maxY}&width={width}&height={height}&srs=EPSG:900913&format=image/png&transparent=true&format_options=dpi:213.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
urlTemplate: string;
/**
* The order in which this tile overlay is drawn with respect to other overlays.
* An overlay with a larger z-index is drawn over overlays with smaller z-indices.
* The order of overlays with the same z-index is arbitrary.
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
zIndex?: number;
};
type NativeProps = MapUrlTileProps;
export declare class MapUrlTile extends React.Component<MapUrlTileProps> {
context: React.ContextType<typeof ProviderContext>;
getNativeComponent: () => NativeComponent<NativeProps>;
getMapManagerCommand: (name: string) => MapManagerCommand;
getUIManagerCommand: (name: string) => UIManagerCommand;
render(): React.JSX.Element;
}
declare const _default: typeof MapUrlTile;
export default _default;

View File

@@ -0,0 +1,740 @@
import * as React from 'react';
import { Animated as RNAnimated, Animated, type NativeSyntheticEvent, type ViewProps } from 'react-native';
import type { CalloutPressEvent, ClickEvent, Frame, LatLng, MarkerDeselectEvent, MarkerDragEvent, MarkerDragStartEndEvent, MarkerPressEvent, MarkerSelectEvent, Point, Provider, Region, MKPointOfInterestCategoryType } from './sharedTypes';
import type { ActiveIndoorLevel, Address, BoundingBox, Camera, CameraZoomRange, ChangeEvent, Details, EdgePadding, FitToOptions, IndoorBuilding, KmlMapEvent, LongPressEvent, MapPressEvent, MapStyleElement, MapType, MapTypes, PanDragEvent, PoiClickEvent, SnapshotOptions, UserLocationChangeEvent } from './MapView.types';
import type { Modify } from './sharedTypesInternal';
import { type MapViewNativeComponentType } from './MapViewNativeComponent';
import AnimatedRegion from './AnimatedRegion';
export declare const MAP_TYPES: MapTypes;
export type MapViewProps = ViewProps & {
/**
* If `true` map will be cached and displayed as an image instead of being interactable, for performance usage.
*
* @default false
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
cacheEnabled?: boolean;
/**
* The camera view the map should display.
*
* Use the camera system, instead of the region system, if you need control over
* the pitch or heading. Using this will ignore the `region` property.
* @platform iOS: Supported
* @platform Android: Supported
*/
camera?: Camera;
/**
* If set, changes the position of the compass.
*
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
compassOffset?: Point;
/**
* 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
*/
customMapStyle?: MapStyleElement[];
/**
* If `true` the map will focus on the user's location.
* This only works if `showsUserLocation` is true and the user has shared their location.
*
* @default false
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
followsUserLocation?: boolean;
/**
* If `false` the map will not capture PoI clicks
* This can improve click handling on the map for android
*
* @default true
* @platform iOS: Not supported
* @platform Android: supported
*/
poiClickEnabled?: boolean;
/**
* The initial camera view the map should use. Use this prop instead of `camera`
* only if you don't want to control the camera of the map besides the initial view.
*
* Use the camera system, instead of the region system, if you need control over
* the pitch or heading.
*
* Changing this prop after the component has mounted will not result in a camera change.
*
* This is similar to the `initialValue` prop of a text input.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
initialCamera?: Camera;
/**
* The initial region to be displayed by the map. Use this prop instead of `region`
* only if you don't want to control the viewport of the map besides the initial region.
*
* Changing this prop after the component has mounted will not result in a region change.
*
* This is similar to the `initialValue` prop of a text input.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
initialRegion?: Region;
/**
* The URL for KML file.
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
kmlSrc?: string;
/**
* If set, changes the position of the "Legal" label link in Apple Maps.
*
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
legalLabelInsets?: EdgePadding;
/**
* If set, changes the position of the Apple logo in Apple Maps.
* Use `left`/`top` to position from those edges, or `right`/`bottom`
* to position from opposite edges.
*
* @example
* // Position logo 10px from left, 50px from top
* appleLogoInsets={{ left: 10, top: 50 }}
*
* @example
* // Position logo 20px from right edge, 100px from bottom
* appleLogoInsets={{ right: 20, bottom: 100 }}
*
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
appleLogoInsets?: EdgePadding;
/**
* Enables lite mode on Android
*
* @platform iOS: Not supported
* @platform Android: Supported
*/
liteMode?: boolean;
/**
* https://developers.google.com/maps/documentation/get-map-id
* google cloud mapId to enable cloud styling and more
*/
googleMapId?: string;
/**
* https://developers.google.com/maps/documentation/android-sdk/renderer
* google maps renderer
* @default `LATEST`
* @platform iOS: Not supported
* @platform Android: Supported
*/
googleRenderer?: 'LATEST' | 'LEGACY';
/**
* Sets loading background color.
*
* @default `#FFFFFF`
* @platform iOS: Supported
* @platform Android: Supported
*/
loadingBackgroundColor?: string;
/**
* If `true` a loading indicator will show while the map is loading.
*
* @default false
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
loadingEnabled?: boolean;
/**
* Sets loading indicator color.
*
* @default `#606060`
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
loadingIndicatorColor?: string;
/**
* Adds custom padding to each side of the map. Useful when map elements/markers are obscured.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
mapPadding?: EdgePadding;
/**
* The map type to be displayed
*
* @default `standard`
* @platform iOS: hybrid | mutedStandard | satellite | standard | terrain | hybridFlyover | satelliteFlyover
* @platform Android: hybrid | none | satellite | standard | terrain
*/
mapType?: MapType;
/**
* TODO: Add documentation
*
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
maxDelta?: number;
/**
* Maximum zoom value for the map, must be between 0 and 20
*
* @default 20
* @platform iOS: Supported
* @platform Android: Supported
* @deprecated on Apple Maps, use `cameraZoomRange` instead
*/
maxZoomLevel?: number;
/**
* TODO: Add documentation
*
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
minDelta?: number;
/**
* Minimum zoom value for the map, must be between 0 and 20
*
* @default 0
* @platform iOS: Supported
* @platform Android: Supported
* @deprecated on Apple Maps, use `cameraZoomRange` instead
*/
minZoomLevel?: number;
/**
* If `false` the map won't move to the marker when pressed.
*
* @default true
* @platform iOS: Not supported
* @platform Android: Supported
*/
moveOnMarkerPress?: boolean;
/**
* Callback that is called when a callout is tapped by the user.
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
onCalloutPress?: (event: CalloutPressEvent) => void;
/**
* Callback that is called when user double taps on the map.
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
onDoublePress?: (event: ClickEvent) => void;
/**
* Callback that is called when an indoor building is focused/unfocused
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
onIndoorBuildingFocused?: (indoorBuilding: IndoorBuilding) => void;
/**
* Callback that is called when a level on indoor building is activated
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
onIndoorLevelActivated?: (indoorLevel: ActiveIndoorLevel) => void;
/**
* Callback that is called once the kml is fully loaded.
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
onKmlReady?: (event: KmlMapEvent) => void;
/**
* Callback that is called when user makes a "long press" somewhere on the map.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onLongPress?: (event: LongPressEvent) => void;
/**
* Callback that is called when the map has finished rendering all tiles.
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
onMapLoaded?: (event: NativeSyntheticEvent<null>) => void;
/**
* Callback that is called once the map is ready.
*
* Event is optional, as the first onMapReady callback is intercepted
* on Android, and the event is not passed on.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onMapReady?: (event?: NativeSyntheticEvent<null>) => void;
/**
* Callback that is called when a marker on the map becomes deselected.
* This will be called when the callout for that marker is about to be hidden.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onMarkerDeselect?: (event: MarkerDeselectEvent) => void;
/**
* Callback called continuously as a marker is dragged
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
onMarkerDrag?: (event: MarkerDragEvent) => void;
/**
* Callback that is called when a drag on a 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
*/
onMarkerDragEnd?: (event: MarkerDragStartEndEvent) => void;
/**
* Callback that is called when the user initiates a drag on a marker (if it is draggable)
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
onMarkerDragStart?: (event: MarkerDragStartEndEvent) => void;
/**
* Callback that is called when a marker on the map is tapped by the user.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onMarkerPress?: (event: MarkerPressEvent) => void;
/**
* Callback that is called when a marker on the map becomes selected.
* This will be called when the callout for that marker is about to be shown.
*
* @platform iOS: Supported.
* @platform Android: Supported
*/
onMarkerSelect?: (event: MarkerSelectEvent) => void;
/**
* Callback that is called when user presses and drags the map.
* **NOTE**: for iOS `scrollEnabled` should be set to false to trigger the event
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onPanDrag?: (event: PanDragEvent) => void;
/**
* Callback that is called when user click on a POI.
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
onPoiClick?: (event: PoiClickEvent) => void;
/**
* Callback that is called when user taps on the map.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onPress?: (event: MapPressEvent) => void;
/**
* Callback that is called once before the region changes, such as when the user starts moving the map.
* `isGesture` property indicates if the move was from the user (true) or an animation (false).
* **Note**: `isGesture` is supported by Google Maps only.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onRegionChangeStart?: (region: Region, details: Details) => void;
/**
* Callback that is called continuously when the region changes, such as when a user is dragging the map.
* `isGesture` property indicates if the move was from the user (true) or an animation (false).
* **Note**: `isGesture` is supported by Google Maps only.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onRegionChange?: (region: Region, details: Details) => void;
/**
* Callback that is called once when the region changes, such as when the user is done moving the map.
* `isGesture` property indicates if the move was from the user (true) or an animation (false).
* **Note**: `isGesture` is supported by Google Maps only.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onRegionChangeComplete?: (region: Region, details: Details) => void;
/**
* Callback that is called when the underlying map figures our users current location
* (coordinate also includes isFromMockProvider value for Android API 18 and above).
* Make sure **showsUserLocation** is set to *true*.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onUserLocationChange?: (event: UserLocationChangeEvent) => void;
/**
* Indicates how/when to affect padding with safe area insets
*
* @platform iOS: Google Maps only
* @platform Android: Not supported
*/
paddingAdjustmentBehavior?: 'always' | 'automatic' | 'never';
/**
* If `false` the user won't be able to adjust the cameras pitch angle.
*
* @default true
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
pitchEnabled?: boolean;
/**
* The map framework to use.
* Either `"google"` for GoogleMaps, otherwise `undefined` to use the native map framework (`MapKit` in iOS and `GoogleMaps` in android).
*
* @platform iOS: Supported
* @platform Android: Supported
*/
provider?: Provider;
/**
* The region to be displayed by the map.
* The region is defined by the center coordinates and the span of coordinates to display.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
region?: Region | AnimatedRegion;
/**
* If `false` the user won't be able to adjust the cameras pitch angle.
*
* @default true
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
rotateEnabled?: boolean;
/**
* If `false` the map will stay centered while rotating or zooming.
*
* @default true
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
scrollDuringRotateOrZoomEnabled?: boolean;
/**
* If `false` the user won't be able to change the map region being displayed.
*
* @default true
* @platform iOS: Supported
* @platform Android: Supported
*/
scrollEnabled?: boolean;
/**
* A Boolean indicating whether the map displays extruded building information.
*
* @default true
* @platform iOS: Not supported
* @platform Android: Supported
*/
showsBuildings?: boolean;
/**
* If `false` compass is not displayed on the map.
*
* @default true
* @platform iOS: Supported (adaptive, visible only if the map is not pointing north)
* @platform Android: Supported
*/
showsCompass?: boolean;
/**
* A Boolean indicating whether indoor level picker should be enabled.
*
* @default false
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
showsIndoorLevelPicker?: boolean;
/**
* A Boolean indicating whether indoor maps should be enabled.
*
* @default true
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
showsIndoors?: boolean;
/**
* If `false` hide the button to move map to the current user's location.
*
* @default false
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
showsMyLocationButton?: boolean;
/**
* A Boolean indicating whether points of interest should be displayed.
* Use `pointsOfInterestFilter` for more granular control.
* @see pointsOfInterestFilter
*/
showsPointsOfInterests?: boolean;
/**
* An array of category strings to show on the map.
* If this is set, it takes precedence over `showsPointsOfInterests`.
* @see showsPointsOfInterests
*/
pointsOfInterestFilter?: MKPointOfInterestCategoryType[];
/**
* A Boolean indicating whether the map shows scale information.
*
* @default false
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
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.
*
* This will cause iOS to ask for location permissions.
* For iOS see: [DOCS](https://github.com/react-native-maps/react-native-maps/blob/master/docs/installation.md#set-the-usage-description-property)
* @default false
* @platform iOS: Supported
* @platform Android: Supported
*/
showsUserLocation?: boolean;
/**
* Sets the tint color of the map. (Changes the color of the position indicator)
*
* @default System Blue
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
tintColor?: string;
/**
* If `false` will hide 'Navigate' and 'Open in Maps' buttons on marker press
*
* @default true
* @platform iOS: Not supported
* @platform Android: Supported
*/
toolbarEnabled?: boolean;
/**
* Sets the map to the style selected.
*
* @default System setting
* @platform iOS: Supported
* @platform Android: Supported
*/
userInterfaceStyle?: 'light' | 'dark';
/**
* The title of the annotation for current user location.
*
* This only works if `showsUserLocation` is true.
*
* @default `My Location`
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
userLocationAnnotationTitle?: string;
/**
* If `true` clicking user location will show the default callout for userLocation annotation.
*
* @default false
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
userLocationCalloutEnabled?: boolean;
/**
* Fastest interval the application will actively acquire locations.
*
* See [Google APIs documentation](https://developers.google.com/android/reference/com/google/android/gms/location/LocationRequest.html)
*
* @default 5000
* @platform iOS: Not supported
* @platform Android: Supported
*/
userLocationFastestInterval?: number;
/**
* Set power priority of user location tracking.
*
* See [Google APIs documentation](https://developers.google.com/android/reference/com/google/android/gms/location/LocationRequest.html)
*
* @default `high`
* @platform iOS: Not supported
* @platform Android: Supported
*/
userLocationPriority?: 'balanced' | 'high' | 'low' | 'passive';
/**
* Interval of user location updates in milliseconds.
*
* See [Google APIs documentation](https://developers.google.com/android/reference/com/google/android/gms/location/LocationRequest.html)
*
* @default 5000
* @platform iOS: Not supported
* @platform Android: Supported
*/
userLocationUpdateInterval?: number;
/**
* If `false` the zoom control at the bottom right of the map won't be visible.
*
* @default true
* @platform iOS: Not supported
* @platform Android: Supported
*/
zoomControlEnabled?: boolean;
/**
* If `false` the user won't be able to pinch/zoom the map.
*
* TODO: Why is the Android reactprop defaultvalue set to false?
*
* @default true
* @platform iOS: Supported
* @platform Android: Supported
*/
zoomEnabled?: boolean;
/**
* If `false` the user won't be able to double tap to zoom the map.
* **Note:** But it will greatly decrease delay of tap gesture recognition.
*
* @default true
* @platform iOS: Google Maps only
* @platform Android: Not supported
*/
zoomTapEnabled?: boolean;
/**
* Map camera distance limits. `minCenterCoordinateDistance` for minimum distance, `maxCenterCoordinateDistance` for maximum.
* `animated` for animated zoom changes.
* Takes precedence if conflicting with `minZoomLevel`, `maxZoomLevel`.
*
* @platform iOS: 13.0+
* @platform Android: Not supported
*/
cameraZoomRange?: CameraZoomRange;
};
type ModifiedProps = Modify<MapViewProps, {
region?: MapViewProps['region'] | null;
initialRegion?: MapViewProps['initialRegion'] | null;
}>;
export type NativeProps = Omit<ModifiedProps, 'customMapStyle' | 'onRegionChange' | 'onRegionChangeComplete'> & {
ref: React.RefObject<MapViewNativeComponentType | null>;
customMapStyleString?: string;
handlePanDrag?: boolean;
onChange?: (e: ChangeEvent) => void;
};
type State = {
isReady: boolean;
};
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;
getCamera(): Promise<Camera>;
setCamera(camera: Partial<Camera>): void;
animateCamera(camera: Partial<Camera>, opts?: {
duration?: number;
}): void;
animateToRegion(region: Region, duration?: number): void;
setRegion(region: Region): void;
fitToElements(options?: FitToOptions): void;
fitToSuppliedMarkers(markers: string[], options?: FitToOptions): void;
fitToCoordinates(coordinates?: LatLng[], options?: FitToOptions): void;
/**
* Get visible boudaries
*
* @return Promise Promise with the bounding box ({ northEast: <LatLng>, southWest: <LatLng> })
*/
getMapBoundaries(): Promise<BoundingBox>;
setMapBoundaries(northEast: LatLng, southWest: LatLng): void;
setIndoorActiveLevelIndex(activeLevelIndex: number): void | Promise<never>;
/**
* Takes a snapshot of the map and saves it to a picture
* file or returns the image as a base64 encoded string.
*
* @param args Configuration options
* @param [args.width] Width of the rendered map-view (when omitted actual view width is used).
* @param [args.height] Height of the rendered map-view (when omitted actual height is used).
* @param [args.region] Region to render (Only supported on iOS).
* @param [args.format] Encoding format ('png', 'jpg') (default: 'png').
* @param [args.quality] Compression quality (only used for jpg) (default: 1.0).
* @param [args.result] Result format ('file', 'base64') (default: 'file').
*
* @return Promise Promise with either the file-uri or base64 encoded string
*/
takeSnapshot(args: SnapshotOptions): Promise<string>;
/**
* Convert a coordinate to address by using default Geocoder
*
* @param coordinate Coordinate
* @param [coordinate.latitude] Latitude
* @param [coordinate.longitude] Longitude
*
* @return Promise with return type Address
*/
addressForCoordinate(coordinate: LatLng): Promise<Address>;
/**
* Convert a map coordinate to user-space point
*
* @param coordinate Coordinate
* @param [coordinate.latitude] Latitude
* @param [coordinate.longitude] Longitude
*
* @return Promise Promise with the point ({ x: Number, y: Number })
*/
pointForCoordinate(coordinate: LatLng): Promise<Point>;
/**
* Convert a user-space point to a map coordinate
*
* @param point Point
* @param [point.x] X
* @param [point.x] Y
*
* @return Promise Promise with the coordinate ({ latitude: Number, longitude: Number })
*/
coordinateForPoint(point: Point): Promise<LatLng>;
/**
* Get markers' centers and frames in user-space coordinates
*
* @param onlyVisible boolean true to include only visible markers, false to include all
*
* @return Promise Promise with { <identifier>: { point: Point, frame: Frame } }
*/
getMarkersFrames(onlyVisible?: boolean): Promise<{
[key: string]: {
point: Point;
frame: Frame;
};
}>;
/**
* Get bounding box from region
*
* @param region Region
*
* @return Object Object bounding box ({ northEast: <LatLng>, southWest: <LatLng> })
*/
boundingBoxForRegion(region: Region): BoundingBox;
private _getHandle;
private handleMapPress;
private handleMarkerPress;
private handleMarkerSelect;
private handleKmlReady;
private handleMarkerDeselect;
private handleRegionChange;
private handleRegionChangeStarted;
private handleIndoorBuildingFocused;
private handleIndoorLevelActivated;
private handleRegionChangeComplete;
private handleLongPress;
render(): React.JSX.Element;
}
export declare const AnimatedMapView: RNAnimated.AnimatedComponent<typeof MapView>;
export default MapView;

View File

@@ -0,0 +1,160 @@
import type { ClickEvent, LatLng, Point, Region } from './sharedTypes';
import type { NativeSyntheticEvent } from 'react-native';
export type Camera = {
/**
* Apple Maps
*/
altitude?: number;
center: LatLng;
heading: number;
pitch: number;
/**
* Google Maps
*/
zoom?: number;
};
export type MapStyleElement = {
featureType?: string;
elementType?: string;
stylers: object[];
};
export type EdgePadding = {
top: number;
right: number;
bottom: number;
left: number;
};
export type MapType = 'hybrid' | 'mutedStandard' | 'none' | 'satellite' | 'standard' | 'terrain' | 'satelliteFlyover' | 'hybridFlyover';
export type MapTypes = {
STANDARD: 'standard';
SATELLITE: 'satellite';
HYBRID: 'hybrid';
TERRAIN: 'terrain';
NONE: 'none';
MUTEDSTANDARD: 'mutedStandard';
SATELLITE_FLYOVER: 'satelliteFlyover';
HYBRID_FLYOVER: 'hybridFlyover';
};
export type IndoorLevel = {
index: number;
name: string;
shortName: string;
};
export type ActiveIndoorLevel = {
activeLevelIndex: number;
name: string;
shortName: string;
};
export type IndoorLevelActivatedEvent = NativeSyntheticEvent<{
indoorLevel: ActiveIndoorLevel;
}>;
export type IndoorBuilding = {
underground: boolean;
activeLevelIndex: number;
levels: IndoorLevel[];
};
export type IndoorBuildingEvent = NativeSyntheticEvent<{
IndoorBuilding: IndoorBuilding;
}>;
export type KmlMarker = {
id: string;
title: string;
description: string;
coordinate: LatLng;
position: Point;
};
export type KmlMapEvent = NativeSyntheticEvent<{
markers: KmlMarker[];
}>;
export type LongPressEvent = ClickEvent<{
/**
* @platform Android
*/
action?: 'long-press';
}>;
export type PanDragEvent = ClickEvent;
export type PoiClickEvent = NativeSyntheticEvent<{
placeId: string;
name: string;
coordinate: LatLng;
/**
* @platform Android
*/
position?: Point;
}>;
export type MapPressEvent = ClickEvent<{
/**
* @platform Android
*/
action?: 'press' | 'marker-press';
}>;
export type Details = {
isGesture?: boolean;
};
export type UserLocationChangeEvent = NativeSyntheticEvent<{
coordinate?: LatLng & {
altitude: number;
timestamp: number;
accuracy: number;
speed: number;
heading: number;
/**
* @platform iOS
*/
altitudeAccuracy?: number;
/**
* @platform Android
*/
isFromMockProvider?: boolean;
};
/**
* @platform iOS
*/
error?: {
message: string;
};
}>;
export type ChangeEvent = NativeSyntheticEvent<{
region: Region;
isGesture?: boolean;
}>;
export type FitToOptions = {
edgePadding?: EdgePadding;
animated?: boolean;
};
export type BoundingBox = {
northEast: LatLng;
southWest: LatLng;
};
export type SnapshotOptions = {
/** optional, when omitted the view-width is used */
width?: number;
/** optional, when omitted the view-height is used */
height?: number;
/** __iOS only__, optional region to render */
region?: Region;
/** image formats, defaults to 'png' */
format?: 'png' | 'jpg';
/** image quality: 0..1 (only relevant for jpg, default: 1) */
quality?: number;
/** result types, defaults to 'file' */
result?: 'file' | 'base64';
};
export type Address = {
administrativeArea: string;
country: string;
countryCode: string;
locality: string;
name: string;
postalCode: string;
subAdministrativeArea: string;
subLocality: string;
thoroughfare: string;
subThoroughfare?: string;
};
export type CameraZoomRange = {
minCenterCoordinateDistance?: number;
maxCenterCoordinateDistance?: number;
animated?: boolean;
};
export type NativeCommandName = 'animateCamera' | 'animateToRegion' | 'coordinateForPoint' | 'fitToCoordinates' | 'fitToElements' | 'fitToSuppliedMarkers' | 'getAddressFromCoordinates' | 'getCamera' | 'getMapBoundaries' | 'getMarkersFrames' | 'pointForCoordinate' | 'setCamera' | 'setIndoorActiveLevelIndex' | 'setMapBoundaries' | 'takeSnapshot';

View File

@@ -0,0 +1 @@
export { default } from 'react-native-web/dist/modules/UnimplementedView';

View File

@@ -0,0 +1,17 @@
import type { HostComponent } from 'react-native';
import type { NativeProps } from './MapView';
import type { Camera, EdgePadding } from './MapView.types';
import type { LatLng, Region } from './sharedTypes';
export type MapViewNativeComponentType = HostComponent<NativeProps>;
interface NativeCommands {
animateToRegion: (viewRef: NonNullable<React.RefObject<MapViewNativeComponentType>['current']>, region: Region, duration: number) => void;
setCamera: (viewRef: NonNullable<React.RefObject<MapViewNativeComponentType>['current']>, camera: Partial<Camera>) => void;
animateCamera: (viewRef: NonNullable<React.RefObject<MapViewNativeComponentType>['current']>, camera: Partial<Camera>, duration: number) => void;
fitToElements: (viewRef: NonNullable<React.RefObject<MapViewNativeComponentType>['current']>, edgePadding: EdgePadding, animated: boolean) => void;
fitToSuppliedMarkers: (viewRef: NonNullable<React.RefObject<MapViewNativeComponentType>['current']>, markers: string[], edgePadding: EdgePadding, animated: boolean) => void;
fitToCoordinates: (viewRef: NonNullable<React.RefObject<MapViewNativeComponentType>['current']>, coordinates: LatLng[], edgePadding: EdgePadding, animated: boolean) => void;
setMapBoundaries: (viewRef: NonNullable<React.RefObject<MapViewNativeComponentType>['current']>, northEast: LatLng, southWest: LatLng) => void;
setIndoorActiveLevelIndex: (viewRef: NonNullable<React.RefObject<MapViewNativeComponentType>['current']>, activeLevelIndex: number) => void;
}
export declare const Commands: NativeCommands;
export {};

View File

@@ -0,0 +1,116 @@
import * as React from 'react';
import type { ViewProps } from 'react-native';
import { ProviderContext, type NativeComponent, type MapManagerCommand, type UIManagerCommand } from './decorateMapComponent';
export type MapWMSTileProps = ViewProps & {
/**
* The maximum native zoom level for this tile overlay i.e. the highest zoom level that the tile server provides.
* Tiles are auto-scaled for higher zoom levels.
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
maximumNativeZ?: number;
/**
* The maximum zoom level for this tile overlay.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
maximumZ?: number;
/**
* The minimum zoom level for this tile overlay.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
minimumZ?: number;
/**
* In offline-mode tiles are not fetched from the tile servers, rather only tiles stored in the cache directory are used.
* Furthermore, automated tile scaling is activated: if tile at a desired zoom level is not found from the cache directory,
* then lower zoom level tile is used (up to 4 levels lower) and scaled.
*
* @default false
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
offlineMode?: boolean;
/**
* Map layer opacity. Value between 0 - 1, with 0 meaning fully transparent.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
opacity?: number;
/**
* Corresponds to MKTileOverlay canReplaceMapContent i.e. if true then underlying iOS basemap is not shown.
*
* @default false
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
shouldReplaceMapContent?: boolean;
/**
* Defines maximum age in seconds for a cached tile before it's refreshed.
*
* NB! Refresh logic is "serve-stale-while-refresh"
* i.e. to ensure map availability a stale (over max age) tile is served
* while a tile refresh process is started in the background.
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
tileCacheMaxAge?: number;
/**
* Enable caching of tiles in the specified directory.
* Directory can be specified either as a normal path or in URL format (`file://`).
*
* Tiles are stored in tileCachePath directory as `/{z}/{x}/{y}` i.e. in sub-directories 2-levels deep,
* filename is tile y-coordinate without any filetype-extension.
*
* NB! All cache management needs to be implemented by client e.g. deleting tiles to manage use of storage space etc.
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
tileCachePath?: string;
/**
* Tile size, default size is 256 (for tiles of 256 _ 256 pixels).
* High-res (aka 'retina') tiles are 512 (tiles of 512 _ 512 pixels)
*
* @platform iOS: Supported
* @platform Android: Supported
*/
tileSize?: number;
/**
* The url template of the map tileserver.
* (URLTile) The patterns {x} {y} {z} will be replaced at runtime.
* For example, http://c.tile.openstreetmap.org/{z}/{x}/{y}.png.
*
* It is also possible to refer to tiles in local filesystem with file:///top-level-directory/sub-directory/{z}/{x}/{y}.png URL-format.
* (WMSTile) The patterns {minX} {maxX} {minY} {maxY} {width} {height} will be replaced at runtime according to EPSG:900913 specification bounding box.
* For example, https://demo.geo-solutions.it/geoserver/tiger/wms?service=WMS&version=1.1.0&request=GetMap&layers=tiger:poi&styles=&bbox={minX},{minY},{maxX},{maxY}&width={width}&height={height}&srs=EPSG:900913&format=image/png&transparent=true&format_options=dpi:213.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
urlTemplate: string;
/**
* The order in which this tile overlay is drawn with respect to other overlays.
* An overlay with a larger z-index is drawn over overlays with smaller z-indices.
* The order of overlays with the same z-index is arbitrary.
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
zIndex?: number;
};
type NativeProps = MapWMSTileProps;
export declare class MapWMSTile extends React.Component<MapWMSTileProps> {
context: React.ContextType<typeof ProviderContext>;
getNativeComponent: () => NativeComponent<NativeProps>;
getMapManagerCommand: (name: string) => MapManagerCommand;
getUIManagerCommand: (name: string) => UIManagerCommand;
render(): React.JSX.Element;
}
declare const _default: typeof MapWMSTile;
export default _default;

View File

@@ -0,0 +1,2 @@
export declare const PROVIDER_DEFAULT: any;
export declare const PROVIDER_GOOGLE = "google";

View File

@@ -0,0 +1,25 @@
import React from 'react';
import type { LatLng, Point, Region } from './sharedTypes';
import type { Address, Camera, EdgePadding, SnapshotOptions } from './MapView.types';
import { 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>;
setCamera: (camera: Partial<Camera>) => void;
animateToRegion: (region: Region, duration: number) => void;
animateCamera: (camera: Partial<Camera>, duration: number) => void;
getMarkersFrames: (onlyVisible: boolean) => Promise<unknown>;
fitToElements: (edgePadding: EdgePadding, animated: boolean) => void;
fitToSuppliedMarkers: (markers: string[], edgePadding: EdgePadding, animated: boolean) => void;
fitToCoordinates: (coordinates: LatLng[], edgePadding: EdgePadding, animated: boolean) => void;
getMapBoundaries: () => Promise<MapBoundaries>;
takeSnapshot: (config: SnapshotOptions) => Promise<string>;
getAddressFromCoordinates: (coordinate: LatLng) => Promise<Address>;
getPointForCoordinate: (coordinate: LatLng) => Promise<Point>;
getCoordinateForPoint: (point: Point) => Promise<LatLng>;
setIndoorActiveLevelIndex: (activeLevelIndex: number) => void;
}
declare const createFabricMap: (ViewComponent: typeof GoogleMapView | typeof FabricMapView, Commands: typeof FabricCommands | typeof GoogleCommands) => React.ForwardRefExoticComponent<MapViewProps & React.RefAttributes<FabricMapHandle | null>>;
export default createFabricMap;

View File

@@ -0,0 +1,35 @@
import { type HostComponent } from 'react-native';
import type { 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';
export declare const SUPPORTED: ImplementationStatus;
export declare const USES_DEFAULT_IMPLEMENTATION: ImplementationStatus;
export declare const NOT_SUPPORTED: ImplementationStatus;
export declare const ProviderContext: import("react").Context<Provider>;
export declare function getNativeMapName(provider: Provider): "AIRMap" | "AIRGoogleMap";
export declare const createNotSupportedComponent: (message: string) => (() => null);
export declare const googleMapIsInstalled: boolean;
export default function decorateMapComponent<Type extends Component>(Component: Type, componentName: ComponentName, providers: Providers): Type;
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';
export {};

View File

@@ -0,0 +1,4 @@
import { type ImageSourcePropType } from 'react-native';
export declare function fixImageProp(image: ImageSourcePropType): {
uri: string;
} | ImageSourcePropType;

View File

@@ -0,0 +1,38 @@
import MapView, { AnimatedMapView as Animated, MAP_TYPES, type 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 declare const MarkerAnimated: import("react-native").Animated.AnimatedComponent<typeof import("./MapMarker").MapMarker>;
export declare const OverlayAnimated: import("react-native").Animated.AnimatedComponent<typeof import("./MapOverlay").MapOverlay>;
export default MapView;

View File

@@ -0,0 +1,87 @@
import type { 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;
}>;
/**
* Represents the available categories for points of interest on the Apple Maps.
* Use an array of these strings for the `pointsOfInterestFilter` prop.
* More: https://developer.apple.com/documentation/mapkit/mkpointofinterestcategory
*/
export type MKPointOfInterestCategoryType = 'museum' | 'musicVenue' | 'theater' | 'library' | 'planetarium' | 'school' | 'university' | 'movieTheater' | 'nightlife' | 'fireStation' | 'hospital' | 'pharmacy' | 'police' | 'castle' | 'fortress' | 'landmark' | 'nationalMonument' | 'bakery' | 'brewery' | 'cafe' | 'distillery' | 'foodMarket' | 'restaurant' | 'winery' | 'animalService' | 'atm' | 'automotiveRepair' | 'bank' | 'beauty' | 'evCharger' | 'fitnessCenter' | 'laundry' | 'mailbox' | 'postOffice' | 'restroom' | 'spa' | 'store' | 'amusementPark' | 'aquarium' | 'beach' | 'campground' | 'fairground' | 'marina' | 'nationalPark' | 'park' | 'rvPark' | 'zoo' | 'baseball' | 'basketball' | 'bowling' | 'goKart' | 'golf' | 'hiking' | 'miniGolf' | 'rockClimbing' | 'skatePark' | 'skating' | 'skiing' | 'soccer' | 'stadium' | 'tennis' | 'volleyball' | 'airport' | 'carRental' | 'conventionCenter' | 'gasStation' | 'hotel' | 'parking' | 'publicTransport' | 'fishing' | 'kayaking' | 'surfing' | 'swimming';

View File

@@ -0,0 +1 @@
export type Modify<T, R> = Omit<T, keyof R> & R;

View File

@@ -0,0 +1,31 @@
import type { TurboModule } from 'react-native';
import type { Double } from 'react-native/Libraries/Types/CodegenTypes';
import type { Camera } from './NativeComponentMapView';
import type { Address } from '../MapView.types';
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: string): 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;

View File

@@ -0,0 +1,46 @@
import type { HostComponent, ViewProps } from 'react-native';
import type { Double, BubblingEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
export type LatLng = Readonly<{
latitude: Double;
longitude: Double;
}>;
export type CalloutPressEvent = BubblingEventHandler<Readonly<{
action?: string;
id: string;
coordinate: {
latitude: Double;
longitude: Double;
};
position?: {
x: Double;
y: Double;
};
}>>;
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;
}
declare const _default: HostComponent<CalloutFabricNativeProps>;
export default _default;

View File

@@ -0,0 +1,74 @@
import type { HostComponent, ViewProps, ColorValue } from 'react-native';
import type { Double, Float, BubblingEventHandler, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
export type LatLng = Readonly<{
latitude: Double;
longitude: Double;
}>;
export type CirclePressEventHandler = BubblingEventHandler<Readonly<{
action?: string;
id: string;
coordinate: {
latitude: Double;
longitude: Double;
};
position?: {
x: Double;
y: Double;
};
}>>;
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?: 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;
}
declare const _default: HostComponent<CircleFabricNativeProps>;
export default _default;

View File

@@ -0,0 +1,709 @@
import type { HostComponent, ViewProps, ColorValue } from 'react-native';
import type { Double, Int32, WithDefault, Float, DirectEventHandler, BubblingEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
import GoogleMapView from './NativeComponentGoogleMapView';
export type EdgePadding = Readonly<{
top: Double;
right: Double;
bottom: Double;
left: Double;
}>;
export type ActionType = 'callout-press' | 'press' | 'marker-press' | 'long-press' | 'marker-deselect' | 'marker-select';
export type Frame = Readonly<{
x: Double;
y: Double;
width: Double;
height: Double;
}>;
export type ClickEvent = BubblingEventHandler<Readonly<{
coordinate: {
latitude: Double;
longitude: Double;
};
position: {
x: Double;
y: Double;
};
}>>;
export type KmlMarker = {
id: string;
title: string;
description: string;
coordinate: {
latitude: Double;
longitude: Double;
};
position: {
x: Double;
y: Double;
};
};
export type LongPressEventHandler = BubblingEventHandler<Readonly<{
coordinate: {
latitude: Double;
longitude: Double;
};
position: {
x: Double;
y: Double;
};
action?: string;
}>>;
export type MarkerDeselectEventHandler = BubblingEventHandler<Readonly<{
action?: string;
id: string;
coordinate: {
latitude: Double;
longitude: Double;
};
}>>;
export type MarkerSelectEventHandler = BubblingEventHandler<Readonly<{
action?: string;
id: string;
coordinate: {
latitude: Double;
longitude: Double;
};
}>>;
export type CalloutPressEvent = BubblingEventHandler<{
action?: string;
/**
* @platform iOS
*/
frame?: {
x: Double;
y: Double;
width: Double;
height: Double;
};
/**
* @platform iOS
*/
id?: string;
/**
* @platform iOS
*/
point?: {
x: Double;
y: Double;
};
/**
* @platform Android
*/
coordinate?: {
latitude: Double;
longitude: Double;
};
/**
* @platform Android
*/
position?: {
x: Double;
y: Double;
};
}>;
export type CalloutPressEventHandler = DirectEventHandler<CalloutPressEvent>;
export type Camera = Readonly<{
/**
* Apple Maps
*/
altitude?: Double;
center: LatLng;
heading: Double;
pitch: Double;
/**
* Google Maps
*/
zoom?: Float;
}>;
export type LatLng = Readonly<{
latitude: Double;
longitude: Double;
}>;
export type Point = Readonly<{
x: Double;
y: Double;
}>;
export type Region = Readonly<LatLng & {
latitudeDelta: Double;
longitudeDelta: Double;
}>;
export type IndoorLevel = Readonly<{
index: Int32;
name: string;
shortName: string;
}>;
export type IndoorLevelActivatedEventHandler = DirectEventHandler<Readonly<{
activeLevelIndex: Int32;
name: string;
shortName: string;
}>>;
export type IndoorBuilding = Readonly<{
underground: boolean;
activeLevelIndex: Int32;
levels: ReadonlyArray<IndoorLevel>;
}>;
export type IndoorBuildingEventHandler = DirectEventHandler<Readonly<{
underground: boolean;
activeLevelIndex: Int32;
levels: string;
}>>;
export type KmlMapEventHandler = DirectEventHandler<Readonly<{}>>;
export type MapLoadedEventHandler = DirectEventHandler<Readonly<{}>>;
export type MapReadyEventHandler = DirectEventHandler<Readonly<{}>>;
export type Details = Readonly<{
isGesture?: boolean;
}>;
export type MarkerDragEventHandler = BubblingEventHandler<Readonly<{
coordinate: {
latitude: Double;
longitude: Double;
};
position: {
x: Double;
y: Double;
};
id?: string;
}>>;
export type MarkerDragStartEndEventHandler = BubblingEventHandler<Readonly<{
coordinate: {
latitude: Double;
longitude: Double;
};
id?: string;
position?: {
x: Double;
y: Double;
};
}>>;
export type MarkerPressEventHandler = BubblingEventHandler<Readonly<{
action?: string;
id: string;
coordinate: {
latitude: Double;
longitude: Double;
};
position?: {
x: Double;
y: Double;
};
}>>;
export type PanDragEventHandler = BubblingEventHandler<Readonly<{
coordinate: {
latitude: Double;
longitude: Double;
};
position: {
x: Double;
y: Double;
};
}>>;
export type PoiClickEventHandler = BubblingEventHandler<Readonly<{
placeId: string;
name: string;
coordinate: {
latitude: Double;
longitude: Double;
};
position?: {
x: Double;
y: Double;
};
}>>;
export type MapPressEventHandler = BubblingEventHandler<Readonly<{
coordinate: {
latitude: Double;
longitude: Double;
};
position: {
x: Double;
y: Double;
};
action?: string;
}>>;
export type RegionChangeStartEventHandler = DirectEventHandler<Details>;
export type RegionChangeEvent = Readonly<{
region: {
latitude: Double;
longitude: Double;
latitudeDelta: Double;
longitudeDelta: Double;
};
isGesture?: boolean;
}>;
export type RegionChangeEventHandler = BubblingEventHandler<RegionChangeEvent>;
export type UserLocationChangeEvent = Readonly<{
coordinate?: {
latitude: Double;
longitude: Double;
altitude: Double;
timestamp: Double;
accuracy: Float;
speed: Float;
heading: Float;
/**
* @platform iOS
*/
altitudeAccuracy?: Float;
/**
* @platform Android
*/
isFromMockProvider?: boolean;
};
/**
* @platform iOS
*/
error?: Readonly<{
message: string;
}>;
}>;
export type UserLocationChangeEventHandler = DirectEventHandler<UserLocationChangeEvent>;
export type CameraZoomRange = Readonly<{
minCenterCoordinateDistance?: Double;
maxCenterCoordinateDistance?: Double;
animated?: boolean;
}>;
export interface MapFabricNativeProps extends ViewProps {
/**
* The camera view the map should display.
*
* Use the camera system, instead of the region system, if you need control over
* the pitch or heading. Using this will ignore the `region` property.
* @platform iOS: Supported
* @platform Android: Supported
*/
camera?: Camera;
/**
* The initial camera view the map should use. Use this prop instead of `camera`
* only if you don't want to control the camera of the map besides the initial view.
*
* Use the camera system, instead of the region system, if you need control over
* the pitch or heading.
*
* Changing this prop after the component has mounted will not result in a camera change.
*
* This is similar to the `initialValue` prop of a text input.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
initialCamera?: Camera;
/**
* The initial region to be displayed by the map. Use this prop instead of `region`
* only if you don't want to control the viewport of the map besides the initial region.
*
* Changing this prop after the component has mounted will not result in a region change.
*
* This is similar to the `initialValue` prop of a text input.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
initialRegion?: Region;
/**
* The URL for KML file.
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
kmlSrc?: string;
/**
* https://developers.google.com/maps/documentation/get-map-id
* google cloud mapId to enable cloud styling and more
*/
googleMapId?: string;
/**
* Sets loading background color.
*
* @default `#FFFFFF`
* @platform iOS: Supported
* @platform Android: Supported
*/
loadingBackgroundColor?: ColorValue;
/**
* Adds custom padding to each side of the map. Useful when map elements/markers are obscured.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
mapPadding?: EdgePadding;
/**
* The map type to be displayed
*
* @default `standard`
* @platform iOS: hybrid | mutedStandard | satellite | standard | terrain | hybridFlyover | satelliteFlyover
* @platform Android: hybrid | none | satellite | standard | terrain
*/
mapType?: WithDefault<'hybrid' | 'mutedStandard' | 'none' | 'satellite' | 'standard' | 'terrain' | 'satelliteFlyover' | 'hybridFlyover', 'standard'>;
/**
* Maximum zoom value for the map, must be between 0 and 20
*
* @default 20
* @platform iOS: Supported
* @platform Android: Supported
* @deprecated on Apple Maps, use `cameraZoomRange` instead
*/
maxZoom?: Float;
/**
* Minimum zoom value for the map, must be between 0 and 20
*
* @default 0
* @platform iOS: Supported
* @platform Android: Supported
* @deprecated on Apple Maps, use `cameraZoomRange` instead
*/
minZoom?: Float;
/**
* Callback that is called when an indoor building is focused/unfocused
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
onIndoorBuildingFocused?: IndoorBuildingEventHandler;
/**
* Callback that is called when a level on indoor building is activated
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
onIndoorLevelActivated?: IndoorLevelActivatedEventHandler;
/**
* Callback that is called once the kml is fully loaded.
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
onKmlReady?: KmlMapEventHandler;
/**
* Callback that is called when user makes a "long press" somewhere on the map.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onLongPress?: LongPressEventHandler;
/**
* Callback that is called when the map has finished rendering all tiles.
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
onMapLoaded?: MapLoadedEventHandler;
/**
* Callback that is called once the map is ready.
*
* Event is optional, as the first onMapReady callback is intercepted
* on Android, and the event is not passed on.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onMapReady?: MapReadyEventHandler;
/**
* Callback that is called when a marker on the map becomes deselected.
* This will be called when the callout for that marker is about to be hidden.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onMarkerDeselect?: MarkerDeselectEventHandler;
/**
* Callback called continuously as a marker is dragged
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
onMarkerDrag?: MarkerDragEventHandler;
/**
* Callback that is called when a drag on a 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
*/
onMarkerDragEnd?: MarkerDragStartEndEventHandler;
/**
* Callback that is called when the user initiates a drag on a marker (if it is draggable)
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
onMarkerDragStart?: MarkerDragStartEndEventHandler;
/**
* Callback that is called when a marker on the map is tapped by the user.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onMarkerPress?: MarkerPressEventHandler;
/**
* Callback that is called when a marker on the map becomes selected.
* This will be called when the callout for that marker is about to be shown.
*
* @platform iOS: Supported.
* @platform Android: Supported
*/
onMarkerSelect?: MarkerSelectEventHandler;
/**
* Callback that is called when user presses and drags the map.
* **NOTE**: for iOS `scrollEnabled` should be set to false to trigger the event
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onPanDrag?: PanDragEventHandler;
/**
* Callback that is called when user click on a POI.
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
onPoiClick?: PoiClickEventHandler;
/**
* Callback that is called when user taps on the map.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onPress?: MapPressEventHandler;
/**
* Callback that is called once before the region changes, such as when the user starts moving the map.
* `isGesture` property indicates if the move was from the user (true) or an animation (false).
* **Note**: `isGesture` is supported by Google Maps only.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onRegionChangeStart?: RegionChangeEventHandler;
/**
* Callback that is called continuously when the region changes, such as when a user is dragging the map.
* `isGesture` property indicates if the move was from the user (true) or an animation (false).
* **Note**: `isGesture` is supported by Google Maps only.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onRegionChange?: RegionChangeEventHandler;
/**
* Callback that is called once when the region changes, such as when the user is done moving the map.
* `isGesture` property indicates if the move was from the user (true) or an animation (false).
* **Note**: `isGesture` is supported by Google Maps only.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onRegionChangeComplete?: RegionChangeEventHandler;
/**
* Callback that is called when the underlying map figures our users current location
* (coordinate also includes isFromMockProvider value for Android API 18 and above).
* Make sure **showsUserLocation** is set to *true*.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onUserLocationChange?: UserLocationChangeEventHandler;
/**
* Indicates how/when to affect padding with safe area insets
*
* @platform iOS: Google Maps only
* @platform Android: Not supported
*/
paddingAdjustmentBehavior?: WithDefault<'always' | 'automatic' | 'never', 'never'>;
/**
* If `false` the user won't be able to adjust the cameras pitch angle.
*
* @default true
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
pitchEnabled?: WithDefault<boolean, true>;
/**
* The region to be displayed by the map.
* The region is defined by the center coordinates and the span of coordinates to display.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
region?: Region;
/**
* If `false` the user won't be able to adjust the cameras pitch angle.
*
* @default true
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
rotateEnabled?: WithDefault<boolean, true>;
/**
* If `false` the map will stay centered while rotating or zooming.
*
* @default true
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
scrollDuringRotateOrZoomEnabled?: WithDefault<boolean, true>;
/**
* If `false` the user won't be able to change the map region being displayed.
*
* @default true
* @platform iOS: Supported
* @platform Android: Supported
*/
scrollEnabled?: WithDefault<boolean, true>;
/**
* A Boolean indicating whether the map displays extruded building information.
*
* @default true
* @platform iOS: Not supported
* @platform Android: Supported
*/
showsBuildings?: WithDefault<boolean, true>;
/**
* If `false` compass won't be displayed on the map.
*
* @default true
* @platform iOS: Supported
* @platform Android: Supported
*/
showsCompass?: boolean;
/**
* A Boolean indicating whether indoor level picker should be enabled.
*
* @default false
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
showsIndoorLevelPicker?: boolean;
/**
* A Boolean indicating whether indoor maps should be enabled.
*
* @default true
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
showsIndoors?: WithDefault<boolean, true>;
/**
* If `false` hide the button to move the map to the current user's location.
*
* @default false
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
showsMyLocationButton?: boolean;
/**
* A Boolean indicating whether the map shows scale information.
*
* @default true
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
showsScale?: boolean;
/**
* A Boolean value indicating whether the map displays traffic information.
*
* @default false
* @platform iOS: Supported
* @platform Android: Not supported?
*/
showsTraffic?: boolean;
/**
* If `true` the users location will be displayed on the map.
*
* This will cause iOS to ask for location permissions.
* For iOS see: [DOCS](https://github.com/react-native-maps/react-native-maps/blob/master/docs/installation.md#set-the-usage-description-property)
* @default false
* @platform iOS: Supported
* @platform Android: Supported
*/
showsUserLocation?: boolean;
/**
* Sets the map to the style selected.
*
* @default System setting
* @platform iOS: Supported
* @platform Android: Supported
*/
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.
*
* @default false
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
userLocationCalloutEnabled?: boolean;
/**
* Fastest interval the application will actively acquire locations.
*
* See [Google APIs documentation](https://developers.google.com/android/reference/com/google/android/gms/location/LocationRequest.html)
*
* @default 5000
* @platform iOS: Not supported
* @platform Android: Supported
*/
userLocationFastestInterval?: Int32;
/**
* Set power priority of user location tracking.
*
* See [Google APIs documentation](https://developers.google.com/android/reference/com/google/android/gms/location/LocationRequest.html)
*
* @default `high`
* @platform iOS: Not supported
* @platform Android: Supported
*/
userLocationPriority?: WithDefault<'balanced' | 'high' | 'low' | 'passive', 'high'>;
/**
* Interval of user location updates in milliseconds.
*
* See [Google APIs documentation](https://developers.google.com/android/reference/com/google/android/gms/location/LocationRequest.html)
*
* @default 5000
* @platform iOS: Not supported
* @platform Android: Supported
*/
userLocationUpdateInterval?: Int32;
/**
* If `false` the zoom control at the bottom right of the map won't be visible.
*
* @default true
* @platform iOS: Not supported
* @platform Android: Supported
*/
zoomControlEnabled?: boolean;
/**
* If `false` the user won't be able to pinch/zoom the map.
*
* TODO: Why is the Android reactprop defaultvalue set to false?
*
* @default true
* @platform iOS: Supported
* @platform Android: Supported
*/
zoomEnabled?: WithDefault<boolean, true>;
/**
* If `false` the user won't be able to double tap to zoom the map.
* **Note:** But it will greatly decrease delay of tap gesture recognition.
*
* @default true
* @platform iOS: Google Maps only
* @platform Android: Not supported
*/
zoomTapEnabled?: WithDefault<boolean, true>;
}
interface NativeCommands {
animateToRegion: (viewRef: React.ElementRef<typeof GoogleMapView>, regionJSON: string, duration: Int32) => void;
setCamera: (viewRef: React.ElementRef<typeof GoogleMapView>, cameraJSON: string) => void;
animateCamera: (viewRef: React.ElementRef<typeof GoogleMapView>, cameraJSON: string, duration: Int32) => void;
fitToElements: (viewRef: React.ElementRef<typeof GoogleMapView>, edgePaddingJSON: string, animated: boolean) => void;
fitToSuppliedMarkers: (viewRef: React.ElementRef<typeof GoogleMapView>, markersJSON: string, edgePaddingJSON: string, animated: boolean) => void;
fitToCoordinates: (viewRef: React.ElementRef<typeof GoogleMapView>, coordinatesJSON: string, edgePaddingJSON: string, animated: boolean) => void;
setIndoorActiveLevelIndex: (viewRef: React.ElementRef<typeof GoogleMapView>, activeLevelIndex: Int32) => void;
}
export declare const Commands: NativeCommands;
declare const _default: HostComponent<MapFabricNativeProps>;
export default _default;

View File

@@ -0,0 +1,83 @@
import type { HostComponent, ViewProps, ColorValue } from 'react-native';
import type { Double, BubblingEventHandler, Float, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
export type LatLng = Readonly<{
latitude: Double;
longitude: Double;
}>;
export type PolygonPressEventHandler = BubblingEventHandler<Readonly<{
action?: string;
id: string;
coordinate: {
latitude: Double;
longitude: Double;
};
position?: {
x: Double;
y: Double;
};
}>>;
export interface PolygonFabricNativeProps extends ViewProps {
/**
* An array of coordinates to describe the polygon
*
* @platform iOS: Supported
* @platform Android: Supported
*/
coordinates: ReadonlyArray<LatLng>;
/**
* The fill color to use for the path.
*
* @default `#000`, `rgba(r,g,b,0.5)`
* @platform iOS: Supported
* @platform Android: Supported
*/
fillColor?: ColorValue;
/**
* 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 width to use for the path.
*
* @default 1
* @platform iOS: Supported
* @platform Android: Supported
*/
strokeWidth?: WithDefault<Float, 1.0>;
/**
* 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;
/**
* A 2d array of coordinates to describe holes of the polygon where each hole has at least 3 points.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
holes?: ReadonlyArray<ReadonlyArray<LatLng>>;
/**
* Boolean to allow a polygon to be tappable and use the onPress function.
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
tappable?: boolean;
/**
* Callback that is called when user taps on the map.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onPress?: PolygonPressEventHandler;
}
declare const _default: HostComponent<PolygonFabricNativeProps>;
export default _default;

View File

@@ -0,0 +1,906 @@
import type { HostComponent, ViewProps, ColorValue } from 'react-native';
import type { Double, Int32, WithDefault, Float, DirectEventHandler, BubblingEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
import FabricMapView from './NativeComponentMapView';
export type EdgePadding = Readonly<{
top: Double;
right: Double;
bottom: Double;
left: Double;
}>;
export type ActionType = 'callout-press' | 'press' | 'marker-press' | 'long-press' | 'marker-deselect' | 'marker-select';
export type Frame = Readonly<{
x: Double;
y: Double;
width: Double;
height: Double;
}>;
export type ClickEvent = DirectEventHandler<Readonly<{
coordinate: {
latitude: Double;
longitude: Double;
};
position: {
x: Double;
y: Double;
};
}>>;
export type KmlMarker = {
id: string;
title: string;
description: string;
coordinate: {
latitude: Double;
longitude: Double;
};
position: {
x: Double;
y: Double;
};
};
export type LongPressEventHandler = BubblingEventHandler<Readonly<{
coordinate: {
latitude: Double;
longitude: Double;
};
position: {
x: Double;
y: Double;
};
action?: string;
}>>;
export type MarkerDeselectEventHandler = DirectEventHandler<Readonly<{
action?: string;
id: string;
coordinate: {
latitude: Double;
longitude: Double;
};
}>>;
export type MarkerSelectEventHandler = DirectEventHandler<Readonly<{
action?: string;
id: string;
coordinate: {
latitude: Double;
longitude: Double;
};
}>>;
export type CalloutPressEvent = DirectEventHandler<{
action?: string;
/**
* @platform iOS
*/
frame?: {
x: Double;
y: Double;
width: Double;
height: Double;
};
/**
* @platform iOS
*/
id?: string;
/**
* @platform iOS
*/
point?: {
x: Double;
y: Double;
};
/**
* @platform Android
*/
coordinate?: {
latitude: Double;
longitude: Double;
};
/**
* @platform Android
*/
position?: {
x: Double;
y: Double;
};
}>;
export type CalloutPressEventHandler = DirectEventHandler<CalloutPressEvent>;
export type Camera = Readonly<{
/**
* Apple Maps
*/
altitude?: Double;
center: LatLng;
heading: Double;
pitch: Double;
/**
* Google Maps
*/
zoom?: Float;
}>;
export type LatLng = Readonly<{
latitude: Double;
longitude: Double;
}>;
export type Point = Readonly<{
x: Double;
y: Double;
}>;
export type Region = Readonly<LatLng & {
latitudeDelta: Double;
longitudeDelta: Double;
}>;
export type IndoorLevel = Readonly<{
index: Int32;
name: string;
shortName: string;
}>;
export type IndoorLevelActivatedEventHandler = DirectEventHandler<Readonly<{
IndoorLevel: {
activeLevelIndex: Int32;
name: string;
shortName: string;
};
}>>;
export type IndoorBuilding = Readonly<{
underground: boolean;
activeLevelIndex: Int32;
levels: ReadonlyArray<IndoorLevel>;
}>;
export type IndoorBuildingEventHandler = DirectEventHandler<Readonly<{
IndoorBuilding: {
underground: boolean;
activeLevelIndex: Int32;
};
}>>;
export type Details = Readonly<{
isGesture?: boolean;
}>;
export type MarkerDragEventHandler = DirectEventHandler<Readonly<{
coordinate: {
latitude: Double;
longitude: Double;
};
position: {
x: Double;
y: Double;
};
id?: string;
}>>;
export type MarkerDragStartEndEventHandler = DirectEventHandler<Readonly<{
coordinate: {
latitude: Double;
longitude: Double;
};
id?: string;
position?: {
x: Double;
y: Double;
};
}>>;
export type MarkerPressEventHandler = DirectEventHandler<Readonly<{
action?: string;
id: string;
coordinate: {
latitude: Double;
longitude: Double;
};
position?: {
x: Double;
y: Double;
};
}>>;
export type PanDragEventHandler = DirectEventHandler<Readonly<{
coordinate: {
latitude: Double;
longitude: Double;
};
position: {
x: Double;
y: Double;
};
}>>;
export type PoiClickEventHandler = DirectEventHandler<Readonly<{
placeId: string;
name: string;
coordinate: {
latitude: Double;
longitude: Double;
};
position?: {
x: Double;
y: Double;
};
}>>;
export type MapPressEventHandler = BubblingEventHandler<Readonly<{
coordinate: {
latitude: Double;
longitude: Double;
};
position: {
x: Double;
y: Double;
};
action?: string;
}>>;
export type RegionChangeEvent = Readonly<{
region: {
latitude: Double;
longitude: Double;
latitudeDelta: Double;
longitudeDelta: Double;
};
isGesture?: boolean;
}>;
export type UserLocationChangeEvent = Readonly<{
coordinate?: {
latitude: Double;
longitude: Double;
altitude: Double;
timestamp: Double;
accuracy: Float;
speed: Float;
heading: Float;
/**
* @platform iOS
*/
altitudeAccuracy?: Float;
/**
* @platform Android
*/
isFromMockProvider?: boolean;
};
/**
* @platform iOS
*/
error?: Readonly<{
message: string;
}>;
}>;
export type UserLocationChangeEventHandler = DirectEventHandler<UserLocationChangeEvent>;
export type CameraZoomRange = Readonly<{
minCenterCoordinateDistance?: Double;
maxCenterCoordinateDistance?: Double;
animated?: boolean;
}>;
export interface MapFabricNativeProps extends ViewProps {
/**
* If `true` map will be cached and displayed as an image instead of being interactable, for performance usage.
*
* @default false
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
cacheEnabled?: boolean;
/**
* The camera view the map should display.
*
* Use the camera system, instead of the region system, if you need control over
* the pitch or heading. Using this will ignore the `region` property.
* @platform iOS: Supported
* @platform Android: Supported
*/
camera?: Readonly<{
/**
* Apple Maps
*/
altitude?: Double;
center: {
latitude: Double;
longitude: Double;
};
heading: Double;
pitch: Double;
/**
* Google Maps
*/
zoom?: Float;
}>;
/**
* If set, changes the position of the compass.
*
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
compassOffset?: Point;
/**
* If `true` the map will focus on the user's location.
* This only works if `showsUserLocation` is true and the user has shared their location.
*
* @default false
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
followsUserLocation?: boolean;
/**
* If `false` the map will not capture PoI clicks
* This can improve click handling on the map for android
*
* @default true
* @platform iOS: Not supported
* @platform Android: supported
*/
poiClickEnabled?: boolean;
/**
* The initial camera view the map should use. Use this prop instead of `camera`
* only if you don't want to control the camera of the map besides the initial view.
*
* Use the camera system, instead of the region system, if you need control over
* the pitch or heading.
*
* Changing this prop after the component has mounted will not result in a camera change.
*
* This is similar to the `initialValue` prop of a text input.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
initialCamera?: Readonly<{
/**
* Apple Maps
*/
altitude?: Double;
center: {
latitude: Double;
longitude: Double;
};
heading: Double;
pitch: Double;
/**
* Google Maps
*/
zoom?: Float;
}>;
/**
* The initial region to be displayed by the map. Use this prop instead of `region`
* only if you don't want to control the viewport of the map besides the initial region.
*
* Changing this prop after the component has mounted will not result in a region change.
*
* This is similar to the `initialValue` prop of a text input.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
initialRegion?: Region;
/**
* The URL for KML file.
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
kmlSrc?: string;
/**
* If set, changes the position of the "Legal" label link in Apple Maps.
*
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
legalLabelInsets?: EdgePadding;
/**
* If set, changes the position of the Apple logo in Apple Maps.
* Use `left`/`top` to position from those edges, or `right`/`bottom`
* to position from opposite edges.
*
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
appleLogoInsets?: EdgePadding;
/**
* Enables lite mode on Android
*
* @platform iOS: Not supported
* @platform Android: Supported
*/
liteMode?: boolean;
/**
* https://developers.google.com/maps/documentation/get-map-id
* google cloud mapId to enable cloud styling and more
*/
googleMapId?: string;
/**
* https://developers.google.com/maps/documentation/android-sdk/renderer
* google maps renderer
* @default `LATEST`
* @platform iOS: Not supported
* @platform Android: Supported
*/
googleRenderer?: WithDefault<'LATEST' | 'LEGACY', 'LATEST'>;
/**
* Sets loading background color.
*
* @default `#FFFFFF`
* @platform iOS: Supported
* @platform Android: Supported
*/
loadingBackgroundColor?: ColorValue;
/**
* If `true` a loading indicator will show while the map is loading.
*
* @default false
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
loadingEnabled?: boolean;
/**
* Sets loading indicator color.
*
* @default `#606060`
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
loadingIndicatorColor?: ColorValue;
/**
* Adds custom padding to each side of the map. Useful when map elements/markers are obscured.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
mapPadding?: EdgePadding;
/**
* The map type to be displayed
*
* @default `standard`
* @platform iOS: hybrid | mutedStandard | satellite | standard | terrain | hybridFlyover | satelliteFlyover
* @platform Android: hybrid | none | satellite | standard | terrain
*/
mapType?: WithDefault<'hybrid' | 'mutedStandard' | 'none' | 'satellite' | 'standard' | 'terrain' | 'satelliteFlyover' | 'hybridFlyover', 'standard'>;
/**
* TODO: Add documentation
*
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
maxDelta?: Double;
/**
* Maximum zoom value for the map, must be between 0 and 20
*
* @default 20
* @platform iOS: Supported
* @platform Android: Supported
* @deprecated on Apple Maps, use `cameraZoomRange` instead
*/
maxZoom?: Float;
/**
* TODO: Add documentation
*
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
minDelta?: Double;
/**
* Minimum zoom value for the map, must be between 0 and 20
*
* @default 0
* @platform iOS: Supported
* @platform Android: Supported
* @deprecated on Apple Maps, use `cameraZoomRange` instead
*/
minZoom?: Float;
/**
* If `false` the map won't move to the marker when pressed.
*
* @default true
* @platform iOS: Not supported
* @platform Android: Supported
*/
moveOnMarkerPress?: WithDefault<boolean, true>;
/**
* Callback that is called when a callout is tapped by the user.
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
onCalloutPress?: CalloutPressEventHandler;
/**
* Callback that is called when user double taps on the map.
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
onDoublePress?: ClickEvent;
/**
* Callback that is called when an indoor building is focused/unfocused
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
onIndoorBuildingFocused?: IndoorBuildingEventHandler;
/**
* Callback that is called when a level on indoor building is activated
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
onIndoorLevelActivated?: IndoorLevelActivatedEventHandler;
/**
* Callback that is called once the kml is fully loaded.
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
onKmlReady?: DirectEventHandler<null>;
/**
* Callback that is called when user makes a "long press" somewhere on the map.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onLongPress?: LongPressEventHandler;
/**
* Callback that is called when the map has finished rendering all tiles.
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
onMapLoaded?: DirectEventHandler<null>;
/**
* Callback that is called once the map is ready.
*
* Event is optional, as the first onMapReady callback is intercepted
* on Android, and the event is not passed on.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onMapReady?: DirectEventHandler<null>;
/**
* Callback that is called when a marker on the map becomes deselected.
* This will be called when the callout for that marker is about to be hidden.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onMarkerDeselect?: MarkerDeselectEventHandler;
/**
* Callback called continuously as a marker is dragged
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
onMarkerDrag?: MarkerDragEventHandler;
/**
* Callback that is called when a drag on a 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
*/
onMarkerDragEnd?: MarkerDragStartEndEventHandler;
/**
* Callback that is called when the user initiates a drag on a marker (if it is draggable)
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
onMarkerDragStart?: MarkerDragStartEndEventHandler;
/**
* Callback that is called when a marker on the map is tapped by the user.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onMarkerPress?: MarkerPressEventHandler;
/**
* Callback that is called when a marker on the map becomes selected.
* This will be called when the callout for that marker is about to be shown.
*
* @platform iOS: Supported.
* @platform Android: Supported
*/
onMarkerSelect?: MarkerSelectEventHandler;
/**
* Callback that is called when user presses and drags the map.
* **NOTE**: for iOS `scrollEnabled` should be set to false to trigger the event
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onPanDrag?: PanDragEventHandler;
handlePanDrag?: boolean;
/**
* Callback that is called when user click on a POI.
*
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
onPoiClick?: PoiClickEventHandler;
/**
* Callback that is called when user taps on the map.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onPress?: MapPressEventHandler;
/**
* Callback that is called once before the region changes, such as when the user starts moving the map.
* `isGesture` property indicates if the move was from the user (true) or an animation (false).
* **Note**: `isGesture` is supported by Google Maps only.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onRegionChangeStart?: DirectEventHandler<RegionChangeEvent>;
/**
* Callback that is called continuously when the region changes, such as when a user is dragging the map.
* `isGesture` property indicates if the move was from the user (true) or an animation (false).
* **Note**: `isGesture` is supported by Google Maps only.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onRegionChange?: DirectEventHandler<RegionChangeEvent>;
/**
* Callback that is called once when the region changes, such as when the user is done moving the map.
* `isGesture` property indicates if the move was from the user (true) or an animation (false).
* **Note**: `isGesture` is supported by Google Maps only.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onRegionChangeComplete?: DirectEventHandler<RegionChangeEvent>;
/**
* Callback that is called when the underlying map figures our users current location
* (coordinate also includes isFromMockProvider value for Android API 18 and above).
* Make sure **showsUserLocation** is set to *true*.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
onUserLocationChange?: UserLocationChangeEventHandler;
/**
* Indicates how/when to affect padding with safe area insets
*
* @platform iOS: Google Maps only
* @platform Android: Not supported
*/
paddingAdjustmentBehavior?: WithDefault<'always' | 'automatic' | 'never', 'never'>;
/**
* If `false` the user won't be able to adjust the cameras pitch angle.
*
* @default true
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
pitchEnabled?: WithDefault<boolean, true>;
/**
* The region to be displayed by the map.
* The region is defined by the center coordinates and the span of coordinates to display.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
region?: Region;
/**
* If `false` the user won't be able to adjust the cameras pitch angle.
*
* @default true
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
rotateEnabled?: WithDefault<boolean, true>;
/**
* If `false` the map will stay centered while rotating or zooming.
*
* @default true
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
scrollDuringRotateOrZoomEnabled?: WithDefault<boolean, true>;
/**
* If `false` the user won't be able to change the map region being displayed.
*
* @default true
* @platform iOS: Supported
* @platform Android: Supported
*/
scrollEnabled?: WithDefault<boolean, true>;
/**
* A Boolean indicating whether the map displays extruded building information.
*
* @default true
* @platform iOS: Not supported
* @platform Android: Supported
*/
showsBuildings?: WithDefault<boolean, true>;
/**
* If `false` compass won't be displayed on the map.
*
* @default true
* @platform iOS: Supported
* @platform Android: Supported
*/
showsCompass?: WithDefault<boolean, true>;
/**
* A Boolean indicating whether indoor level picker should be enabled.
*
* @default false
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
showsIndoorLevelPicker?: boolean;
/**
* A Boolean indicating whether indoor maps should be enabled.
*
* @default true
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
showsIndoors?: WithDefault<boolean, true>;
/**
* A Boolean indicating whether points of interest should be displayed.
* Use `pointsOfInterestFilter` for more granular control.
*
* @default true
* @platform iOS: Apple Maps
* @platform Android: Not supported
*/
showsPointsOfInterests?: WithDefault<boolean, true>;
/**
* An array of category strings to show on the map.
* If this is set, it takes precedence over `showsPointsOfInterests`.
*
* @platform iOS: Apple Maps
* @platform Android: Not supported
*/
pointsOfInterestFilter?: ReadonlyArray<string>;
/**
* If `false` hide the button to move map to the current user's location.
*
* @default false
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
showsMyLocationButton?: boolean;
/**
* A Boolean indicating whether the map shows scale information.
*
* @default false
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
showsScale?: boolean;
/**
* If `true` the users location will be displayed on the map.
*
* This will cause iOS to ask for location permissions.
* For iOS see: [DOCS](https://github.com/react-native-maps/react-native-maps/blob/master/docs/installation.md#set-the-usage-description-property)
* @default false
* @platform iOS: Supported
* @platform Android: Supported
*/
showsUserLocation?: boolean;
/**
* Sets the tint color of the map. (Changes the color of the position indicator)
*
* @default System Blue
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
tintColor?: ColorValue;
/**
* If `false` will hide 'Navigate' and 'Open in Maps' buttons on marker press
*
* @default true
* @platform iOS: Not supported
* @platform Android: Supported
*/
toolbarEnabled?: WithDefault<boolean, true>;
/**
* Sets the map to the style selected.
*
* @default System setting
* @platform iOS: Supported
* @platform Android: Supported
*/
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.
*
* This only works if `showsUserLocation` is true.
*
* @default `My Location`
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
userLocationAnnotationTitle?: string;
/**
* If `true` clicking user location will show the default callout for userLocation annotation.
*
* @default false
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
userLocationCalloutEnabled?: boolean;
/**
* Fastest interval the application will actively acquire locations.
*
* See [Google APIs documentation](https://developers.google.com/android/reference/com/google/android/gms/location/LocationRequest.html)
*
* @default 5000
* @platform iOS: Not supported
* @platform Android: Supported
*/
userLocationFastestInterval?: WithDefault<Int32, 5000>;
/**
* Set power priority of user location tracking.
*
* See [Google APIs documentation](https://developers.google.com/android/reference/com/google/android/gms/location/LocationRequest.html)
*
* @default `high`
* @platform iOS: Not supported
* @platform Android: Supported
*/
userLocationPriority?: WithDefault<'balanced' | 'high' | 'low' | 'passive', 'high'>;
/**
* Interval of user location updates in milliseconds.
*
* See [Google APIs documentation](https://developers.google.com/android/reference/com/google/android/gms/location/LocationRequest.html)
*
* @default 5000
* @platform iOS: Not supported
* @platform Android: Supported
*/
userLocationUpdateInterval?: WithDefault<Int32, 5000>;
/**
* If `false` the zoom control at the bottom right of the map won't be visible.
*
* @default true
* @platform iOS: Not supported
* @platform Android: Supported
*/
zoomControlEnabled?: WithDefault<boolean, true>;
/**
* If `false` the user won't be able to pinch/zoom the map.
*
* TODO: Why is the Android reactprop defaultvalue set to false?
*
* @default true
* @platform iOS: Supported
* @platform Android: Supported
*/
zoomEnabled?: WithDefault<boolean, true>;
/**
* A Boolean value indicating whether the map displays traffic information.
*
* @default false
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
showsTraffic?: boolean;
/**
* If `false` the user won't be able to double tap to zoom the map.
* **Note:** But it will greatly decrease delay of tap gesture recognition.
*
* @default true
* @platform iOS: Google Maps only
* @platform Android: Not supported
*/
zoomTapEnabled?: WithDefault<boolean, true>;
/**
* Map camera distance limits. `minCenterCoordinateDistance` for minimum distance, `maxCenterCoordinateDistance` for maximum.
* `animated` for animated zoom changes.
* Takes precedence if conflicting with `minZoomLevel`, `maxZoomLevel`.
*
* @platform iOS: 13.0+
* @platform Android: Not supported
*/
cameraZoomRange?: CameraZoomRange;
}
interface NativeCommands {
animateToRegion: (viewRef: React.ElementRef<typeof FabricMapView>, regionJSON: string, duration: Int32) => void;
setCamera: (viewRef: React.ElementRef<typeof FabricMapView>, cameraJSON: string) => void;
animateCamera: (viewRef: React.ElementRef<typeof FabricMapView>, cameraJSON: string, duration: Int32) => void;
fitToElements: (viewRef: React.ElementRef<typeof FabricMapView>, edgePaddingJSON: string, animated: boolean) => void;
fitToSuppliedMarkers: (viewRef: React.ElementRef<typeof FabricMapView>, markersJSON: string, edgePaddingJSON: string, animated: boolean) => void;
fitToCoordinates: (viewRef: React.ElementRef<typeof FabricMapView>, coordinatesJSON: string, edgePaddingJSON: string, animated: boolean) => void;
setIndoorActiveLevelIndex: (viewRef: React.ElementRef<typeof FabricMapView>, activeLevelIndex: Int32) => void;
}
export declare const Commands: NativeCommands;
declare const _default: HostComponent<MapFabricNativeProps>;
export default _default;

View File

@@ -0,0 +1,278 @@
import type { HostComponent } from 'react-native';
import type { ViewProps, ColorValue, ImageSourcePropType as ImageSource } from 'react-native';
import type { Int32, Double, BubblingEventHandler, DirectEventHandler, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
export type LatLng = Readonly<{
latitude: Double;
longitude: Double;
}>;
export type MarkerPressEventHandler = BubblingEventHandler<Readonly<{
action: string;
id?: string;
coordinate?: {
latitude: Double;
longitude: Double;
};
position?: {
x: Double;
y: Double;
};
}>>;
export type MarkerDragEventHandler = DirectEventHandler<Readonly<{
id?: string;
coordinate?: {
latitude: Double;
longitude: Double;
};
}>>;
export type CalloutPressEventHandler = BubblingEventHandler<Readonly<{
action: string;
id?: string;
frame?: {
x: Double;
y: Double;
width: Double;
height: Double;
};
point?: {
x: Double;
y: Double;
};
}>>;
type AppleMarkerVisibility = 'hidden' | 'adaptive' | 'visible';
export type AppleMarkerPriority = 'required' | 'high' | 'low';
export type Point = Readonly<{
x: Double;
y: Double;
}>;
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 views 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 items display priority is high.
Low: A constant indicating that the items display priority is Low.
*/
displayPriority?: WithDefault<AppleMarkerPriority, 'required'>;
/**
* The offset (in points) at which to display the annotation view.
*
* By default, the center point of an annotation view is placed at the coordinate point of the associated annotation.
*
* Positive offset values move the annotation view down and to the right, while negative values move it up and to the left.
*
* @default {x: 0.0, y: 0.0}
* @platform iOS: Apple Maps only. For Google Maps, see the `anchor` prop
* @platform Android: Not supported. see the `anchor` prop
*/
centerOffset?: Point;
/**
* 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;
/**
* Sets whether this marker should track view changes.
* It's recommended to turn it off whenever it's possible to improve custom marker performance.
*
* @default true
* @platform iOS: Google Maps only
* @platform Android: Supported
*/
tracksViewChanges?: WithDefault<boolean, true>;
/**
* 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 declare const Commands: NativeCommands;
declare const _default: HostComponent<MarkerFabricNativeProps>;
export default _default;

View File

@@ -0,0 +1,76 @@
import type { 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;
longitude: Double;
}>;
export type OverlayPressEventHandler = BubblingEventHandler<Readonly<{
action?: string;
id: string;
coordinate: {
latitude: Double;
longitude: Double;
};
position?: {
x: Double;
y: Double;
};
}>>;
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: Readonly<{
northEast: {
latitude: Double;
longitude: Double;
};
southWest: {
latitude: Double;
longitude: Double;
};
}>;
/**
* 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;
}
declare const _default: HostComponent<OverlayFabricNativeProps>;
export default _default;

View File

@@ -0,0 +1,101 @@
import type { HostComponent, ViewProps, ColorValue } from 'react-native';
import type { Double, Float, BubblingEventHandler, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
export type LatLng = Readonly<{
latitude: Double;
longitude: Double;
}>;
export type PolylinePressEventHandler = BubblingEventHandler<Readonly<{
action?: string;
id: string;
coordinate: {
latitude: Double;
longitude: Double;
};
position?: {
x: Double;
y: Double;
};
}>>;
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?: 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;
}
declare const _default: HostComponent<PolylineFabricNativeProps>;
export default _default;

View File

@@ -0,0 +1,109 @@
import type { HostComponent, ViewProps } from 'react-native';
import type { Int32, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
export interface UrlTileFabricNativeProps extends ViewProps {
/**
* Doubles tile size from 256 to 512 utilising higher zoom levels
* i.e loading 4 higher zoom level tiles and combining them for one high-resolution tile.
* iOS does this automatically, even if it is not desirable always.
* NB! using this makes text labels smaller than in the original map style.
*
* @platform iOS: Not supported
* @platform Android: Supported
*/
doubleTileSize?: boolean;
/**
* Allow tiles using the TMS coordinate system (origin bottom left) to be used,
* and displayed at their correct coordinates.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
flipY?: boolean;
/**
* The maximum native zoom level for this tile overlay i.e. the highest zoom level that the tile server provides.
* Tiles are auto-scaled for higher zoom levels.
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
maximumNativeZ?: WithDefault<Int32, 100>;
/**
* The maximum zoom level for this tile overlay.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
maximumZ?: WithDefault<Int32, 100>;
/**
* The minimum zoom level for this tile overlay.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
minimumZ?: Int32;
/**
* In offline-mode tiles are not fetched from the tile servers, rather only tiles stored in the cache directory are used.
* Furthermore, automated tile scaling is activated: if tile at a desired zoom level is not found from the cache directory,
* then lower zoom level tile is used (up to 4 levels lower) and scaled.
*
* @default false
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
offlineMode?: boolean;
/**
* Corresponds to MKTileOverlay canReplaceMapContent i.e. if true then underlying iOS basemap is not shown.
*
* @default false
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
shouldReplaceMapContent?: boolean;
/**
* Defines maximum age in seconds for a cached tile before it's refreshed.
*
* NB! Refresh logic is "serve-stale-while-refresh"
* i.e. to ensure map availability a stale (over max age) tile is served
* while a tile refresh process is started in the background.
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
tileCacheMaxAge?: Int32;
/**
* Enable caching of tiles in the specified directory.
* Directory can be specified either as a normal path or in URL format (`file://`).
*
* Tiles are stored in tileCachePath directory as `/{z}/{x}/{y}` i.e. in sub-directories 2-levels deep,
* filename is tile y-coordinate without any filetype-extension.
*
* NB! All cache management needs to be implemented by client e.g. deleting tiles to manage use of storage space etc.
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
tileCachePath?: string;
/**
* Tile size, default size is 256 (for tiles of 256 _ 256 pixels).
* High-res (aka 'retina') tiles are 512 (tiles of 512 _ 512 pixels)
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
tileSize?: WithDefault<Int32, 256>;
/**
* The url template of the map tileserver.
* (URLTile) The patterns {x} {y} {z} will be replaced at runtime.
* For example, http://c.tile.openstreetmap.org/{z}/{x}/{y}.png.
*
* It is also possible to refer to tiles in local filesystem with file:///top-level-directory/sub-directory/{z}/{x}/{y}.png URL-format.
* (WMSTile) The patterns {minX} {maxX} {minY} {maxY} {width} {height} will be replaced at runtime according to EPSG:900913 specification bounding box.
* For example, https://demo.geo-solutions.it/geoserver/tiger/wms?service=WMS&version=1.1.0&request=GetMap&layers=tiger:poi&styles=&bbox={minX},{minY},{maxX},{maxY}&width={width}&height={height}&srs=EPSG:900913&format=image/png&transparent=true&format_options=dpi:213.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
urlTemplate: string;
}
declare const _default: HostComponent<UrlTileFabricNativeProps>;
export default _default;

View File

@@ -0,0 +1,91 @@
import type { HostComponent, ViewProps } from 'react-native';
import type { Int32, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
export interface WMSTileFabricNativeProps extends ViewProps {
/**
* The maximum native zoom level for this tile overlay i.e. the highest zoom level that the tile server provides.
* Tiles are auto-scaled for higher zoom levels.
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
maximumNativeZ?: WithDefault<Int32, 100>;
/**
* The maximum zoom level for this tile overlay.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
maximumZ?: WithDefault<Int32, 100>;
/**
* The minimum zoom level for this tile overlay.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
minimumZ?: Int32;
/**
* In offline-mode tiles are not fetched from the tile servers, rather only tiles stored in the cache directory are used.
* Furthermore, automated tile scaling is activated: if tile at a desired zoom level is not found from the cache directory,
* then lower zoom level tile is used (up to 4 levels lower) and scaled.
*
* @default false
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
offlineMode?: boolean;
/**
* Corresponds to MKTileOverlay canReplaceMapContent i.e. if true then underlying iOS basemap is not shown.
*
* @default false
* @platform iOS: Apple Maps only
* @platform Android: Not supported
*/
shouldReplaceMapContent?: boolean;
/**
* Defines maximum age in seconds for a cached tile before it's refreshed.
*
* NB! Refresh logic is "serve-stale-while-refresh"
* i.e. to ensure map availability a stale (over max age) tile is served
* while a tile refresh process is started in the background.
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
tileCacheMaxAge?: Int32;
/**
* Enable caching of tiles in the specified directory.
* Directory can be specified either as a normal path or in URL format (`file://`).
*
* Tiles are stored in tileCachePath directory as `/{z}/{x}/{y}` i.e. in sub-directories 2-levels deep,
* filename is tile y-coordinate without any filetype-extension.
*
* NB! All cache management needs to be implemented by client e.g. deleting tiles to manage use of storage space etc.
*
* @platform iOS: Apple Maps only
* @platform Android: Supported
*/
tileCachePath?: string;
/**
* Tile size, default size is 256 (for tiles of 256 _ 256 pixels).
* High-res (aka 'retina') tiles are 512 (tiles of 512 _ 512 pixels)
*
* @platform iOS: Supported
* @platform Android: Supported
*/
tileSize?: WithDefault<Int32, 256>;
/**
* The url template of the map tileserver.
* (URLTile) The patterns {x} {y} {z} will be replaced at runtime.
* For example, http://c.tile.openstreetmap.org/{z}/{x}/{y}.png.
*
* It is also possible to refer to tiles in local filesystem with file:///top-level-directory/sub-directory/{z}/{x}/{y}.png URL-format.
* (WMSTile) The patterns {minX} {maxX} {minY} {maxY} {width} {height} will be replaced at runtime according to EPSG:900913 specification bounding box.
* For example, https://demo.geo-solutions.it/geoserver/tiger/wms?service=WMS&version=1.1.0&request=GetMap&layers=tiger:poi&styles=&bbox={minX},{minY},{maxX},{maxY}&width={width}&height={height}&srs=EPSG:900913&format=image/png&transparent=true&format_options=dpi:213.
*
* @platform iOS: Supported
* @platform Android: Supported
*/
urlTemplate: string;
}
declare const _default: HostComponent<WMSTileFabricNativeProps>;
export default _default;

File diff suppressed because one or more lines are too long