Description
Current behavior
TabView's tab index is not a fully controlled prop. If, for example, onIndexChange is called with a value of 2, but I change the index to a value of 0, the tab view will still go to tab 2 but at some level it thinks it's on tab 0. See the attached, somewhat contrived example.
This is a classic case of duplicated state.
Expected behavior
I would expect the index prop to be fully controlled by the parent component.
Alternatively, I would expect the documentation to clearly state the the TabView user needs to keep the state of the index in sync with the internal state, by always setting its state to the value passed by onIndexChange.
From the current docs:
TabView is a controlled component, which means the index needs to be updated via the onIndexChange callback.
onIndexChange (required)
Callback which is called on tab change, receives the index of the new tab as argument. The navigation state needs to be updated when it's called, otherwise the change is dropped.
Reproduction
https://snack.expo.dev/@igfraga/rude-bagel
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-native-tab-view | 3.5.1 |
| react-native-pager-view | 6.0.1 |
| react-native | 0.71.10 |
| react-navigation | 6.1.6 |
| node | 18.16.0 |
| yarn | 1.22.19 |