fix: normalize safe area insets in android (#3554)

lawvs · web-flow · commit ae41eed4575f · 2025-04-22T17:37:28.000Z
* fix: normalize safe area insets in android

* fix: import isAndroid utility
diff --git a/apps/mobile/src/components/layouts/header/NavigationHeader.tsx b/apps/mobile/src/components/layouts/header/NavigationHeader.tsx
@@ -225,7 +225,7 @@ export const InternalNavigationHeader = ({
   )
   const rootTitleBarStyle = useAnimatedStyle(() => {
     const styles = {
-      paddingTop: sheetModal ? 0 : insets.top,
+      paddingTop: insets.top,
       position: "relative",
       overflow: "hidden",
     } satisfies DefaultStyle
diff --git a/apps/mobile/src/lib/navigation/StackNavigation.tsx b/apps/mobile/src/lib/navigation/StackNavigation.tsx
@@ -14,6 +14,7 @@ import {
 import type { ScreenStackHeaderConfigProps } from "react-native-screens"
 import { ScreenStack } from "react-native-screens"
 
+import { isAndroid } from "../platform"
 import {
   AttachNavigationScrollViewContext,
   SetAttachNavigationScrollViewContext,
@@ -184,7 +185,9 @@ const ModalScreenStackItems: FC<{
   const isFormSheet = rootModalRoute.type === "formSheet"
   const isStackModal = !isFormSheet
 
-  const isFullScreen = rootModalRoute.type !== "modal" && rootModalRoute.type !== "formSheet"
+  // Modal screens are always full screen on Android
+  const isFullScreen =
+    isAndroid || (rootModalRoute.type !== "modal" && rootModalRoute.type !== "formSheet")
 
   if (isStackModal) {
     return (
diff --git a/apps/mobile/src/modules/login/index.tsx b/apps/mobile/src/modules/login/index.tsx
@@ -2,6 +2,7 @@ import { useCallback } from "react"
 import { Text, TouchableWithoutFeedback, View } from "react-native"
 import { KeyboardController } from "react-native-keyboard-controller"
 import Animated, { useAnimatedStyle, useSharedValue } from "react-native-reanimated"
+import { useSafeAreaInsets } from "react-native-safe-area-context"
 import * as ContextMenu from "zeego/context-menu"
 
 import { Logo } from "@/src/components/ui/logo"
@@ -14,14 +15,15 @@ import { EmailLogin } from "./email"
 import { SocialLogin } from "./social"
 
 export function Login() {
+  const insets = useSafeAreaInsets()
   const scaledHeight = useScaleHeight()
   const logoSize = scaledHeight(80)
   const gapSize = scaledHeight(28)
   const fontSize = scaledHeight(28)
   const lineHeight = scaledHeight(32)
 
   return (
-    <View className="p-safe pb-safe-or-2 flex-1 justify-between">
+    <View className="pb-safe-or-2 flex-1 justify-between" style={{ paddingTop: insets.top + 56 }}>
       <View>
         <TouchableWithoutFeedback
           onPress={() => {
diff --git a/apps/mobile/src/screens/(modal)/ForgetPasswordScreen.tsx b/apps/mobile/src/screens/(modal)/ForgetPasswordScreen.tsx
@@ -14,7 +14,7 @@ import { toast } from "@/src/lib/toast"
 import { getTokenHeaders } from "@/src/lib/token"
 
 export const ForgetPasswordScreen: NavigationControllerView = () => {
-  const offset = useSafeAreaInsets()
+  const insets = useSafeAreaInsets()
   const [email, setEmail] = useState("")
 
   const navigation = useNavigation()
@@ -48,7 +48,7 @@ export const ForgetPasswordScreen: NavigationControllerView = () => {
     >
       <KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
         <HeaderCloseOnly />
-        <View className="p-safe px-safe-offset-4 flex-1 justify-between">
+        <View className="flex-1 justify-between" style={{ paddingTop: insets.bottom + 56 }}>
           <View className="items-center">
             <Text className="text-text text-center text-4xl font-bold">Forgot password?</Text>
             <Text className="text-text mx-10 mt-6 text-lg">
@@ -76,7 +76,7 @@ export const ForgetPasswordScreen: NavigationControllerView = () => {
             title="Continue"
             className="self-stretch"
             style={{
-              bottom: offset.bottom + 30,
+              bottom: insets.bottom + 30,
             }}
             disabled={!email || forgetPasswordMutation.isPending}
             isLoading={forgetPasswordMutation.isPending}
diff --git a/apps/mobile/src/screens/(modal)/SignUpScreen.tsx b/apps/mobile/src/screens/(modal)/SignUpScreen.tsx
@@ -6,6 +6,7 @@ import { useController, useForm } from "react-hook-form"
 import type { TextInputProps } from "react-native"
 import { Text, TouchableWithoutFeedback, View } from "react-native"
 import { KeyboardController } from "react-native-keyboard-controller"
+import { useSafeAreaInsets } from "react-native-safe-area-context"
 import { z } from "zod"
 
 import { SubmitButton } from "@/src/components/common/SubmitButton"
@@ -162,13 +163,14 @@ function EmailSignUp() {
 }
 
 export const SignUpScreen: NavigationControllerView = () => {
+  const insets = useSafeAreaInsets()
   const scaledHeight = useScaleHeight()
   const logoSize = scaledHeight(80)
   const gapSize = scaledHeight(28)
   const fontSize = scaledHeight(28)
   const lineHeight = scaledHeight(32)
   return (
-    <View className="p-safe flex-1">
+    <View className="flex-1" style={{ paddingTop: insets.top + 56 }}>
       <HeaderCloseOnly />
       <TouchableWithoutFeedback
         onPress={() => {
diff --git a/apps/mobile/src/screens/(modal)/TwoFactorAuthScreen.tsx b/apps/mobile/src/screens/(modal)/TwoFactorAuthScreen.tsx
@@ -4,6 +4,7 @@ import { Text, TouchableWithoutFeedback, View } from "react-native"
 import { KeyboardController } from "react-native-keyboard-controller"
 import type { OtpInputRef } from "react-native-otp-entry"
 import { OtpInput } from "react-native-otp-entry"
+import { useSafeAreaInsets } from "react-native-safe-area-context"
 import { useColor } from "react-native-uikit-colors"
 
 import { HeaderCloseOnly } from "@/src/components/layouts/header/HeaderElements"
@@ -16,6 +17,7 @@ import { whoamiQueryKey } from "@/src/store/user/hooks"
 import { accentColor } from "@/src/theme/colors"
 
 export const TwoFactorAuthScreen: NavigationControllerView = () => {
+  const insets = useSafeAreaInsets()
   const label = useColor("label")
   const tertiaryLabel = useColor("tertiaryLabel")
 
@@ -40,7 +42,7 @@ export const TwoFactorAuthScreen: NavigationControllerView = () => {
   })
 
   return (
-    <View className="p-safe flex-1">
+    <View className="flex-1" style={{ paddingTop: insets.top + 56 }}>
       <HeaderCloseOnly />
       <TouchableWithoutFeedback
         onPress={() => {

Original file line number	Diff line number	Diff line change
`@@ -225,7 +225,7 @@ export const InternalNavigationHeader = ({`
`225`	`225`	`)`
`226`	`226`	`const rootTitleBarStyle = useAnimatedStyle(() => {`
`227`	`227`	`const styles = {`
`228`		`- paddingTop: sheetModal ? 0 : insets.top,`
	`228`	`+ paddingTop: insets.top,`
`229`	`229`	`position: "relative",`
`230`	`230`	`overflow: "hidden",`
`231`	`231`	`} satisfies DefaultStyle`