Unable to change Tab bar background color

Question

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..

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

      }
}

Can someone help me with that ?

Thanks in advance.

Answer 1

use it example:

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

Answer 2

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

Answer 3

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',
    },
  })
  ...
});