Real-time Location Tracking with React Native and PubNub

Originally published at:

With ever-increasing usage of mobile apps, geolocation and tracking functionality can be found in a majority of apps. Real-time geolocation tracking plays an important role in many on-demand services, such as these:

  • taxi services like Uber, Lyft or Ola
  • food Delivery services like Uber Eats, Foodpanda or Zomato
  • monitoring fleets of drones

In this guide, we’re going use React Native to create a real-time location tracking apps. We’ll build two React Native apps. One will act as a tracking app (called “Tracking app”) and the other will be the one that’s tracked (“Trackee app”).

Here’s what the final output for this tutorial will look like:

[video width="640" height="480" mp4=""][/video]


This tutorial requires a basic knowledge of React Native. To set up your development machine, follow the official guide here.

Apart from React Native, we’ll also be using PubNub, a third-party service that provides real-time data transfer and updates. We’ll use this service to update the user coordinates in real time.

Register for a free PubNub account here.

Since we’ll be using Google Maps on Android, we’ll also need a Google Maps API key, which you can obtain on the Google Maps Get API key page.

To make sure we’re on the same page, these are the versions used in this tutorial:

  • Node v10.15.0
  • npm 6.4.1
  • yarn 1.16.0
  • react-native 0.59.9
  • react-native-maps 0.24.2
  • pubnub-react 1.2.0

Getting Started

If you want to have a look at the source code of our Tracker and Trackee apps right away, here are their GitHub links:

Let’s start with the Trackee app first.

Trackee App

To create a new project using react-native-cli, type this in the terminal:

$ react-native init trackeeApp
$ cd trackeeApp

Now let’s get to the fun part — the coding.

Add React Native Maps

Since we’ll be using Maps in our app, we’ll need a library for this. We’ll use react-native-maps.

Install react-native-maps by following the installation instructions here.

Add PubNub

Apart from maps, we’ll also install the PubNub React SDK to transfer our data in real time:

$ yarn add pubnub-react

After that, you can now run the app:

$ react-native run-ios
$ react-native run-android

You should see something like this on your simulator/emulator:

![Trackee App|300x650](upload://sE48GqEOV3FLrKXLq4MPoVQjZZ4.png)

Hi There,

I would like to share some additional information regarding real time tracking in taxi app, For an online taxi business, GPS tracking is essential to Provide hassle less ride to the passengers and our Gps tracking features helps for both customers and Driver.

With this option, the customer can track the driver for arrival from until it’s reaching the destination and helps the driver to track the customer location and in the rural areas, your drivers are having difficulties to find the routes for customer destination.

It can be rectified by taxi app solution With the help of google map and Gps tracking your drivers can easily track the customer location even in the heavy traffic you can find the alternative routes for the destination.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.