The renderLabel prop on TabBar is not working.

[leonid-br]

Hello everyone!

I’m using package versions

• "react-native": "0.79.2",
• "react": "19.0.0",
• "react-dom": "19.0.0",
• "react-native-pager-view": "^6.7.1",
• "react-native-tab-view": "^4.1.0",

const renderTabBar = (props: any) => ( <TabBar {...props} scrollEnabled indicatorStyle={{ backgroundColor: color.mainColor }} style={{ backgroundColor: 'white' }} tabStyle={{ width: 'auto', paddingHorizontal: 10 }} activeColor={color.mainColor} inactiveColor="#9ca3af" renderLabel={({ route, focused }) => ( <Text style={{ color: focused ? color.mainColor : '#9ca3af', fontWeight: focused ? 'bold' : 'normal', fontSize: 14, }} > {route.title} </Text> )} /> );

and

<TabView navigationState={{ index, routes }} renderScene={renderScene} onIndexChange={setIndex} initialLayout={{ width: layout.width }} renderTabBar={renderTabBar} />

But there are no style changes to the tabs.
If I remove activeColor={color.mainColor} and inactiveColor="#9ca3af",
the tab text color becomes white and blends into the background.

I also tried using the renderTab prop, but the result was the same.

I attempted to create a custom component using renderTabBarItem,
but in that case, the tab scroll and the bottom active indicator disappear.

Has anyone experienced this kind of behavior?

I’d be grateful for any information.

[saadlatif75]

any update?