[iOS] onPageSelected is not fired after upgrading to Expo 55

[valerykonst]

Environment

• Expo SDK: 55
• react-native 0.83.4
• Platform: iOS
• Library: react-native-pager-view 8.0.0
• Orientation: vertical

Description

After upgrading to Expo 55, PagerView with orientation="vertical" still scrolls on iOS, but onPageSelected is never fired.

On iOS:

• onPageScroll fires
• onPageScrollStateChanged fires
• the swipe visually completes
• but onPageSelected does not fire

On Android Emulator, the same code works correctly.

Reproducible Demo

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

export default function PagerViewTest() {
    const pagerRef = useRef<PagerView>(null);
    const [selectedPage, setSelectedPage] = useState<number | null>(null);
    const [scrollPage, setScrollPage] = useState<number | null>(null);
    const [scrollOffset, setScrollOffset] = useState<number | null>(null);
    const [scrollState, setScrollState] = useState<string>('unknown');

    return (
        <View style={styles.container}>
            <View style={styles.topPanel}>
                <Text style={styles.title}>PagerView test</Text>
                <Text style={styles.text}>selectedPage: {String(selectedPage)}</Text>
                <Text style={styles.text}>scrollPage: {String(scrollPage)}</Text>
                <Text style={styles.text}>scrollOffset: {scrollOffset?.toFixed(6) ?? 'null'}</Text>
                <Text style={styles.text}>scrollState: {scrollState}</Text>
            </View>

            <PagerView
                ref={pagerRef}
                style={styles.pager}
                initialPage={0}
                orientation="vertical"
                offscreenPageLimit={2}
                onPageSelected={(e) => {
                    const page = e.nativeEvent.position;
                    console.log('TEST onPageSelected =>', page);
                    setSelectedPage(page);
                }}
                onPageScroll={(e) => {
                    const page = e.nativeEvent.position;
                    const offset = e.nativeEvent.offset;
                    console.log('TEST onPageScroll =>', page, offset);
                    setScrollPage(page);
                    setScrollOffset(offset);
                }}
                onPageScrollStateChanged={(e) => {
                    const state = e.nativeEvent.pageScrollState;
                    console.log('TEST onPageScrollStateChanged =>', state);
                    setScrollState(state);
                }}
            >
                <View key="0" style={[styles.page, styles.page1]}>
                    <Text style={styles.pageText}>Page 0</Text>
                </View>

                <View key="1" style={[styles.page, styles.page2]}>
                    <Text style={styles.pageText}>Page 1</Text>
                </View>

                <View key="2" style={[styles.page, styles.page3]}>
                    <Text style={styles.pageText}>Page 2</Text>
                </View>

                <View key="3" style={[styles.page, styles.page4]}>
                    <Text style={styles.pageText}>Page 3</Text>
                </View>
            </PagerView>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#111',
    },
    topPanel: {
        paddingHorizontal: 16,
        paddingTop: 12,
        paddingBottom: 8,
        backgroundColor: '#1c1c1c',
    },
    title: {
        color: 'white',
        fontSize: 20,
        fontWeight: '700',
        marginBottom: 8,
    },
    text: {
        color: 'white',
        fontSize: 14,
        marginBottom: 4,
    },
    pager: {
        flex: 1,
    },
    page: {
        width: '100%',
        height: '100%',
        alignItems: 'center',
        justifyContent: 'center',
    },
    page1: {
        backgroundColor: '#7c3aed',
    },
    page2: {
        backgroundColor: '#2563eb',
    },
    page3: {
        backgroundColor: '#059669',
    },
    page4: {
        backgroundColor: '#dc2626',
    },
    pageText: {
        color: 'white',
        fontSize: 32,
        fontWeight: '700',
    },
});

[MrRefactor]

Please recheck with #1070

[valerykonst]

Please recheck with #1070

Tested commit 8038e88 in my Expo app on iOS.
onPageSelected now fires correctly in vertical mode.

[MrRefactor]

thanks @valerykonst - I will release it with next version.

[hungtd97]

@MrRefactor Can you merge the PR soon?
Issue persists on expo 56

[finkpong]

the final merged fix is #1094
but only in 9.0.2.. hope it can be backported to 8.x, because

expo 56 pins react-native-pager-view to 8.0.1
https://github.com/expo/expo/blob/sdk-56/packages/expo/bundledNativeModules.json#L108

even expo 57 is not yet in v9 (8.0.2)
https://github.com/expo/expo/blob/sdk-57/packages/expo/bundledNativeModules.json#L109

[finkpong]

btw, nvm the backport to v8, the fix in 9.0.2 still doesn't work for vertical PagerView.. i tested with OP's PagerViewTest, the rendered selectedPage is always null.

Here's another minimal example that uses buttons for pagination, it demonstrates a particular issue going back to page 0:

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

export function TestPager() {
  const ref = useRef<PagerView>(null);
  const [page, setPage] = useState(0);
  return (
    <View style={{ flex: 1, paddingBottom: 50 }}>
      <PagerView
        ref={ref}
        orientation={'vertical'}
        scrollEnabled={true}
        style={{ flex: 1 }}
        initialPage={0}
        onPageSelected={(e) => setPage(e.nativeEvent.position)}
      >
        <View key="0" style={{ backgroundColor: 'red' }}>
          <Text style={{ fontSize: 100 }}>0</Text>
        </View>
        <View key="1" style={{ backgroundColor: 'blue' }}>
          <Text style={{ fontSize: 100 }}>1</Text>
        </View>
        <View key="2" style={{ backgroundColor: 'green' }}>
          <Text style={{ fontSize: 100 }}>2</Text>
        </View>
      </PagerView>
      <Button
        title="prev"
        onPress={() => ref.current?.setPage(Math.max(0, page - 1))}
      />
      <Button
        title="next"
        onPress={() => ref.current?.setPage(Math.min(2, page + 1))}
      />
    </View>
  );
}

1. try this:
   click 'next' to page from 0 -> 1 -> 2 -- runs fine
   click 'prev' to page from 2 -> 1 -- runs fine
   click 'prev' to page from 1 -> 0 -- does not work, stuck at 1 (blue), even if you click many times
   click 'next' to page from 1 -> 2 -- runs fine
   click 'prev' to page from 2 -> 1 -- runs fine
   click 'prev' to page from 1 -> 0 -- does not work, stuck at 1 (blue)
2. then comment out orientation={'vertical'} and then run above steps again, paging to page 0 works fine in horizontal orientation

this is running
"react-native-pager-view": "9.0.2",
"expo": "~56.0.20",
"react": "19.2.3",
"react-native": "0.85.3",