From bf5c99cb10a0b35b0101bf8f9858c176889a0284 Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Sun, 1 Feb 2026 18:16:22 +0000
Subject: feat(mobile): use native tabs for mobile

---
 apps/mobile/components/navigation/tabs.tsx       | 28 ------------------------
 apps/mobile/components/ui/CustomSafeAreaView.tsx |  3 +++
 2 files changed, 3 insertions(+), 28 deletions(-)
 delete mode 100644 apps/mobile/components/navigation/tabs.tsx

(limited to 'apps/mobile/components')

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
-- 
cgit v1.2.3-70-g09d2