fix chat area input bar

This commit is contained in:
echo 2026-06-06 05:14:13 +02:00
parent 6feaaeb24c
commit c5e34aea4a

View File

@ -10,6 +10,7 @@ import {
RefreshControl, RefreshControl,
type ListRenderItemInfo, type ListRenderItemInfo,
} from "react-native"; } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useLocalSearchParams, Stack, useRouter } from "expo-router"; import { useLocalSearchParams, Stack, useRouter } from "expo-router";
import { Ionicons } from "@expo/vector-icons"; import { Ionicons } from "@expo/vector-icons";
import { useQuery, useMutation } from "convex/react"; import { useQuery, useMutation } from "convex/react";
@ -30,6 +31,7 @@ export default function ChatDetailScreen() {
const { id } = useLocalSearchParams<{ id: string }>(); const { id } = useLocalSearchParams<{ id: string }>();
const theme = useTheme(); const theme = useTheme();
const router = useRouter(); const router = useRouter();
const insets = useSafeAreaInsets();
const { token, userId, isAuthenticated } = useAuth(); const { token, userId, isAuthenticated } = useAuth();
const chat = useQuery( const chat = useQuery(
@ -138,9 +140,9 @@ export default function ChatDetailScreen() {
}} }}
/> />
<KeyboardAvoidingView <KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : undefined} behavior={Platform.OS === "ios" ? "padding" : "height"}
style={{ flex: 1, backgroundColor: theme.colors.background }} style={{ flex: 1, backgroundColor: theme.colors.background }}
keyboardVerticalOffset={90} keyboardVerticalOffset={Platform.OS === "ios" ? 90 : 0}
> >
{messages.length === 0 ? ( {messages.length === 0 ? (
<View <View
@ -255,7 +257,8 @@ export default function ChatDetailScreen() {
flexDirection: "row", flexDirection: "row",
alignItems: "flex-end", alignItems: "flex-end",
paddingHorizontal: 16, paddingHorizontal: 16,
paddingVertical: 12, paddingTop: 12,
paddingBottom: Math.max(insets.bottom, 12),
borderTopWidth: 1, borderTopWidth: 1,
borderTopColor: theme.colors.borderLight, borderTopColor: theme.colors.borderLight,
backgroundColor: theme.colors.card, backgroundColor: theme.colors.card,