Pages are not showing when user swipes as they get added

[adxzhang1]

Environment

"react-native": "0.75.4"
"react-native-pager-view": "^6.7.0"

Tested on iOS 18.2 device and simulator

Description

Use case is creating a "load more pages" behavior. Ex. Swiping tinder profiles. When user swipes to the last page, load more pages, and let the user continue swiping.

If user is swiping as new pages get added, the new pages will not get displayed. But logs are showing that they are still rendered.
Swiping back then swiping forth, the new pages show up.

Issue reproduces for portrait/landscape orientation & vertical/horizontal PagerView.

Screen.Recording.2025-01-27.at.5.29.58.PM.mov

Reproducible Demo

https://github.com/adxzhang1/react-native-pager-view/tree/swipe-issue

Note: It can take couple attempts to hit the issue. It occurs when swiping as the new pages get added.

import React, {useState} from 'react';
import {Text, View} from 'react-native';
import PagerView from 'react-native-pager-view';

function App(): React.JSX.Element {
  const [pageCount, setPageCount] = useState(1);
  const [swipingInProgress, setSwipingInProgress] = useState(false);
  const [loadInProgress, setLoadInProgress] = useState(false);

  const loadMoreItems = async () => {
    setLoadInProgress(true);
    await new Promise(resolve => setTimeout(resolve, 300));
    setPageCount(pageCount + 3);
    setLoadInProgress(false);
  };

  return (
    <View style={{flex: 1}}>
      <PagerView
        style={{flex: 1}}
        // orientation="vertical"
        onTouchStart={() => {
          setSwipingInProgress(true);
        }}
        onTouchEnd={() => {
          setSwipingInProgress(false);
        }}
        onPageSelected={e => {
          const index = e.nativeEvent.position;
          if (index >= pageCount - 1) {
            loadMoreItems();
          }
        }}>
        {Array.from({length: pageCount}).map((_, i) => {
          return (
            <View
              key={i}
              style={{
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
                backgroundColor: i % 2 === 0 ? 'blue' : 'red',
              }}>
              <Text>{`PAGE: ${i + 1} / ${pageCount}`}</Text>
              <Text>{`Swipe In Progress: ${swipingInProgress}`}</Text>
              <Text>{`Loading New Items: ${loadInProgress}`}</Text>
              {i === pageCount - 1 && (
                <>
                  <Text>{'LAST PAGE'}</Text>
                </>
              )}
            </View>
          );
        })}
      </PagerView>
    </View>
  );
}

export default App;