Trying to change the tabBarItemStyle of the active tab not working

[asnaseer]

Current behavior

I am listening to the tabPress event on each tab in order to keep track of the active one. I use this to set an appropriate set of styles for the active/inactive tabs. I have set it up so that the active tab has a cyan background with a red border and the inactive ones have a white background with a black border.

When I click on a tab, both switch to inactive style and then, after about a second, both switch to the active style.

Expected behavior

I was expecting only the active tab to have active style. The non-active one should have the inactive style.

Reproduction

https://snack.expo.dev/@anjum-birda/031042

Platform

• [X] Android
• [X] iOS
• [X] Web
• [ ] Windows
• [ ] MacOS

Packages

• [ ] @react-navigation/bottom-tabs
• [ ] @react-navigation/drawer
• [X] @react-navigation/material-top-tabs
• [ ] @react-navigation/stack
• [ ] @react-navigation/native-stack
• [ ] react-native-tab-view

Environment

• [x] I've removed the packages that I don't use

package	version
@react-navigation/native	6.0.8
@react-navigation/material-top-tabs	6.6.6
@react-navigation/stack	6.0.7
react-native-safe-area-context	4.5.0
react-native-screens	~3.20.0
react-native-gesture-handler	~2.9.0
react-native-reanimated	^2.14.4
react-native-tab-view	^3.3.0
react-native-pager-view	6.1.2
react-native	0.71.6
expo	^48.0.0
node	16.20.0
yarn	1.22.19

[github-actions[bot]]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/native (found: 6.0.8, latest: 6.1.10)
• @react-navigation/stack (found: 6.0.7, latest: 6.3.21)
• react-native-tab-view (found: 3.3.0, latest: 3.5.2)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[asnaseer]

• 3.5.2

I tried using the latest versions you quoted above and still see the same issue - see here: https://snack.expo.dev/@anjum-birda/12bf14

[khagesh]

You can create a custom Tab bar and get focused tab using state. Here is an example https://snack.expo.dev/@khageshfoodapp/material-bottom-tabs-navigator-|-react-navigation

OR

You can set "tabBarItemStyle" and "tabBarStyle" for common styles on Tab.Navigator. And then set tabBarActiveTintColor and tabBarInactiveTintColor for changing Text and icon colors based on active tab

[asnaseer]

You can create a custom Tab bar and get focused tab using state. Here is an example https://snack.expo.dev/@khageshfoodapp/material-bottom-tabs-navigator-|-react-navigation

OR

You can set "tabBarItemStyle" and "tabBarStyle" for common styles on Tab.Navigator. And then set tabBarActiveTintColor and tabBarInactiveTintColor for changing Text and icon colors based on active tab

Thanks for the workaround - it would be nice though if @react-navigation/material-top-tabs supported this out-of-the-box.