callstack
onPageSelected is triggering with e.nativeEvent.position==0 after leaving tabview
Environment
Android V15 only, iOS not affected
React Native 0.74.5 "react-native-pager-view": "~6.4.1", "react-native-tab-view": "~3.5.2", "@react-navigation/stack": "~6.4.1", "@react-navigation/material-top-tabs": "~6.6.14",
Description
I'm using @react-navigation/material-top-tabs. When I navigate to a view that's not part of the tab navigator, but still in a stack, it triggers a _onPageSelected originating from react-native-pager-view that causes the navigation to navigate away from the current view and to the first tab of the pager.
Note, it might be triggering _onPageScrollStateChanged also? The RN debugger is finicky and sometimes it was one or the other.
A detailed description is provided here with some debugging.
Reproducible Demo
https://snack.expo.dev/@phazei/react-native-material-tab-bug?platform=android
On android, click the second tab, then click the link on the second tab and you can see it blink to the hello screen, and then be forced back to tab 1.
This was the minimal example, but in production, it actually lets it get to the hello screen, but then clicking another navigation link that's a sibling to hello, forces it back to tab 1. It's caused by the same _onPageSelected or _onPageScrollStateChanged.
Hi! I am also looking for a fix or a workaround to this problem, but for the react-native-pager-view v7.0.0-rc.0.
Hey, looking into that.
Hi! I am also looking for a fix or a workaround to this problem, but for the react-native-pager-view v7.0.0-rc.0.
We wont support version 7 anymore.
you may try the code following ` const scrolledRef = useRef(false);
const handlePageSelected = useCallback(() => { if (!scrolledRef.current) return; scrolledRef.current = false; // your operation });
return ( <PagerView onPageSelected={handlePageSelected} onPageScroll={() => { scrolledRef.current = true; }}
); `
just filter it by watching page scroll
const scrolledRef = useRef(false);
const handlePageSelected = useCallback(() => {
if (!scrolledRef.current) return;
scrolledRef.current = false;
// your operation
});
return (
<PagerView
onPageSelected={handlePageSelected}
onPageScroll={() => {
scrolledRef.current = true;
}}
);