zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

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>
zio/stable
Kisaragi Hiu 2024-04-13 07:40:22 +09:00 committed by GitHub
parent c3821fdc31
commit cefa0a55e8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app.config.js
View File

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

1
package.json
View File

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

10
src/view/shell/index.tsx
View File

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

8
yarn.lock
View File

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