CODEWITHSUNDEEP
react-nativereact-navigation
Nishar sheik
Nishar sheik

Reputation: 159

Unable to change Tab bar background color

I am using BottomTabNavigator in my project I am unable to change the color of the Tab it's being in default color although I am trying to change the style background color. Following is the code I am using, even the tintcolors also not getting changed. I am attaching the screenshots of the page. I want to change the color of the bar where the icons present.enter image description here.

{
      tabBarPosition: 'bottom',
      tabBarOptions: {
               activeTintColor: 'blue',
          inactiveTintColor: 'grey',
          style: {
            backgroundColor: 'darkcerulean',
            },
            labelStyle: {
              fontSize: 13,
          },

      }
}

Can someone help me with that ?

Thanks in advance.

Upvotes: 6

Views: 12263

Answers (4)

yaxx
yaxx

Reputation: 655

Yon need to set taBarStyle within the screenOptions of the tab navigator:

tabBarStyle: {backgroundColor: 'yourColor'},

Upvotes: 0

Harry Riley
Harry Riley

Reputation: 333

The tabBarOptions prop was removed and the options from there were moved to screen's options instead <- from the docs.

Now you will need to use:

export default createBottomTabNavigator({
  ...
  screenOptions={({ route }) => ({
    // any additional screen options here

    tabBarStyle: {
      backgroundColor: '#8e7e7e',
    },
  })
  ...
});

Upvotes: 1

Gurbela
Gurbela

Reputation: 1214

use it example:

 export default createBottomTabNavigator({
      home: {
        screen: HomeScreen,
        navigationOptions: ({ navigation }) => ({ 
          title: 'Home'
        })
       }, 
      }, 
     {
        initialRouteName: "home",
        tabBarOptions: {
          style: {
           height: 55,
           backgroundColor: '#8e7e7e'
          }
        }
     });

Upvotes: 11

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

There is a problem with the recognization of the color name darkcerulean according to the specifications as mentioned here.

Instead you can try setting the hex color #08457e

style: {
   backgroundColor: '#08457e',
}

Here's a snack link

Upvotes: 0

Related Questions