Tutorial

Using Geolocation in React Native

Published on September 30, 2018
author

Aman Mittal

Using Geolocation in React Native

React Native takes advantage of the Geolocation API that’s native on the web. This API returns different methods such as getCurrentPosition, and watchPosition which are available in React Native polyfilled. To demonstrate how to use it in a React Native app we will integrate it using react-native-cli.

Getting Started

Using react-native-cli means there are no templates and only little boilerplate code to get started. We will generate a project using the following command. If you do not have it installed on your local machine yet, please use the first command mentioned below:

# to install the cli
$ npm install -g react-native-cli

# to scafold an RN project
$ react-native init geo-example

So once the project directory is generated, traverse into it and run npm start to see if everything is installed correctly. If you are on Mac, you can use the ios simulator to verify. For Windows and Linux users, the Android emulator will be your friend.

Accessing the Geolocation API

The Geolocation API exists as a global navigator object in React Native, just like on the web. It’s accessible via navigator.geolocation in our source code and there is no need to import it.

For demonstration purposes, we’ll be using the getCurrentPosition method from the Geolocation API. This method allows a mobile app to request a user’s location and accepts three parameters: a success callback, an error callback and a configuration object.

navigator.geolocation.getCurrentPosition(
  position => {
    const location = JSON.stringify(position);

    this.setState({ location });
  },
  error => Alert.alert(error.message),
  { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
);

The success callback above has a position argument that’s an object with the following properties if executed without any errors:

{
  "timestamp": 1533729980953.91
  "coords": {
    "accuracy": 5,
    "altitude": 0,
    "altitudeAccuracy": -1,
    "heading": -1,
    "latitude": 37.785834,
    "longitude": -122.406417,
    "speed": -1
  }
}

We will modify App.js in our React Native project to get started. We start by defining a basic class component that displays the text Find My Coords?:

App.js
import React, { Component } from "react";
import { View, Text } from "react-native";

export default class App extends Component {
  render() {
    return (
      <View>
        <Text>Find My Coords?</Text>
      </View>
    );
  }
}

Implementing Geolocation API

Now, let us implement the Geolocation API function getCurrentPosition in our app. Open App.js and write the following code.

App.js
import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Alert,
  TouchableOpacity
} from "react-native";

export default class App extends Component {
  state = {
    location: null
  };

  findCoordinates = () => {
    navigator.geolocation.getCurrentPosition(
      position => {
        const location = JSON.stringify(position);

        this.setState({ location });
      },
      error => Alert.alert(error.message),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.findCoordinates}>
          <Text style={styles.welcome}>Find My Coords?</Text>
          <Text>Location: {this.state.location}</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

We start be importing TouchableOpacity. It’s a wrapper that responds accurately to user touches. In a React Native mobile app, you’ll be making use of that wrapper component quite often. Think of it as a button in a web application. This newly imported wrapper accepts an onPress prop that is going to trigger the method specified, findCoordinates in our case.

findCoordinates holds the logic for fetching a user’s location. We’re also using the local state to display coordinates from the data provided to us by position object. The text Find My Coords? now becomes clickable.

Let’s style things up a bit using React Native’s StyleSheet:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});

At this point, the example will not work as expected. We need to ask for permission to access a user’s location. Let’s fix that next.

Asking for Permission

In iOS, geolocation is enabled by default when a project is created using react-native-cli. To use it, you just need to include a key called <key>NSLocationWhenInUseUsageDescription</key> in the info.plist file, which is inside the ios/findCoordsApp directory.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>CFBundleDevelopmentRegion</key>
    <string>en</string>
    <key>CFBundleDisplayName</key>
    <string>findCoordsApp</string>
    [..]
    <key>NSLocationWhenInUseUsageDescription</key>
    <string></string>
    <key>NSAppTransportSecurity</key>
    <!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
  [...]
</dict>
</plist>

For Android, we need to add the following line in the android/app/src/AndroidManifest.xml:

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

Wrapping Up

Now if you run your application you will see the following screen:

Screen before coordinates

Click on the text and you will be asked whether to allow the application to request for the user’s location:

Screen asking permission

If you press allow, you will see the following resulting screen:

Screen with coordinates

That was a very simple example, but you can go from there to create something more interesting/useful. If you want to learn more about working with the Geolocation API in a React Native application, please go through the official documentation.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
Aman Mittal

author

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more