callstack / callstack/react-native-pager-view

[Discussion] setPage should not trigger onPageSelected event

Open
#129 25 comments 11 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
3.4k
Forks
476
Avg merge
10d 21h
Merged PRs (30d)
2

Description

# Bug

We are storing and updating the active index of the ViewPager in Redux. When the user swipes to another page the `onPageSelected` event is correctly triggered and the active index will be updated like that:

```
setActiveIndex(nativeEvent.position)}
style={[styles.pager, { width }]}
initialPage={0}
>
```

But we also want to set the page programatically when the active index is changed by some other component. To achieve this we are using an useEffect hook like this:

```
useEffect(() => {
pager.current && pager.current.setPageWithoutAnimation(activeIndex);
}, [activeIndex]);
```

Unfortunately calling `setPageWithoutAnimation` triggers another `onPageSelected` event which updates the active index which triggers the `useEffect` hook and so on.

We think that there should be no `onPageSelected` event triggered when setting the page programatically.

## Environment info

React native info output:

```bash
System:
OS: macOS Mojave 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Memory: 5.96 GB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
Yarn: 1.19.1 - /usr/local/bin/yarn
npm: 6.13.1 - ~/.nvm/versions/node/v10.16.3/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
Android SDK:
API Levels: 21, 22, 23, 24, 25, 26, 27, 28
Build Tools: 23.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.1, 28.0.3, 29.0.2
System Images: android-19 | Google APIs Intel x86 Atom, android-21 | Google APIs Intel x86 Atom_64, android-22 | Intel x86 Atom_64, android-22 | Google APIs Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-26 | Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
Android NDK: 20.1.5948944
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.6010548
Xcode: 11.3/11C29 - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.5 => 0.61.5
```

Library version: 3.3.0

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.