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

Vadko commented 2 years ago

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 commented 2 years ago

Confirm

Deodes commented 2 years ago

The same issue, any updates?

Deodes commented 2 years ago

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

yiearth commented 2 years ago

same issue on iPhone 13 iOS 15.4

yiearth commented 2 years ago

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 commented 1 year ago

No updates on this issue?

callstack / react-native-pager-view