Building an app like Uber using React-Native

Stage 1: Build a React Native app with static data

Please read my previous blog to know why I chose React Native.

I am assuming you know the basics of react native. If you are new to React-Native then refer to react native documentation and then come back.

Lets start our journey to build an android app using React Native in Windows machine. We will be running the app on mobile instead of Emulator. Lets name the app as My-Cab.

I will be using native react-native and won’t be using Expo or React-native-create (refer here for more details). I will splitting the development into parts and we will be looking at 1 part at a time.

npm version on my desktop is 6.4.1 and my react-native version is 2.0.1

npm-version and react-native version

Lets create a react-native app skeleton using the init command.

create react native app

Lets now run the app using react-native android-run

run the react native app

When you run the app on mobile it will open a blank screen with a text messagde

Now we have our first react-native app.

I will be splitting the app into multiple parts. This is for ease of readers. If a user wishes to know how to implement a particular feature he/she can jump directly to that section and know about it. Once all the parts are done we will merge all the parts at last and make a full fledged android app.

To know more about the architecture and screen flow please refer here

The different parts are:

Part 1: Add google maps and display user’s current location on the map

Part 2: Add custom car markers on the maps and provide auto complete feature

Part 3: Display list of all trips in a list view using FlatList

Part 4: Display the trip details and add google directions

Part 5: Add header to the app

Part 6: Add drawer navigation to our app

Part 7: Add stack navigation to navigate across various screens

Part 8: Display user profile data and add image picker

Part 9: Add login and signup to our app

Part 10: Merge all the above modules

For each part we will have a separate code module and all the code modules and merged code will be available in github.

I will following a common folder structure in all code modules. The App.js will load respective individual file present in /app/content for each module.

our react-native app folder structure

The /app folder will look like below.

• UI redering class will be inside /content
• styles will be inside /styles folder for each content file
• icons will be inside /icons folder and images will be inside /images folder
• config folder will contain configurations like navigation file etc

Currently we will be using only hard coded data to display in the app. Once we are done with the NodeJS server implementation we will handle the logic to make REST api call to server and fetch data to display in the app.

Also live tracking of cabs will be handled once NodeJS server implementation is done.