From 6dbb24ebd180fea5ff3e4b831b3acf03aec9543e Mon Sep 17 00:00:00 2001 From: Nigel Breslaw Date: Sun, 28 Jul 2024 15:45:51 +0300 Subject: [PATCH] ux: Set the Android NavBar color (#2182) --- native/app/Root.tsx | 12 +++++++++++- native/package.json | 1 + native/pnpm-lock.yaml | 16 ++++++++++++++++ 3 files changed, 28 insertions(+), 1 deletion(-) diff --git a/native/app/Root.tsx b/native/app/Root.tsx index 3793d30ee..52e5dc3c5 100644 --- a/native/app/Root.tsx +++ b/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 ( - {appReady && } + {appReady && } diff --git a/native/package.json b/native/package.json index 122a3181f..27bde3f49 100644 --- a/native/package.json +++ b/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", diff --git a/native/pnpm-lock.yaml b/native/pnpm-lock.yaml index d854671c9..44f4abf6d 100644 --- a/native/pnpm-lock.yaml +++ b/native/pnpm-lock.yaml @@ -89,6 +89,9 @@ importers: expo-linking: specifier: 6.3.1 version: 6.3.1(expo@51.0.22(@babel/core@7.24.9)(@babel/preset-env@7.24.5(@babel/core@7.24.9))) + expo-navigation-bar: + specifier: 3.0.7 + version: 3.0.7(expo@51.0.22(@babel/core@7.24.9)(@babel/preset-env@7.24.5(@babel/core@7.24.9))) expo-splash-screen: specifier: 0.27.5 version: 0.27.5(expo-modules-autolinking@1.11.1)(expo@51.0.22(@babel/core@7.24.9)(@babel/preset-env@7.24.5(@babel/core@7.24.9))) @@ -3164,6 +3167,11 @@ packages: expo-modules-core@1.12.19: resolution: {integrity: sha512-fFsErN4oMsOdStUVYvyLpl6MX/wbD9yJSqy/Lu7ZRLIPzeKDfGS2jNl8RzryPznRpWmy49X8l40R4osRJLizhg==} + expo-navigation-bar@3.0.7: + resolution: {integrity: sha512-KCNHyZ58zoN4xdy7D1lUdJvveCYNVQHGSX4M6xO/SZypvI6GZbLzKSN6Lx4GDGEFxG6Kb+EAckZl48tSiNeGYQ==} + peerDependencies: + expo: '*' + expo-splash-screen@0.27.5: resolution: {integrity: sha512-9rdZuLkFCfgJBxrheUsOEOIW6Rp+9NVlpSE0hgXQwbTCLTncf00IHSE8/L2NbFyeDLNjof1yZBppaV7tXHRUzA==} peerDependencies: @@ -9731,6 +9739,14 @@ snapshots: dependencies: invariant: 2.2.4 + expo-navigation-bar@3.0.7(expo@51.0.22(@babel/core@7.24.9)(@babel/preset-env@7.24.5(@babel/core@7.24.9))): + dependencies: + '@react-native/normalize-colors': 0.74.85 + debug: 4.3.5 + expo: 51.0.22(@babel/core@7.24.9)(@babel/preset-env@7.24.5(@babel/core@7.24.9)) + transitivePeerDependencies: + - supports-color + expo-splash-screen@0.27.5(expo-modules-autolinking@1.11.1)(expo@51.0.22(@babel/core@7.24.9)(@babel/preset-env@7.24.5(@babel/core@7.24.9))): dependencies: '@expo/prebuild-config': 7.0.6(expo-modules-autolinking@1.11.1)