Skip to content

Commit 7d081ac

Browse files
Christine AbernathyMorgan Pretty
authored andcommitted
Update MapView doc
Summary: Reference: facebook#8203 Changes made: - Added a MapView example to the intro section - Added more details to prop explanations - Added more info to an exported type, even if it's not used anywhere I can see - Removed mention of ios platform in props. Left an android one in there as I didn't want to touch code. **Test plan (required)** Ran the website locally and checked: http://localhost:8079/react-native/docs/mapview.html ![component_mapview_2](https://cloud.githubusercontent.com/assets/691109/16329753/43419508-3999-11e6-9310-11c53ca8c04b.png) Closes facebook#8389 Differential Revision: D3481609 Pulled By: JoelMarcey fbshipit-source-id: 71e35ce49193dc09d40546ff16bc48559135d63f
1 parent 3101de9 commit 7d081ac

File tree

1 file changed

+59
-30
lines changed

1 file changed

+59
-30
lines changed

Libraries/Components/MapView/MapView.js

Lines changed: 59 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -27,21 +27,58 @@ const requireNativeComponent = require('requireNativeComponent');
2727

2828
type Event = Object;
2929

30+
/**
31+
* State an annotation on the map.
32+
*/
3033
export type AnnotationDragState = $Enum<{
34+
/**
35+
* Annotation is not being touched.
36+
*/
3137
idle: string;
38+
/**
39+
* Annotation dragging has began.
40+
*/
3241
starting: string;
42+
/**
43+
* Annotation is being dragged.
44+
*/
3345
dragging: string;
46+
/**
47+
* Annotation dragging is being canceled.
48+
*/
3449
canceling: string;
50+
/**
51+
* Annotation dragging has ended.
52+
*/
3553
ending: string;
3654
}>;
3755

3856
/**
39-
* A component for displaying embeddable maps and annotations using the native
40-
* iOS MKMapView class. The Android version is not currently available in the
41-
* open source React Native project, but you can use Leland Richardson's
42-
* cross-platform and more feature-complete
57+
* **This component is only supported on iOS.**
58+
*
59+
* `MapView` is used to display embeddable maps and annotations using
60+
* `MKMapView`.
61+
*
62+
* For a cross-platform solution, check out
4363
* [react-native-maps](https://github.com/lelandrichardson/react-native-maps)
44-
* instead.
64+
* by Leland Richardson.
65+
*
66+
* ```
67+
* import React, { Component } from 'react';
68+
* import { MapView } from 'react-native';
69+
*
70+
* class MapMyRide extends Component {
71+
* render() {
72+
* return (
73+
* <MapView
74+
* style={{height: 200, margin: 40}}
75+
* showsUserLocation={true}
76+
* />
77+
* );
78+
* }
79+
* }
80+
* ```
81+
*
4582
*/
4683

4784
const MapView = React.createClass({
@@ -51,16 +88,15 @@ const MapView = React.createClass({
5188
propTypes: {
5289
...View.propTypes,
5390
/**
54-
* Used to style and layout the `MapView`. See `StyleSheet.js` and
55-
* `ViewStylePropTypes.js` for more info.
91+
* Used to style and layout the `MapView`.
5692
*/
5793
style: View.propTypes.style,
5894

5995
/**
6096
* If `true` the app will ask for the user's location and display it on
6197
* the map. Default value is `false`.
6298
*
63-
* **NOTE**: on iOS, you need to add the `NSLocationWhenInUseUsageDescription`
99+
* **NOTE**: You'll need to add the `NSLocationWhenInUseUsageDescription`
64100
* key in Info.plist to enable geolocation, otherwise it will fail silently.
65101
*/
66102
showsUserLocation: React.PropTypes.bool,
@@ -69,21 +105,18 @@ const MapView = React.createClass({
69105
* If `true` the map will follow the user's location whenever it changes.
70106
* Note that this has no effect unless `showsUserLocation` is enabled.
71107
* Default value is `true`.
72-
* @platform ios
73108
*/
74109
followUserLocation: React.PropTypes.bool,
75110

76111
/**
77112
* If `false` points of interest won't be displayed on the map.
78113
* Default value is `true`.
79-
* @platform ios
80114
*/
81115
showsPointsOfInterest: React.PropTypes.bool,
82116

83117
/**
84-
* If `false` compass won't be displayed on the map.
118+
* If `false`, compass won't be displayed on the map.
85119
* Default value is `true`.
86-
* @platform ios
87120
*/
88121
showsCompass: React.PropTypes.bool,
89122

@@ -96,7 +129,9 @@ const MapView = React.createClass({
96129
/**
97130
* When this property is set to `true` and a valid camera is associated with
98131
* the map, the camera’s heading angle is used to rotate the plane of the
99-
* map around its center point. When this property is set to `false`, the
132+
* map around its center point.
133+
*
134+
* When this property is set to `false`, the
100135
* camera’s heading angle is ignored and the map is always oriented so
101136
* that true north is situated at the top of the map view
102137
*/
@@ -105,7 +140,9 @@ const MapView = React.createClass({
105140
/**
106141
* When this property is set to `true` and a valid camera is associated
107142
* with the map, the camera’s pitch angle is used to tilt the plane
108-
* of the map. When this property is set to `false`, the camera’s pitch
143+
* of the map.
144+
*
145+
* When this property is set to `false`, the camera’s pitch
109146
* angle is ignored and the map is always displayed as if the user
110147
* is looking straight down onto it.
111148
*/
@@ -120,11 +157,9 @@ const MapView = React.createClass({
120157
/**
121158
* The map type to be displayed.
122159
*
123-
* - standard: standard road map (default)
124-
* - satellite: satellite view
125-
* - hybrid: satellite view with roads and points of interest overlaid
126-
*
127-
* @platform ios
160+
* - `standard`: Standard road map (default).
161+
* - `satellite`: Satellite view.
162+
* - `hybrid`: Satellite view with roads and points of interest overlaid.
128163
*/
129164
mapType: React.PropTypes.oneOf([
130165
'standard',
@@ -154,8 +189,7 @@ const MapView = React.createClass({
154189
}),
155190

156191
/**
157-
* Map annotations with title/subtitle.
158-
* @platform ios
192+
* Map annotations with title and subtitle.
159193
*/
160194
annotations: React.PropTypes.arrayOf(React.PropTypes.shape({
161195
/**
@@ -192,7 +226,7 @@ const MapView = React.createClass({
192226
onBlur: React.PropTypes.func,
193227

194228
/**
195-
* Annotation title/subtile.
229+
* Annotation title and subtile.
196230
*/
197231
title: React.PropTypes.string,
198232
subtitle: React.PropTypes.string,
@@ -253,7 +287,6 @@ const MapView = React.createClass({
253287

254288
/**
255289
* Map overlays
256-
* @platform ios
257290
*/
258291
overlays: React.PropTypes.arrayOf(React.PropTypes.shape({
259292
/**
@@ -278,21 +311,17 @@ const MapView = React.createClass({
278311
})),
279312

280313
/**
281-
* Maximum size of area that can be displayed.
282-
* @platform ios
314+
* Maximum size of the area that can be displayed.
283315
*/
284316
maxDelta: React.PropTypes.number,
285317

286318
/**
287-
* Minimum size of area that can be displayed.
288-
* @platform ios
319+
* Minimum size of the area that can be displayed.
289320
*/
290321
minDelta: React.PropTypes.number,
291322

292323
/**
293324
* Insets for the map's legal label, originally at bottom left of the map.
294-
* See `EdgeInsetsPropType.js` for more information.
295-
* @platform ios
296325
*/
297326
legalLabelInsets: EdgeInsetsPropType,
298327

@@ -307,7 +336,7 @@ const MapView = React.createClass({
307336
onRegionChangeComplete: React.PropTypes.func,
308337

309338
/**
310-
* Deprecated. Use annotation onFocus and onBlur instead.
339+
* Deprecated. Use annotation `onFocus` and `onBlur` instead.
311340
*/
312341
onAnnotationPress: React.PropTypes.func,
313342

0 commit comments

Comments
 (0)