Search code examples
reactjsreact-nativereact-native-tabnavigator

Bottom Tab bar background color not working

I am trying to get my background color of my bottom tab to change but I cannot. I am aware TabBarOptions has been deprecated and is probably causing the issue but I am having a hard time finding a work around.

This is a working example here.

Here is the short example of the code as well

 <Tab.Navigator
    initialRouteName="Home"
    tabBarOptions={{
      activeTintColor: '#F60081',
      style: {
        backgroundColor: '#b3b3b3',
        
        
      },
      
    }}
   
  >
Solution

  • You will have to use the screenoptions along with tabbarstyle like below

    <Tab.Navigator
initialRouteName="Home"
screenOptions={{
  activeTintColor: '#F60081',
  tabBarStyle: {
    backgroundColor: '#b3b3b3',
    borderTopColor: 'transparent'
  }
}}