Building a Live Location Sharing and Tracking App Using gluestack-ui with Expo React Native and Google Maps API

1. Node.js and npm are installed on your system.
2. React Native development environment set up. You can follow the official React Native documentation to set it up.

For expo-location, we need to do some configuration in your app.json/app.config.js

Before working on the code, we need the Google API key to use the maps API.

1. Go to the Google Cloud Console.
2. Create a new project or select an existing one.
3. Enable the "Maps JavaScript API" and "Places API" for your project.
4. Create an API Key for your project.

To use Google Maps on iOS devices, we need to attach the obtained API key in our app.json/app.config.js file.

Let us create a UI to display the maps and the marker for the user location.

1. Push Location - To push the user updated location to back on a specific interval.
2. Share Location - To share the user location on a targeted user Email.
3. Get Locations Shared to User - To fetch all the user lists whose locations are shared with the user (return an array of the object).
4. Stop Location - To stop the location sharing for the specific user by passing the targeted Email.

We need to call the function in our app.tsx file inside useEffect.

We are pushing the user location in every 10-second interval to the back-end.

Now call the Share Location API to start sharing the location from the back-end:

Now, as we are done with the sharing part, we have to check for any location that is shared with us. We will call the API Get Location shared with the User to get the array of the shared location. To listen to the live location of other users, we need to implement the web-socket for real-time update. For this, we are using sockjs-client and stopmjs. We need to install this package:

To display the marker for every user we need to loop through the list allRecievedLocations.

Check out the output for the app here:

For full source code please visit GitHub.