Is there a way to change the font color and the under line color of the top tab navigator?

Question

I'm setting up a new component of top TabNavigator and I want to change the color of the font and the color of the underline that marks each tab

This is for a new component

const TabNavigator = createMaterialTopTabNavigator(
  {
    Products: Results,
    Brands: Results,
    Categories: Results,
    UPC: Results,
    Tags: Results,
  },
  {
    tabBarOptions: {
      style: {
        backgroundColor: 'grey',
      },
      labelStyle: {
        fontSize: 9,
        margin: 0,
        padding: 0,
        fontFamily: 'Poppins-bold',
      },
    },
  }
)

I expect to change the color of the font and the color of the underline that marks each tab.

Answer 1

You can change the background color of font by adding activeTintColor and inactiveTintColor in style tabBarOptions.

for the indicator, use indicatorStyle as below.

tabBarOptions: {
  activeTintColor: "white", 
  inactiveTintColor: "blue", 

  indicatorStyle :{
        backgroundColor:'red'
  }

  style: {
    backgroundColor: 'grey', 
  },
  labelStyle: {
    fontSize: 9,
    margin: 0,
    padding: 0,
    fontFamily: 'Poppins-bold',
  },
}