image picker fix, working order

app/(root)/cars/[id].tsx

@@ -1,12 +1,18 @@
-import { View, Text, SafeAreaView, ScrollView, Image, TouchableOpacity } from "react-native";
-import React, { useEffect, useState } from "react";
+import { View, Text, SafeAreaView, ScrollView, Image, TouchableOpacity, Dimensions } from "react-native";
+import React, { useEffect, useState, useRef } from "react";
 import { useLocalSearchParams, router } from "expo-router";
 import icons from "@/constants/icons";
 import { getCar } from "@/lib/database";
+import { useGlobalContext } from '@/lib/globalProvider';
+import Carousel, { ICarouselInstance } from 'react-native-reanimated-carousel';
 
 const CarDetails = () => {
   const { id } = useLocalSearchParams();
   const [carData, setCarData] = useState<any>(null);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const { user } = useGlobalContext();
+  const width = Dimensions.get('window').width;
+  const carouselRef = useRef<ICarouselInstance>(null);
 
   useEffect(() => {
     const fetchCar = async () => {
@@ -30,24 +36,64 @@ const CarDetails = () => {
         contentContainerClassName="pb-32"
       >
         {/* Header */}
-        <View className="relative">
-          <Image 
-            source={{ uri: carData.images?.[0] }} 
-            className="w-full h-72"
-            resizeMode="cover"
+        <View className="relative h-72">
+          <Carousel
+            ref={carouselRef}
+            loop
+            width={width}
+            height={288}
+            data={carData.images || []}
+            scrollAnimationDuration={1000}
+            onProgressChange={(_, absoluteProgress) => {
+              setActiveIndex(Math.round(absoluteProgress));
+            }}
+            renderItem={({ item }) => (
+              <Image 
+                source={{ uri: item as string }} 
+                className="w-full h-full"
+                resizeMode="cover"
+              />
+            )}
           />
           
+          {/* Navigation Arrows */}
+          {carData.images?.length > 1 && (
+            <>
+              <TouchableOpacity 
+                onPress={() => carouselRef.current?.scrollTo ({ index: activeIndex - 1 })}
+                className="absolute left-4 top-1/2 -translate-y-1/2 bg-black/50 rounded-full p-2 z-10"
+              >
+                <Image 
+                  source={icons.backArrow} 
+                  className="w-6 h-6"
+                  tintColor="white"
+                />
+              </TouchableOpacity>
+              
+              <TouchableOpacity 
+                onPress={() => carouselRef.current?.scrollTo({ index: activeIndex + 1 })}
+                className="absolute right-4 top-1/2 -translate-y-1/2 bg-black/50 rounded-full p-2 z-10"
+              >
+                <Image 
+                  source={icons.backArrow} 
+                  className="w-6 h-6 rotate-180"
+                  tintColor="white"
+                />
+              </TouchableOpacity>
+            </>
+          )}
+
           {/* Back Button */}
           <TouchableOpacity 
             onPress={() => router.back()}
-            className="absolute top-5 left-5 bg-white/90 p-2 rounded-full"
+            className="absolute top-5 left-5 bg-white/90 p-2 rounded-full z-10"
           >
             <Image source={icons.backArrow} className="size-6" />
           </TouchableOpacity>
 
           {/* Favorite Button */}
           <TouchableOpacity 
-            className="absolute top-5 right-5 bg-white/90 p-2 rounded-full"
+            className="absolute top-5 right-5 bg-white/90 p-2 rounded-full z-10"
           >
             <Image source={icons.heart} className="size-6" />
           </TouchableOpacity>