react-native-maps

Installation

Compatibility

Note about React requires

Component API

General Usage

importMapViewfrom'react-native-maps';

varMapView=require('react-native-maps');

Rendering a Map with an initial region

MapView

<MapViewinitialRegion={{latitude:37.78825,longitude:-122.4324,latitudeDelta:0.0922,longitudeDelta:0.0421,}}/>

Using a MapView while controlling the region as state

getInitialState(){return{region:{latitude:37.78825,longitude:-122.4324,latitudeDelta:0.0922,longitudeDelta:0.0421,},};}onRegionChange(region){this.setState({ region});}render(){return(<MapViewregion={this.state.region}onRegionChange={this.onRegionChange}/>);}

Rendering a list of markers on a map

import{Marker}from'react-native-maps';<MapViewregion={this.state.region}onRegionChange={this.onRegionChange}>{this.state.markers.map(marker=>(<Markercoordinate={marker.latlng}title={marker.title}description={marker.description}/>))}</MapView>

Rendering a Marker with a custom view

<Markercoordinate={marker.latlng}><MyCustomMarkerView{...marker}/></Marker>

Rendering a Marker with a custom image

<Markercoordinate={marker.latlng}image={require('../assets/pin.png')}/>

Rendering a custom Marker with a custom Callout

import{Callout}from'react-native-maps';<Markercoordinate={marker.latlng}><MyCustomMarkerView{...marker}/><Callout><MyCustomCalloutView{...marker}/></Callout></Marker>

Draggable Markers

<MapViewinitialRegion={...}><Markerdraggablecoordinate={this.state.x}onDragEnd={(e)=>this.setState({x:e.nativeEvent.coordinate})}/></MapView>

Using a custom Tile Overlay

Tile Overlay using tile server

import{UrlTile}from'react-native-maps';<MapViewregion={this.state.region}onRegionChange={this.onRegionChange}><UrlTile/**   * The url template of the tile server. The patterns {x} {y} {z} will be replaced at runtime   * For example, http://c.tile.openstreetmap.org/{z}/{x}/{y}.png   */urlTemplate={this.state.urlTemplate}/**     * The maximum zoom level for this tile overlay. Corresponds to the maximumZ setting in     * MKTileOverlay. iOS only.     */maximumZ={19}/></MapView>

<uses-permissionandroid:name="android.permission.INTERNET" />

Tile Overlay using local tiles

import{LocalTile}from'react-native-maps';<MapViewregion={this.state.region}onRegionChange={this.onRegionChange}><LocalTile/**    * The path template of the locally stored tiles. The patterns {x} {y} {z} will be replaced at runtime    * For example, /storage/emulated/0/mytiles/{z}/{x}/{y}.png    */pathTemplate={this.state.pathTemplate}/**    * The size of provided local tiles (usually 256 or 512).    */tileSize={256}/></MapView>

<MapView  mapType={Platform.OS == "android" ? "none" : "standard"}>

Overlaying other components on the map

render(){return(<MapViewregion={this.state.region}/><OverlayComponentstyle={{position:“absolute”,bottom:50}}/>);}

Customizing the map style

// The generated json objectmapStyle=[ ...]render(){return(<MapViewregion={this.state.region}onRegionChange={this.onRegionChange}customMapStyle={mapStyle}/>);}

importMapView,{PROVIDER_GOOGLE}from'react-native-maps'// ...<MapViewprovider={PROVIDER_GOOGLE}customMapStyle={MapStyle}>

Examples

npm inpm start#Androidnpm run run:android#iOSnpm run build:iosnpm run run:ios

MapView Events

Tracking Region / Location

Programmatically Changing Region

Changing the style of the map

Arbitrary React Views as Markers

Using the MapView with the Animated API

Polygon Creator

Other Overlays

Gradient Polylines (iOS MapKit only)

Default Markers

Custom Callouts

Image-based Markers

Draggable Markers

Lite Mode ( Android )

On Poi Click (Google Maps Only)

Animated Region

importMapView,{AnimatedRegion,Animated}from'react-native-maps';getInitialState(){return{region:newAnimatedRegion({latitude:LATITUDE,longitude:LONGITUDE,latitudeDelta:LATITUDE_DELTA,longitudeDelta:LONGITUDE_DELTA,}),};}onRegionChange(region){this.state.region.setValue(region);}render(){return(<Animatedregion={this.state.region}onRegionChange={this.onRegionChange}/>);}

Animated Marker Position

importMapview,{AnimatedRegion,Marker}from'react-native-maps';getInitialState(){return{coordinate:newAnimatedRegion({latitude:LATITUDE,longitude:LONGITUDE,}),};}componentWillReceiveProps(nextProps){constduration=500if(this.props.coordinate!==nextProps.coordinate){if(Platform.OS==='android'){if(this.marker){this.marker._component.animateMarkerToCoordinate(nextProps.coordinate,duration);}}else{this.state.coordinate.timing({        ...nextProps.coordinate,        duration}).start();}}}render(){return(<MapViewinitialRegion={...}><MapView.Marker.Animatedref={marker=>{this.marker=marker}}coordinate={this.state.coordinate}/></MapView>);}

// ...componentWillReceiveProps(nextProps){constduration=500if(this.props.coordinate!==nextProps.coordinate){if(Platform.OS==='android'){if(this.marker){this.marker._component.animateMarkerToCoordinate(nextProps.coordinate,duration);}}else{this.state.coordinate.timing({        ...nextProps.coordinate,        duration}).start();}}}render(){return(<MapViewinitialRegion={...}><Marker.Animatedref={marker=>{this.marker=marker}}coordinate={this.state.coordinate}/></MapView>);}

Take Snapshot of map

importMapView,{Marker}from'react-native-maps';getInitialState(){return{coordinate:{latitude:LATITUDE,longitude:LONGITUDE,},};}takeSnapshot(){// 'takeSnapshot' takes a config object with the// following optionsconstsnapshot=this.map.takeSnapshot({width:300,// optional, when omitted the view-width is usedheight:300,// optional, when omitted the view-height is usedregion:{..},// iOS only, optional region to renderformat:'png',// image formats: 'png', 'jpg' (default: 'png')quality:0.8,// image quality: 0..1 (only relevant for jpg, default: 1)result:'file'// result types: 'file', 'base64' (default: 'file')});snapshot.then((uri)=>{this.setState({mapSnapshot:uri});});}render(){return(<View><MapViewinitialRegion={...}ref={map=>{this.map=map}}><Markercoordinate={this.state.coordinate}/></MapView><Imagesource={{uri:this.state.mapSnapshot.uri}}/><TouchableOpacityonPress={this.takeSnapshot}>        Take Snapshot</TouchableOpacity></View>);}

Zoom to Specified Markers

Zoom to Specified Coordinates

Troubleshooting

My map is blank

conststyles=StyleSheet.create({map:{    ...StyleSheet.absoluteFillObject,},});

<MapViewstyle={styles.map}// other props/>

Inputs don't focus

<View><TextInput/><MapView/></View>

<View><MapView/><TextInput/></View>

License

 Copyright (c) 2017 Airbnb Licensed under the The MIT License (MIT) (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at    https://raw.githubusercontent.com/airbnb/react-native-maps/master/LICENSE Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.