thegera4 / uber-clone

Uber clone in react-native

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

uber-clone

This is a small uber-clone. It was made to practice react-native. I used the following tools for this project:

  • Google Places Api
  • Directions API
  • Distance Matric API
  • React native elements toolkit
  • Tailwind css
  • Redux Toolkit

In the home screen, you will find an input that uses the Google Places API, to fetch the data of the places similar to the user input (autocomplete). This input value sets the origin of the user. It also has validation (if you do not input a place, you can not select from the possible options):

homescreen validationhome googleplacesautocomplete

If you click on the "Get a ride" option button, you will navigate to the next screen, where you will find a fully functional map, provided by the react-native-maps API.

In this screen you have another input that also uses the google places api to autocomplete the destination value. There is also a hamburguer icon that allows you to navigate back to the home screen.

Finally when you select a destination, the map is updated with the distance calculation, as well as the price is shown in the screen.

mapview distance distancexl