ux: Set the Android NavBar color (#2182)

native/app/Root.tsx

@@ -7,6 +7,7 @@ import { object, parse, string } from "valibot";
 import Toast from "react-native-toast-message";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { PortalHost } from "@rn-primitives/portal";
+import * as NavigationBar from "expo-navigation-bar";
 
 import { BUNGIE_MANIFEST_URL, CUSTOM_MANIFEST_URL, getFullProfile } from "@/app/bungie/BungieApi.ts";
 import { getJsonBlob } from "@/app/utilities/Helpers.ts";
@@ -112,6 +113,15 @@ function Root() {
   const stateHydrated = useGGStore((state) => state.stateHydrated);
   const appReady = useGGStore((state) => state.appReady);
 
+  useEffect(() => {
+    async function setAndroidStatusBarColor() {
+      await NavigationBar.setBackgroundColorAsync("#17101F");
+    }
+    if (Platform.OS === "android") {
+      setAndroidStatusBarColor();
+    }
+  }, []);
+
   useEffect(() => {
     if (SCREEN_WIDTH) {
       useGGStore.getState().setInventorySectionWidth(SCREEN_WIDTH);
@@ -156,7 +166,7 @@ function Root() {
 
   return (
     <GestureHandlerRootView>
-      {appReady && <StatusBar barStyle={"light-content"} />}
+      {appReady && <StatusBar translucent={true} barStyle={"light-content"} />}
       <NavigationContainer ref={navigationRef} theme={navigationContainerTheme}>
         <App />
         <Toast />

native/package.json

@@ -40,6 +40,7 @@
     "expo-image": "1.12.13",
     "expo-linear-gradient": "13.0.2",
     "expo-linking": "6.3.1",
+    "expo-navigation-bar": "3.0.7",
     "expo-splash-screen": "0.27.5",
     "expo-sqlite": "14.0.5",
     "expo-system-ui": "3.0.7",