Uber Clone

Setting the development environment

• follow the instructions https://reactnative.dev/docs/environment-setup

npm install -g expo-cli

expo init AwesomeProject
cd AwesomeProject
npm start # you can also use: expo start

• after running the application just scan the QR from you phone
• before scan we need app installed into our phone. which is expo-client

setting up the Redux

• we will follow this toolkit website https://redux-toolkit.js.org/introduction/getting-started

• we will follow the existing project approach

npm install @reduxjs/toolkit

npm install react-redux

• lets wrap up our project with the provider

• before doing this provider work we need to make a file called store.js

mkdir redux
mkdir redux/store
touch redux/store/store.js

• open that file called store.js

import{configureStore}from"@reduxjs/toolkit";importnavReducerfrom"../../slices/navSlice";exportconststore=configureStore({reducer: {nav: navReducer,},});

• now we need to create that navSlice.js file

mkdir slices
touch slices/navSlice.js

• now put the code on that navSlice.js file

import{createSlice}from"@reduxjs/toolkit";constinitialState={origin: null,destination: null,travelTimeInformation: null,};exportconstnavSlice=createSlice({name: "nav",initialState: initialState,reducer: {setOrigin: (state,action)=>{state.origin=action.payload;},setDestination: (state,action)=>{state.destination=action.payload;},setTravelTimeInformation: (state,action)=>{state.travelTimeInformation=action.payload;},},});exportconst{ setOrigin, setDestination, setTravelTimeInformation }=navSlice.actions;// SelectorsexportconstselectOrigin=(state)=>state.nav.origin;exportconstselectDestination=(state)=>state.nav.destination;exportconstselectTravelTimeInformation=(state)=>state.nav.travelTimeInformation;exportdefaultnavSlice.reducer;

• finally our root file App.js

//App.jsimport{StatusBar}from"expo-status-bar";importReactfrom"react";import{StyleSheet,Text,View}from"react-native";import{Provider}from"react-redux";import{store}from"./redux/store/store";exportdefaultfunctionApp(){return(<Providerstore={store}><Viewstyle={styles.container}><Text>Lets Build Our Uber Clone Application</Text><StatusBarstyle="auto"/></View></Provider>);}conststyles=StyleSheet.create({container: {flex: 1,backgroundColor: "#fff",alignItems: "center",justifyContent: "center",},});

Making Home Screen

• lets create a folder called screens and a file HomeScreen.js into that folder

mkdir screens
touch screens/HomeScreen.js

• we need to install tailwind react native classnames library

npm install tailwind-react-native-classnames

• make a folder called components for our reusable components

mkdir components
touch components/NavOptions.js

• we need react native elements for interactive design

npm install react-native-elements
npm install react-native-vector-icons
npm install react-native-safe-area-context

• put the code to the NavOptions.js file

//NavOptions.jsimportReactfrom"react";import{FlatList,Image,StyleSheet,Text,TouchableOpacity,View,}from"react-native";import{Icon}from"react-native-elements";importtwfrom"tailwind-react-native-classnames";constdata=[{id: "123",title: "Get a ride",image: "https://links.papareact.com/3pn",screen: "MapScreen",},{id: "456",title: "Order food",image: "https://links.papareact.com/28w",screen: "EatsScreen",},];constNavOptions=()=>{return(<FlatListdata={data}keyExtractor={(item)=>item.id}horizontalrenderItem={({ item })=>(<TouchableOpacitystyle={tw`p-2 pl-6 pb-8 pt-4 bg-gray-200 m-2 w-40`}><View><Imagestyle={{width: 120,height: 120,resizeMode: "contain"}}source={{uri: item.image}}/><Textstyle={tw`mt-2 text-lg font-semibold`}>{item.title}</Text><Iconstyle={tw`p-2 bg-black rounded-full w-10 mt-4`}name="arrowright"color="white"type="antdesign"/></View></TouchableOpacity>)}/>);};exportdefaultNavOptions;

• put the code below to HomeScreen.js

//HomeScreen.jsimportReactfrom"react";import{Image,SafeAreaView,StyleSheet,Text,View}from"react-native";importtwfrom"tailwind-react-native-classnames";importNavOptionsfrom"../components/NavOptions";constHomeScreen=()=>{return(<SafeAreaViewstyle={tw`bg-white h-full`}><Viewstyle={tw`p-5`}><Imagestyle={{width: 100,height: 100,resizeMode: "contain"}}source={{uri: "https://links.papareact.com/gzs",}}/><NavOptions/></View></SafeAreaView>);};exportdefaultHomeScreen;conststyles=StyleSheet.create({text: {color: "blue",},});

• all dependencies into the root App.js

//App.jsimport{StatusBar}from"expo-status-bar";importReactfrom"react";import{StyleSheet,Text,View}from"react-native";import{Provider}from"react-redux";import{store}from"./redux/store/store";importHomeScreenfrom"./screens/HomeScreen";import{SafeAreaProvider}from"react-native-safe-area-context";exportdefaultfunctionApp(){return(<Providerstore={store}><SafeAreaProvider><HomeScreen/></SafeAreaProvider></Provider>);}conststyles=StyleSheet.create({container: {flex: 1,backgroundColor: "#fff",alignItems: "center",justifyContent: "center",},});

Implement React Native Navigation

• lets create file MapScreen.js

touch screens/MapScreen.js

• for swtiching from one screen to another we need to install react native navigation

npm install @react-navigation/native
expo install react-native-screens react-native-safe-area-context
npm install @react-navigation/native-stack

//App.jsimport{StatusBar}from"expo-status-bar";importReactfrom"react";import{StyleSheet,Text,View}from"react-native";import{Provider}from"react-redux";import{store}from"./redux/store/store";importHomeScreenfrom"./screens/HomeScreen";import{SafeAreaProvider}from"react-native-safe-area-context";import{NavigationContainer}from"@react-navigation/native";import{createNativeStackNavigator}from"@react-navigation/native-stack";importMapScreenfrom"./screens/MapScreen";exportdefaultfunctionApp(){constStack=createNativeStackNavigator();return(<Providerstore={store}><NavigationContainer><SafeAreaProvider><Stack.Navigator><Stack.Screenname="HomeScreen"component={HomeScreen}options={{headerShown: false}}/><Stack.Screenname="MapScreen"component={MapScreen}options={{headerShown: false}}/></Stack.Navigator></SafeAreaProvider></NavigationContainer></Provider>);}conststyles=StyleSheet.create({container: {flex: 1,backgroundColor: "#fff",alignItems: "center",justifyContent: "center",},});

Google Autocomplete Library

• we need to install react native google places auto complete

npm install react-native-google-places-autocomplete --save

• we need google places api keys

follow this link https://console.cloud.google.com/

• we need to enable places, directions, distance matrix API from google console

• then we have to create credentials and google will provide us API KEY

• make a .env file and store the key to that file

• now we need to install library for execute that .env file API Key

npm install react-native-dotenv

• lets add some plugin in babel.config.js file

module.exports=function(api){api.cache(true);return{presets: ["babel-preset-expo"],plugins: [["module:react-native-dotenv",{moduleName: "@env",path: ".env",},],],};};

• now open the file called HomeScreen.js file

import{GooglePlacesAutocomplete}from"react-native-google-places-autocomplete";import{GOOGLE_MAPS_APIKEY}from"@env";<GooglePlacesAutocompleteplaceholder="Where From?"nearbyPlacesAPI="GooglePlacesSearch"debounce={400}/>;

• if we find any problem to start our project use below command for remove cache

expo r -c

• now lets finish up with some more code in HomeScreen.js file

<GooglePlacesAutocompleteplaceholder="Where From?"styles={{container: {flex: 0,},textInput: {fontSize: 18,},}}onPress={(data,details=null)=>{console.log(data);console.log(details);}}fetchDetails={true}returnKeyType={"search"}enablePoweredByContainer={false}minLength={2}query={{key: GOOGLE_MAPS_APIKEY,language: "en",}}nearbyPlacesAPI="GooglePlacesSearch"debounce={400}/>

• now we will store the location

import{useDispatch}from"react-redux";import{setDestination,setOrigin}from"../slices/navSlice";constdispatch=useDispatch();onPress={(data,details=null)=>{dispatch(setOrigin({location: details.geometry.location,description: data.description,}));dispatch(setDestination(null));}}

Finish Up MapScreen