How to change Botton tab bar Background Color in React Native?

Question

I'm using @react-navigation/bottom-tabs Package. But I don't know how to change background color of the tab bar. Here is my Code.

import React from "react";
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from "./TabScreen/Home";
import Category from "./TabScreen/Category";
import Search from "./TabScreen/Search";
import Profile from "./TabScreen/Profile";
import Colors from "../../../Style_Sheet/Colors";

const Tab = createBottomTabNavigator();

const Tabs =()=>{
  return(
    <Tab.Navigator tabBarPosition="bottom" barStyle={{ backgroundColor: '#0000' }}>
      <Tab.Screen name="Home" component={Home} options={{headerTitle:"Explore",headerTintColor:Colors.white,}}/>
      <Tab.Screen name="Category" component={Category} />
      <Tab.Screen name="Search" component={Search} />
      <Tab.Screen name="Profile" component={Profile} />

    </Tab.Navigator>
  )
}
export default Tabs;

I am adding under then Tab.Navigator tag but it's not working.

If it answered your question, please mark it as answer. It will be helpful for future visitors — Saral Karki, Dec 30 '21 at 15:53

score 1 · Accepted Answer · edited Jul 17 '23 at 14:52

1

For version 6 you have to add screenOptions like this in Tab.Navigator

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

edited Jul 17 '23 at 14:52

MUHAMMAD ILYAS

1,402
7
23

answered Dec 30 '21 at 14:04

Saral Karki

4,530
2
7
10

Salman · Answer 2 · 2022-06-29T08:37:46.273

If

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

not working then change the Theme Color, The below code will work when assigning border-radius and can't change the background color

1.import {NavigationContainer, DefaultTheme} from '@react-navigation/native';

2.

const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: '#fff',
  },
};

<NavigationContainer theme={MyTheme}>

user22238218 · Answer 3 · 2023-07-21T09:49:45.833

0

<Tab.Navigator screenOptions={{ tabBarActiveTintColor: '#000000', tabBarLabelStyle: { fontSize: 14, textTransform: 'capitalize', fontFamily:'Poppins-Regular'}, tabBarStyle: { backgroundColor: '#FAFAFA' }, tabBarUnderlineStyle: { backgroundColor: 'red' }, }} // tabBar={NavRenderer} >

edited Jul 21 '23 at 09:49

answered Jul 17 '23 at 05:18

user22238218

1
1

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 18 '23 at 22:39

How to change Botton tab bar Background Color in React Native?

3 Answers3