react-native-maps : How to follow user location on button press

Question

I am using react-native-maps and it works great. But I have two problems.

1. I am able to follow user location automatically using the followsUserLocation but when I move the map it keeps dragging me back to the user location. How could I fix this?

2. I want to have refresh button, and when the user press the button, I want my map view to follow user location.

   constructor() {
       super();
       this.state = {
           followsUserLocation: true,
       };
   }
   
   
   mapView() {
       return(
           <MapView style={styles.map}
           showsUserLocation
           followsUserLocation={this.state.followsUserLocation}
           initialRegion={{
           latitude: 37.523814,
           longitude:  126.927494,
           latitudeDelta: 0.0922,
           longitudeDelta: 0.0421}}/>
      )
   }
   

Any comments or advise would be really appreciated! Thanks in advance!

Produce

Answer 1

Try onUserLocationChange callback and set your region accordingly using setState

   state = {
    showsUserLocation: true,
    followsUserLocation : true,
    mapRegion: {
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    },
  };

    <MapView
            style={{ flex: 1 }}
            region={this.state.mapRegion}
            //use this callback to update the regions
            onUserLocationChange={event => console.log(event.nativeEvent)}
            showsUserLocation={this.state.showsUserLocation}
            followsUserLocation={this.state.followsUserLocation}
          />

Airfield

In the callback onUserLocationChange set followsUserLocation = false – Rhombohedral

Answer 2

if you are working with Reack Hook you can create a var instead of useState. In my case to prevent the app from crashing handled with the ternary condition.

  var liveMap = {
mapRegion: {
  latitude: lattitude ? lattitude : 19.88134866090193,
  longitude: longitude ? longitude : 73.97658792586263,
  latitudeDelta: 0.0022,
  longitudeDelta: 0.0021,
},



     <MapView
        mapType="satellite"
        style={{ height: 400, width: "100%" }}
        showsUserLocation={false}
        zoomEnabled={true}
        zoomControlEnabled={true}
        followsUserLocation={true}
        // onUserLocationChange={(event) => console.log("this is event",event.nativeEvent)}
        showsUserLocation={true}
        followsUserLocation={true}
        region={liveMap.mapRegion}
        // initialRegion={{
        //   latitude: lattitude ? lattitude : 19.88134866090193,
        //   longitude: longitude ? longitude : 73.97658792586263,
        //   latitudeDelta: 0.0022,
        //   longitudeDelta: 0.0021,
        // }}
      >
        <Marker
          coordinate={{
            latitude: lattitude ? lattitude : 19.88134866090193,
            longitude: longitude ? longitude : 73.97658792586263,
          }}
          title={"JavaTpoint"}
          description={"Java Training Institute"}
        />
      </MapView>

Marshall

Answer 3

I don't think the answers given above address the issue. The question is asking how to add a button to focus on user's current location which is continously changing. The answers assume user's location is stationary which is not the case. The answer is presented in this thread: onUserLocationChange changes React Native Maps region

Police