CODEWITHSUNDEEP
javascriptreact-native
Damian Szmulik
Damian Szmulik

Reputation: 21

React native how to center map on user location

<MapView style={styles.map}
      showsUserLocation = {true}
>
  1. How to center map on user location in Android?
  2. How to change this blue circle with other user location marker?

Upvotes: 2

Views: 12413

Answers (1)

allisius
allisius

Reputation: 415

You could make use of ref here like so:

<MapView ref={map => {this.map = map}} />

and then in the function that you call when you want to center the map, assuming you have the location of the user stored in the state somewhere, you could do this

handleCenter = () => {
  const { latitude, longitude, latitudeDelta, longitudeDelta } = this.state.location;
  this.map.animateToRegion({
    latitude,
    longitude,
    latitudeDelta,
    longitudeDelta
  })
}

react-native-maps uses animateToRegion to update the shown region of the map to a specific one and you need to supply the method with a region to go to.

You could also update the region prop on the map programatically to achieve the same effect, without the animation though.

As for the second part of the question, I am not sure I understand what you want to do. Could you maybe reword the second question?

Upvotes: 11

Related Questions