React-native-tab-view: How to change default blue tab bar background and default yellow active tab underline?

[ManigandanRaamanathan]

Current behaviour

How to change default blue tab bar background and default yellow active tab underline?

Code sample

Following sample from readme

[raedhellal]

To change the default tab bar you need to custumize a tabBar and pass it to the prop renderTabbar.

An example to explain more is as follow i prefer to do it in seperate function :

renderTabBar(props) {
return ( style={{backgroundColor: '#FFFFFF', elevation: 0, borderColor: '#000000', borderBottomWidth: 1, height:50}}
labelStyle={{color: 'black', fontSize: 18, fontWeight: 'bold'}}
{...props}
indicatorStyle={{backgroundColor: '#e65970', height: 2.5}}
/>
);
}

Then pass it to the TabView:

TabView renderTabBar={this.renderTabBar}

And about the Indicator Style in the renderTabBar you can find a prop called indicatorStyle do what you want to that indicator.

Good Luck :) .

[ManigandanRaamanathan]

Thanks. Found solution already from the example in repo.

[raindev32]

how to set title tabs to normal without uppercase ?

[alisherakb]

how to set title tabs to normal without uppercase ?

textTransform: 'capitalize'

[simonasdev]

it's funny because textTransform: 'none' is the single one that doesn't work :D

[Nurul26]

how to change active tab fontcolor to black and inactive tab fontcolor to grey?

[AliShan3810]

Thanks. Found solution already from the example in repo.

can you send me the solution