Build a Location-based With React Native | MobileAppDaily |
App Design

Building a Location-based Mobile App With React Native

Majority of companies are now integrating location-based services into their apps

https://dk2dyle8k4h9a.cloudfront.net/Building a Location-based Mobile App With React Native

Today, we can affirmatively say that location-based apps which are also known as Geolocation apps have made its place among the top requirements. These geolocation applications can be further expanded into an array of services that act as a basic necessity for most of the mobile users.

And with the help of this article, we will be discussing the process of building a location-based app using React Native. With this, we will also be throwing light on some of the best location-based applications that currently exist.

The location-based features also add more caliber to the mobile application which can also lead to improved interaction between the brand and its end-users. Apart from this, these features will also act as a source for new ideas/strategies for app developers as well as mobile app marketers.

technology behind

This fact has been proven again and again with many well-known on-demand applications, one of them being Uber, an on-demand taxi-booking app with a global presence. So before we break down the app development process, let's take a look at the basics of the process.

What is the need for Location-based apps?

In order to keep up with the current trend, we are witnessing that a majority of mobile, as well as web-based applications, are becoming geo-dependent. There are even apps which include such services as primary feature i.e. without locating the user's location the app would be able to move on to the next step. 

Location based

The feature of geolocation can also be referred to as a convenient feature that helps companies to pinpoint their targeted app users as per their location. Some of the services that fall under the category of location-based services are:

  • Guides/Maps
  • Geotagged Photos on Social Networking Sites
  • Route Tracking in Fitness Mobile Apps
  • Navigators

What are the basic functions of Location-based App Development?

There are mainly four functions worth mentioning when it comes to location-based app development, which are:

1. Communication Function:

This is the function that defines the ability to register a particular location, leaving a review about a certain place, adding more content in the location's feedback in the text or media form i.e. images, video etc.

2. Marketing Function

As discussed above, the app marketers are using location-based features as an innovative marketing strategy to reach potential customers from all around the world. Geolocation is also suggested as a great tool to perform incentive marketing campaigns based on targeted user locations.  

3. Information Function

Another type of function for location-based development is related to the information of the user with respect to the places near a particular location. Here, the user is being provided information about their location's surroundings.

4. Social Function

This is the function that we can find in most of our social media platforms, this includes Facebook, Instagram, Snapchat, Twitter etc. With this function, we can basically know the exact location of the end-users.

Why use React Native Framework?

Even though there are other options to develop location-based apps, we would recommend opting for the React Native framework. This JavaScript framework is a great choice when it comes to building cross-platform apps and here are the pros and cons to prove it: 

Pros & Cons

React Native can be defined as an open-source JavaScript framework that enables users to build cross-platform applications along with their native functionalities.

Android and iOS are two of the major mobile app development platforms which have many differences in their operation, for instance, the designing differences in animation and user interface (UI). By using the React Native framework, the need for creating two separate apps for Android and iOS is eliminated.

This means that the React Native app developers can go ahead and write just one set of code and run it across two different platforms namely iOS and Android. With this businesses can offer their services to both Android as well as iOS users while being cost-effective at the same time.

The process of Developing a Location-based App

The first part of the app development process includes the gathering of location data that is to be displayed as the user location information in the application. 

There are three primary ways to gather location data, which are as follows: 

1. React Native Background Geolocation

The react-native-background-geolocation is basically a package that determines the location within a radius of 0.6 miles. Although it requires more battery from the device, it's mainly up to the user on how often do they want to utilize the services of the location-based app.

import { NativeModules, DeviceEventEmitter, PermissionsAndroid } from 'react-native'
import Config from 'react-native-config'
import get from 'lodash/get'
const { GeoLocation } = NativeModules
class BackgroundGeoLocation {
constructor(token, user_id) {
this.state = null
} start(dispatch, nextState) {
this.dispatch = dispatch
const token = get(nextState, 'session.data.token')
const user_id = get(nextState, 'user.data.user_id')
const id = get(nextState, 'user.data.id')
this.state = {
user_id,
token,
}
return PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION)
.then(is_granted => is_granted === PermissionsAndroid.RESULTS.GRANTED
? is_granted
: PermissionsAndroid.requestMultiple([
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION,
])
)
.then(_ => PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION))
.then(is_granted => is_granted === PermissionsAndroid.RESULTS.GRANTED ? true : new Error())
.then(_ => setTimeout(() => GeoLocation.startService(token, user_id, id, `${Config.API_URL}/live/car-tracking/gps-pos/`), 300))
.catch(e => console.log(e))
}
stop() {
return GeoLocation.stopService()
.then(_ => console.log(_))
}
handleLocationChange(geo) {
console.log(geo)
}
}
export default BackgroundGeoLocation

This package can also be integrated with SQLite where you have the option to store recorded data regarding location and then sync it to a database via HTTP.

2. React Native API

Another approach that you can go for is by using a React Native API that has the capability to identify the location of a user device. This API is simple to install and very easy to operate but sometimes there tends to be an issue regarding the network location provider like GPS.

3. Combining the two: Bridging the gap between Native code and JavaScript API

This is the last method when is the combination of the previously discussed other two methods where the app developers bridge the native code to JavaScript API. 

The primary issue that occurred using the Native JavaScript API was the creation of a separate thread for a foreground service with the addition of native code. Other than that, getting access to location data also tends to generate certain problems which can be resolved with some extra precaution. 
 

package com.mobileappdaily.author;
import android.app.Notification;
import android.app.NotificationChannel;
import android.app.NotificationManager;
import android.content.Context;
import android.content.Intent;
import android.content.pm.PackageManager;
import android.location.Criteria;
import android.location.Location;
import android.location.LocationManager;
import android.os.Build;
import android.support.v4.content.ContextCompat;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.bridge.WritableNativeMap;
/**
*/
public class GeoLocationModule extends ReactContextBaseJavaModule {
public static final String CHANNEL_ID = "ExampleService_Channel";
public GeoLocationModule(ReactApplicationContext reactContext) {
super(reactContext);
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
NotificationChannel channel = new NotificationChannel(CHANNEL_ID,"testName", NotificationManager.IMPORTANCE_DEFAULT);
NotificationManager manager = reactContext.getSystemService(NotificationManager.class);
manager.createNotificationChannel(channel);
}
}
@Override
public String getName() {
return "GeoLocation";
}
@ReactMethod
public void startService(String token, String user_id, String id, String url_string, Promise promise) {
WritableMap result = Arguments.createMap();
result.putString("ststus", "success");
try {
Intent serviceIntent = new Intent(getReactApplicationContext(), GeoLocationService.class);
serviceIntent.putExtra("token", token);
serviceIntent.putExtra("user_id", user_id);
serviceIntent.putExtra("id", id);
serviceIntent.putExtra("url_string", url_string);
getReactApplicationContext().startService(serviceIntent);
promise.resolve(result);
} catch (Exception e) {
e.printStackTrace();
promise.reject("rrrrr",e);
return;
}
}
@ReactMethod
public void stopService(Promise promise) {
String result = "Success";
try {
Intent serviceIntent = new Intent(getReactApplicationContext(), GeoLocationService.class);
getReactApplicationContext().stopService(serviceIntent);
} catch (Exception e) {
promise.reject(e);
return;
}
promise.resolve(result);
}
@ReactMethod
public void getLocation( Promise promise) {
WritableMap res = Arguments.createMap();
try {
LocationManager locationManager = null;
locationManager = (LocationManager) this.getReactApplicationContext().getSystemService(Context.LOCATION_SERVICE);
int permissionCheck = ContextCompat.checkSelfPermission(this.getReactApplicationContext(),
android.Manifest.permission.ACCESS_FINE_LOCATION);
if (permissionCheck == PackageManager.PERMISSION_GRANTED) {
Criteria criteria = new Criteria();
String bestProvider = locationManager.getBestProvider(criteria, false);
Location location = locationManager.getLastKnownLocation(bestProvider);
if(location != null) {
res.putDouble("latitude", location.getLatitude());
res.putDouble("longitude", location.getLongitude());
promise.resolve(res);
}
}
} catch (Exception e) {
promise.reject(e);
return;
}
}
}

The different types of systems tend to ask for different kinds of permissions, this is also to get access to location data on different stages. For example, the iOS tends to request permission during the first time when an app is opened and Android does so during the time of installation. 

At this point, React Native simplifies this process of permission request by initially checking the access to the location data module which further eliminates the triggering possibility of the permission alert. 

Now that you have access to location data, the next step is to display it to the user.

One thing that you should always remember is that location data isn’t always precise. This may be caused due to the fact that the device collects location data from different locations like:

  • Cellular Network
  • Wi-Fi
  • GPS

The mobile devices are continuously searching to get the best internet connection available. There may be some time when the connection suddenly switches and then it shows the status of being lost.

Conclusion

This article basically concludes that choosing a React Native framework to build your location-based app is a great choice to follow. The benefits that React Native offers are better than what a lot of other JavaScript frameworks are offering.

We really hope that this article provided you with some additional information regarding 'How to Develop a Location-based app?' And in case you are interested in reading more articles on mobile application development, then click on that 'Subscribe' button to stay notified.

Twinkle Kalkandha
Written By
Twinkle Kalkandha

Directs both day-to-day and long-term product strategy for MobileAppDaily. Adept in technology and marketing trends, she curates new strategies for brand development. As a tech enthusiast, she’s constantly involved in the workings of MobileAppDaily’s editorial, revenue, events, and audience development teams to identify and yield diverse opportunities to strengthen the brand and its bottom line. Whether it's managing the in-house design and engineering staff or giving personal advice, she’s always at the top of her game.

Top Companies

InMobi
Singapore
Dot Com Infoway
New York, USA
M&C Saatchi Mobile
New York City, USA
Techmagnate
New Delhi, India
Fetch
London, UK
View full report

Latest Articles

Join our global community 135K Followers
App Design

Top 7 Methods To Avoid The Mobile App Usability Issues

Vikram Khajuria 7 min read  

Mobile apps have taken the center stage in the business world, and there is no scope for errors in the ever-growing competition. Mobile app usability is one the most crucial aspect of any mobile app that makes an app distinguish from others. Making sure that your app is convenient for the users and

App Design

5 Ways to Add Engaging Design to Your App

James Lawson 4 min read  

Mobile applications are literally dominating the world with their outstanding benefits and extreme outreach. Numerous amount of applications added to the app world daily, a large portion of them directly goes to dark places. creation of an application from idea to live product is transformed by the

App Design

The Finalists - Innovation By Design Awards 2017 in Mobile App Genre

Joshua Anderson 4 min read  

Recently Innovation by Design awarded the mobile apps with outstanding design in 2017 where Spot-on grabbed the first seat. However, other finalist apps have given a tough fight to the spot-on and deserve an appreciation. We bring you the finalist of the innovation by design 2017 in mobile app categ

App Design

Create CSS Accordions Without Using JavaScript

Vikram Khajuria 3 min read  

An Accordion is used to show and also hide the HTML content pieces. The user can use the w3-hide class in order to hide the accordion data or use any kind of button to open as well as close that piece of content.There are several ways to create the accordion effect with the help of JavaScript bu