callstack / callstack/react-native-pager-view

[Discussion] setPage should not trigger onPageSelected event

Abierto
#129 25 comentarios 11 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
TypeScript
Estrellas
3.4k
Forks
476
Merge medio
10 d 21 h
PR fusionados (30 d)
2

Descripción

# 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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Empieza rastreando los puntos de entrada setPageWithoutAnimation y onPageSelected en las implementaciones de React Native, iOS y Android. Reproduce el bucle de realimentación informado y verifica después que los cambios de página programáticos ya no emitan onPageSelected, mientras que los deslizamientos del usuario sigan actualizando el índice activo.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
android, ios, react-native, typescript
Área
mobile
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.