From c7182e7a216d345800ee975876d71ccd954735be Mon Sep 17 00:00:00 2001 From: Leendert de Borst Date: Tue, 28 Oct 2025 14:01:01 +0100 Subject: [PATCH] Tweak app layout margins for iOS 26+ (#1319) --- .../mobile-app/app/(tabs)/credentials/add-edit.tsx | 14 +++++++++++++- .../components/themed/ThemedContainer.tsx | 9 ++++++++- apps/mobile-app/package-lock.json | 8 ++++---- apps/mobile-app/package.json | 2 +- 4 files changed, 26 insertions(+), 7 deletions(-) diff --git a/apps/mobile-app/app/(tabs)/credentials/add-edit.tsx b/apps/mobile-app/app/(tabs)/credentials/add-edit.tsx index ca9c031b6..17ce5eb74 100644 --- a/apps/mobile-app/app/(tabs)/credentials/add-edit.tsx +++ b/apps/mobile-app/app/(tabs)/credentials/add-edit.tsx @@ -496,10 +496,22 @@ export default function AddEditCredentialScreen() : React.ReactNode { ); }; + /** + * Get the top padding for the container. + */ + const getTopPadding = (): number => { + if (Platform.OS !== 'ios') { + return 0; + } + + const iosVersion = parseInt(Platform.Version as string, 10); + return iosVersion >= 26 ? 72 : 52; + }; + const styles = StyleSheet.create({ container: { flex: 1, - paddingTop: Platform.OS === 'ios' ? 52 : 0, + paddingTop: getTopPadding(), }, contentContainer: { paddingBottom: 40, diff --git a/apps/mobile-app/components/themed/ThemedContainer.tsx b/apps/mobile-app/components/themed/ThemedContainer.tsx index cba0defa7..b70bc3408 100644 --- a/apps/mobile-app/components/themed/ThemedContainer.tsx +++ b/apps/mobile-app/components/themed/ThemedContainer.tsx @@ -12,11 +12,18 @@ export type ThemedContainerProps = ViewProps; export function ThemedContainer({ style, ...otherProps }: ThemedContainerProps): React.ReactNode { const insets = useSafeAreaInsets(); + const getTopPadding = () => { + if (Platform.OS !== 'ios') return 0; + + const iosVersion = parseInt(Platform.Version as string, 10); + return iosVersion >= 26 ? insets.top + 14 : insets.top; + }; + const styles = StyleSheet.create({ container: { flex: 1, paddingHorizontal: 14, - paddingTop: Platform.OS === 'ios' ? insets.top : 0, + paddingTop: getTopPadding(), }, }); return ; diff --git a/apps/mobile-app/package-lock.json b/apps/mobile-app/package-lock.json index 089266a59..c71bae2ff 100644 --- a/apps/mobile-app/package-lock.json +++ b/apps/mobile-app/package-lock.json @@ -52,7 +52,7 @@ "react-native-keyboard-controller": "^1.18.6", "react-native-quick-crypto": "^0.7.13", "react-native-reanimated": "~3.17.4", - "react-native-safe-area-context": "5.4.0", + "react-native-safe-area-context": "5.6.1", "react-native-screens": "~4.15.4", "react-native-svg": "15.11.2", "react-native-toast-message": "^2.2.1", @@ -14897,9 +14897,9 @@ } }, "node_modules/react-native-safe-area-context": { - "version": "5.4.0", - "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-5.4.0.tgz", - "integrity": "sha512-JaEThVyJcLhA+vU0NU8bZ0a1ih6GiF4faZ+ArZLqpYbL6j7R3caRqj+mE3lEtKCuHgwjLg3bCxLL1GPUJZVqUA==", + "version": "5.6.1", + "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-5.6.1.tgz", + "integrity": "sha512-/wJE58HLEAkATzhhX1xSr+fostLsK8Q97EfpfMDKo8jlOc1QKESSX/FQrhk7HhQH/2uSaox4Y86sNaI02kteiA==", "license": "MIT", "peerDependencies": { "react": "*", diff --git a/apps/mobile-app/package.json b/apps/mobile-app/package.json index 5df2076b6..c6efc667b 100644 --- a/apps/mobile-app/package.json +++ b/apps/mobile-app/package.json @@ -73,7 +73,7 @@ "react-native-keyboard-controller": "^1.18.6", "react-native-quick-crypto": "^0.7.13", "react-native-reanimated": "~3.17.4", - "react-native-safe-area-context": "5.4.0", + "react-native-safe-area-context": "5.6.1", "react-native-screens": "~4.15.4", "react-native-svg": "15.11.2", "react-native-toast-message": "^2.2.1",