How To Create Maps Which Detect Automatic Location In React-native

I have created maps in react-native referring to https://github.com/lelandrichardson/react-native-maps map is created but i want to detect automatic location using gps. Here is the

Solution 1:

You can do that using React-native geolocation: https://facebook.github.io/react-native/docs/geolocation.html

There is already a good example there on how you can do that:

componentDidMount: function() {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      var initialPosition = JSON.stringify(position);
      this.setState({initialPosition});
    },
    (error) =>alert(error.message),
    {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
  );
  this.watchID = navigator.geolocation.watchPosition((position) => {
    var lastPosition = JSON.stringify(position);
    this.setState({lastPosition});
  });
}

You now have the initialPosition (latitude and longitude), use it instead of your hard coded value. The watchPosition invokes the success callback whenever the location changes.

I am currently using this to find local restaurants in our app.

---

Updated Answer:

I am using Genymotion emulator to run this. If you are also going to run this code on Genymotion, please make sure you have installed Google Play support, otherwise react-native-maps won't work. You don't have to do this step if you are using a physical device.

https://github.com/codepath/android_guides/wiki/Genymotion-2.0-Emulators-with-Google-Play-support

Regarding Geolocation, please make sure you have added ACCESS_FINE_LOCATION permission in the AndroidManifest.xml:

<uses-permissionandroid:name="android.permission.ACCESS_FINE_LOCATION" />

Otherwise you will get an error: "Looks like the app doesn't have the permission to access location."

Also please make sure that your GPS/Wifi/Data is enabled, otherwise your device cannot retrieve your current location.

varReact = require('react');
varReactNative = require('react-native');
var {
  StyleSheet,
  PropTypes,
  View,
  Text,
  Dimensions,
  TouchableOpacity,
} = ReactNative;

varMapView = require('react-native-maps');

var { width, height } = Dimensions.get('window');
constASPECT_RATIO = width / height;

// (Initial Static Location) MumbaiconstLATITUDE = 19.0760;
constLONGITUDE = 72.8777;

constLATITUDE_DELTA = 0.01;
constLONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

varCustomMap = React.createClass({
  getInitialState() {
    return {
      region: {
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA
      },
    };
  },

  componentDidMount: function() {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          region: {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA
          }
        });
      },
      (error) =>alert(error.message),
      {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
    );

    this.watchID = navigator.geolocation.watchPosition((position) => {
      const newRegion = {
        latitude: position.coords.latitude,
        longitude: position.coords.longitude,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA
      }

      this.onRegionChange(newRegion);
    });
  },

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

  onRegionChange(region) {
    this.setState({ region });
  },

  render() {
    return (
      <Viewstyle={styles.container}><MapViewref="map"mapType="terrain"style={styles.map}region={this.state.region}onRegionChange={this.onRegionChange}
        ></MapView><Viewstyle={styles.bubble}><Textstyle={{textAlign: 'center'}}>
            {`${this.state.region.latitude.toPrecision(7)}, ${this.state.region.longitude.toPrecision(7)}`}
          </Text></View></View>
    );
  },
});

var styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  bubble: {
    backgroundColor: 'rgba(255,255,255,0.7)',
    paddingHorizontal: 18,
    paddingVertical: 12,
    borderRadius: 20,
  },
});

module.exports = CustomMap;

Running the above code, you should find that your original static location (Mumbai) is overwritten with your current location from the device through componentDidMount when getCurrentPosition is called.

If you need to track changes in position, use watchPosition in combination with onRegionChange, otherwise if you just need to get the initial position remove watchPosition step.