CODEWITHSUNDEEP
javascriptreact-nativereact-native-maps
kirimi
kirimi

Reputation: 1400

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

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!

Upvotes: 6

Views: 6878

Answers (3)

Houman G
Houman G

Reputation: 41

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

Upvotes: 0

Yakraj
Yakraj

Reputation: 29

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>

Upvotes: 0

sathish kumar
sathish kumar

Reputation: 1507

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}
          />

Upvotes: 2

Related Questions