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

@@ -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: {

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",

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'} />

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"