PageView's onPageScroll gives wrong position on iPhone 12+

Question

Using "react-native-pager-view": "^6.1.2" package in ReactNative.

I have the same bug as here.

https://github.com/callstack/react-native-pager-view/issues/503

I'm trying PagerView with the code pasted below, but when I swipe to move the page, e.nativeEvent.position is different from the actual page index.

import PagerView, { PagerViewOnPageScrollEvent, PagerViewOnPageSelectedEvent } from 'react-native-pager-view';
import Modal from 'react-native-modal';

const onPageScroll = useCallback((e: PagerViewOnPageScrollEvent) => onPageScrollPagerView(e, setCurrentTabIndex), []);

const onPageScrollPagerView = (
  e: PagerViewOnPageScrollEvent,
  setCurrentTabIndex: React.Dispatch<React.SetStateAction<number>>,
) => {
  console.log(`onPageScroll position = ${e.nativeEvent.position}`);
  setCurrentTabIndex(e.nativeEvent.position);
};

return (
    <Modal isVisible={isVisible}>
      <SafeAreaView>
        <View>
          <PagerView ref={viewPager} initialPage={0} onPageScroll={onPageScroll} onPageSelected={onPageSelected}>
        　　　　　　{list.map((item) => (
          　　　　　<View key={item.id}>
            　　　　{item.content}
          　　　　　</View>
        　　　　　　))}
      　　　　　　　　</PagerView>
        </View>
      </SafeAreaView>
    </Modal> 
  );

This is the result obtained when scrolling to the first page. onPageScroll is called twice, and for some reason the wrong position is returned the second time.

And 0 is set to setCurrentTabIndex.

onPageScroll position = 1
onPageScroll position = 0

Is there any way to resolve this?

It may be related to what you write in <Modal></Modal> of 'react-native-modal'.

As also written here, this problem does not occur on iPhone11, but on iPhone12 and newer devices.

Answer 1

I didn't use 'react-native-modal', I used fullscreen modal. screenOptions={{ presentation: 'modal' }}