Search code examples
javascriptreact-nativereact-native-cli

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


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.


Solution

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

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