Bump cross-fetch from 3.1.4 to 3.1.5

.expo-shared/README.md

@@ -0,0 +1,11 @@
+> Why do I have a folder named ".expo-shared" in my project?
+
+The ".expo-shared" folder is created when running commands that produce state that is intended to be shared with all developers on the project. For example, "npx expo-optimize".
+
+> What does the "assets.json" file contain?
+
+The "assets.json" file describes the assets that have been optimized through "expo-optimize" and do not need to be processed again.
+
+> Should I commit the ".expo-shared" folder?
+
+Yes, you should share the ".expo-shared" folder with your collaborators.

.gitignore

@@ -1,15 +1,15 @@
-node_modules/
-.expo/
-npm-debug.*
-*.jks
-*.p8
-*.p12
-*.key
-*.mobileprovision
-*.orig.*
-web-build/
-
-# macOS
-.DS_Store
-
-.env
+node_modules/
+.expo/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store
+
+config.bat

app.json

@@ -27,6 +27,8 @@
     },
     "web": {
       "favicon": "./assets/favicon.png"
-    }
+    },
+    "description": "Uber clone in react native. \n\n- Navigation\n- Redux, \n- Tailwind CSS\n- Google Autocomplete\n- Google map integration with price and distance matrix\n- and a lot more",
+    "githubUrl": "https://github.com/coderkhalide/uber-clone"
   }
 }

app/components/Map.js

@@ -10,6 +10,8 @@ import { Icon } from 'react-native-elements'
 import Constants from 'expo-constants'
 import { useNavigation } from '@react-navigation/native'
 
+// const GOOGLE_MAP_APIKEY = ""
+
 const Map = () => {
     const origin = useSelector(selectOrigin)
     const destination = useSelector(selectDestination)

app/components/NavigateCard.js

@@ -10,6 +10,8 @@ import { useNavigation } from '@react-navigation/native'
 import NavFavourites from './NavFavourites'
 import { Icon } from 'react-native-elements'
 
+// const GOOGLE_MAP_APIKEY = ""
+
 const NavigateCard = () => {
     const dispatch = useDispatch()
     const navigation = useNavigation()
@@ -45,19 +47,19 @@ const NavigateCard = () => {
             <View style={tailwind`px-3 bg-white relative z-10 justify-between flex-1`}>
                 <NavFavourites />
                 <View style={tailwind`mt-3 flex-row justify-evenly py-3 border-t border-gray-100`}>
-                    <TouchableOpacity 
+                    <TouchableOpacity
+                        style={tailwind`flex-row bg-white w-24 px-4 py-3 rounded-full border border-black`}
+                    >
+                        <Icon name="fast-food-outline" type="ionicon" color="black" size={16} />
+                        <Text style={tailwind`text-black text-center pl-3`}>Food</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity
                         style={tailwind`flex-row bg-black w-24 px-4 py-3 rounded-full border border-black`}
                         onPress={() => navigation.push('RideOptionsCard')}
                     >
                         <Icon name="car" type="font-awesome" color="white" size={16} />
                         <Text style={tailwind`text-white text-center pl-3`}>Ride</Text>
                     </TouchableOpacity>
-                    <TouchableOpacity 
-                        style={tailwind`flex-row bg-white w-24 px-4 py-3 rounded-full border border-black`}
-                    >
-                        <Icon name="fast-food-outline" type="ionicon" color="black" size={16} />
-                        <Text style={tailwind`text-black text-center pl-3`}>Ride</Text>
-                    </TouchableOpacity>
                 </View>
             </View>
         </Screen>

app/components/RideOptionsCard.js

@@ -46,7 +46,8 @@ const RideOptionsCard = () => {
     }
 
     const onChoose = () =>{
-        Alert.alert('configurations!!!', `Car: ${selected.title} \nPrice: $${travelConst(selected)} \nDistence: ${travelTimeInformation?.distance?.text} \n${travelTimeInformation?.duration.text} Travel time`)
+        if(!selected) return Alert.alert('Please select a ride option')
+        navigation.push('SuccessScreen', { data: {...selected, distance: travelTimeInformation?.distance?.text, time: travelTimeInformation?.duration.text, price: travelConst(selected)} })
     }
 
     return (

app/navigation/MainNavigator.js

@@ -3,6 +3,7 @@ import { createStackNavigator } from '@react-navigation/stack';
 import HomeScreen from '../screens/HomeScreen';
 import MapScreen from '../screens/MapScreen';
 import EatsScreen from '../screens/EatsScreen';
+import SuccessScreen from '../screens/SuccessScreen';
 
 const Stack = createStackNavigator();
 
@@ -15,6 +16,7 @@ const MainNavigator = () => {
             <Stack.Screen name="Home" component={HomeScreen} />
             <Stack.Screen name="MapScreen" component={MapScreen} />
             <Stack.Screen name="EatsScreen" component={EatsScreen} />
+            <Stack.Screen name="SuccessScreen" component={SuccessScreen} />
         </Stack.Navigator>
     );
 }

app/screens/EatsScreen.js

@@ -1,16 +1,35 @@
+import { useNavigation } from '@react-navigation/native'
 import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
+import { Text, TouchableOpacity, View } from 'react-native'
 import tw from 'tailwind-react-native-classnames'
 import Screen from '../components/Screen'
+import Constants from 'expo-constants'
+import { Icon } from 'react-native-elements'
+import tailwind from 'tailwind-react-native-classnames'
 
 const EatsScreen = () => {
+    const navigation = useNavigation()
+
     return (
-        <Screen style={tw`bg-white h-full`}>
-            <Text>EatsScreen</Text>
+        <Screen style={tw`bg-white h-full justify-center`}>
+            <TouchableOpacity
+                style={[tailwind`bg-white p-3 rounded-full shadow-lg`, { top: Constants.statusBarHeight, left: 20, position: 'absolute', zIndex: 100 }]}
+                onPress={() => navigation.goBack()}
+            >
+                <Icon
+                    type="antdesign"
+                    name="home"
+                    color="black"
+                    size={16}
+                // style={}
+                />
+            </TouchableOpacity>
+            <View style={tailwind`items-center`}>
+                <Text>Uber Eats</Text>
+                <Text>Coming soon!</Text>
+            </View>
         </Screen>
     )
 }
 
 export default EatsScreen
-
-const styles = StyleSheet.create({})

app/screens/HomeScreen.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, StyleSheet, Text, Image } from 'react-native';
+import { View, StyleSheet, Image } from 'react-native';
 import Screen from '../components/Screen';
 import tw from 'tailwind-react-native-classnames';
 import NavOptions from '../components/NavOptions';
@@ -9,6 +9,8 @@ import { useDispatch } from 'react-redux';
 import { setDestination, setOrigin } from '../redux/slices/navSlice';
 import NavFavourites from '../components/NavFavourites';
 
+// const GOOGLE_MAP_APIKEY = ""
+
 const HomeScreen = () => {
     const dispatch = useDispatch()
 

app/screens/MapScreen.js

@@ -1,11 +1,10 @@
 import { useNavigation } from '@react-navigation/native'
 import React, { useEffect } from 'react'
-import { StyleSheet, Text, View } from 'react-native'
+import { View } from 'react-native'
 import { useSelector } from 'react-redux'
 import tailwind from 'tailwind-react-native-classnames'
 import tw from 'tailwind-react-native-classnames'
 import Map from '../components/Map'
-import NavFavourites from '../components/NavFavourites'
 import MapNavigator from '../navigation/MapNavigator'
 import { selectOrigin } from '../redux/slices/navSlice'
 
@@ -29,6 +28,4 @@ const MapScreen = () => {
     )
 }
 
-export default MapScreen
-
-const styles = StyleSheet.create({})
+export default MapScreen

app/screens/SuccessScreen.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { View, Text, Image, TouchableOpacity } from 'react-native';
+import Screen from '../components/Screen';
+import tw from 'tailwind-react-native-classnames';
+import Constants from 'expo-constants'
+import tailwind from 'tailwind-react-native-classnames'
+import { Icon } from 'react-native-elements'
+import { useNavigation } from '@react-navigation/native';
+
+const SuccessScreen = ({ route }) => {
+    const { data } = route.params;
+    const navigation = useNavigation()
+
+    return (
+        <Screen style={tw`bg-white h-full justify-center`}>
+            <TouchableOpacity
+                style={[tailwind`bg-white p-3 rounded-full shadow-lg`, { top: Constants.statusBarHeight, left: 20, position: 'absolute', zIndex: 100 }]}
+                onPress={() => navigation.navigate("Home")}
+            >
+                <Icon
+                    type="antdesign"
+                    name="home"
+                    color="black"
+                    size={16}
+                />
+            </TouchableOpacity>
+            <View style={tw`self-center`}>
+                <View style={tw`p-5 w-full `}>
+                    <Image
+                        source={require('../assets/car_animation.gif')}
+                        style={tw`w-60 h-40`}
+                    />
+                </View>
+                <View style={tw`p-5 text-center self-center`}>
+                    <Text style={tw`font-bold text-lg mb-3 text-center`}>Your {data?.title} is on the way</Text>
+                    <Text style={tw`text-base text-center`}>Ride cost: ${data?.price}</Text>
+                    <Text style={tw`text-base text-center`}>Estimated time: ${data?.time}</Text>
+                    <Text style={tw`text-base text-center`}>Estimated distance: ${data?.distance}</Text>
+                </View>
+            </View>
+        </Screen>
+    );
+}
+
+export default SuccessScreen;

package.json

@@ -1,37 +1,37 @@
-{
-  "main": "node_modules/expo/AppEntry.js",
-  "scripts": {
-    "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web",
-    "eject": "expo eject"
-  },
-  "dependencies": {
-    "@react-navigation/native": "^6.0.0",
-    "@react-navigation/stack": "^6.0.0",
-    "@reduxjs/toolkit": "^1.6.1",
-    "expo": "~42.0.1",
-    "expo-status-bar": "~1.0.4",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
-    "react-native-dotenv": "^3.1.1",
-    "react-native-elements": "^3.4.2",
-    "react-native-gesture-handler": "~1.10.2",
-    "react-native-google-places-autocomplete": "^2.3.0",
-    "react-native-maps": "^0.28.0",
-    "react-native-maps-directions": "^1.8.0",
-    "react-native-reanimated": "~2.2.0",
-    "react-native-safe-area-context": "3.2.0",
-    "react-native-screens": "~3.4.0",
-    "react-native-vector-icons": "^8.1.0",
-    "react-native-web": "~0.13.12",
-    "react-redux": "^7.2.4",
-    "tailwind-react-native-classnames": "^1.4.1"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.9.0"
-  },
-  "private": true
-}
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "@react-navigation/native": "^6.0.11",
+    "@react-navigation/stack": "^6.2.2",
+    "@reduxjs/toolkit": "^1.8.3",
+    "expo": "^45.0.0",
+    "expo-status-bar": "~1.3.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-native": "0.68.2",
+    "react-native-dotenv": "^3.3.1",
+    "react-native-elements": "^3.4.2",
+    "react-native-gesture-handler": "~2.2.1",
+    "react-native-google-places-autocomplete": "^2.4.1",
+    "react-native-maps": "0.30.2",
+    "react-native-maps-directions": "^1.9.0",
+    "react-native-reanimated": "~2.8.0",
+    "react-native-safe-area-context": "4.2.4",
+    "react-native-screens": "~3.11.1",
+    "react-native-vector-icons": "^9.2.0",
+    "react-native-web": "0.17.7",
+    "react-redux": "^8.0.2",
+    "tailwind-react-native-classnames": "^1.5.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9"
+  },
+  "private": true
+}