feat(mobile): use native tabs for mobile

2 files changed, 3 insertions, 28 deletions

diff --git a/apps/mobile/components/navigation/tabs.tsx b/apps/mobile/components/navigation/tabs.tsx
deleted file mode 100644
index 83b1c6a7..00000000
--- a/apps/mobile/components/navigation/tabs.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { ViewStyle } from "react-native";
-import { Tabs } from "expo-router";
-import { cssInterop } from "nativewind";
-
-function StyledTabsImpl({
-  tabBarStyle,
-  headerStyle,
-  sceneStyle,
-  ...props
-}: React.ComponentProps<typeof Tabs> & {
-  tabBarStyle?: ViewStyle;
-  headerStyle?: ViewStyle;
-  sceneStyle?: ViewStyle;
-}) {
-  props.screenOptions = {
-    ...props.screenOptions,
-    tabBarStyle,
-    headerStyle,
-    sceneStyle,
-  };
-  return <Tabs {...props} />;
-}
-
-export const StyledTabs = cssInterop(StyledTabsImpl, {
-  tabBarClassName: "tabBarStyle",
-  headerClassName: "headerStyle",
-  sceneClassName: "sceneStyle",
-});
diff --git a/apps/mobile/components/ui/CustomSafeAreaView.tsx b/apps/mobile/components/ui/CustomSafeAreaView.tsx
index 33c9a765..8e7755c2 100644
--- a/apps/mobile/components/ui/CustomSafeAreaView.tsx
+++ b/apps/mobile/components/ui/CustomSafeAreaView.tsx
@@ -1,4 +1,5 @@
 import { SafeAreaView } from "react-native-safe-area-context";
+import { useColorScheme } from "@/lib/useColorScheme";
 import { useHeaderHeight } from "@react-navigation/elements";
 
 export default function CustomSafeAreaView({
@@ -9,11 +10,13 @@ export default function CustomSafeAreaView({
   edges?: ("top" | "bottom")[];
 }) {
   const headerHeight = useHeaderHeight();
+  const { colors } = useColorScheme();
 
   return (
     <SafeAreaView
       style={{
         flex: 1,
+        backgroundColor: colors.background,
         paddingTop: edges.includes("top")
           ? headerHeight > 0
             ? headerHeight