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:
Prerequisites
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:
The post Real-time Location Tracking with React Native and PubNub appeared first on SitePoint.
