diff --git a/app/(root)/_layout.tsx b/app/(root)/_layout.tsx
index 7798427..dad717d 100644
--- a/app/(root)/_layout.tsx
+++ b/app/(root)/_layout.tsx
@@ -4,6 +4,9 @@ const RootLayout = () => {
return (
+
+
+ {/* */}
);
};
diff --git a/app/(root)/confirm-ride.tsx b/app/(root)/confirm-ride.tsx
new file mode 100644
index 0000000..5b70ab6
--- /dev/null
+++ b/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 (
+
+ (
+ setSelectedDriver(item.id)}
+ />
+ )}
+ ListFooterComponent={() => (
+
+ router.replace("/(root)/book-ride")}
+ />
+
+ )}
+ />
+
+ );
+};
+
+export default ConfirmRide;
diff --git a/app/(root)/find-ride.tsx b/app/(root)/find-ride.tsx
index 070e2c5..0f5b2bc 100644
--- a/app/(root)/find-ride.tsx
+++ b/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 (
-
- Find Ride
-
+
+
+ From
+
+
+
+
+
+ To
+
+
+
+
+ router.replace("/(root)/confirm-ride")}
+ className="mt-5"
+ />
+
);
};
diff --git a/components/driver-card.tsx b/components/driver-card.tsx
new file mode 100644
index 0000000..aad5b94
--- /dev/null
+++ b/components/driver-card.tsx
@@ -0,0 +1,69 @@
+import { Image, Text, TouchableOpacity, View } from "react-native";
+
+import { icons } from "@/constants";
+import { formatTime } from "@/lib/utils";
+import { DriverCardProps } from "@/types/type";
+
+export const DriverCard = ({
+ item,
+ selected,
+ setSelected,
+}: DriverCardProps) => {
+ return (
+
+
+
+
+
+ {item.title}
+
+
+
+ 4
+
+
+
+
+
+
+
+ ${item.price}
+
+
+
+
+ |
+
+
+
+ {formatTime(item.time!)}
+
+
+
+ |
+
+
+
+ {item.car_seats} seats
+
+
+
+
+
+
+ );
+};
diff --git a/components/google-text-input.tsx b/components/google-text-input.tsx
index 3abe7d2..c89ac41 100644
--- a/components/google-text-input.tsx
+++ b/components/google-text-input.tsx
@@ -1,4 +1,4 @@
-import { View, Image } from "react-native";
+import { View, Image, TouchableOpacity } from "react-native";
import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";
import { icons } from "@/constants";
@@ -64,13 +64,22 @@ export const GoogleTextInput = ({
language: "en",
}}
renderLeftButton={() => (
-
+ {
+ handlePress({
+ latitude: 26.8467,
+ longitude: 80.9462,
+ address: "Lucknow, Uttar Pradesh",
+ });
+ }}
+ className="justify-center items-center w-6 h-6"
+ >
-
+
)}
textInputProps={{
placeholderTextColor: "gray",
diff --git a/components/map.tsx b/components/map.tsx
index ce3942b..c82ce97 100644
--- a/components/map.tsx
+++ b/components/map.tsx
@@ -8,7 +8,7 @@ import { icons } from "@/constants";
const drivers = [
{
- id: "1",
+ id: 1,
driver_id: 1,
first_name: "James",
last_name: "Wilson",
@@ -18,9 +18,14 @@ const drivers = [
"https://ucarecdn.com/a2dc52b2-8bf7-4e49-9a36-3ffb5229ed02/-/preview/465x466/",
car_seats: 4,
rating: 4.8,
+ latitude: 0,
+ longitude: 0,
+ title: "",
+ price: "45",
+ time: 5,
},
{
- id: "2",
+ id: 2,
driver_id: 2,
first_name: "David",
last_name: "Brown",
@@ -30,9 +35,14 @@ const drivers = [
"https://ucarecdn.com/a3872f80-c094-409c-82f8-c9ff38429327/-/preview/930x932/",
car_seats: 5,
rating: 4.6,
+ latitude: 0,
+ longitude: 0,
+ title: "",
+ price: "45",
+ time: 5,
},
{
- id: "3",
+ id: 3,
driver_id: 3,
first_name: "Michael",
last_name: "Johnson",
@@ -42,9 +52,14 @@ const drivers = [
"https://ucarecdn.com/289764fb-55b6-4427-b1d1-f655987b4a14/-/preview/930x932/",
car_seats: 4,
rating: 4.7,
+ latitude: 0,
+ longitude: 0,
+ title: "",
+ price: "45",
+ time: 5,
},
{
- id: "4",
+ id: 4,
driver_id: 4,
first_name: "Robert",
last_name: "Green",
@@ -54,6 +69,11 @@ const drivers = [
"https://ucarecdn.com/b6fb3b55-7676-4ff3-8484-fb115e268d32/-/preview/930x932/",
car_seats: 4,
rating: 4.9,
+ latitude: 0,
+ longitude: 0,
+ title: "",
+ price: "45",
+ time: 5,
},
];
@@ -76,6 +96,8 @@ export const Map = () => {
useEffect(() => {
if (Array.isArray(drivers)) {
+ setDrivers(drivers);
+
if (!userLatitude || !userLongitude) return;
const newMarkers = generateMarkersFromData({
diff --git a/components/ride-layout.tsx b/components/ride-layout.tsx
new file mode 100644
index 0000000..612cdb8
--- /dev/null
+++ b/components/ride-layout.tsx
@@ -0,0 +1,62 @@
+import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
+import { router } from "expo-router";
+import { useRef, type PropsWithChildren } from "react";
+import { Image, Text, TouchableOpacity, View } from "react-native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+
+import { icons } from "@/constants";
+
+import { Map } from "./map";
+
+type RideLayoutProps = {
+ title?: string;
+ snapPoints?: string[];
+};
+
+export const RideLayout = ({
+ title = "Go Back",
+ snapPoints,
+ children,
+}: PropsWithChildren) => {
+ const bottomSheetRef = useRef(null);
+
+ return (
+
+
+
+
+ router.back()}>
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+ );
+};