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 <tukon479@gmail.com>

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 <NativeTabBarHolder />
   }
   return (
     <TabBarPortal>
@@ -18,3 +21,14 @@ export const ReactNativeTab = () => {
     </TabBarPortal>
   )
 }
+
+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
+}