Fix WaypointSheet safe area: add bottom inset padding

Close button was overlapping the home indicator. Now uses
useSafeAreaInsets() for dynamic bottom padding.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer 2026-04-13 07:59:36 +02:00
parent d45f1e14fd
commit fe07fbdf59
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9

View file

@ -1,4 +1,5 @@
import { View, Text, TouchableOpacity, StyleSheet, Alert } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import type { Waypoint } from "@trails-cool/types";
interface WaypointSheetProps {
@ -16,6 +17,8 @@ export function WaypointSheet({
onDelete,
onToggleOvernight,
}: WaypointSheetProps) {
const insets = useSafeAreaInsets();
const handleDelete = () => {
Alert.alert(
"Delete Waypoint",
@ -35,7 +38,7 @@ export function WaypointSheet({
};
return (
<View style={styles.container}>
<View style={[styles.container, { paddingBottom: 16 + insets.bottom }]}>
<View style={styles.handle} />
<Text style={styles.title}>
Waypoint {index + 1}{waypoint.name ? `: ${waypoint.name}` : ""}
@ -75,7 +78,6 @@ const styles = StyleSheet.create({
borderTopLeftRadius: 16,
borderTopRightRadius: 16,
padding: 16,
paddingBottom: 32,
shadowColor: "#000",
shadowOffset: { width: 0, height: -2 },
shadowOpacity: 0.1,