From 65291ff7f0fa6a741e4973fa2e961b33f5dc9f7e Mon Sep 17 00:00:00 2001
From: lawvs <18554747+lawvs@users.noreply.github.com>
Date: Tue, 6 May 2025 17:12:07 +0800
Subject: [PATCH] refactor(mobile): refactor TabBarPortal to use native wrapper
 component

---
 .../bottom-tab/TabBarPortal.android.tsx       | 35 -------------------
 .../bottom-tab/TabBarPortal.ios.tsx           | 34 ------------------
 .../navigation/bottom-tab/TabBarPortal.tsx    |  5 +--
 .../navigation/bottom-tab/native.android.tsx  |  4 +++
 .../lib/navigation/bottom-tab/native.ios.tsx  |  4 +++
 .../src/lib/navigation/bottom-tab/native.tsx  |  1 +
 6 files changed, 12 insertions(+), 71 deletions(-)
 delete mode 100644 apps/mobile/src/lib/navigation/bottom-tab/TabBarPortal.android.tsx
 delete mode 100644 apps/mobile/src/lib/navigation/bottom-tab/TabBarPortal.ios.tsx
 create mode 100644 apps/mobile/src/lib/navigation/bottom-tab/native.android.tsx
 create mode 100644 apps/mobile/src/lib/navigation/bottom-tab/native.ios.tsx
 create mode 100644 apps/mobile/src/lib/navigation/bottom-tab/native.tsx

diff --git a/apps/mobile/src/lib/navigation/bottom-tab/TabBarPortal.android.tsx b/apps/mobile/src/lib/navigation/bottom-tab/TabBarPortal.android.tsx
deleted file mode 100644
index c8f8ad7ea..000000000
--- a/apps/mobile/src/lib/navigation/bottom-tab/TabBarPortal.android.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { requireNativeView } from "expo"
-import { useSetAtom } from "jotai"
-import { useContext } from "react"
-import type { ViewProps } from "react-native"
-import { StyleSheet, View } from "react-native"
-
-import { BottomTabContext } from "./BottomTabContext"
-
-const TabBarPortalNative = requireNativeView<ViewProps>("TabBarPortal")
-
-export const TabBarPortal = ({ children }: { children: React.ReactNode }) => {
-  const { tabHeightAtom } = useContext(BottomTabContext)
-  const setTabHeight = useSetAtom(tabHeightAtom)
-  return (
-    // Use native view
-    <TabBarPortalNative style={styles.container}>
-      <View
-        onLayout={(e) => {
-          setTabHeight(e.nativeEvent.layout.height)
-        }}
-      >
-        {children}
-      </View>
-    </TabBarPortalNative>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    right: 0,
-  },
-})
diff --git a/apps/mobile/src/lib/navigation/bottom-tab/TabBarPortal.ios.tsx b/apps/mobile/src/lib/navigation/bottom-tab/TabBarPortal.ios.tsx
deleted file mode 100644
index 4fd6b2b3a..000000000
--- a/apps/mobile/src/lib/navigation/bottom-tab/TabBarPortal.ios.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { requireNativeView } from "expo"
-import { useSetAtom } from "jotai"
-import { useContext } from "react"
-import type { ViewProps } from "react-native"
-import { StyleSheet, View } from "react-native"
-
-import { BottomTabContext } from "./BottomTabContext"
-
-const TabBarPortalNative = requireNativeView<ViewProps>("TabBarPortal")
-
-export const TabBarPortal = ({ children }: { children: React.ReactNode }) => {
-  const { tabHeightAtom } = useContext(BottomTabContext)
-  const setTabHeight = useSetAtom(tabHeightAtom)
-  return (
-    <TabBarPortalNative style={styles.container}>
-      <View
-        onLayout={(e) => {
-          setTabHeight(e.nativeEvent.layout.height)
-        }}
-      >
-        {children}
-      </View>
-    </TabBarPortalNative>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    right: 0,
-  },
-})
diff --git a/apps/mobile/src/lib/navigation/bottom-tab/TabBarPortal.tsx b/apps/mobile/src/lib/navigation/bottom-tab/TabBarPortal.tsx
index 8e48f4911..d4bbfcdae 100644
--- a/apps/mobile/src/lib/navigation/bottom-tab/TabBarPortal.tsx
+++ b/apps/mobile/src/lib/navigation/bottom-tab/TabBarPortal.tsx
@@ -3,12 +3,13 @@ import { useContext } from "react"
 import { StyleSheet, View } from "react-native"
 
 import { BottomTabContext } from "./BottomTabContext"
+import { TabBarPortalWrapper } from "./native"
 
 export const TabBarPortal = ({ children }: { children: React.ReactNode }) => {
   const { tabHeightAtom } = useContext(BottomTabContext)
   const setTabHeight = useSetAtom(tabHeightAtom)
   return (
-    <View style={styles.container}>
+    <TabBarPortalWrapper style={styles.container}>
       <View
         onLayout={(e) => {
           setTabHeight(e.nativeEvent.layout.height)
@@ -16,7 +17,7 @@ export const TabBarPortal = ({ children }: { children: React.ReactNode }) => {
       >
         {children}
       </View>
-    </View>
+    </TabBarPortalWrapper>
   )
 }
 
diff --git a/apps/mobile/src/lib/navigation/bottom-tab/native.android.tsx b/apps/mobile/src/lib/navigation/bottom-tab/native.android.tsx
new file mode 100644
index 000000000..f46e3953d
--- /dev/null
+++ b/apps/mobile/src/lib/navigation/bottom-tab/native.android.tsx
@@ -0,0 +1,4 @@
+import { requireNativeView } from "expo"
+import type { ViewProps } from "react-native"
+
+export const TabBarPortalWrapper = requireNativeView<ViewProps>("TabBarPortal")
diff --git a/apps/mobile/src/lib/navigation/bottom-tab/native.ios.tsx b/apps/mobile/src/lib/navigation/bottom-tab/native.ios.tsx
new file mode 100644
index 000000000..f46e3953d
--- /dev/null
+++ b/apps/mobile/src/lib/navigation/bottom-tab/native.ios.tsx
@@ -0,0 +1,4 @@
+import { requireNativeView } from "expo"
+import type { ViewProps } from "react-native"
+
+export const TabBarPortalWrapper = requireNativeView<ViewProps>("TabBarPortal")
diff --git a/apps/mobile/src/lib/navigation/bottom-tab/native.tsx b/apps/mobile/src/lib/navigation/bottom-tab/native.tsx
new file mode 100644
index 000000000..1f4133fbd
--- /dev/null
+++ b/apps/mobile/src/lib/navigation/bottom-tab/native.tsx
@@ -0,0 +1 @@
+export { View as TabBarPortalWrapper } from "react-native"