callstack / callstack/react-native-pager-view
[iOS] onPageSelected is not fired after upgrading to Expo 55
- Dominant language
- TypeScript
- Stars
- 3.4k
- Forks
- 476
- Avg merge
- 10d 21h
- Merged PRs (30d)
- 2
Description
## 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(null);
const [selectedPage, setSelectedPage] = useState(null);
const [scrollPage, setScrollPage] = useState(null);
const [scrollOffset, setScrollOffset] = useState(null);
const [scrollState, setScrollState] = useState('unknown');
return (
PagerView test
selectedPage: {String(selectedPage)}
scrollPage: {String(scrollPage)}
scrollOffset: {scrollOffset?.toFixed(6) ?? 'null'}
scrollState: {scrollState}
{
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);
}}
>
Page 0
Page 1
Page 2
Page 3
);
}
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',
},
});
```
Contributor guide
Assessment
This issue has not been assessed yet.