callstack / callstack/react-native-pager-view
[Discussion] setPage should not trigger onPageSelected event
- 主要言語
- TypeScript
- スター
- 3.4k
- フォーク
- 476
- 平均マージ
- 10日 21時間
- マージ済み PR(30日)
- 2
説明
# 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
コントリビューションガイド
調査の方向性
まず、React Native、iOS、Android の各実装で setPageWithoutAnimation と onPageSelected のエントリポイントを追跡します。報告されたフィードバックループを再現し、その後、プログラムによるページ変更では onPageSelected が発火しなくなり、ユーザーのスワイプでは引き続きアクティブなインデックスが更新されることを確認します。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- android, ios, react-native, typescript
- 領域
- mobile
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100