Get current location, latitude and longitude in ReactNative using react-native-maps

Question

I am developing a map location. When I click in some particular place I get the latitude and longitude, but not the current location, latitude and longitude.

I don\'

Answer 1

I did it following these steps using react-native@0.42.3 and react-native-maps@^0.13.1 and using react-native@0.44.0 and react-native-maps@^0.15.2 at the date:

Set a mapRegion object in the state, the last longitude and the last latitude as null:

state = {
  mapRegion: null,
  lastLat: null,
  lastLong: null,
}

Then within your componentDidMount() function watch for each change in the current position:

  componentDidMount() {
    this.watchID = navigator.geolocation.watchPosition((position) => {
      ...
    });
  }

When there are changes update them in your this.state.mapRegion, passing the actual coords and the delta values (mine can be different to yours, so adapt them):

  componentDidMount() {
    this.watchID = navigator.geolocation.watchPosition((position) => {
      // Create the object to update this.state.mapRegion through the onRegionChange function
      let region = {
        latitude:       position.coords.latitude,
        longitude:      position.coords.longitude,
        latitudeDelta:  0.00922*1.5,
        longitudeDelta: 0.00421*1.5
      }
      this.onRegionChange(region, region.latitude, region.longitude);
    }, (error)=>console.log(error));
  }

Then you need the onRegionChange() function, that's being used to "set" new values to your elements within the componentDidMount() function:

  onRegionChange(region, lastLat, lastLong) {
    this.setState({
      mapRegion: region,
      // If there are no new values set the current ones
      lastLat: lastLat || this.state.lastLat,
      lastLong: lastLong || this.state.lastLong
    });
  }

Unmount the geolocation on componentWillUnmount():

  componentWillUnmount() {
    navigator.geolocation.clearWatch(this.watchID);
  }

And render the MapView passing your current mapRegion object, the MapView.Marker inside of it is just to show you the current latitude and longitude when they change:

  render() {
    return (
      
        
          
            
              
                { this.state.lastLong } / { this.state.lastLat }
              
            
          
        
      
    );
  }

Add the StyleSheet.absoluteFillObject for your map in order to render it properly using the whole width and height of your device.

const styles = StyleSheet.create({
  map: {
    ...StyleSheet.absoluteFillObject,
  }
});

So for your onPress() function you could do something similar to the onRegionChange(), that's to get the actual coordinates and to set them:

  onMapPress(e) {
    let region = {
      latitude:       e.nativeEvent.coordinate.latitude,
      longitude:      e.nativeEvent.coordinate.longitude,
      latitudeDelta:  0.00922*1.5,
      longitudeDelta: 0.00421*1.5
    }
    this.onRegionChange(region, region.latitude, region.longitude);
  }

Check the full code on expo.io (although react-native-maps isn't installed)