callstack / callstack/react-native-pager-view
onPageSelected and onScroll gives wrong position when animation wasn't completed on previous page on iPhone 12
- Dominant language
- TypeScript
- Stars
- 3.4k
- Forks
- 476
- Avg merge
- 10d 21h
- Merged PRs (30d)
- 2
Description
## Environment
```
"react-native": "0.63.4",
"react": "16.14.0",
"react-native-pager-view": "^5.4.9"
```
iOS 15.2
## Description
onPageSelected and onScroll handlers giving wrong index on iPhone 12 simulator (as well as on real device too), but works on iPhone 11 (and older devices) correct. See video below (demonstrates apps on iPhone 11 and iPhone 12)
## Reproducible Demo
```
{children}
```
```
const onPageSelected = useCallback(
(e) => {
const pageIdx = e.nativeEvent.position;
console.log(pageIdx, 'PAGE IDX')
setActivePage(pageIdx);
onItemActive(pageIdx);
},
[onItemActive],
);
```
Video 1 (correct behaviour, iPhone 11 iOS 15.2, after animation is not finished onPageSelected provides correct page after gesture completed)
https://user-images.githubusercontent.com/9297785/149826584-b309417c-252e-4c55-b2c5-302dc1bb90f2.mp4
Video 2 (incorrect behaviour, iPhone 12 iOS 15.2, after animation is not finished onPageSelected provides previous page number after gesture completed)
https://user-images.githubusercontent.com/9297785/149826806-cbab3e2d-93f5-4ebf-a919-8e4b8d75f471.mp4
Contributor guide
Research direction
Start with the PagerView usage and the onPageSelected/onScroll handlers shown in the issue, then reproduce the interrupted vertical swipe on an iPhone 12 running iOS 15.2 and compare it with an iPhone 11. Done means the event reports the completed destination page rather than the previous page after an unfinished animation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- ios, react, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100