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.
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.
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 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.
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.
Sr. Content Strategist
Meet Manish Chandra Srivastava, the Strategic Content Architect & Marketing Guru who turns brands into legends. Armed with a Masters in Mass Communication (2015-17), Manish has dazzled giants like Collegedunia, Embibe, and Archies. His work is spotlighted on Hackernoon, Gamasutra, and Elearning Industry.
Beyond the writer’s block, Manish is often found distracted by movies, video games, AI, and other such nerdy stuff. But the point remains, If you need your brand to shine, Manish is who you need.
latest
