Example
The showcase app uses it in 2 places:
-
In the root
_layout.tsxto set the navigation bar color upon app load: see the code -
In the
ThemeTogglecomponent to set the navigation bar color when the theme is changed: see the code
Android Navigation Bar
expo-navigation-bar
A function to set the android navigation bar’s content color based on the theme.
Installation
Install expo-navigation-bar dependencies
npx expo install expo-navigation-barCopy/paste the following code to ~/lib/android-navigation-bar.tsx:
import * as NavigationBar from 'expo-navigation-bar';import { Platform } from 'react-native';import { NAV_THEME } from '~/lib/constants';
export async function setAndroidNavigationBar(theme: 'light' | 'dark') {if (Platform.OS !== 'android') return;await NavigationBar.setButtonStyleAsync(theme === 'dark' ? 'light' : 'dark');await NavigationBar.setBackgroundColorAsync( theme === 'dark' ? NAV_THEME.dark.background : NAV_THEME.light.background);}Whenever you set the color scheme, call the function to update the navigation bar