find ride and book ride page ui created

app/(root)/_layout.tsx

@@ -4,6 +4,9 @@ const RootLayout = () => {
   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)/confirm-ride.tsx

@@ -0,0 +1,36 @@
+import { FlatList, View } from "react-native";
+
+import { DriverCard } from "@/components/driver-card";
+import { RideLayout } from "@/components/ride-layout";
+import { CustomButton } from "@/components/custom-button";
+import { router } from "expo-router";
+import { useDriverStore } from "@/store";
+
+const ConfirmRide = () => {
+  const { drivers, selectedDriver, setSelectedDriver } = useDriverStore();
+
+  return (
+    <RideLayout title="Choose a Driver" snapPoints={["65%", "85%"]}>
+      <FlatList
+        data={drivers}
+        renderItem={({ item }) => (
+          <DriverCard
+            item={item}
+            selected={selectedDriver ?? 0}
+            setSelected={() => setSelectedDriver(item.id)}
+          />
+        )}
+        ListFooterComponent={() => (
+          <View className="mx-5 mt-10">
+            <CustomButton
+              title="Select Ride"
+              onPress={() => router.replace("/(root)/book-ride")}
+            />
+          </View>
+        )}
+      />
+    </RideLayout>
+  );
+};
+
+export default ConfirmRide;

app/(root)/find-ride.tsx

@@ -1,10 +1,51 @@
+import { CustomButton } from "@/components/custom-button";
+import { GoogleTextInput } from "@/components/google-text-input";
+import { RideLayout } from "@/components/ride-layout";
+import { icons } from "@/constants";
+import { useLocationStore } from "@/store";
+import { router } from "expo-router";
 import { Text, View } from "react-native";
 
 const FindRide = () => {
+  const {
+    userAddress,
+    destinationAddress,
+    setDestinationLocation,
+    setUserLocation,
+  } = useLocationStore();
+
   return (
-    <View>
-      <Text>Find Ride</Text>
-    </View>
+    <RideLayout title="Ride" snapPoints={["85%"]}>
+      <View className="my-3">
+        <Text className="text-lg font-JakartaSemiBold mb-3">From</Text>
+
+        <GoogleTextInput
+          icon={icons.target}
+          initialLocation={userAddress ?? ""}
+          containerStyles="bg-neutral-100"
+          textInputBackgroundColor="#F5F5F5"
+          handlePress={setUserLocation}
+        />
+      </View>
+
+      <View className="my-3">
+        <Text className="text-lg font-JakartaSemiBold mb-3">To</Text>
+
+        <GoogleTextInput
+          icon={icons.map}
+          initialLocation={destinationAddress ?? ""}
+          containerStyles="bg-neutral-100"
+          textInputBackgroundColor="transparent"
+          handlePress={setDestinationLocation}
+        />
+      </View>
+
+      <CustomButton
+        title="Find now"
+        onPress={() => router.replace("/(root)/confirm-ride")}
+        className="mt-5"
+      />
+    </RideLayout>
   );
 };