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,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;