React native Question posted in
The official React Native documentation can be found here.

React native – Background color of expo tabs stay gray

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:

the background is gray

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

the background is red

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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

    Only the content is red


  2. 0

    try this:

    • separate view above tabs so you have precise control over layout
    <View style={styles.container}>
  <View style={styles.redBackground} />
   <View style={styles.tabsContainer}>
      <Tabs
         screenOptions={{
         header: ({ route }) => <HeaderDefault alignLeft={true} />,
         tabBarStyle: {
            backgroundColor: '#FBFFFE',
              },
            }}
          >
            <Tabs.Screen name="dashboard" />
     </Tabs>
</View>


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  redBackground: {
    height: 50, // Adjust height as needed
    backgroundColor: '#FF0000',
  },
  tabsContainer: {
    flex: 1,
  },
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search