From cefa0a55e8240e24e2961d929ead2d20743858ce Mon Sep 17 00:00:00 2001
From: Kisaragi Hiu <mail@kisaragi-hiu.com>
Date: Sat, 13 Apr 2024 07:40:22 +0900
Subject: [PATCH] android: fix navigation bar always being bright even in dark
 mode (#3464)

Right now both light mode and dark mode get light navigation bar, and
looks jarring in the dark modes.

This commit applies a more appropriate color before the UI thread
runs (in app config), as well as applying the current theme background
after the UI shell is mounted.

This should fix #3332.

Co-authored-by: Hailey <me@haileyok.com>
---
 app.config.js            |  5 +++++
 package.json             |  1 +
 src/view/shell/index.tsx | 10 ++++++++++
 yarn.lock                |  8 ++++++++
 4 files changed, 24 insertions(+)

diff --git a/app.config.js b/app.config.js
index 40feed40..c42ae5a3 100644
--- a/app.config.js
+++ b/app.config.js
@@ -95,6 +95,11 @@ module.exports = function (config) {
         barStyle: 'light-content',
         backgroundColor: '#00000000',
       },
+      // Dark nav bar in light mode is better than light nav bar in dark mode
+      androidNavigationBar: {
+        barStyle: 'light-content',
+        backgroundColor: DARK_SPLASH_CONFIG_ANDROID.backgroundColor,
+      },
       android: {
         icon: './assets/icon.png',
         adaptiveIcon: {
diff --git a/package.json b/package.json
index 8b99b70c..e4a8de74 100644
--- a/package.json
+++ b/package.json
@@ -124,6 +124,7 @@
     "expo-linking": "^6.2.2",
     "expo-localization": "~14.8.3",
     "expo-media-library": "~15.9.1",
+    "expo-navigation-bar": "~2.8.1",
     "expo-notifications": "~0.27.6",
     "expo-sharing": "^11.10.0",
     "expo-splash-screen": "~0.26.4",
diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx
index c554112e..562abc56 100644
--- a/src/view/shell/index.tsx
+++ b/src/view/shell/index.tsx
@@ -9,6 +9,7 @@ import {
 import {Drawer} from 'react-native-drawer-layout'
 import Animated from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import * as NavigationBar from 'expo-navigation-bar'
 import {StatusBar} from 'expo-status-bar'
 import {useNavigationState} from '@react-navigation/native'
 
@@ -113,6 +114,15 @@ function ShellInner() {
 export const Shell: React.FC = function ShellImpl() {
   const pal = usePalette('default')
   const theme = useTheme()
+  React.useEffect(() => {
+    if (isAndroid) {
+      NavigationBar.setBackgroundColorAsync(theme.palette.default.background)
+      NavigationBar.setBorderColorAsync(theme.palette.default.background)
+      NavigationBar.setButtonStyleAsync(
+        theme.colorScheme === 'dark' ? 'light' : 'dark',
+      )
+    }
+  }, [theme])
   return (
     <View testID="mobileShellView" style={[styles.outerContainer, pal.view]}>
       <StatusBar style={theme.colorScheme === 'dark' ? 'light' : 'dark'} />
diff --git a/yarn.lock b/yarn.lock
index 39bfc6a2..d048bdf7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11962,6 +11962,14 @@ expo-modules-core@1.11.12:
   dependencies:
     invariant "^2.2.4"
 
+expo-navigation-bar@~2.8.1:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/expo-navigation-bar/-/expo-navigation-bar-2.8.1.tgz#c4152f878d9fb6ca74c90b80e934af76c29b5377"
+  integrity sha512-aT5G+7SUsXDVPsRwp8fF940ycka1ABb4g3QKvTZN3YP6kMWvsiYEmRqMIJVy0zUr/i6bxBG1ZergkXimWrFt3w==
+  dependencies:
+    "@react-native/normalize-color" "^2.0.0"
+    debug "^4.3.2"
+
 expo-notifications@~0.27.6:
   version "0.27.6"
   resolved "https://registry.yarnpkg.com/expo-notifications/-/expo-notifications-0.27.6.tgz#ef7c95504034ac8b5fa360e13f5b037c5bf7e80d"