Avatar + SafeAreaView
This commit is contained in:
@@ -5,6 +5,7 @@ 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 { Avatar, AvatarImage, AvatarFallbackText } from "@gluestack-ui/themed";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
@@ -12,6 +13,7 @@ import {
|
||||
FlatList,
|
||||
View,
|
||||
TextInput,
|
||||
SafeAreaView,
|
||||
} from "react-native";
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import { useNoticesStore } from "@/store/noticesStore";
|
||||
@@ -98,7 +100,6 @@ export default function NoticeDetails() {
|
||||
unlockOrientation();
|
||||
getInitialOrientation();
|
||||
|
||||
// Listen for orientation changes
|
||||
const subscription = ScreenOrientation.addOrientationChangeListener(
|
||||
({ orientationInfo }) => {
|
||||
const isLandscapeMode =
|
||||
@@ -147,6 +148,7 @@ export default function NoticeDetails() {
|
||||
if (notice) {
|
||||
try {
|
||||
const fetchedImages = await getAllImagesByNoticeId(notice.noticeId);
|
||||
console.log("Fetched images:", fetchedImages);
|
||||
setImages(
|
||||
fetchedImages && fetchedImages.length > 0
|
||||
? fetchedImages
|
||||
@@ -230,6 +232,7 @@ export default function NoticeDetails() {
|
||||
}`}
|
||||
alt={`Zdjęcie ${index + 1}`}
|
||||
resizeMode={isLandscape ? "cover" : "contain"}
|
||||
onError={(e) => console.error("Image load error:", e.nativeEvent.error)}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
@@ -241,7 +244,7 @@ export default function NoticeDetails() {
|
||||
<Box
|
||||
key={index}
|
||||
className={`w-2 h-2 rounded-full mx-1 ${
|
||||
index === currentIndex ? "bg-primary-500" : "bg-gray-300"
|
||||
index === currentIndex ? "bg-primary-500" : "bg-gray-500"}
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
@@ -252,7 +255,8 @@ export default function NoticeDetails() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-0 rounded-lg m-3 flex-1">
|
||||
<SafeAreaView style={{ flex: 1 }}>
|
||||
<Card className="flex-1 p-4 m-3 rounded-lg shadow-sm">
|
||||
<Stack.Screen
|
||||
options={{
|
||||
title: notice.title,
|
||||
@@ -260,16 +264,16 @@ export default function NoticeDetails() {
|
||||
/>
|
||||
<ScrollView showsVerticalScrollIndicator={false}>
|
||||
{renderImageSection()}
|
||||
<VStack className="p-2">
|
||||
<Text className="text-sm font-normal mb-2 text-typography-700">
|
||||
<VStack className="p-4">
|
||||
<Text className="text-sm font-normal mb-2 text-gray-600">
|
||||
{formatDate(notice.publishDate)}
|
||||
</Text>
|
||||
<Text className="text-2xl text-gray-950 font-bold mb-2 text-center bg-gray-50 rounded-md p-2">
|
||||
<Text className="text-2xl font-bold mb-2 text-center bg-gray-100 rounded-md p-4">
|
||||
{notice.title}
|
||||
</Text>
|
||||
<Box className="flex-row items-center bg-gray-50 rounded-md p-2">
|
||||
<Heading size="md" className="flex-1 text-xl text-gray-950">
|
||||
<Text className="text-sm text-typography-500">Cena: </Text>
|
||||
<Box className="flex-row items-center bg-gray-100 rounded-md p-2">
|
||||
<Heading size="md" className="flex-1 text-lg">
|
||||
<Text className="text-sm text-gray-500">Cena: </Text>
|
||||
{notice.price} zł
|
||||
</Heading>
|
||||
<Pressable
|
||||
@@ -280,56 +284,59 @@ export default function NoticeDetails() {
|
||||
<Ionicons
|
||||
name={isInWishlist ? "heart" : "heart-outline"}
|
||||
size={24}
|
||||
color={"primary-heading-500"}
|
||||
color="#3b82f6"
|
||||
/>
|
||||
</Pressable>
|
||||
</Box>
|
||||
<Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
|
||||
<Text className="text-sm text-typography-500">
|
||||
<Box className="mt-4 bg-gray-100 p-3 rounded-lg">
|
||||
<Text className="text-sm text-gray-500">
|
||||
Kategoria:{" "}
|
||||
<Text className="font-bold text-gray-950">{notice.category}</Text>
|
||||
<Text className="font-bold text-gray-900">{notice.category}</Text>
|
||||
</Text>
|
||||
</Box>
|
||||
<Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
|
||||
<Text className="text-2xl text-gray-950">Opis ogłoszenia</Text>
|
||||
<Text className="text-sm text-typography-700">
|
||||
{notice.description}
|
||||
</Text>
|
||||
<Box className="mt-4 bg-gray-100 p-3 rounded-lg">
|
||||
<Text className="text-xl font-bold text-gray-900">Opis ogłoszenia</Text>
|
||||
<Text className="text-sm text-gray-700">{notice.description}</Text>
|
||||
</Box>
|
||||
<Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
|
||||
<Text className="text-sm text-typography-500">Użytkownik:</Text>
|
||||
<Box className="mt-4 bg-gray-100 p-3 rounded-lg">
|
||||
<Text className="text-sm text-gray-500">Użytkownik:</Text>
|
||||
{isUserLoading ? (
|
||||
<ActivityIndicator />
|
||||
) : user ? (
|
||||
<>
|
||||
<Box className="mr-4">
|
||||
<Image
|
||||
<Avatar size="md">
|
||||
<AvatarImage
|
||||
source={{
|
||||
uri:
|
||||
user.profileImage ||
|
||||
user.image ||
|
||||
"https://th.bing.com/th/id/OIP.3coo_N8sieled8QNroQmkgHaHa?rs=1&pid=ImgDetMain",
|
||||
}} // Domyślny obraz, jeśli brak zdjęcia profilowego
|
||||
className="h-12 w-12 rounded-full"
|
||||
}}
|
||||
alt="Zdjęcie profilowe"
|
||||
/>
|
||||
<AvatarFallbackText>
|
||||
{user.firstName?.[0]}
|
||||
{user.lastName?.[0]}
|
||||
</AvatarFallbackText>
|
||||
</Avatar>
|
||||
</Box>
|
||||
<Box className="flex-1">
|
||||
<Text className="text-xl font-bold text-gray-950">
|
||||
<Text className="text-lg font-bold text-gray-900">
|
||||
{user.firstName} {user.lastName}
|
||||
</Text>
|
||||
<Text className="text-sm text-typography-700">
|
||||
<Text className="text-sm text-gray-700">
|
||||
Email: {user.email}
|
||||
</Text>
|
||||
<Pressable
|
||||
onPress={() => setIsMessageFormVisible(true)}
|
||||
className="mt-3 bg-primary-500 py-2 px-4 rounded-md"
|
||||
className="mt-3 bg-blue-500 py-2 px-4 rounded-md"
|
||||
>
|
||||
<Text className="text-white text-center font-bold">
|
||||
Wyślij wiadomość
|
||||
</Text>
|
||||
</Pressable>
|
||||
<Link href={`/user/${notice.clientId}`}>
|
||||
<Text className="text-xl p-3 font-bold text-center text-typography-700 mt-3">
|
||||
<Text className="text-lg font-bold text-center text-blue-600 mt-3">
|
||||
Zobacz więcej ogłoszeń od {user.firstName}
|
||||
</Text>
|
||||
</Link>
|
||||
@@ -353,11 +360,12 @@ export default function NoticeDetails() {
|
||||
</Text>
|
||||
<Text className="text-sm font-medium mb-1">Twój e-mail:</Text>
|
||||
<TextInput
|
||||
className="border border-gray-300 p-2 rounded"
|
||||
className="border border-gray-300 p-2 rounded mb-4"
|
||||
placeholder="Wpisz swój adres e-mail"
|
||||
value={Email}
|
||||
onChangeText={setEmail}
|
||||
/>
|
||||
<Text className="text-sm font-medium mb-1">Treść:</Text>
|
||||
<TextInput
|
||||
className="border border-gray-300 rounded-md p-2 mb-4 h-32 text-left"
|
||||
multiline
|
||||
@@ -375,7 +383,7 @@ export default function NoticeDetails() {
|
||||
</Pressable>
|
||||
<Pressable
|
||||
onPress={handleSendMessage}
|
||||
className="bg-primary-500 py-2 px-4 rounded-md"
|
||||
className="bg-blue-500 py-2 px-4 rounded-md"
|
||||
>
|
||||
<Text className="text-white">Wyślij</Text>
|
||||
</Pressable>
|
||||
@@ -384,5 +392,6 @@ export default function NoticeDetails() {
|
||||
</View>
|
||||
)}
|
||||
</Card>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user