From ed86f7ef012fb558fe8a8974e1e162ce75cbfd15 Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Tue, 26 Aug 2025 15:47:05 +0300
Subject: feat(mobile): Retheme the mobile app (#1872)

* Add nativewindui

* migrate to nativewindui text

* Replace buttons with nativewindui buttons

* Use nativewindui search input

* fix the divider color

* More changes

* fix manage tag icon

* fix styling of bookmark card

* fix ios compilation

* fix search clear

* fix tag pill border color

* Store theme setting in app settings

* fix setting color appearance

* fix coloring of search input

* fix following system theme

* add a save button to info

* fix the grey colors on android

* fix icon active tint color

* drop the use of TextField
---
 apps/mobile/app/_layout.tsx | 101 +++++++++++++++++++++++---------------------
 1 file changed, 53 insertions(+), 48 deletions(-)

(limited to 'apps/mobile/app/_layout.tsx')

diff --git a/apps/mobile/app/_layout.tsx b/apps/mobile/app/_layout.tsx
index ca3da0cb..1e6128c7 100644
--- a/apps/mobile/app/_layout.tsx
+++ b/apps/mobile/app/_layout.tsx
@@ -3,21 +3,23 @@ import "expo-dev-client";
 
 import { useEffect } from "react";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { KeyboardProvider } from "react-native-keyboard-controller";
 import { useRouter } from "expo-router";
 import { Stack } from "expo-router/stack";
 import { ShareIntentProvider, useShareIntent } from "expo-share-intent";
 import { StatusBar } from "expo-status-bar";
 import { StyledStack } from "@/components/navigation/stack";
 import { Providers } from "@/lib/providers";
-import useAppSettings from "@/lib/settings";
+import { useColorScheme, useInitialAndroidBarSync } from "@/lib/useColorScheme";
 import { cn } from "@/lib/utils";
-import { useColorScheme } from "nativewind";
+import { NAV_THEME } from "@/theme";
+import { ThemeProvider as NavThemeProvider } from "@react-navigation/native";
 
 export default function RootLayout() {
+  useInitialAndroidBarSync();
   const router = useRouter();
   const { hasShareIntent } = useShareIntent();
-  const { colorScheme, setColorScheme } = useColorScheme();
-  const { settings } = useAppSettings();
+  const { colorScheme, isDarkColorScheme } = useColorScheme();
 
   useEffect(() => {
     if (hasShareIntent) {
@@ -27,52 +29,55 @@ export default function RootLayout() {
     }
   }, [hasShareIntent]);
 
-  useEffect(() => {
-    setColorScheme(settings.theme);
-  }, [settings.theme]);
-
   return (
     <>
-      <StyledStack
-        layout={(props) => {
-          return (
-            <GestureHandlerRootView style={{ flex: 1 }}>
-              <ShareIntentProvider>
-                <Providers>{props.children}</Providers>
-              </ShareIntentProvider>
-            </GestureHandlerRootView>
-          );
-        }}
-        contentClassName={cn(
-          "w-full flex-1 bg-gray-100 text-foreground dark:bg-background",
-          colorScheme == "dark" ? "dark" : "light",
-        )}
-        screenOptions={{
-          headerTitle: "",
-          headerTransparent: true,
-        }}
-      >
-        <Stack.Screen name="index" />
-        <Stack.Screen
-          name="signin"
-          options={{
-            headerShown: true,
-            headerBackVisible: true,
-            headerBackTitle: "Back",
-            title: "",
-          }}
-        />
-        <Stack.Screen name="sharing" />
-        <Stack.Screen
-          name="test-connection"
-          options={{
-            title: "Test Connection",
-            headerShown: true,
-            presentation: "modal",
-          }}
-        />
-      </StyledStack>
-      <StatusBar style="auto" />
+      <KeyboardProvider statusBarTranslucent navigationBarTranslucent>
+        <NavThemeProvider value={NAV_THEME[colorScheme]}>
+          <StyledStack
+            layout={(props) => {
+              return (
+                <GestureHandlerRootView style={{ flex: 1 }}>
+                  <ShareIntentProvider>
+                    <Providers>{props.children}</Providers>
+                  </ShareIntentProvider>
+                </GestureHandlerRootView>
+              );
+            }}
+            contentClassName={cn(
+              "w-full flex-1 bg-gray-100 text-foreground dark:bg-background",
+              colorScheme == "dark" ? "dark" : "light",
+            )}
+            screenOptions={{
+              headerTitle: "",
+              headerTransparent: true,
+            }}
+          >
+            <Stack.Screen name="index" />
+            <Stack.Screen
+              name="signin"
+              options={{
+                headerShown: true,
+                headerBackVisible: true,
+                headerBackTitle: "Back",
+                title: "",
+              }}
+            />
+            <Stack.Screen name="sharing" />
+            <Stack.Screen
+              name="test-connection"
+              options={{
+                title: "Test Connection",
+                headerShown: true,
+                presentation: "modal",
+              }}
+            />
+          </StyledStack>
+        </NavThemeProvider>
+      </KeyboardProvider>
+      <StatusBar
+        key={`root-status-bar-${isDarkColorScheme ? "light" : "dark"}`}
+        style={isDarkColorScheme ? "light" : "dark"}
+      />
     </>
   );
 }
-- 
cgit v1.2.3-70-g09d2