From 2a90db2d1f677f2f30253219999639c4e3f2df62 Mon Sep 17 00:00:00 2001 From: Innei Date: Wed, 24 Sep 2025 22:41:59 +0800 Subject: [PATCH] feat(mobile): implement NativeTabBarHolder for dynamic tab bar height adjustment - Added the `NativeTabBarHolder` component to manage the height of the bottom tab bar based on safe area insets, ensuring proper layout on iOS devices. - Updated the `ReactNativeTab` component to render `NativeTabBarHolder` when conditions are met, enhancing the user interface for iPad and iPhone users. - Utilized `useLayoutEffect` to adjust the tab bar height dynamically, improving the overall user experience in the mobile app. These changes aim to provide a more responsive and visually appealing tab bar layout in the mobile application. Signed-off-by: Innei --- .../layouts/tabbar/ReactNativeTab.ios.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/apps/mobile/src/components/layouts/tabbar/ReactNativeTab.ios.tsx b/apps/mobile/src/components/layouts/tabbar/ReactNativeTab.ios.tsx index f400c0b79..e38088a76 100644 --- a/apps/mobile/src/components/layouts/tabbar/ReactNativeTab.ios.tsx +++ b/apps/mobile/src/components/layouts/tabbar/ReactNativeTab.ios.tsx @@ -1,16 +1,19 @@ +import { use, useLayoutEffect } from "react" import { Platform } from "react-native" import DeviceInfo from "react-native-device-info" +import { useSafeAreaInsets } from "react-native-safe-area-context" import { TabBarPortal } from "@/src/lib/navigation/bottom-tab/TabBarPortal" import { isIos26 } from "@/src/lib/platform" import { BottomTabs } from "./BottomTabs" +import { SetBottomTabBarHeightContext } from "./contexts/BottomTabBarHeightContext" const isIpad = Platform.OS === "ios" && DeviceInfo.isTablet() export const ReactNativeTab = () => { if (isIos26 && !isIpad) { - return null + return } return ( @@ -18,3 +21,14 @@ export const ReactNativeTab = () => { ) } + +const NativeTabBarHolder = () => { + const setHeight = use(SetBottomTabBarHeightContext) + const insets = useSafeAreaInsets() + useLayoutEffect(() => { + //https://developer.apple.com/design/human-interface-guidelines/tab-bars + setHeight(68 + insets.bottom) + }, [insets.bottom, setHeight]) + + return null +}