onPageSelected and onScroll gives wrong position when animation wasn't completed on previous page on iPhone 12

[Vadko]

trafficstars

Environment

"react-native": "0.63.4",
"react": "16.14.0",
"react-native-pager-view": "^5.4.9"

iOS 15.2

Description

onPageSelected and onScroll handlers giving wrong index on iPhone 12 simulator (as well as on real device too), but works on iPhone 11 (and older devices) correct. See video below (demonstrates apps on iPhone 11 and iPhone 12)

Reproducible Demo

<PagerView
      transitionStyle={"scroll"}
      style={[styles.pager, isHidden && styles.hidden]}
      orientation="vertical"
      initialPage={0}
      onPageSelected={onPageSelected}
      offscreenPageLimit={PAGES_KEEPT_IN_MEMORY}
      ref={viewPagerRef}>
      {children}
    </PagerView>

const onPageSelected = useCallback(
    (e) => {
      const pageIdx = e.nativeEvent.position;
      console.log(pageIdx, 'PAGE IDX')
      setActivePage(pageIdx);
      onItemActive(pageIdx);
    },
    [onItemActive],
  );

Video 1 (correct behaviour, iPhone 11 iOS 15.2, after animation is not finished onPageSelected provides correct page after gesture completed) https://user-images.githubusercontent.com/9297785/149826584-b309417c-252e-4c55-b2c5-302dc1bb90f2.mp4

Video 2 (incorrect behaviour, iPhone 12 iOS 15.2, after animation is not finished onPageSelected provides previous page number after gesture completed) https://user-images.githubusercontent.com/9297785/149826806-cbab3e2d-93f5-4ebf-a919-8e4b8d75f471.mp4

[moxorama]

Confirm

[Deodes]

The same issue, any updates?

[Deodes]

Need to find a way to disable user interaction, during animation of setPage method

[yiearth]

same issue on iPhone 13 iOS 15.4

[yiearth]

this works for me initialPage from react-navigation params

  const [isInitialized, setIsInitialized] = useState<boolean>(false);

  const pageScrollHandler = usePagerScrollHandler({
    onPageScroll: (e: { offset: number; position: number }) => {
      'worklet';

      if (!isInitialized) {
        if (e.position === initialPage) runOnJS(setIsInitialized)(true);
        return;
      }
      
      console.log(e.offset, e.position)
    },
  });

  // ...
  return (
    <AnimatedPager
       initialPage={initialPage}
       onPageScroll={pageScrollHandler}
    />
  )

[minisk93]

No updates on this issue?