wyświetlanie zdjęcia w zakładce NoticeDetails.

ArtisanConnect/app/notice/[id].jsx

@@ -1,18 +1,20 @@
-import { Stack, useLocalSearchParams } from "expo-router";
-import { Box } from "@/components/ui/box";
-import { Button, ButtonText } from "@/components/ui/button";
-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 { Icon, FavouriteIcon } from "@/components/ui/icon";
-import { useQuery } from "@tanstack/react-query";
-import { getNoticeById } from "@/api/notices";
-import { ActivityIndicator } from "react-native";
+import {Stack, useLocalSearchParams} from "expo-router";
+import {Box} from "@/components/ui/box";
+import {Button, ButtonText} from "@/components/ui/button";
+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 {Icon, FavouriteIcon} from "@/components/ui/icon";
+import {useQuery} from "@tanstack/react-query";
+import {getImageByNoticeId, getNoticeById} from "@/api/notices";
+import {ActivityIndicator} from "react-native";
+import {useEffect, useState} from "react";
 
 export default function NoticeDetails() {
-  const { id } = useLocalSearchParams();
+    const {id} = useLocalSearchParams();
+    const [image, setImage] = useState(null);
 
     const {
         data: notice,
@@ -23,8 +25,23 @@ export default function NoticeDetails() {
         queryFn: () => getNoticeById(Number(id)),
     });
 
+    useEffect(() => {
+        const fetchImage = async () => {
+            if (notice) {
+                try {
+                    const imageData = await getImageByNoticeId(notice.noticeId);
+                    setImage(imageData);
+                } catch (err) {
+                    console.error("Błąd przy pobieraniu obrazu:", err);
+                }
+            }
+        };
+
+        fetchImage();
+    }, [notice]);
+
     if (isLoading) {
-    return <ActivityIndicator />;
+        return <ActivityIndicator/>;
     }
 
     if (error) {
@@ -40,7 +57,8 @@ export default function NoticeDetails() {
             />
             <Image
                 source={{
-          uri: "https://gluestack.github.io/public-blog-video-assets/saree.png",
+                    // uri: "https://gluestack.github.io/public-blog-video-assets/saree.png",
+                    uri: image,
                 }}
                 className=" h-auto w-full rounded-md aspect-[1/1]"
                 alt="image"

ArtisanConnect/package.json

@@ -39,10 +39,10 @@
     "react-dom": "18.3.1",
     "react-native": "0.76.9",
     "react-native-css-interop": "^0.1.22",
-    "react-native-reanimated": "^3.17.4",
-    "react-native-safe-area-context": "^5.4.0",
+    "react-native-reanimated": "3.16.1",
+    "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.4.0",
-    "react-native-svg": "^15.2.0",
+    "react-native-svg": "15.8.0",
     "react-native-web": "~0.19.13",
     "tailwindcss": "^3.4.17",
     "zustand": "^5.0.3"