callstack / callstack/react-native-pager-view
[Discussion] setPage should not trigger onPageSelected event
- Vorherrschende Sprache
- TypeScript
- Sterne
- 3.4k
- Forks
- 476
- Ø Merge
- 10 T. 21 Std.
- Gemergte PRs (30 T.)
- 2
Beschreibung
# 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
Beitragsleitfaden
Rechercherichtung
Beginne damit, die Einstiegspunkte setPageWithoutAnimation und onPageSelected über die React-Native-, iOS- und Android-Implementierungen hinweg nachzuverfolgen. Reproduziere die gemeldete Rückkopplungsschleife und überprüfe anschließend, dass programmgesteuerte Seitenänderungen nicht mehr onPageSelected auslösen, während Wischgesten des Benutzers weiterhin den aktiven Index aktualisieren.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- android, ios, react-native, typescript
- Bereich
- mobile
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 35/100