callstack / callstack/react-native-pager-view

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

Open
#1,066 6 comments 0 reactions 0 assignees View on GitHub
wip
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.