fix(mobile): disable KeyboardProvider on Android to fix header inset

KeyboardProvider's EdgeToEdgeReactViewGroup intercepts window insets
at the root view level and zeros out the status bar top inset on
Android. This prevents react-native-screens' CustomToolbar from
receiving the correct system bar insets, causing headers to appear
cramped against the status bar.

Skip KeyboardProvider on Android entirely via a RootKeyboardProvider
wrapper. Also remove unnecessary transparent headerStyle background
on Android tab layouts.

Refs:
- kirillzyusko/react-native-keyboard-controller#1013
- kirillzyusko/react-native-keyboard-controller#1292

Author: esimkowitz

apps/mobile/app/_layout.tsx

@@ -1,6 +1,7 @@
 import "@/globals.css";
 import "expo-dev-client";
 
+import type React from "react";
 import { useEffect } from "react";
 import { Platform } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
@@ -18,6 +19,22 @@ import { cn } from "@/lib/utils";
 import { NAV_THEME } from "@/theme";
 import { ThemeProvider as NavThemeProvider } from "@react-navigation/native";
 
+// On Android, KeyboardProvider's EdgeToEdgeReactViewGroup intercepts window insets at
+// the root view level, zeroing out the status bar top inset. This prevents the native
+// navigation toolbar (react-native-screens' CustomToolbar) from receiving the correct
+// system bar insets, resulting in headers appearing cramped against the status bar.
+// We skip KeyboardProvider on Android entirely to let the toolbar handle its own insets.
+function RootKeyboardProvider({ children }: { children: React.ReactNode }) {
+  if (Platform.OS === "android") {
+    return children;
+  }
+  return (
+    <KeyboardProvider statusBarTranslucent navigationBarTranslucent>
+      {children}
+    </KeyboardProvider>
+  );
+}
+
 export default function RootLayout() {
   useInitialAndroidBarSync();
   const router = useRouter();
@@ -34,10 +51,7 @@ export default function RootLayout() {
 
   return (
     <SafeAreaProvider>
-      <KeyboardProvider
-        statusBarTranslucent={Platform.OS !== "android" ? true : undefined}
-        navigationBarTranslucent={Platform.OS !== "android" ? true : undefined}
-      >
+      <RootKeyboardProvider>
         <NavThemeProvider value={NAV_THEME[colorScheme]}>
           <SplashScreenController />
           <StyledStack
@@ -128,7 +142,7 @@ export default function RootLayout() {
             />
           </StyledStack>
         </NavThemeProvider>
-      </KeyboardProvider>
+      </RootKeyboardProvider>
       <StatusBar
         key={`root-status-bar-${isDarkColorScheme ? "light" : "dark"}`}
         style={isDarkColorScheme ? "light" : "dark"}

apps/mobile/app/dashboard/(tabs)/(highlights)/_layout.tsx

@@ -14,9 +14,6 @@ export default function Layout() {
             headerLargeStyle: { backgroundColor: "transparent" },
           },
           android: {
-            headerStyle: {
-              backgroundColor: "transparent",
-            },
             contentStyle: {
               // Manual padding to avoid the native tabbar until expo fixes this in sdk 55.
               paddingBottom: 100,

apps/mobile/app/dashboard/(tabs)/(home)/_layout.tsx

@@ -14,9 +14,6 @@ export default function Layout() {
             headerLargeStyle: { backgroundColor: "transparent" },
           },
           android: {
-            headerStyle: {
-              backgroundColor: "transparent",
-            },
             contentStyle: {
               // Manual padding to avoid the native tabbar until expo fixes this in sdk 55.
               paddingBottom: 100,

apps/mobile/app/dashboard/(tabs)/(lists)/_layout.tsx

@@ -14,9 +14,6 @@ export default function Layout() {
             headerLargeStyle: { backgroundColor: "transparent" },
           },
           android: {
-            headerStyle: {
-              backgroundColor: "transparent",
-            },
             contentStyle: {
               // Manual padding to avoid the native tabbar until expo fixes this in sdk 55.
               paddingBottom: 100,

apps/mobile/app/dashboard/(tabs)/(settings)/_layout.tsx

@@ -14,9 +14,6 @@ export default function Layout() {
             headerLargeStyle: { backgroundColor: "transparent" },
           },
           android: {
-            headerStyle: {
-              backgroundColor: "transparent",
-            },
             contentStyle: {
               // Manual padding to avoid the native tabbar until expo fixes this in sdk 55.
               paddingBottom: 100,

apps/mobile/app/dashboard/(tabs)/(tags)/_layout.tsx

@@ -14,9 +14,6 @@ export default function Layout() {
             headerLargeStyle: { backgroundColor: "transparent" },
           },
           android: {
-            headerStyle: {
-              backgroundColor: "transparent",
-            },
             contentStyle: {
               // Manual padding to avoid the native tabbar until expo fixes this in sdk 55.
               paddingBottom: 100,

apps/mobile/app/dashboard/_layout.tsx

@@ -39,11 +39,7 @@ export default function Dashboard() {
             headerLargeTitleShadowVisible: false,
             headerLargeStyle: { backgroundColor: "transparent" },
           },
-          android: {
-            headerStyle: {
-              backgroundColor: "transparent",
-            },
-          },
+          android: {},
         }),
         headerShadowVisible: false,
       }}