Change default grey highlight tab color

[JakeHadley]

Is there a way to change the style of the oval highlight shape on the tab label and icon? I can change the text color with activeTintColor, and the entire tab navigator color with style: { backgroundColor: 'lightblue', }, inactiveTintColor and tintColor don't appear to have any effect on the FlexibleTabBarComponent.

Great job with this by the way!

Edit: If you could post what you did for the styling in your demo, that would be very helpful!

[algokano]

same issue How can I make that ? Thanks in advance for the answer

[alimek]

is this what you mean ?

 tabBarComponent: withCustomStyle({
     backgroundViewStyle: {
        ...yourStyle?
      }
    })(FlexibleTabBarComponent),

if you would like to adjust your inactive icon you can do for example with FontAwesome5 from VectorIcons, :

 YourComponent.navigationOptions = {
  tabBarIcon: ({ focused }: { focused: boolean }) => (
    <FontAwesome5 name="comment-alt" style={{ fontSize: 20, color: focused ? 'blue' : 'black' }} />
  ),
};

[algokano]

If you give "backgroundColor" to "backgroundViewStyle" then all active tab colors(backgroundColor, textColor, iconColor) will be the same as given. And I need there would be different colors for each of them. I have made some changes in "FlexibleTabBarComponent.js" for this reason:

1. 61-line (added): var activeBackgroundColor = _a.activeBackgroundColor
2. 82-line (modified): <components_1.BackgroundContainer style={[backgroundViewStyle, {backgroundColor: activeBackgroundColor || '#505c74'}]}/>

Then I use as following: navigationOptions: ({navigation}) => ({ tabBarLabel: 'Проекты', tabBarIcon: ({tintColor, focused}) => { return ( <ProjectsIcon color={focused ? '#FF7052' : '#505c74'}/> ) }, tabBarOptions: { activeTintColor: '#FF7052', activeBackgroundColor: '#FFF0ED' } })

[felipemarques8]

Hello @Sarvarr @alimek, I have a problem my icons do not appear my code looks like this: https://gist.github.com/felipemarques8/eaf04e3a9960e6ee38289c0482eb69ec#file-tabbar