user map for driver

app/(root)/(tabs)/home.tsx

@@ -169,15 +169,15 @@ export default function Page() {
         )}
         ListHeaderComponent={() => (
           <>
-            <View className='flex flex-row items-center justify-between my-5'>
-              <Text className='text-2xl capitalize font-JakartaExtraBold'>
-                Welcome {user?.firstName || user?.emailAddresses[0].emailAddress.split("@")[0]}{" "}
+            <View className="flex flex-row items-center justify-between my-5">
+              <Text className="text-2xl font-JakartaExtraBold">
+                Welcome {user?.firstName}👋
               </Text>
               <TouchableOpacity
                 onPress={handleSignOut}
-                className='jsutify-center items-center
-               w-10 h-10 rounded-full bg-white'>
-                <Image source={icons.out} className='w-4 h-4' />
+                className="justify-center items-center w-10 h-10 rounded-full bg-white"
+              >
+                <Image source={icons.out} className="w-4 h-4" />
               </TouchableOpacity>
             </View>
             <GoogleTextInput

app/(root)/_layout.tsx

@@ -7,6 +7,10 @@ const Layout=()=> {
     return (
         <Stack>
             <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+            <Stack.Screen name="find-ride" options={{ headerShown: false }} />
+            <Stack.Screen name="confirm-ride" options={{ headerShown: false }} />
+            <Stack.Screen name="book-ride" options={{ headerShown: false }} />
+
         </Stack>
     );
 }

app/(root)/find-ride.tsx

@@ -1,13 +1,14 @@
+import RideLayout from "@/components/RideLayout"
 import { useLocationStore } from "@/store"
 import { Text, View } from "react-native"
 
 const FindRide = () => {
     const { userAddress, destinationAddress, setDestinationLocation, setUserLocation } = useLocationStore()
     return (
-        < View >
-            <Text className="text-2xl">You are here:{userAddress}</Text>
-            <Text className="text-2xl">You are going to:{destinationAddress}</Text>
-        </View >
+        < RideLayout >
+            <Text className="text-2xl">Find Ride</Text>
+
+        </RideLayout >
     )
 
 }

components/RideLayout.tsx

@@ -0,0 +1,30 @@
+import { icons } from "@/constants"
+import { router } from "expo-router"
+import { Image, Text, TouchableOpacity, View } from "react-native"
+import { GestureHandlerRootView } from "react-native-gesture-handler"
+import Map from "@/components/map";
+
+const RideLayout = ({ title, children }: { title: string, children: React.ReactNode }) => {
+    return (
+        <GestureHandlerRootView>
+            <View className="flex-1 bg-white">
+                <View className="flex flex-col h-screen bg-blue-500">
+                    <View className="flex flex-row absolute z-10 top-16 items-center justify-start px-5">
+                        <TouchableOpacity onPress={() => router.back()}>
+                            <View className="w-10 h-10 bg-white rounded-full items-center justify-center">
+                                <Image source={icons.backArrow} resizeMode="contain" className="w-6 h-6" />
+                            </View>
+                        </TouchableOpacity>
+                        <Text className="text-xl font-JakartaSemiBold">
+                            {title||"Go Back"}
+                        </Text>
+
+                    </View>
+                     <Map/>
+                </View>
+            </View>
+        </GestureHandlerRootView>
+    )
+
+}
+export default RideLayout