fix: edit modal respects Android safe area insets

Removed iOS-only presentationStyle='pageSheet'. Modal now applies
useSafeAreaInsets() padding so it doesn't overlap the status bar
or gesture navigation bar on Android.
This commit is contained in:
Davide Scaini
2026-06-04 00:18:04 +02:00
parent b3a0c33b9e
commit 38cf792d09
+5 -3
View File
@@ -1,8 +1,9 @@
import React, { useEffect, useLayoutEffect, useMemo, useState } from 'react';
import {
View, Text, StyleSheet, ActivityIndicator, ScrollView,
Modal, TextInput, TouchableOpacity, Pressable, Alert,
Modal, TextInput, TouchableOpacity, Alert,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useRoute, RouteProp, useNavigation } from '@react-navigation/native';
import { Map, Camera, GeoJSONSource, Layer } from '@maplibre/maplibre-react-native';
import type { LineLayerStyle } from '@maplibre/maplibre-react-native';
@@ -57,6 +58,7 @@ function formatDuration(secs: number) {
export function ActivityDetailScreen() {
const nav = useNavigation();
const { accent, accentDim } = useTheme();
const insets = useSafeAreaInsets();
const route = useRoute<Route>();
const [rec, setRec] = useState<SavedRecording>(route.params.recording);
@@ -197,8 +199,8 @@ export function ActivityDetailScreen() {
</ScrollView>
{/* ── Edit modal ── */}
<Modal visible={editVisible} animationType="slide" presentationStyle="pageSheet" onRequestClose={handleCancelEdit}>
<View style={styles.editContainer}>
<Modal visible={editVisible} animationType="slide" onRequestClose={handleCancelEdit}>
<View style={[styles.editContainer, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
<View style={styles.editHeader}>
<TouchableOpacity onPress={handleCancelEdit}>
<Text style={styles.editCancel}>Cancel</Text>