React Navigation change backgroundColor below tabBar

Question

I am using React Navigations tabBar with my React Native project, and I don't know how to change the background color of my bottom tab bar properly. I used Expo to make my app and I have also edited app.json to have the correct backgroundColor, yet nothing changes. Here is my code:

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Feed"
      
      screenOptions={{
        tabBarActiveTintColor: "#E40066",
        tabBarInactiveTintColor: "#fff",
        tabBarActiveBackgroundColor: "#171717",
        tabBarInactiveBackgroundColor: "#171717",
        
        
        headerShown: false,
        tabBarStyle: {
          borderWidth: 1,
        },
        style: {
          backgroundColor: "#171717",
          
          
        },
      }}
    >
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarLabel: "Home",
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons
              name="glass-cocktail"
              color={color}
              size={size}
            />
          ),
        }}
      />
      <Tab.Screen
        name="Search"
        component={Search}
        options={{
          tabBarLabel: "Search",
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="magnify" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Saved"
        component={Saved}
        options={{
          tabBarLabel: "Saved",
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="heart" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

export default function App() {
  const navTheme = {
    ...DefaultTheme,
    colors: {
      ...DefaultTheme.colors,
      background: "#171717",
    },
  };

  return (
    <NavigationContainer theme={navTheme}>
      <MyTabs style={{ backgroundColor: "#171717" }}></MyTabs>
    </NavigationContainer>
  );
}

Yet my tabBar looks like this, I want it to be #171717, not white... Thank you in advance

Does this answer your question? [How to handle the SafeArea's background color with Bottom Tab Navigation?](https://stackoverflow.com/questions/60561666/how-to-handle-the-safeareas-background-color-with-bottom-tab-navigation) — Ishara Dilshan, Sep 07 '22 at 06:58

score 4 · Answer 1 · answered Jan 27 '22 at 01:01

The solution was to make a theme to change the background color:

export default function App() {
  const navTheme = {
    colors: {
      background: "#171717"
    }
  };

  return (
    <NavigationContainer theme={navTheme}>
      <MyTabs style={{ backgroundColor: "#171717" }}></MyTabs>
    </NavigationContainer>
  );
}

score 0 · Answer 2 · answered Jan 28 '22 at 13:32

0

You can use this

<Tab.Navigator
      tabBarOptions={{
      style: {
        backgroundColor:'#171717 '
      }
    }}>
    {Screens}
    </Tab.Navigator>

answered Jan 28 '22 at 13:32

hknzbyn

31
2

not working to me – famfamfam Jul 31 '23 at 04:18

Anatech · Answer 3 · 2023-06-23T00:55:07.077

0

You used the following code to set the background colour in the Tab Screen which was wrong

style: {
      backgroundColor: "#171717",          
},

Please use the code below to set the background colour

<Tab.Navigator 
screenOptions={{
        tabBarStyle: {
          backgroundColor: '#fff',
        },
      }}>
</Tab.Navigator>

I hope this solves your problem

edited Jun 23 '23 at 00:55

answered Jun 23 '23 at 00:53

Anatech

3
4

React Navigation change backgroundColor below tabBar

3 Answers3