React Native CLI - How to properly manage the bottom Android navigation bar color? White in light mode / Dark in dark mode?

userdCQX 0
Viewed 23

Here's an image of what I'm referring to, the android emulator is on the left. I can switch my app between light / dark and the components change color on demand but I'm not sure how to approach this bottom navigation bar. Thank you in advance for any tips on this.

enter image description here

react-native android
1 Answers

The solution was a lot easier than I thought. If you're using React Navigation you can use the screen options prop to define the navigation bar color. Here is an example:

export function AuthStackNavigator() {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <Stack.Navigator
      screenOptions={{ navigationBarColor: isDarkMode ? theme.colors.black : theme.colors.white }}>
      <Stack.Screen name="Landing" component={LandingScreen} options={{ headerShown: false }} />
    </Stack.Navigator>
  );
}
userdCQX0
Related