React-native-pager-view setPage() function does not work 100% of the time on iOS

Question

I have a bottom page that contains a PagerView with 4 pages in it. I've got 'Next' and a 'Previous' buttons at the bottom of the page that calls the goToNextPage and goToPreviousPage functions. For some reason on iOS, this only works some of the time. Other times, it gets hung up on one of the pages. I added the console logs and the correct screen index is always getting printed. It seems to just not be setting the page correctly. There doesn't seem to be anything different I need to do to reproduce this, it just randomly occurs. (react-native-pager-view: "6.2.3")

Here are the page changing functions:

    const pagerRef = useRef(null);
    const [ currentPage, setCurrentPage ] = useState(0)

      const goToNextPage = () => {
    //console.log("Pager ref: ", pagerRef.current)
      const currentPageIndex = currentPage;
      const nextPageIndex = currentPageIndex + 1
      if (currentPageIndex < 3) {  
        console.log("Current page index: ", currentPageIndex)
        console.log("Going to page index: ", nextPageIndex)
        setCurrentPage(nextPageIndex);
        
      }
      pagerRef.current?.setPage(nextPageIndex);
    
    
      };
      
      const goToPreviousPage = () => {
      const currentPageIndex = currentPage;
      const previousPageIndex = currentPageIndex - 1;
      if (currentPageIndex > 0) {
        console.log("Current page index: ", currentPageIndex)
        console.log("Going to page index: ", previousPageIndex)
        setCurrentPage(previousPageIndex);
      }
      pagerRef.current?.setPage(previousPageIndex);
      };

And here's the pager view itself. The scrollEnabled also stops functioning when the pages get stuck. I tried setting it to false but that didn't help.

         <PagerView
            style={styles.pager}
            ref={pagerRef}             
            initialPage={0}             
            scrollEnabled={true}
          >             
            <View key="1">                 
                <Text>Page 1</Text>             
            </View>             
            <View key="2">                 
                <Text>Page 2</Text>             
            </View>             
            <View key="3">                 
                <Text>Page 3</Text>             
            </View>             
            <View key="4">                 
                <Text>Page 4</Text>             
            </View>           
            </PagerView>

I also tried updating the pagerRef with a simple useEffect which just made the page changes slower while the issue still persisted:

    useEffect(() => {pagerRef.current?.setPage(currentPage)}, [currentPage])

Thanks!

--update. Not sure if this will help at all. But its not the scrolling itself that stops working. I had a couple components as my pages and they become unresponsive as well. It seems the entire PagerView component just becomes unresponsive. This issue still occurred when I removed these custom components and used the View components as shown above.

Answer 1

I had the same issue in my project (setPage not working 100% & onPageSelected not working anymore).

You can try todo :

requestAnimationFrame(() => refPagerView.current?.setPage(index));

It's a known issue of pager-view-react-native.

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