React-native-tab-view: How to customize active and inactive label color?

[jungleyu]

Currently I can just set label color, when I change the tab, it just change the opacity. But what can I do if I want to set different label color for active and inactive label.
What I do now is just using renderLabel to decide active label and inactive label style.

[DaKaZ]

That is how this library works. If you want something besides the default, you would need to create a custom renderLabel method and pass that in. In order to help determine which label is active, I just submitted this PR (for a different issue) but it should help on this issue too: https://github.com/react-native-community/react-native-tab-view/pull/589

[C0dekid]

Would be really helpfull if you can add these in a prop like

<TabBar
...
activeColor={'Your color'}
inactiveColor={'custom color'}
inactiveOpacity={0.5}
activeOpacity={1.0}
/>

[t3chnoboy]

@C0dekid see https://github.com/react-native-community/react-native-tab-view/pull/520 https://github.com/react-native-community/react-native-tab-view/pull/379 https://github.com/react-native-community/react-native-tab-view/pull/481 😔

[DaKaZ]

@t3chnoboy I think we can solve this in #589 - I am engaging with @satya164 to ensure that the approach is to his liking so that it can be merged when complete. Please jump on that thread if you have input.

[C0dekid]

@DaKaZ Hope it will be released in the next update soon!

[satya164]

Hey, I just released a new alpha 2.0.0-alpha.0 of the library. It's rewritten using react-native-gesture-handler and react-native-reanimated addresses a many platform specific bugs and performance problems. The documentation is updated as well.

Please try the new version and see if it addresses your issue. If not, please open a new issue following the issue template.

[Base29]

Hello guys the activeColor and inactiveColor props are not working for me. I am trying to us this for the label text. Please advise.

RN version = 0.59.10
RN Tab View version = 2.10.0

what could be the issue ?

[LaszloDev]

Same issue as @Base29.
<TabBar inactiveColor='green' /> does have no effect.

[email protected]
react-native > expo v34

[flikQ]

this still appears to be an issue.

UPDATE: Seems it does work, you just need to make sure you don't have a color set in labelStyle={{}} as that will take priority. Hope this helps.