react-native-maps

Contributing

Installation

Compatibility

React Native Compatibility

Version Requirements:

Compatibility

Fabric (New Architecture)

Old Architecture

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,index)=>(<Markerkey={index}coordinate={marker.latlng}title={marker.title}description={marker.description}/>))}</MapView>;

Rendering a Marker with a custom image

<Markercoordinate={{latitude:latitude,longitude:longitude}}image={{uri:'custom_pin'}}/>

Rendering a Marker with a custom view

<Markercoordinate={{latitude:latitude,longitude:longitude}}><MyCustomMarkerView{...marker}/></Marker>

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}/**     * flipY allows tiles with inverted y coordinates (origin at bottom left of map)     * to be used. Its default value is false.     */flipY={false}/></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 (Google Maps Only)

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,MarkerAnimated}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.animateMarkerToCoordinate(nextProps.coordinate,duration);}}else{this.state.coordinate.timing({        ...nextProps.coordinate,useNativeDriver:true,// defaults to false if not passed explicitly        duration}).start();}}}render(){return(<MapViewinitialRegion={...}><MarkerAnimatedref={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>

Children Components Not Re-Rendering

<Viewstyle={StyleSheet.absoluteFillObject}><MapViewstyle={StyleSheet.absoluteFillObject}><Viewstyle={{position:'absolute',top:100,left:50}}/></MapView></View>

<Viewstyle={StyleSheet.absoluteFillObject}><MapViewstyle={StyleSheet.absoluteFillObject}/><Viewstyle={{position:'absolute',top:100,left:50}}/></View>

Crashing with EXC_BAD_ACCESS on iOS when switching apps

onRegionChangeComplete() callback is called infinitely

onRegionChangeComplete={(region,gesture)=>{// This fix only works on Google Maps because isGesture is NOT available on Apple Mapsif(!gesture.isGesture){return;}// You can usedispatch({type:"map_region",payload:{mapRegion:region}});// if using useReducer// setMapRegionState(region); // if using useState}}

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.