diff options
| author | Kisaragi Hiu <mail@kisaragi-hiu.com> | 2024-04-13 07:40:22 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-04-12 15:40:22 -0700 |
| commit | cefa0a55e8240e24e2961d929ead2d20743858ce (patch) | |
| tree | 9b0f8c2df896a07cfb3c5ead09e6306072eed83c | |
| parent | c3821fdc311fe7ddebede427715892d3a1e53716 (diff) | |
| download | voidsky-cefa0a55e8240e24e2961d929ead2d20743858ce.tar.zst | |
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>
| -rw-r--r-- | app.config.js | 5 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/view/shell/index.tsx | 10 | ||||
| -rw-r--r-- | yarn.lock | 8 |
4 files changed, 24 insertions, 0 deletions
diff --git a/app.config.js b/app.config.js index 40feed40c..c42ae5a31 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 8b99b70cc..e4a8de744 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 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'} /> diff --git a/yarn.lock b/yarn.lock index 39bfc6a20..d048bdf7f 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" |