fix oauth flow

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

@@ -1,10 +1,51 @@
-import { Text } from "react-native";
+import { useUser } from "@clerk/clerk-expo";
+import { ActivityIndicator, FlatList, Image, Text, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 
+import { RideCard } from "@/components/ride-card";
+import { images } from "@/constants";
+import { useFetch } from "@/lib/fetch";
+import type { Ride } from "@/types/type";
+
 const Rides = () => {
+  const { user } = useUser();
+  const { data: recentRides, loading } = useFetch<Ride[]>(
+    `/(api)/ride/${user?.id}`,
+  );
+
   return (
     <SafeAreaView>
-      <Text>Rides</Text>
+      <FlatList
+        data={recentRides}
+        renderItem={({ item }) => <RideCard ride={item} />}
+        className="px-5"
+        keyboardShouldPersistTaps="handled"
+        contentContainerStyle={{
+          paddingBottom: 100,
+        }}
+        ListEmptyComponent={() => (
+          <View className="flex flex-col items-center justify-center">
+            {!loading ? (
+              <>
+                <Image
+                  source={images.noResult}
+                  alt="No recent rides found"
+                  className="w-40 h-40"
+                  resizeMode="contain"
+                />
+                <Text className="text-sm">No recent rides found.</Text>
+              </>
+            ) : (
+              <ActivityIndicator size="small" color="#000" />
+            )}
+          </View>
+        )}
+        ListHeaderComponent={() => (
+          <>
+            <Text className="text-2xl font-JakartaBold my-5">All rides</Text>
+          </>
+        )}
+      />
     </SafeAreaView>
   );
 };