React-native-tab-view: Tab page change stops working when re-navigating to previously mounted page

[diaraujo13]

Here is the problem:

https://www.youtube.com/watch?v=w5xDcPINP14

I tried the caveat at README but it not works.

Code snippet is here:

https://gist.github.com/diaraujo13/e0c42e004563e6ba51d011b0478db89f

[satya164]

I can't access the video. You've to publish it first

[diaraujo13]

Sorry for the wrong link, now its fixed

[satya164]

Thanks for the report. Do you happen to use latest React Native/Expo? @brentvatne found this issue with latest RN too.

[javamonn]

We're seeing a similar issue on [email protected] and react-native-navigation - the tab bar and swipe to change tabs stops working after re-navigating to a previously mounted screen containing this component. Our workaround is to watch the screen visibility and unmount and remount the component each time it enters into view, which is non-ideal.

For what its worth, I consistently get this error in the console around the breakage:

Attempted to transition from state `RESPONDER_INACTIVE_PRESS_IN` to `RESPONDER_ACTIVE_LONG_PRESS_IN`, which is not supported. This is most likely due to `Touchable.longPressDelayTimeout` not being cancelled.

I'm not sure if this is coming from react-native-tab-view or possibly the FlatList contained within it.

[satya164]

That's a React Native bug unfortunately https://github.com/facebook/react-native/issues/1693

You might not get in production at all though.

Regarding the bug, it's definitely a bug with ViewPagerAndroid. Worth filing a bug report in RN repo.

[javamonn]

Could that Error getting thrown trigger the ViewPagerAndroid / tab switching bug or unrelated you think? I remember seeing these break other things in the past.

[javamonn]

I wonder if this is the core issue: https://github.com/facebook/react-native/issues/13463

[satya164]

Related discussion https://github.com/expo/ex-navigation/issues/415

[kelset]

@satya164 any update on this? Is still happening with newer versions of the lib?

[satya164]

it's a bug with react-native's view pager, not this lib.

[kelset]

Got it. Was wondering if maybe it was fixed with newer versions of RN ( >0.43) but I guess is still there.

[iksent]

Got same bug with [email protected] and [email protected].

After pushing another screen from screen, which is the tab, then tabs clicking and swiping stopped working.

[satya164]

If you are facing the issue, try switching to the new experimental pager
https://github.com/react-native-community/react-native-tab-view#tabviewpagerexperimental-
https://github.com/react-native-community/react-native-tab-view/blob/master/example/src/NativeDriverExample.js

[sfratini]

So far it seems that using the experimental pager worked. I tried not to do that because it meant adding another library and also adding the HOC for react navigation but well...

[edgarbonillag]

Hi everyone,

The library 'react-native-tab-view' uses React Native's ViewPagerAndroid as default pager for Android and this component is not working well.

I've found an EASY SOLUTION that made my app run without any problem. I just had to tell the 'react-native-tab-view' to use the PagerScroll (which is the default for iOS and its based on RN's ScrollView) and that's it. To do that, you just import {PagerScroll} from 'react-native-tab-view' pass the following prop to the main TabView component:

<TabView
   ...
   renderPager={(props) => <PagerScroll {...props}/>}
   ...
/>

[satya164]

Hey, I just released a new alpha 2.0.0-alpha.0 of the library. It's rewritten using react-native-gesture-handler and react-native-reanimated addresses a many platform specific bugs and performance problems. The documentation is updated as well.

Please try the new version and see if it addresses your issue. If not, please open a new issue following the issue template.