diff --git a/docs/image.html b/docs/image.html index 1e4074d49d2..9cb06e5c1da 100644 --- a/docs/image.html +++ b/docs/image.html @@ -457,7 +457,8 @@ exports.examples : 'Image Size', render: function() { return <ImageSizeExample source={fullImage} />; - } + }, + platform: 'ios', }, ]; diff --git a/docs/mapview.html b/docs/mapview.html index e07bef68840..0f379baff4d 100644 --- a/docs/mapview.html +++ b/docs/mapview.html @@ -13,7 +13,7 @@ Default value is false.

NOTE: You need to ad Info.plist to enable geolocation, otherwise it is going to 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, title: string, subtitle: string, leftCalloutView: element, rightCalloutView: element, detailCalloutView: element, tintColor: ColorPropType, image: Image.propTypes.source, view: element, id: string, hasLeftCallout: bool, hasRightCallout: bool, onLeftCalloutPress: function, onRightCalloutPress: function}] #

Map annotations with title/subtitle.

ioslegalLabelInsets {top: number, left: number, bottom: number, right: number} #

Insets for the map's legal label, originally at bottom left of the map. +Default value is true.

androidactive bool #

iosannotations [{latitude: number, longitude: number, animateDrop: bool, draggable: bool, onDragStateChange: function, title: string, subtitle: string, leftCalloutView: element, rightCalloutView: element, detailCalloutView: element, tintColor: ColorPropType, image: Image.propTypes.source, view: element, id: string, hasLeftCallout: bool, hasRightCallout: bool, onLeftCalloutPress: function, onRightCalloutPress: function}] #

Map annotations with title/subtitle.

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.

iosmaxDelta number #

Maximum size of area that can be displayed.

iosminDelta number #

Minimum size of area that can be displayed.

iosoverlays [{coordinates: [{latitude: number, longitude: number}], lineWidth: number, strokeColor: ColorPropType, fillColor: ColorPropType, 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.

Edit on GitHubExamples #

'use strict'; @@ -22,6 +22,7 @@ Default value is true.

var { Image, MapView, + PropTypes, StyleSheet, Text, TextInput, @@ -36,36 +37,23 @@ Default value is true.

: '0', }; -type MapRegion = { - latitude: number, - longitude: number, - latitudeDelta?: number, - longitudeDelta?: number, -}; - -type MapRegionInputState = { - region: MapRegion, -}; - var MapRegionInput = React.createClass({ propTypes: { - region: React.PropTypes.shape({ - latitude: React.PropTypes.number.isRequired, - longitude: React.PropTypes.number.isRequired, - latitudeDelta: React.PropTypes.number, - longitudeDelta: React.PropTypes.number, + region: PropTypes.shape({ + latitude: PropTypes.number.isRequired, + longitude: PropTypes.number.isRequired, + latitudeDelta: PropTypes.number, + longitudeDelta: PropTypes.number, }), - onChange: React.PropTypes.func.isRequired, + onChange: PropTypes.func.isRequired, }, - getInitialState(): MapRegionInputState { + getInitialState() { return { region: { latitude: 0, longitude: 0, - latitudeDelta: 0, - longitudeDelta: 0, } }; }, @@ -167,36 +155,14 @@ type MapRegionInputState = }); -type Annotations = Array<{ - animateDrop?: boolean, - latitude: number, - longitude: number, - title?: string, - subtitle?: string, - hasLeftCallout?: boolean, - hasRightCallout?: boolean, - onLeftCalloutPress?: Function, - onRightCalloutPress?: Function, - tintColor?: number | string, - image?: any, - id?: string, - view?: ReactElement, - leftCalloutView?: ReactElement, - rightCalloutView?: ReactElement, - detailCalloutView?: ReactElement, -}>; -type MapViewExampleState = { - isFirstLoad: boolean, - mapRegion?: MapRegion, - mapRegionInput?: MapRegion, - annotations?: Annotations, -}; - var MapViewExample = React.createClass({ - getInitialState(): MapViewExampleState { + getInitialState() { return { isFirstLoad: true, + mapRegion: undefined, + mapRegionInput: undefined, + annotations: [], }; }, @@ -218,7 +184,7 @@ type MapViewExampleState = ); }, - _getAnnotations(region): Annotations { + _getAnnotations(region) { return [{ longitude: region.longitude, latitude: region.latitude, @@ -252,16 +218,13 @@ type MapViewExampleState = }); -type AnnotationExampleState = { - isFirstLoad: boolean, - annotations?: Annotations, - mapRegion?: MapRegion, -}; var AnnotationExample = React.createClass({ - getInitialState(): AnnotationExampleState { + getInitialState() { return { isFirstLoad: true, + annotations: [], + mapRegion: undefined, }; }, @@ -354,6 +317,17 @@ exports.examples }}/>; } }, + { + title: 'Draggable pin', + render() { + return <AnnotationExample style={styles.map} annotation={{ + draggable: true, + onDragStateChange: (event) => { + console.log('Drag state: ' + event.state); + }, + }}/>; + } + }, { title: 'Custom pin color', render() {