Android configuration for running react native geolocation app

Question

I am trying to fetch lat/long values in my basic react app and I tried the following ways:

1) Used navigator.geolocation.getCurrentPosition() react module, but null value was displayed.Here is the code:

class DetailsScreen extends React.Component {
constructor(props) {
super(props);

this.state = {
  latitude: null,
  longitude: null,
  error: null,
};
}

   componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      ({coords}) => {
        const {latitude, longitude} = coords
        this.setState({
          position: {
            latitude,
            longitude,
          },
          region: {
            latitude,
            longitude,
            latitudeDelta: 0.001,
            longitudeDelta: 0.001,
          }
        })
      },
      (error) => alert(JSON.stringify(error)),
      // 'enableHighAccuracy' sometimes causes problems
      // If it does, just remove it.
      {enableHighAccuracy: false} 
    );

}
    render(){
        return(
        <View style = {styles.container}>
            <Text style = {styles.boldText}>
               Latitude:
            </Text>

            <Text>
               {this.state.latitude}
            </Text>

            <Text style = {styles.boldText}>
               Longitude:
            </Text>

            <Text>
               {this.state.longitude}
            </Text>
         </View>
        )
    }

}

2) Used react-native-geolocation service to fetch the lat/long value but again null value was displayed.Here is the code snippet:

class DetailsScreen extends React.Component {
constructor(props) {
super(props);
this.state = { latitude: null,
                longitude: null,
                error: null,
};

  }


componentDidMount() {
    Geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          error: null,
        });
      },
      (error) => this.setState({ error: error.message }),
      { enableHighAccuracy: false, timeout: 30000, maximumAge: 10000 },

    );


}
render(){
        return(
        <View style = {styles.container}>
            <Text style = {styles.boldText}>
               Latitude:
            </Text>

            <Text>
               {this.state.latitude}
            </Text>

            <Text style = {styles.boldText}>
               Longitude:
            </Text>

            <Text>
               {this.state.longitude}
            </Text>
         </View>
        )
    }

}

3) Used navigator.geolocation.watchCurrentPosition() still lat/long value wasn't being fetched.

I did go ahead and add

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

in the manifest.xml file of android module.So are there any more android specific permissions/changes I am suppose to make so that the lat/long value gets fetched??Please help.

Answer 1

Take it back to the basic, this should work:

       navigator.geolocation.getCurrentPosition (
            (position) => {
                console.log("location_service", position);
            },
            (error) => { 
                console.log(error) 
            },
            {enableHighAccuracy: false}  
        )

Android Manifest

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

Then Rebuild your application (don't just use reload from React Native's Dev Menu) re run react-native run-android

Some things to add - if you are getting an error, or it's still not returning make sure you have a 'fresh' location (so just move your phone to where a new GPS signal comes in)