KeyboardAvoidingView

ekran dodawania
This commit is contained in:
2025-06-09 11:18:02 +02:00
parent 8e6d7ca150
commit 2b31863ed3

View File

@@ -1,12 +1,12 @@
import { useState, useEffect } from "react"; import {useState, useEffect} from "react";
import { Image, StyleSheet } from "react-native"; import {Image, StyleSheet, KeyboardAvoidingView, Platform} from "react-native";
import { Button, ButtonText } from "@/components/ui/button"; import {Button, ButtonText} from "@/components/ui/button";
import { FormControl } from "@/components/ui/form-control"; import {FormControl} from "@/components/ui/form-control";
import { Input, InputField } from "@/components/ui/input"; import {Input, InputField} from "@/components/ui/input";
import { Text } from "@/components/ui/text"; import {Text} from "@/components/ui/text";
import { VStack } from "@/components/ui/vstack"; import {VStack} from "@/components/ui/vstack";
import { Textarea, TextareaInput } from "@/components/ui/textarea"; import {Textarea, TextareaInput} from "@/components/ui/textarea";
import { ScrollView } from "@gluestack-ui/themed"; import {ScrollView} from "@gluestack-ui/themed";
import * as ImagePicker from "expo-image-picker"; import * as ImagePicker from "expo-image-picker";
import { import {
Select, Select,
@@ -20,14 +20,14 @@ import {
SelectScrollView, SelectScrollView,
} from "@/components/ui/select"; } from "@/components/ui/select";
import { ChevronDownIcon } from "@/components/ui/icon"; import {ChevronDownIcon} from "@/components/ui/icon";
import { useNoticesStore } from "@/store/noticesStore"; import {useNoticesStore} from "@/store/noticesStore";
import { listCategories } from "@/api/categories"; import {listCategories} from "@/api/categories";
import { useRouter } from "expo-router"; import {useRouter} from "expo-router";
export default function CreateNotice() { export default function CreateNotice() {
const router = useRouter(); const router = useRouter();
const { addNotice, fetchNotices } = useNoticesStore(); const {addNotice, fetchNotices} = useNoticesStore();
const [title, setTitle] = useState(""); const [title, setTitle] = useState("");
const [description, setDescription] = useState(""); const [description, setDescription] = useState("");
const [price, setPrice] = useState(""); const [price, setPrice] = useState("");
@@ -116,7 +116,7 @@ export default function CreateNotice() {
}; };
const takePicture = async () => { const takePicture = async () => {
const { status } = await ImagePicker.requestCameraPermissionsAsync(); const {status} = await ImagePicker.requestCameraPermissionsAsync();
if (status !== "granted") { if (status !== "granted") {
return; return;
} }
@@ -159,6 +159,11 @@ export default function CreateNotice() {
}; };
return ( return (
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={{flex: 1}}
keyboardVerticalOffset={Platform.OS === 'ios' ? 64 : 0}
>
<ScrollView h="$80" w="$80"> <ScrollView h="$80" w="$80">
<FormControl className="p-4 border rounded-lg border-outline-300"> <FormControl className="p-4 border rounded-lg border-outline-300">
<VStack space="xl"> <VStack space="xl">
@@ -178,7 +183,7 @@ export default function CreateNotice() {
{image.map((img, index) => ( {image.map((img, index) => (
<Image <Image
key={index} key={index}
source={{ uri: img }} source={{uri: img}}
style={styles.image} style={styles.image}
className="m-1" className="m-1"
/> />
@@ -230,12 +235,12 @@ export default function CreateNotice() {
isInvalid={error.category} isInvalid={error.category}
> >
<SelectTrigger variant="outline" size="md"> <SelectTrigger variant="outline" size="md">
<SelectInput placeholder="Wybierz kategorię" /> <SelectInput placeholder="Wybierz kategorię"/>
<SelectIcon className="mr-3" as={ChevronDownIcon} /> <SelectIcon className="mr-3" as={ChevronDownIcon}/>
</SelectTrigger> </SelectTrigger>
<SelectPortal> <SelectPortal>
<SelectBackdrop /> <SelectBackdrop/>
<SelectContent style={{ maxHeight: 400 }}> <SelectContent style={{maxHeight: 400}}>
<SelectScrollView> <SelectScrollView>
{selectItems.map((item) => ( {selectItems.map((item) => (
<SelectItem <SelectItem
@@ -259,5 +264,6 @@ export default function CreateNotice() {
</VStack> </VStack>
</FormControl> </FormControl>
</ScrollView> </ScrollView>
</KeyboardAvoidingView>
); );
} }