Have you ever thought how does Uber get the pickup location of the users? How does Tinder find the people around you? Did you ever wonder how Zomato drivers can locate the areas for food delivery? It’s simple — They are location based mobile apps that get access to the users’ location. Such apps are also known as Geolocation apps.

Location-based apps use the location of the users to work and control various features. Taxi booking apps, food delivery apps, dating apps are some of the examples of location-based mobile apps. Such apps make our everyday tasks easier. Most of the business owners who need such location-based apps choose to hire React Native developers to build the mobile apps for various platforms.

React Native is a preferred choice for building and deploying location-based mobile apps. Being an open-source Javascript framework, it allows the developers to create cross platform applications. Instead of writing separate codes for each platform, one can develop an app for iOS and Android.

Steps to Develop a Location-Based App

Gather Data Location

React Native API helps to determine the location data. It allows the users to know the device location. Using React Native, the process of permission request can be simplified.

Display Data Location

Data location can be gathered from different connection sources such as GPS, Wi-Fi, and mobile data. If internet connection is not available, information is lost. Sometimes, the data display information may not be accurate. Hence, the user may face some issues with the applications.

Sometimes, when the user switches from Wi-Fi to 4G, the device gets lost. One can set the data and time for location data. It tries to get the access to a good internet connection from different sources.

Design

React Native helps to design awesome apps. For instance, if you want to build a Google Maps wrapper, you would use Material Design and React Native to help you add the required features in the location-based app.

React-Native-Background-Geolocation

This package can help to specify the location of a device. Usually, 0.6 miles of distance can be tracked. This precision feature requires high battery consumption. It also allows the developers to integrate the package with SQLite to store the recorded location information. Sync the information of location data to your database via HTTP.

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,

}

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

Link Native Code to the JavaScript API

When the React Native app developers use the native JavaScript API, they can write the native code to begin foreground service as a separate thread. It becomes easier to bridge the native code to React Native components.

package com.djangostars.azyan;

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;

/**

* Created by AGulchenko on 5/7/18.

*/

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;

}

}

}

Permission to Access Location Data

Different platforms need permission to access the location of the devices. iOS requires permission when the user opens the app for the first app, while on Android, the permission is requested once the app is downloaded.

When native code is used, this can be considered. React Native helps to simplify the process by checking the access to location data module. The access of location data is verified easily.

Displaying Location

If the display location is not approached carefully, the location data may be inaccurate. The mobile devices gather the data for the current location from different sources. If inaccurate data is received, there may be a lot of zigzags in the map instead of straight lines. It may appear like this:

Wondering how to solve this problem? You can use Fused Location Client by Google. It allows the users to set the time and distance where the data is updated.

Fused Location Client can be used to display the locations with accuracy and this type of adjustment results in noise reduction. Example: The data may be updated after every 100 meters, almost every 5 seconds.

Bottom Line

We have already identified the advantages and methods of building location-based appsusing React Native. Thorough research on technology and the possibilities can help you build the right location-based mobile application.

You can hire React Native Developers from reputed agencies to transform your vision of app development into a reality. Even if you want to make your business services more efficient, you can integrate location-based feature in the app and get accurate data using React Native.

This article is contributed by Kristy Davis, Marketing Manager at I-Verve Inc– React Native App Development Company

Have an interesting article or blog to share with our readers? Let’s get it published