React NativeMapView # | Edit on GitHub |
A component for displaying embeddable maps and annotations using the native -iOS MKMapView class. The Android version is not currently available in the -open source React Native project, but you can use Leland Richardson's -cross-platform and more feature-complete +
MapView # | Edit on GitHub |
This component is only supported on iOS.
MapView is used to display embeddable maps and annotations using
+MKMapView.
For a cross-platform solution, check out react-native-maps -instead.
Props #
onAnnotationPress function #
Deprecated. Use annotation onFocus and onBlur instead.
onRegionChange function #
Callback that is called continuously when the user is dragging the map.
onRegionChangeComplete function #
Callback that is called once, when the user is done moving the map.
pitchEnabled bool #
When this property is set to true and a valid camera is associated
-with the map, the camera’s pitch angle is used to tilt the plane
-of the map. When this property is set to false, the camera’s pitch
-angle is ignored and the map is always displayed as if the user
-is looking straight down onto it.
region {latitude: number, longitude: number, latitudeDelta: number, longitudeDelta: number} #
The region to be displayed by the map.
The region is defined by the center coordinates and the span of -coordinates to display.
rotateEnabled bool #
When this property is set to true and a valid camera is associated with
-the map, the camera’s heading angle is used to rotate the plane of the
-map around its center point. When this property is set to false, the
-camera’s heading angle is ignored and the map is always oriented so
-that true north is situated at the top of the map view
scrollEnabled bool #
If false the user won't be able to change the map region being displayed.
-Default value is true.
showsUserLocation bool #
If true the app will ask for the user's location and display it on
-the map. Default value is false.
NOTE: on iOS, you need to add the NSLocationWhenInUseUsageDescription
-key in Info.plist to enable geolocation, otherwise it will fail silently.
style View#style #
Used to style and layout the MapView. See StyleSheet.js and
-ViewStylePropTypes.js for more info.
zoomEnabled bool #
If false the user won't be able to pinch/zoom the map.
-Default value is true.
androidactive bool #
iosannotations [{latitude: number, longitude: number, animateDrop: bool, draggable: bool, onDragStateChange: function, onFocus: function, onBlur: function, title: string, subtitle: string, leftCalloutView: element, rightCalloutView: element, detailCalloutView: element, tintColor: [object Object], image: Image.propTypes.source, view: element, id: string, hasLeftCallout: deprecatedPropType(
+by Leland Richardson.import React, { Component } from 'react';
+import { MapView } from 'react-native';
+
+class MapMyRide extends Component {
+ render() {
+ return (
+ <MapView
+ style={{height: 200, margin: 40}}
+ showsUserLocation={true}
+ />
+ );
+ }
+}
Props #
annotations [{latitude: number, longitude: number, animateDrop: bool, draggable: bool, onDragStateChange: function, onFocus: function, onBlur: function, title: string, subtitle: string, leftCalloutView: element, rightCalloutView: element, detailCalloutView: element, tintColor: [object Object], image: Image.propTypes.source, view: element, id: string, hasLeftCallout: deprecatedPropType(
React.PropTypes.bool,
'Use `leftCalloutView` instead.'
), hasRightCallout: deprecatedPropType(
@@ -29,12 +25,24 @@ Default value is true.
#
Map annotations with title/subtitle.
iosfollowUserLocation bool #
If true the map will follow the user's location whenever it changes.
+)}] #
Map annotations with title and subtitle.
followUserLocation bool #
If true the map will follow the user's location whenever it changes.
Note that this has no effect unless showsUserLocation is enabled.
-Default value is true.
ioslegalLabelInsets {top: number, left: number, bottom: number, right: number} #
Insets for the map's legal label, originally at bottom left of the map.
-See EdgeInsetsPropType.js for more information.
iosmapType enum('standard', 'satellite', 'hybrid') #
The map type to be displayed.
- standard: standard road map (default)
- satellite: satellite view
- hybrid: satellite view with roads and points of interest overlaid
iosmaxDelta number #
Maximum size of area that can be displayed.
iosminDelta number #
Minimum size of area that can be displayed.
iosoverlays [{coordinates: [object Object], lineWidth: number, strokeColor: [object Object], fillColor: [object Object], id: string}] #
Map overlays
iosshowsCompass bool #
If false compass won't be displayed on the map.
-Default value is true.
iosshowsPointsOfInterest bool #
If false points of interest won't be displayed on the map.
-Default value is true.
Type Definitions #
Examples # | Edit on GitHub |
true.legalLabelInsets {top: number, left: number, bottom: number, right: number} #
Insets for the map's legal label, originally at bottom left of the map.
mapType enum('standard', 'satellite', 'hybrid') #
The map type to be displayed.
standard: Standard road map (default).satellite: Satellite view.hybrid: Satellite view with roads and points of interest overlaid.
maxDelta number #
Maximum size of the area that can be displayed.
minDelta number #
Minimum size of the area that can be displayed.
onAnnotationPress function #
Deprecated. Use annotation onFocus and onBlur instead.
onRegionChange function #
Callback that is called continuously when the user is dragging the map.
onRegionChangeComplete function #
Callback that is called once, when the user is done moving the map.
overlays [{coordinates: [object Object], lineWidth: number, strokeColor: [object Object], fillColor: [object Object], id: string}] #
Map overlays
pitchEnabled bool #
When this property is set to true and a valid camera is associated
+with the map, the camera’s pitch angle is used to tilt the plane
+of the map.
When this property is set to false, the camera’s pitch
+angle is ignored and the map is always displayed as if the user
+is looking straight down onto it.
region {latitude: number, longitude: number, latitudeDelta: number, longitudeDelta: number} #
The region to be displayed by the map.
The region is defined by the center coordinates and the span of +coordinates to display.
rotateEnabled bool #
When this property is set to true and a valid camera is associated with
+the map, the camera’s heading angle is used to rotate the plane of the
+map around its center point.
When this property is set to false, the
+camera’s heading angle is ignored and the map is always oriented so
+that true north is situated at the top of the map view
scrollEnabled bool #
If false the user won't be able to change the map region being displayed.
+Default value is true.
showsCompass bool #
If false, compass won't be displayed on the map.
+Default value is true.
showsPointsOfInterest bool #
If false points of interest won't be displayed on the map.
+Default value is true.
showsUserLocation bool #
If true the app will ask for the user's location and display it on
+the map. Default value is false.
NOTE: You'll need to add the NSLocationWhenInUseUsageDescription
+key in Info.plist to enable geolocation, otherwise it will fail silently.
style View#style #
Used to style and layout the MapView.
zoomEnabled bool #
If false the user won't be able to pinch/zoom the map.
+Default value is true.
androidactive bool #
Type Definitions #
AnnotationDragState #
State an annotation on the map.
$Enum
Constants:
| Value | Description |
|---|---|
| idle | Annotation is not being touched. |
| starting | Annotation dragging has began. |
| dragging | Annotation is being dragged. |
| canceling | Annotation dragging is being canceled. |
| ending | Annotation dragging has ended. |
Examples # | Edit on GitHub |