React Native Geolocation Coordinates

React Native is using web base Geolocation API to get the position of the device. If you go through the Geolocation API documentation then you will find various methods like getCurrentPosition(), watchPosition() which are available on the React Native too.

Let’s Started

We are going to use expo to create and setup the demo. We don’t require Android Studio or XCode for simulator if we are using expo. Make sure you have installed expo-cli on your system. So let’s started to creating a GeolocationDemo project.

expo init geolocationDemo

Above command will create a directory on you current location with geolocationDemo name. Once initialization process finish, go to the geolocationDemo directory and run the following command.

npm start

You can also run expo start command to starting your project.

How to access Geolocation

Geolocation API’s getCurrentPosition() method accepts 3 parameters. First parameter is required, which is a callback method and will trigger if everything works perfectly. The other 2 parameters are optional. Lets me show you the code for better understand.

navigator.geolocation.getCurrentPosition(
            position => {
                const location = JSON.stringify(position);
            },
            error => {
                // handle error
            },
            { 
                enableHighAccuracy: true, 
                timeout: 20000, 
                maximumAge: 1000 
            }
);

As you can see on the above code, I have used all the 3 parameters on getCurrentPosition() method. The first parameter will trigger once we get the position successfully. The second parameter will trigger if we get any error to get the positions, basically, the 2nd parameter is for error handling. And the 3rd parameter is for options.

The success callback will return the following position data in JSON format.

{  
   "coords":{  
      "altitudeAccuracy":512,
      "accuracy":107.23827623806297,
      "heading":-1,
      "longitude":76.91578276462563,
      "altitude":218.43643188476562,
      "latitude":28.87751079632795,
      "speed":-1
   },
   "timestamp":1545986152508.9878
}

Implement Geolocation API with React Native

Let start implementing the Geolocation API with React Native. First, open the App.js in your favorite editor and apply the following codes.

import React from 'react';
import { 
    StyleSheet, 
    Button, 
    View, 
    Text, 
    Image 
} from 'react-native';


class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            location: null, 
            underProcess: false
        };
    }

    getCoordinates = () => {

        this.setState({underProcess: true, location: null});

        navigator.geolocation.getCurrentPosition(
            position => {
                const location = JSON.stringify(position);
                this.setState({underProcess: false, location: location});
            },
            error => {
                this.setState({underProcess: false});
                Alert.alert(error.message);
            },
            { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
        );
    }

    render() {
        return (
            <View style={styles.container}>
                { this.state.location !== null &&
                    <Text>Location: {this.state.location}</Text>
                }
                { this.state.underProcess &&
                    <Image
                        source={require('./assets/loader.gif')}></Image>
                }
                <Button 
                    title="Get Location"
                    onPress={this.getCoordinates}></Button>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

export default App;

The above code will generate the following output on your phone with your Geolocation.