How to Background Geo-fence in React-Native

Note: This is an ongoing series of blog posts. Feel free to follow me on Twitter if you need to ask any questions.

Summary

Geo-fencing is the new trend in the mobile community, location based advertising is getting popular day by day. And I bet your marketing team is also asking you to implement those solutions to your app, but how?

I *actually* build this app in 1 day, so it is quick and dirty.

You can find the app on my Github Profile.

This is what the app look like in a simple screenshots.

Geo-Fence Entered

The choice between Expo SDK or Native

I’m developing react-native applications since 2 weeks. This makes me a newbie in the community, that’s why when I started to develop react-native applications Expo was my first choice. So I love Expo, no more dealing with Android Studio no more Xcode(Thanks god, No more Macbook. I love using Ubuntu). But the drawback is big, no more native modules. I though okay, I bet Expo has it own Background-Geofencing solution. Yes, it has but it is in a very early phase the background app gets killed randomly, callbacks doesn’t work sometimes. I didn’t had a great experience with Expo’s solution if you had similar or better experience please share them with me!

Choosing the right library

react-native-background-geolocation from Mauron85 or

react-native-background-geolocation from Transistorsoft

The Transistorsoft solutions is not open-source , if you want to use it in your application you need a license key. It comes with support great documentation etc.

Since I believe in free software I used the Mauron85’s solution, Thank you Marián!

Getting Started

I’d definitly suggest you to check out the example which are build from Mauron85 he has already developed great example project you can play with those and understand the library and how it works.

Let’s start.

npx react-native init BackgroundGeofencing

After you created your applications we need to install some libraries, I love using yarn as package manager, so here we go

yarn add @mauron85/react-native-background-geolocation && react-native-boundary

first of all we need some background geolocation tracker, here is mine.

If you need further detail what those methods are you can check out the documentation from the library, those methods are there to configure the library. And the second component is where you trigger the BackgroundLocationtracker and set the Geo-fence locations. You can use multiple Geo-fence points as an Json array.

Then start the route, I used an android emulator to simulate a driving car,

Starting the route

As you can see on the left screen I started a starting route which is Fenerbahce,Igrips sk. and a final destination which is Feneryolu Mustafa Mazhar. And the feofence is somewhere between you can see it on the right screen it has a 100m radius you can change the radius via editing this part:

{ lat: 40.9736396, lng: 29.0454794, radius: 100, id: ‘Company’, }

As soon as the car enters this are the text Boundary entered : Not Enter changes to Enter and after you exited the Boundary it will change to Not Enter again shown as in the next screenshot

Entered geofence

Exited Geo-fence

In my case I used a state isEntered and changed it’s state you can do more things such as sending local notifications such as:

For further questions, get in touch with me via Twitter