LabelStyle TabBar

[DaylAppReactNative]

Hi,

I'm trying to change the color of the TabBar text, I tried different styles props including this one :

renderTabBar={props => <MaterialTabBar {...props} labelStyle={{color:"white"}} />}

but for some reason it changes back to black as soon as it finished rendering.

Any advice?

Thank you :)

[dearlk]

hi, I too not able to change any style for tab bar item used all style properties...

TabBarComponent={(props) => <MaterialTabBar {...props} scrollEnabled={true} activeColor="red" inactiveColor="yellow" inactiveOpacity={0.3} labelStyle={{fontSize: 6}} tabStyle={{fontSize: 6}} style={{fontSize: 6}} />}

[hazirmagron]

Did you guys manage to resolve this? I'm having the same issues right now. @dearlk @DaylAppReactNative

[bpeck81]

I'm having this issue. Is this repo maintained?

[andreialecu]

Cannot look into this without a repro.

Try memoizing renderTabBar. The following works in a project I'm working on:

  const renderTabBar = useCallback(
    (props: TabBarProps) => {
      return (
        <MaterialTabBar
          {...props}
          style={tabBarStyle}
          labelStyle={labelStyle}
          indicatorStyle={indicatorStyle}
          activeColor={colors.text}
          inactiveColor={colors.text}
          scrollEnabled
          keepActiveTabCentered
        />
      );
    },
    [colors.text, indicatorStyle, labelStyle, tabBarStyle],
  );

[ipoogleduck]

This is still an issue for me, even when using memoization as you suggest @andreialecu Here's what I'm doing:

renderTabBar={(props: any) => <MaterialTabBar {...props}
              labelStyle={{ color: 'pink' }}
/>}

The color does not stay pink when switching tabs, it just goes back to the default black color

[ipoogleduck]

Ah I see, activeColor and inactiveColor need to be overridden on the MaterialTabBar