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>

1 files changed, 10 insertions, 0 deletions

diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx
index c554112ed..562abc56c 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'} />