zdjęcia się wyświetlają na karcie produktu

ArtisanConnect/app/notice/[id].jsx

@@ -1,11 +1,11 @@
-import { Link, Stack, useLocalSearchParams } from "expo-router";
-import { Box } from "@/components/ui/box";
-import { Card } from "@/components/ui/card";
-import { Heading } from "@/components/ui/heading";
-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 {Link, Stack, useLocalSearchParams} from "expo-router";
+import {Box} from "@/components/ui/box";
+import {Card} from "@/components/ui/card";
+import {Heading} from "@/components/ui/heading";
+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,
     Dimensions,
@@ -13,16 +13,16 @@ import {
     View,
     TextInput,
 } from "react-native";
-import { useEffect, useState, useRef } from "react";
-import { useNoticesStore } from "@/store/noticesStore";
-import { useWishlist } from "@/store/wishlistStore";
-import { Pressable, ScrollView } from "react-native";
-import { getUserById } from "@/api/client";
+import {useEffect, useState, useRef} from "react";
+import {useNoticesStore} from "@/store/noticesStore";
+import {useWishlist} from "@/store/wishlistStore";
+import {Pressable, ScrollView} from "react-native";
+import {getUserById} from "@/api/client";
 
-const { width } = Dimensions.get("window");
+const {width} = Dimensions.get("window");
 
 export default function NoticeDetails() {
-  const { id } = useLocalSearchParams();
+    const {id} = useLocalSearchParams();
     const [images, setImages] = useState([]);
     const [isImageLoading, setIsImageLoading] = useState(true);
     const [isLoading, setIsLoading] = useState(true);
@@ -55,15 +55,15 @@ export default function NoticeDetails() {
         });
     };
 
-  const { getNoticeById, getAllImagesByNoticeId } = useNoticesStore();
+    const {getNoticeById, getAllImagesByNoticeId} = useNoticesStore();
     const toggleNoticeInWishlist = useWishlist(
         (state) => state.toggleNoticeInWishlist
     );
 
     const isInWishlist = useWishlist((state) =>
-    id ? state.wishlistNotices.some((item) => item.noticeId == id) : false
+        id ? state.wishlistNotices.some((item) => item.noticeId === id) : false
     );
-  const onViewableItemsChanged = useRef(({ viewableItems }) => {
+    const onViewableItemsChanged = useRef(({viewableItems}) => {
         if (viewableItems.length > 0) {
             setCurrentIndex(viewableItems[0].index);
         }
@@ -103,11 +103,11 @@ export default function NoticeDetails() {
                     setImages(
                         fetchedImages && fetchedImages.length > 0
                             ? fetchedImages
-              : ["https://http.cat/404.jpg"]
+                            : {uri: "https://http.cat/404.jpg"}
                     );
                 } catch (err) {
                     console.error("Error while loading images:", err);
-          setImage("https://http.cat/404.jpg");
+                    setImage({uri: "https://http.cat/404.jpg"});
                 } finally {
                     setIsImageLoading(false);
                 }
@@ -138,7 +138,7 @@ export default function NoticeDetails() {
     }, [notice]);
 
     if (isLoading) {
-    return <ActivityIndicator />;
+        return <ActivityIndicator/>;
     }
 
     if (error) {
@@ -158,7 +158,7 @@ export default function NoticeDetails() {
             />
             {isImageLoading ? (
                 <Box className="h-auto w-full rounded-md aspect-[1/1] bg-gray-100 items-center justify-center">
-          <ActivityIndicator size="large" color="#3b82f6" />
+                    <ActivityIndicator size="large" color="#3b82f6"/>
                 </Box>
             ) : (
                 <Box className="sticky top-0 z-10 bg-white">
@@ -172,11 +172,11 @@ export default function NoticeDetails() {
                         pagingEnabled
                         onViewableItemsChanged={onViewableItemsChanged}
                         viewabilityConfig={viewabilityConfig}
-            renderItem={({ item, index }) => (
-              <View style={{ width: width }}>
+                        renderItem={({item, index}) => (
+                            <View style={{width: width}} className='p-2'>
                                 <Image
-                  source={{ uri: item }}
-                  className="h-auto w-full rounded-md aspect-square"
+                                    source={item}
+                                    className="h-auto w-auto rounded-md aspect-[1/1]"
                                     alt={`Zdjęcie ${index + 1}`}
                                     resizeMode="contain"
                                 />
@@ -243,7 +243,7 @@ export default function NoticeDetails() {
                     <Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
                         <Text className="text-sm text-typography-500">Uzytkownik:</Text>
                         {isUserLoading ? (
-              <ActivityIndicator />
+                            <ActivityIndicator/>
                         ) : user ? (
                             <>
                                 <Box className="mr-4">