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

Answer 1

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

Answer 2

You can use this

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