Background color of expo tabs stay gray

Question

I use expo to create an android app.

I have a _layout.tsx file. Inside it, I use the Tabs from expo-router to set a navbar at the bottom. Above the tabs, I have a View with a red background.

import '../../global.css';
import HeaderDefault from '@/components/header/default';
import { Tabs } from 'expo-router';
import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { UINotificationToast } from '@/components/ui/notification/Toast';
import { View } from 'react-native';

export default function ContextLayout() {

  return (
    <SafeAreaProvider>
      <View
        style={{ flex: 1, backgroundColor: '#FF0000' /* Red background */ }}
      >
        <Tabs
          screenOptions={{
            header: ({ route }) => <HeaderDefault alignLeft={true} />,
            tabBarStyle: {
              backgroundColor: '#FBFFFE',
            },
          }}
        >
          <Tabs.Screen name='dashboard' />
        </Tabs>
      </View>
      <UINotificationToast />
    </SafeAreaProvider>
  );
}

The result is this:

If I comment the tabs section, I got the expected:

I have searched in every documentation and topic I have no a clue from what this color come from. And I do not find a way to change the background color of the Tabs.

Answer 1

Find it!

Inside each child Tabs.Screen we can add a sceneStyle, and it seems that the scene is the content.

import '../../global.css';
import HeaderDefault from '@/components/header/default';
import { Tabs } from 'expo-router';
import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { UINotificationToast } from '@/components/ui/notification/Toast';
import { View } from 'react-native';

export default function ContextLayout() {

  return (
    <SafeAreaProvider>
      <View
        style={{ flex: 1, backgroundColor: '#FF0000' /* Red background */ }}
      >
        <Tabs
          screenOptions={{
            header: ({ route }) => <HeaderDefault alignLeft={true} />,
            tabBarStyle: {
              backgroundColor: '#FBFFFE',
            },
          }}
        >
          <Tabs.Screen 
            name='dashboard' 
            options={{
              sceneStyle: {
                backgroundColor: 'red', // This what you want
              },
            }}
          />
        </Tabs>
      </View>
      <UINotificationToast />
    </SafeAreaProvider>
  );
}