quilling.dev / social-app
An ATproto social media client -- with an independent Appview.
fork atom

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>

authored by

Kisaragi Hiu
Hailey and committed by
GitHub cefa0a55 c3821fdc

+24
+5
app.config.js
··· 95 95 barStyle: 'light-content', 96 96 backgroundColor: '#00000000', 97 97 }, 98 + // Dark nav bar in light mode is better than light nav bar in dark mode 99 + androidNavigationBar: { 100 + barStyle: 'light-content', 101 + backgroundColor: DARK_SPLASH_CONFIG_ANDROID.backgroundColor, 102 + }, 98 103 android: { 99 104 icon: './assets/icon.png', 100 105 adaptiveIcon: {
+1
package.json
··· 124 124 "expo-linking": "^6.2.2", 125 125 "expo-localization": "~14.8.3", 126 126 "expo-media-library": "~15.9.1", 127 + "expo-navigation-bar": "~2.8.1", 127 128 "expo-notifications": "~0.27.6", 128 129 "expo-sharing": "^11.10.0", 129 130 "expo-splash-screen": "~0.26.4",
+10
src/view/shell/index.tsx
··· 9 9 import {Drawer} from 'react-native-drawer-layout' 10 10 import Animated from 'react-native-reanimated' 11 11 import {useSafeAreaInsets} from 'react-native-safe-area-context' 12 + import * as NavigationBar from 'expo-navigation-bar' 12 13 import {StatusBar} from 'expo-status-bar' 13 14 import {useNavigationState} from '@react-navigation/native' 14 15 ··· 113 114 export const Shell: React.FC = function ShellImpl() { 114 115 const pal = usePalette('default') 115 116 const theme = useTheme() 117 + React.useEffect(() => { 118 + if (isAndroid) { 119 + NavigationBar.setBackgroundColorAsync(theme.palette.default.background) 120 + NavigationBar.setBorderColorAsync(theme.palette.default.background) 121 + NavigationBar.setButtonStyleAsync( 122 + theme.colorScheme === 'dark' ? 'light' : 'dark', 123 + ) 124 + } 125 + }, [theme]) 116 126 return ( 117 127 <View testID="mobileShellView" style={[styles.outerContainer, pal.view]}> 118 128 <StatusBar style={theme.colorScheme === 'dark' ? 'light' : 'dark'} />
+8
yarn.lock
··· 11962 11962 dependencies: 11963 11963 invariant "^2.2.4" 11964 11964 11965 + expo-navigation-bar@~2.8.1: 11966 + version "2.8.1" 11967 + resolved "https://registry.yarnpkg.com/expo-navigation-bar/-/expo-navigation-bar-2.8.1.tgz#c4152f878d9fb6ca74c90b80e934af76c29b5377" 11968 + integrity sha512-aT5G+7SUsXDVPsRwp8fF940ycka1ABb4g3QKvTZN3YP6kMWvsiYEmRqMIJVy0zUr/i6bxBG1ZergkXimWrFt3w== 11969 + dependencies: 11970 + "@react-native/normalize-color" "^2.0.0" 11971 + debug "^4.3.2" 11972 + 11965 11973 expo-notifications@~0.27.6: 11966 11974 version "0.27.6" 11967 11975 resolved "https://registry.yarnpkg.com/expo-notifications/-/expo-notifications-0.27.6.tgz#ef7c95504034ac8b5fa360e13f5b037c5bf7e80d"