active tab gets out of sync with rendered scene when routes change

[megantaylor]

Current behavior

when routes array changes, the indicator and label state in the tab bar get out of sync with the scene being rendered. it looks like the tab bar renders the tab at index 0 as active (with active label and indicator at that position), even though the scene being rendered is at a different index.

https://user-images.githubusercontent.com/373062/145267073-e6ea9f14-5c69-4a85-9bc5-62aa53a2b7df.mov

Expected behavior

when routes change, the rendered scene and active tab ui (indicator and label state) should stay in sync, that is to say, the tab for the rendered scene should have the active state ui and the tab bar indicator should be in the correct position.

Reproduction

https://snack.expo.dev/@reachvote/react-native-tab-view-dynamic-tabs-bug

Platform

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

Environment

package	version
react-native-tab-view	3.1.1
react-native-pager-view	5.4.6
react-native	0.64.3
expo	43.0.2
node	14.17.1
yarn	1.22.10

[github-actions[bot]]

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

• react-native-pager-view (found: 5.4.6, latest: 5.4.9)
• react-native (found: 0.64.3, latest: 0.66.3)
• expo (found: 43.0.2, latest: 43.0.4)

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

[megantaylor]

I was also able to reproduce this bug in the example app from this repo (thats what the video is of)

[megantaylor]

i updated expo and react-native-pager-view in my app and am still seeing the same bad behavior

one thing i have tried is adding a key to TabView like

<TabView
key={JSON.stringify(routes)}
...props
/>

but that makes the whole app crash when routes change

[IdealSystemsMCP]

We're experiencing the same issue when dynamically removing tabs (using @react-navigation/material-top-tabs)

[Knight704]

if you are using 3+ version then you are using react-native-view-pager open PagerViewAdapter.tsx from this lib and try to adjust this function (see position and offset values are reset to selected page)

onPageSelected={(e) => {
          const index = e.nativeEvent.position;
          indexRef.current = index;
          position.setValue(index);
          offset.setValue(0);
          onIndexChange(index);
        }}

Here I posted PR for this https://github.com/satya164/react-native-tab-view/pull/1312