Live Location Sharing in React Native using Action Cable

Live location is becoming important part of our life and now a days almost all the apps have something to do with location.

Photo by henry perks on Unsplash

Fetch a location once is not at all a big deal in react-native but share the live location to others like whatsapp, uber, zomato is a big deal, and today im gonna break that down.

Things needs to be Done

1. Fetching the location: The first and foremost thing is fetch the location of the user under a regular interval
2. Background location: The next thing to be done is to fetch the location even when the app is not in use. This is because always user will not be app be turned on to share his/her location
3. Action Cable interface: Now the important thing is to share this live location through action cable. we use action cable since we use ruby as our backend and this could be any sockets according to the convenience
4. Location Reception: The final thing to do is receive the location data by other end of the user

Packages Going to be used:

Install the following package as we will be using these packages in our learning

• React-Native location — Used for fetching the current location of user and also for accessing the permission tp use location service.
• React-Native foreground service — this is used to keep on running a service regardless of an app running in foreground or background.
• React-Native action cable — Used as a socket to have a stable communication with the backend especially rails.

Fetching the location

• The first thing is to have a live location, the location of the user who is going to share his/her live location has to be fetched

• First we have to request for the location permission which we are doing at line number 16.
• Once permission is given the location is fetched in line number 4.
• Calling the initLocationService() function will fetch the user location along with the accuracy

Background location

• We solved first problem of fetching the location but this give rise to second problem which is fetching location when the app is in background.
• For this we are going to use a foreground service when will be running even when the app is closed

• This foreground service has the inbuilt scheduler which runs every n milliseconds. This n is mentioned in delay on line number 20.
• First task has to be added and that task can be started whenever it is needed.

Action Cable interface

• We came to our important milestone which is transferring our received data to the receiver end through action cable.

• Here initializeLiveLocation() is the entry point where we connect the socket and that socket is saved in the state.
• In line number 24 we have write function which is used to emit the data through the socket
• In the same way unsubscribe function is used which checks whether socket is connected and if so, the socket connection will be terminated

Location Reception

• Now we reached our last and final step which is reception of the payload from the receiver end
• This is simple and we need to add a socket listener as follows

• Here read() is a new function which has socket.on() function that listens for the emit from the backend and when the data is received you can use that data for later use.

Finally 🎉…

We achieved the live location from user1 to user2, This can be scaled to a group sharing where many people will be sharing their location to a single user.

I hope this article would have helped you… Happy Coding 😄

For Do’s and don’ts while implementing the Live Location feature catch up with following article

Things to watch-out while implementing Live Location Sharing in React Native