fix: adjust layout for Android (#3548)

lawvs · web-flow · commit 3343ddb658e9 · 2025-04-22T18:14:45.000+08:00
* fix: adjust tab bar height for Android to account for insets

* fix(mobile): onboarding screen layout adjustments

* fix(mobile): update header height calculation to use Constants for status bar height

* fix(mobile): remove unnecessary RootSiblingParent wrapper in Subscriptions component
diff --git a/apps/mobile/src/components/layouts/tabbar/Tabbar.tsx b/apps/mobile/src/components/layouts/tabbar/Tabbar.tsx
@@ -16,6 +16,7 @@ import { SetBottomTabBarHeightContext } from "@/src/components/layouts/tabbar/co
 import { gentleSpringPreset, quickSpringPreset, softSpringPreset } from "@/src/constants/spring"
 import { BottomTabContext } from "@/src/lib/navigation/bottom-tab/BottomTabContext"
 import type { TabbarIconProps, TabScreenProps } from "@/src/lib/navigation/bottom-tab/types"
+import { isAndroid } from "@/src/lib/platform"
 import { PlayerTabBar } from "@/src/modules/player/PlayerTabBar"
 import { accentColor } from "@/src/theme/colors"
 
@@ -73,7 +74,8 @@ export const Tabbar: FC<{
         transform: [{ translateY }],
       }}
       onLayout={(e) => {
-        setTabBarHeight(e.nativeEvent.layout.height)
+        const tabBarHeight = e.nativeEvent.layout.height + (isAndroid ? insets.bottom : 0)
+        setTabBarHeight(tabBarHeight)
       }}
     >
       <TabBarBackground />
diff --git a/apps/mobile/src/components/layouts/utils/index.tsx b/apps/mobile/src/components/layouts/utils/index.tsx
@@ -1,4 +1,5 @@
-import { PixelRatio, Platform } from "react-native"
+import Constants from "expo-constants"
+import { Platform } from "react-native"
 
 type Layout = { width: number; height: number }
 /**
@@ -14,7 +15,7 @@ export function getDefaultHeaderHeight(
 
   // On models with Dynamic Island the status bar height is smaller than the safe area top inset.
   const hasDynamicIsland = topInset > 50
-  const statusBarHeight = hasDynamicIsland ? topInset - (5 + 1 / PixelRatio.get()) : topInset
+  const topHeight = hasDynamicIsland ? Constants.statusBarHeight : topInset
 
   const isLandscape = layout.width > layout.height
 
@@ -36,5 +37,5 @@ export function getDefaultHeaderHeight(
     }
   }
 
-  return headerHeight + (!modalPresentation ? statusBarHeight : 0)
+  return headerHeight + (!modalPresentation ? topHeight : 0)
 }
diff --git a/apps/mobile/src/screens/(stack)/(tabs)/subscriptions.tsx b/apps/mobile/src/screens/(stack)/(tabs)/subscriptions.tsx
@@ -1,6 +1,5 @@
 import type { FeedViewType } from "@follow/constants"
 import { useMemo } from "react"
-import { RootSiblingParent } from "react-native-root-siblings"
 import { useColor } from "react-native-uikit-colors"
 
 import { ErrorBoundary } from "@/src/components/common/ErrorBoundary"
@@ -22,19 +21,17 @@ export default function Subscriptions() {
   useResetTabOpacityWhenFocused()
   return (
     <EntryListContext.Provider value={useMemo(() => ({ type: "subscriptions" }), [])}>
-      <RootSiblingParent>
-        <TimelineHeader />
-        {whoami ? (
-          <PagerList
-            renderItem={renderItem}
-            style={{
-              backgroundColor: systemGroupedBackground,
-            }}
-          />
-        ) : (
-          <NoLoginInfo target="subscriptions" />
-        )}
-      </RootSiblingParent>
+      <TimelineHeader />
+      {whoami ? (
+        <PagerList
+          renderItem={renderItem}
+          style={{
+            backgroundColor: systemGroupedBackground,
+          }}
+        />
+      ) : (
+        <NoLoginInfo target="subscriptions" />
+      )}
     </EntryListContext.Provider>
   )
 }
diff --git a/apps/mobile/src/screens/OnboardingScreen.tsx b/apps/mobile/src/screens/OnboardingScreen.tsx
@@ -1,8 +1,9 @@
 import { tracker } from "@follow/tracker"
 import { useCallback, useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
-import { SafeAreaView, Text, TouchableOpacity, View } from "react-native"
+import { Text, TouchableOpacity, View } from "react-native"
 import Animated, { FadeInRight, FadeOutLeft } from "react-native-reanimated"
+import { useSafeAreaInsets } from "react-native-safe-area-context"
 
 import { kv } from "../lib/kv"
 import { useNavigation } from "../lib/navigation/hooks"
@@ -16,6 +17,7 @@ import { isNewUserQueryKey, isOnboardingFinishedStorageKey } from "../store/user
 
 export const OnboardingScreen: NavigationControllerView = () => {
   const { t } = useTranslation("common")
+  const insets = useSafeAreaInsets()
 
   const [currentStep, setCurrentStep] = useState(1)
   const totalSteps = 4
@@ -39,43 +41,44 @@ export const OnboardingScreen: NavigationControllerView = () => {
   }, [])
 
   return (
-    <View className="bg-system-grouped-background flex-1 px-6">
-      <SafeAreaView className="flex-1">
-        <ProgressIndicator
-          currentStep={currentStep}
-          totalSteps={totalSteps}
-          setCurrentStep={setCurrentStep}
-        />
+    <View
+      className="bg-system-grouped-background flex-1 px-6"
+      style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}
+    >
+      <ProgressIndicator
+        currentStep={currentStep}
+        totalSteps={totalSteps}
+        setCurrentStep={setCurrentStep}
+      />
 
-        <Animated.View
-          className={"flex-1"}
-          key={`step-${currentStep}`}
-          exiting={FadeOutLeft}
-          entering={FadeInRight}
-        >
-          {/* Content */}
-          {currentStep === 1 && <StepWelcome />}
-          {currentStep === 2 && <StepPreferences />}
-          {currentStep === 3 && <StepInterests />}
-          {currentStep === 4 && <StepFinished />}
-        </Animated.View>
+      <Animated.View
+        className={"flex-1"}
+        key={`step-${currentStep}`}
+        exiting={FadeOutLeft}
+        entering={FadeInRight}
+      >
+        {/* Content */}
+        {currentStep === 1 && <StepWelcome />}
+        {currentStep === 2 && <StepPreferences />}
+        {currentStep === 3 && <StepInterests />}
+        {currentStep === 4 && <StepFinished />}
+      </Animated.View>
 
-        {/* Navigation buttons */}
-        <View className="mb-6 px-6">
-          <TouchableOpacity
-            onPress={handleNext}
-            className="bg-accent w-full items-center rounded-xl py-4"
-          >
-            <Text className="text-lg font-bold text-white">
-              {currentStep < totalSteps - 1
-                ? t("words.next")
-                : currentStep === totalSteps - 1
-                  ? t("words.finishSetup")
-                  : t("words.letsGo")}
-            </Text>
-          </TouchableOpacity>
-        </View>
-      </SafeAreaView>
+      {/* Navigation buttons */}
+      <View className="mb-6 px-6">
+        <TouchableOpacity
+          onPress={handleNext}
+          className="bg-accent w-full items-center rounded-xl py-4"
+        >
+          <Text className="text-lg font-bold text-white">
+            {currentStep < totalSteps - 1
+              ? t("words.next")
+              : currentStep === totalSteps - 1
+                ? t("words.finishSetup")
+                : t("words.letsGo")}
+          </Text>
+        </TouchableOpacity>
+      </View>
     </View>
   )
 }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`		`-import { PixelRatio, Platform } from "react-native"`
	`1`	`+import Constants from "expo-constants"`
	`2`	`+import { Platform } from "react-native"`
`2`	`3`
`3`	`4`	`type Layout = { width: number; height: number }`
`4`	`5`	`/**`
`@@ -14,7 +15,7 @@ export function getDefaultHeaderHeight(`
`14`	`15`
`15`	`16`	`// On models with Dynamic Island the status bar height is smaller than the safe area top inset.`
`16`	`17`	`const hasDynamicIsland = topInset > 50`
`17`		`- const statusBarHeight = hasDynamicIsland ? topInset - (5 + 1 / PixelRatio.get()) : topInset`
	`18`	`+ const topHeight = hasDynamicIsland ? Constants.statusBarHeight : topInset`
`18`	`19`
`19`	`20`	`const isLandscape = layout.width > layout.height`
`20`	`21`
`@@ -36,5 +37,5 @@ export function getDefaultHeaderHeight(`
`36`	`37`	`}`
`37`	`38`	`}`
`38`	`39`
`39`		`- return headerHeight + (!modalPresentation ? statusBarHeight : 0)`
	`40`	`+ return headerHeight + (!modalPresentation ? topHeight : 0)`
`40`	`41`	`}`