ReactNative - React Navigation - createMaterialTopTabNavigator - Change backgroundColor

Question

I'm using react navigation for the TopBarNavigator, and implement createMaterialTopTabNavigator,

In the header of the navigation, I just need the color of title change, and background is transparent.
How can I make the background transparent or have the same color even if the tab is selected or not. And hide the bottom border also.

tabBarOptions: {
activeTintColor: TEXT_COLOR_BLUE,
inactiveTintColor: TEXT_COLOR_GREY,
tabStyle: {
  backgroundColor: '#ffffff',
},
indicatorStyle: {
  color: '#ffffff'
},

In the code above, I can only change background of the active tab, but not the other.

Any help is appreciated, Thanks.

Answer 1

To change the background and border of the entire Tab bar you can use

tabBarOptions: {
...
 style: {
    backgroundColor: 'transparent', //<== remove background color
    borderColor: 'transparent' // <== remove border
  }
}

Answer 2

You can check reactnavigation.org docs.

Here's the link: https://reactnavigation.org/docs/en/material-top-tab-navigator.html

tabBarOptions: {
  labelStyle: {
    fontSize: 12,
  },
  tabStyle: {
    width: 100,
  },
  style: {
    backgroundColor: 'blue',    <--- Here
    borderColor: 'transparent', <--- Here 
  },
}