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

Issue

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.

Solution

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>
  );
}

Answered By – Vik

Answer Checked By – David Goodson (FlutterFixes Volunteer)