Tab bar does not show correct tab after being unmounted and remounted

[saty9]

Current behavior

https://user-images.githubusercontent.com/19638136/127634197-e403ef42-77d3-43b2-9011-60c8b368b503.mov

If you return a null in renderTabBar and then later start returning the tab bar component again it renders with the wrong tab selected

Expected behavior

The tab bar should always render with the correct tab selected

Reproduction

https://github.com/saty9/react-native-tab-view-issue-reproduction

Platform

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

Environment

package	version
react-native-tab-view	3.0.1
react-native-pager-view	5.4.0
react-native	0.64.2
expo	N/A
node	16.2.0
npm or yarn	1.22.10

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[github-actions[bot]]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[saty9]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

would be good to allow org repos as well as personal ones

[the-habu]

Having the same problem. I am using the tab view in a modal. When re-opening the modal, the initial index is wrong (not always, but often).

[Shahulul]

facing a similar issue only on android. Any solution material top bar issue#10101

[likeSo]

Same problem here

[karel-suchomel-ed]

Facing the same issue. After changing to a different tab e.g. index 3, unmounting, and resetting navigationState index back to 0, the newly mounted Tabbar displays the tab on index 3 as selected rather than 0.

[karel-suchomel-ed]

Facing the same issue. After changing to a different tab e.g. index 3, unmounting, and resetting navigationState index back to 0, the newly mounted Tabbar displays the tab on index 3 as selected rather than 0.

When I unmounted the TabBar I originally rendered a SkeletonPlaceholder instead of it and that seems to be the problem. The workaround that is not really pretty but works for me is after unmounting the original TabBar, I render another TabBar with altered navigationState and styles that make it look like a placeholder on the screen.

I have a CustomTabBar component, which I pass to renderTabBar in TabView, and in that component a conditionally swap the 2 TabBars and it seems to work.