react-navigation / react-navigation/react-navigation
Trying to change the tabBarItemStyle of the active tab not working
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 24.5k
- Forks
- 5.1k
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 18
Description
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
- Android
- iOS
- Web
- Windows
- MacOS
Packages
- @react-navigation/bottom-tabs
- @react-navigation/drawer
- @react-navigation/material-top-tabs
- @react-navigation/stack
- @react-navigation/native-stack
- react-native-tab-view
Environment
- 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 |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the linked Expo Snack and reproducing the tabPress styling behavior with @react-navigation/material-top-tabs. Trace the related behavior through react-native-tab-view, then verify that only the selected tab keeps the active style while other tabs retain the inactive style on Android, iOS, and web.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native
- Domain
- frontend, mobile-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100