Added Image Slider

ArtisanConnect/app/notice/[id].jsx

@@ -6,24 +6,27 @@ import {Image} from "@/components/ui/image";
 import {Text} from "@/components/ui/text";
 import {VStack} from "@/components/ui/vstack";
 import {Ionicons} from "@expo/vector-icons";
-import {ActivityIndicator} from "react-native";
+import {ActivityIndicator, Dimensions, FlatList, View} from "react-native";
-import {useEffect, useState} from "react";
+import {useEffect, useState, useRef} from "react";
 import {useNoticesStore} from "@/store/noticesStore";
 import {useWishlist} from "@/store/wishlistStore";
 import {Pressable} from "react-native";
 import {getUserById} from "@/api/client";
 
+const {width} = Dimensions.get("window");
 
 
 export default function NoticeDetails() {
     const {id} = useLocalSearchParams();
-    const [image, setImage] = useState(null);
+    const [images, setImages] = useState([]);
     const [isImageLoading, setIsImageLoading] = useState(true);
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState(null);
     const [notice, setNotice] = useState(null);
     const [user, setUser] = useState(null);
     const [isUserLoading, setIsUserLoading] = useState(true);
+    const flatListRef = useRef(null);
+    const [currentIndex, setCurrentIndex] = useState(0);
 
 
     const {getNoticeById, getAllImagesByNoticeId} = useNoticesStore();
@@ -32,6 +35,15 @@ export default function NoticeDetails() {
     const isInWishlist = useWishlist((state) =>
         notice ? state.wishlistNotices.some((item) => item.noticeId === notice.noticeId) : false
     );
+    const onViewableItemsChanged = useRef(({ viewableItems }) => {
+        if (viewableItems.length > 0) {
+            setCurrentIndex(viewableItems[0].index);
+        }
+    }).current;
+
+    const viewabilityConfig = useRef({
+        itemVisiblePercentThreshold: 70,
+    }).current;
 
     useEffect(() => {
         const fetchNotice = async () => {
@@ -59,8 +71,9 @@ export default function NoticeDetails() {
             setIsImageLoading(true);
             if (notice) {
                 try {
-                    const images = await getAllImagesByNoticeId(notice.noticeId);
+                    const fetchedImages = await getAllImagesByNoticeId(notice.noticeId);
-                    setImage(images && images.length > 0 ? images[0] : "https://http.cat/404.jpg");
+                    setImages(fetchedImages && fetchedImages.length > 0 ? fetchedImages : ["https://http.cat/404.jpg"]);
+
                 } catch (err) {
                     console.error("Error while loading images:", err);
                     setImage("https://http.cat/404.jpg");
@@ -118,16 +131,44 @@ export default function NoticeDetails() {
                     <ActivityIndicator size="large" color="#3b82f6" />
                 </Box>
             ) : (
-                <Image
+                <Box>
-                    source={{
+                    <FlatList
-                        uri: image,
+                        ref={flatListRef}
-                    }}
+                        data={images}
-                    className="h-auto w-full rounded-md aspect-[1/1]"
+                        horizontal
-                    alt="image"
+                        snapToAlignment="center"
-                    resizeMode="cover"
+                        decelerationRate="fast"
-                />
+                        showsHorizontalScrollIndicator={false}
+                        pagingEnabled
+                        onViewableItemsChanged={onViewableItemsChanged}
+                        viewabilityConfig={viewabilityConfig}
+                        renderItem={({ item, index }) => (
+                            <View style={{ width: width }}>
+                                <Image
+                                    source={{ uri: item }}
+                                    className="h-auto w-full rounded-md aspect-square"
+                                    alt={`Zdjęcie ${index + 1}`}
+                                    resizeMode="contain"
+                                />
+                            </View>
+                        )}
+                        keyExtractor={(item, index) => index.toString()}
+                    />
+
+                    {images.length > 1 && (
+                        <Box className="flex-row justify-center mt-2">
+                            {images.map((_, index) => (
+                                <Box
+                                    key={index}
+                                    className={`w-2 h-2 rounded-full mx-1 ${index === currentIndex ? 'bg-primary-500' : 'bg-gray-300'}`}
+                                />
+                            ))}
+                        </Box>
+                    )}
+                </Box>
             )}
 
+
             <VStack className="p-2">
                 <Text className="text-sm font-normal mb-2 text-typography-700">
                     {notice.publishDate}