# Vehicle Tracker app using Firebase and React Native Navigation Welcome back today we will see how to create a vehicle tracker app using firebase real-time database and cloud functions with react native navigation ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056922705/12ecf054-afb5-4f65-9a08-b841a6d873e4.png align="left") We will create both admin and driver part in a single app and add the roles using firebase [cloud functions](https://medium.com/@nidhinkumar/firebase-cloud-function-f4ab77ae2807). **Real-time DB Structure** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056924254/ecaa472a-caa6-4323-a300-8584d3db2940.jpeg align="left") In the vehicles part, we can see mail IDs and auth types which are created by the admin. The driver logins in with the email id and password and updates the current trip details by clicking `START` Button. Once the `STOP` button is clicked the current trip details get cleared off from the real-time database Meanwhile, the admin can see the current trip details of each user. If there is no current trip then the driver will be in a halt state or else in a moving state. Let's begin with the initial setup of creating a React native application and installing the plugins. ```javascript react-native init vehicletracker ``` once the project is created install the below-mentioned plugins ```javascript "@mapbox/polyline": "^1.0.0" "react-native-firebase": "^5.2.3", "react-native-geolocation-service": "^2.0.0", "react-native-maps": "^0.23.0", "react-native-navigation": "^2.16.0", "react-redux": "^6.0.1", "redux": "^4.0.1", "redux-form": "^8.1.0", "redux-thunk": "^2.3.0" ``` **Plugins Link** React Native Firebase — [Link](https://www.npmjs.com/package/react-native-firebase) React Native Maps — [Link](https://github.com/react-native-community/react-native-maps) React Native Navigation — [Link](https://wix.github.io/react-native-navigation/#/docs/Installing) React Native polyLine — [Link](https://github.com/mapbox/polyline) > Note: Kindly get the Google Maps directions [API key](https://developers.google.com/maps/documentation/directions/start) We have done the client part and now it’s turn for the Firebase. Create a New Firebase project and **enable** the Email / Password sign-in method in **Authentication**. Create a **Real-time database** and add the security rules ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056925815/937beb27-5241-43e9-85c5-4d6acf005770.png align="left") We have done the initial setup of our project and now it’s time to make our hands dirty. **Folder Structure** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056927231/1187bb1f-4171-4506-8369-5011c6575d04.png align="left") Goto index.js and replace the code with below lines ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056929818/3f1cb30b-a017-4422-b92c-612630137928.png align="left") Once the code is replaced go to the boot folder and create the below files touch index.js Boot.js navigation.js routes.js BootStyleSheet.js We will create a cloud function to create an authentication once a vehicle is added by the admin ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056931583/9797025f-8d12-44e3-a012-3c7ad89e2d45.png align="left") To Check user is authenticated or not ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056933606/18be65ad-baf2-4154-aa0b-a700cef77151.png align="left") Here we will check whether the user is authenticated or not. If authenticated and user type is driver then we will navigate to **Driver Module** else to **Admin Module**. If not authenticated then go to **Sign In Module**. **Navigation.js** * Navigation to Auth Module ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056935442/f2fb4d6a-4232-49e2-9c01-e0e9b3fd199d.png align="left") * Navigation to Admin Module ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056937642/3aaf39c1-fef7-4d3f-9cd0-c927797bde94.png align="left") * Navigation to Driver Module ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056939893/88d5cd67-ea03-4311-8254-36b7869ef24f.png align="left") Here we will define the list of screens for each module. **Routes.js** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056941878/5549c843-c54e-4c63-a01f-f9be32e10831.png align="left") We will define the routes of each screen. Since we are using redux we will define the navigation as **registerComponentWithRedux** Navigation.registerComponentWithRedux('Name', () => require('./Name').default, Provider, store); In Components Folder we will create another folder named FormInput.Since we are using the redux form for input we create it as a component. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056943862/f1d30b0b-fa1c-4056-8c96-d15fbe1aec45.png align="left") #### **Admin Module** In the Admin module, we will create three screens namely * Add Driver * List Driver * Detail View On the List page, we will show the list of drivers with their status once we click an item in the list we will show a map view along the route in which the driver is passing on and in the Add Driver screen we will add a new driver. 1. List Driver Screen ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056946648/622c218d-8064-4b47-bdc4-f7f1217acea2.png align="left") 2\. Add Driver Screen Creating Add vehicle form using the redux form ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056948575/564b1bce-30b8-448b-92e6-2ffa27a21698.png align="left") On Form Submit ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056951333/a0ea94ab-7af6-4145-a01f-a4aa3f24c68c.png align="left") 3\. Detail View ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056953654/5afc6591-0187-43d1-baf7-75b9d0a6bdb6.png align="left") Now we are done with the Admin part and the final section Driver Module. In the Driver Module we will have only one screen Where the driver can see the current location and enter the source and destination once the source and destination are added it will show the distance and duration to reach the destination. Once the start button is clicked the trip details will get updated in the firebase. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056955080/b15a47e6-a83e-43d6-be21-06c03cf5bfae.jpeg align="left") **Getting Route Directions** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056961560/d154dcdd-c241-4778-a7cf-24f145b61d4c.png align="left") Getting Route Directions **On Location Change** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056964646/f468fa37-4aef-47b5-9253-79f61fe7e700.png align="left") On Location Change **Suggestions for Source and Destination** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056966741/7dcd3a0d-b2cd-463e-ad62-fe8685c3f700.png align="left") Suggestions for Source and Destination **Updating the trip to Firebase** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056968487/93bcf617-5f8d-4bcd-ac1e-ad1701f78def.png align="left") Updating the Trip to Firebase **Redux Action for Updating the trip details** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056970378/4b74869f-b335-465b-87f5-9479ee0e60f0.png align="left") Redux Action It’s time to run your application and you can see the screens like this ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056971903/70cd7886-51c1-4b99-bd41-71302295d22b.jpeg align="left") Login & Admin Home Page ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056973371/ee0713c3-db86-4165-a73f-1f08aa02ab8b.jpeg align="left") Add a new Vehicle and Detail View of a Vehicle (Admin) ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056975715/1a577fd4-2f16-4a76-be08-2c6a086a15a1.jpeg align="left") Driver Module — Adding Source and Destination and Starting a Trip Feel free to have a look at the [source code](https://github.com/nidhinkumar06/vehicle-tracker) **Reference Links** * React-native Navigation Blog [Link](https://medium.com/react-native-training/explanation-of-react-native-navigation-wix-with-redux-deabcee8edfc) * Drawing PolyDirections on React native maps with Google Directions — [Link](https://www.youtube.com/watch?v=LKnz4gmesZk) * React-native Navigation with redux — [Link](https://medium.com/wix-engineering/react-native-navigation-v2-adding-redux-b4fa0c0254d9) * Adding Topbar icons in React native navigation — [Link](https://github.com/wix/react-native-navigation/issues/2705) **Issues Faced During Development** * React-native maps yellow warning message — [Link](https://github.com/react-native-community/react-native-maps/issues/2620) * Unable to resolve Gradle dependencies using react-native maps — [Link](https://github.com/react-native-community/react-native-maps/issues/2695)