[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.