How to change the color of the bottom bar (below the navigation tabs) in React Native

Question

On Android, I would like to change the bottom bar on the screen from black to translucent, please check the image it's the bar below the navigation tabs. I'm developing the app with react native, using react navigation..

Answer 1

Expo SDK 52, Expo router v4 In your main layout in Stack component add to a screenOptions prop: navigationBarColor: colorScheme === "dark" ? Colors["dark"].background : Colors["light"].background

What I noticed it only works for Android. In addition if you want to change Status Bar background color, there is a code related to this in code below. You can use StatusBar component or add prop: statusBarBackgroundColor to Stack.

_layout.tsx

// (...)
import { Stack } from "expo-router";
export default function RootLayout() {
  const colorScheme = useColorScheme();

  const [loaded, error] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
    Lobster: require("../assets/fonts/Lobster-Regular.ttf"),
  });

  // Expo Router uses Error Boundaries to catch errors in the navigation tree.
  useEffect(() => {
    if (error) throw error;
  }, [error]);

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return (
    <QueryClientProvider client={queryClient}>
      <SafeAreaProvider>
        <GestureHandlerRootView>
          <Material3ThemeProvider>
            <ThemeProvider
              value={colorScheme === "dark" ? DarkTheme : DefaultTheme}
            >
              <StatusBar
                style={colorScheme === "dark" ? "light" : "dark"}
                backgroundColor={
                  colorScheme === "dark"
                    ? Colors["dark"].background
                    : Colors["light"].background
                }
              />
              <Stack
                screenOptions={{
                  navigationBarColor:
                    colorScheme === "dark"
                      ? Colors["dark"].background
                      : Colors["light"].background,
                }}
              >
                <Stack.Screen
                  name="(auth)/(tabs)"
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="(auth)/listing/[id]"
                  options={{
                    headerTitle: "",
                    headerBackButtonDisplayMode: "minimal",
                    headerTransparent: true,
                  }}
                />
                <Stack.Screen
                  name="(public)/login"
                  options={{
                    headerShown: true,
                    title: "Login",
                  }}
                />
                <Stack.Screen name="+not-found" />
              </Stack>
              <Toasts />
            </ThemeProvider>
          </Material3ThemeProvider>
        </GestureHandlerRootView>
      </SafeAreaProvider>
    </QueryClientProvider>
  );
}