react-native-mapbox-gl/docs/MapView.md

<MapboxGL.MapView />

MapView backed by Mapbox Native GL

props

Prop	Type	Default	Required	Description
animated	bool	false	false	Animates changes between pitch and bearing
centerCoordinate	arrayOf	none	false	Initial center coordinate on map [lng, lat]
showUserLocation	bool	none	false	Shows the users location on the map
userTrackingMode	number	MapboxGL.UserTrackingModes.None	false	The mode used to track the user location on the map
heading	number	0	false	Initial heading on map
pitch	number	0	false	Initial pitch on map
style	any	none	false	Style for wrapping React Native View
styleURL	string	MapboxGL.StyleURL.Street	false	Style URL for map
zoomLevel	number	16	false	Initial zoom level of map
minZoomLevel	number	none	false	Min zoom level of map
maxZoomLevel	number	none	false	Max zoom level of map
scrollEnabled	bool	true	false	Enable/Disable scroll on the map
pitchEnabled	bool	true	false	Enable/Disable pitch on map
onPress	func	none	false	Map press listener, gets called when a user presses the map
onLongPress	func	none	false	Map long press listener, gets called when a user long presses the map
onRegionWillChange	func	none	false	This event is triggered whenever the currently displayed map region is about to change.
onRegionIsChanging	func	none	false	This event is triggered whenever the currently displayed map region is changing.
onRegionDidChange	func	none	false	This event is triggered whenever the currently displayed map region finished changing
onWillStartLoadingMap	func	none	false	This event is triggered when the map is about to start loading a new map style.
onDidFinishLoadingMap	func	none	false	This is triggered when the map has successfully loaded a new map style.
onDidFailLoadingMap	func	none	false	This event is triggered when the map has failed to load a new map style.
onWillStartRenderingFrame	func	none	false	This event is triggered when the map will start rendering a frame.
onDidFinishRenderingFrame	func	none	false	This event is triggered when the map finished rendering a frame.
onDidFinishRenderingFrameFully	func	none	false	This event is triggered when the map fully finished rendering a frame.
onWillStartRenderingMap	func	none	false	This event is triggered when the map will start rendering the map.
onDidFinishRenderingMap	func	none	false	This event is triggered when the map finished rendering the map.
onDidFinishRenderingMapFully	func	none	false	This event is triggered when the map fully finished rendering the map.
onDidFinishLoadingStyle	func	none	false	This event is triggered when a style has finished loading.
onFlyToComplete	func	none	false	This event is triggered when a fly to animation is cancelled or completed after calling flyTo
onSetCameraComplete	func	none	false	This event is triggered once the camera is finished after calling setCamera

methods

fitBounds(northEastCoordinates, southWestCoordinates[, padding][, duration])

arguments

Name	Type	Required	Description
northEastCoordinates	Array	Yes	North east coordinate of bound
southWestCoordinates	Array	Yes	South west coordinate of bound
padding	Number	No	Camera padding for bound
duration	Number	No	Duration of camera animation

this.map.fitBounds([lng, lat], [lng, lat])
this.map.fitBounds([lng, lat], [lng, lat], 20, 1000)

flyTo(coordinates[, duration])

arguments

Name	Type	Required	Description
coordinates	Array	Yes	Coordinates that map camera will jump too
duration	Number	No	Duration of camera animation

this.map.flyTo([lng, lat])
this.map.flyTo([lng, lat], 12000)

zoomTo(zoomLevel[, duration])

arguments

Name	Type	Required	Description
zoomLevel	Number	Yes	Zoom level that the map camera will animate too
duration	Number	No	Duration of camera animation

this.map.zoomTo(16)
this.map.zoomTo(16, 100)

setCamera(config)

arguments

Name	Type	Required	Description
config	Object	Yes	Camera configuration

this.map.setCamera({
  centerCoordinate: [lng, lat],
  zoomLevel: 16,
  duration: 2000,
})

this.map.setCamera({
  stops: [
    { pitch: 45, duration: 200 },
    { heading: 180, duration: 300 },
  ]
})