brut/bincio-rec
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: edit modal respects Android safe area insets

Browse Source 
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
1 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/ActivityDetailScreen.tsx
+5 -3
View File
@@ -1,8 +1,9 @@
import React, { useEffect, useLayoutEffect, useMemo, useState } from 'react'; import React, { useEffect, useLayoutEffect, useMemo, useState } from 'react';
import { import {
View, Text, StyleSheet, ActivityIndicator, ScrollView, View, Text, StyleSheet, ActivityIndicator, ScrollView,
Modal, TextInput, TouchableOpacity, Pressable, Alert, Modal, TextInput, TouchableOpacity, Alert,
} from 'react-native'; } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useRoute, RouteProp, useNavigation } from '@react-navigation/native'; import { useRoute, RouteProp, useNavigation } from '@react-navigation/native';
import { Map, Camera, GeoJSONSource, Layer } from '@maplibre/maplibre-react-native'; import { Map, Camera, GeoJSONSource, Layer } from '@maplibre/maplibre-react-native';
import type { LineLayerStyle } from '@maplibre/maplibre-react-native'; import type { LineLayerStyle } from '@maplibre/maplibre-react-native';
@@ -57,6 +58,7 @@ function formatDuration(secs: number) {
export function ActivityDetailScreen() { export function ActivityDetailScreen() {
const nav = useNavigation(); const nav = useNavigation();
const { accent, accentDim } = useTheme(); const { accent, accentDim } = useTheme();
const insets = useSafeAreaInsets();
const route = useRoute<Route>(); const route = useRoute<Route>();
const [rec, setRec] = useState<SavedRecording>(route.params.recording); const [rec, setRec] = useState<SavedRecording>(route.params.recording);
@@ -197,8 +199,8 @@ export function ActivityDetailScreen() {
</ScrollView> </ScrollView>
{/* ── Edit modal ── */} {/* ── Edit modal ── */}
<Modal visible={editVisible} animationType="slide" presentationStyle="pageSheet" onRequestClose={handleCancelEdit}> <Modal visible={editVisible} animationType="slide" onRequestClose={handleCancelEdit}>
<View style={styles.editContainer}> <View style={[styles.editContainer, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
<View style={styles.editHeader}> <View style={styles.editHeader}>
<TouchableOpacity onPress={handleCancelEdit}> <TouchableOpacity onPress={handleCancelEdit}>
<Text style={styles.editCancel}>Cancel</Text> <Text style={styles.editCancel}>Cancel</Text>