mobile app development

Building a Location-based Mobile App With React Native in 2021

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

Building a Location-based Mobile App With React Native in 2021

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, app marketers are using location-based features like 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 with 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 of React Native Framework 

  •  High performance
  •  Cross-platform
  • Open-Source
  •  Cost-efficient

Cons of React Native Framework 

  • Need More APIs
  • Don't require the cross-platform app

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 these 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 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.

Aparna <span>Growth Strategist</span>
Written By
Aparna Growth Strategist

Aparna is a growth specialist with handsful knowledge in business development. She values marketing as key a driver for sales, keeping up with the latest in the Mobile App industry. Her getting things done attitude makes her a magnet for the trickiest of tasks. In free times, which are few and far between, you can catch up with her at a game of Fussball.

Want To Hire The Best Service Provider?
MobileAppDaily will help you explore the best service providers depending on your vision, budget, project requirements and industry. Get in touch and create a list of best-suited companies for your needs.

Featured Success Stories

mobile app development

How Augmented Reality is Boosting the Scope of Mobile App Development

4 min read  

Augmented Reality is growing tremendously and actually on the verge of exploding. This trend has contributed to increasing the demand for AR app development. Most mobile app development companies are incorporating augmented and virtual reality in building mobile applications.Companies are creati

mobile app development

Best Android App Development Frameworks in 2022

5 min read  

Developing an app might sound like a team of developers working round the clock in a crowded office, coupled with sleepless nights and the huge investment of money. Maybe that was true a decade ago, but now tables have turned completely.With the unprecedented boom and innovations in the tech ind

mobile app development

Top AI API Platforms for Smarter Apps

4 min read  

The last decade contributed crucially to the evolution of Artificial Intelligence (AI). Technology got smarter, innovative, and more comfortable compared to what it was before AI had expanded its coverage. The modern world is not only looking into developments of driverless cars or deep space explor

mobile app development

Everything You Need To Know About PhoneGap To Create An App in 2021

4 min read  

PhoneGap was originally bought out by the tech giant Adobe as an Open Source project.PhoneGap is a framework for the purpose of Mobile App Development that is based on an open source project i.e. Apache Cordova. With PhoneGap, the application developers can easily write codes for mobile apps jus

Featured Success Interview

Interview

Interview With Coyote Jackson, Director of Product Management, PubNub

MAD Team 4 min read  

MobileAppDaily had a word with Coyote Jackson, Director of Product Management, PubNub. We spoke to him about his journey in the global Data Stream Network and real-time infrastructure-as-a-service company. Learn more about him.

Interview

Interview With Laetitia Gazel Anthoine, Founder and CEO, Connecthings

MAD Team 4 min read  

MobileAppDaily had a word with Laetitia Gazel Anthoine, Founder and CEO, Connecthings. We spoke to her about her idea behind Connecthings and thoughts about the company’s services.

Interview

Interview With Gregg Temperley, Founder Of ParcelBroker App

MAD Team 4 min read  

MobileAppDaily had a word with Gregg Temperley, Founder. We spoke to him about his idea behind such an excellent app and his whole journey during the development process.

App Development

How to Implement Artificial Intelligence and Machine Learning in an Existing App?

MAD Team 11 min read  

AI is for decision making, and ML makes the system to learn new things from data.

MAD Originals
MAD Originals

Cut to the chase content that’s credible, insightful & actionable.

Get the latest mashup of the App Industry Exclusively Inboxed

  • PRODUCTS
  • SERVICES
  • BOTH
Join our expansive network, build connections and expand your brand presence.