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

android: fix navigation bar always being bright even in dark mode (#3464)

Browse source 
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>
This commit is contained in:
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
Download patch file Download diff file Expand all files Collapse all files

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