callstack / callstack/react-native-pager-view

How to make ViewPager be more aggressive in responding to horizontal gesture when nested inside a vertical ScrollView?

Abierto
#450 13 comentarios 1 reacción 0 asignados Ver en GitHub
question
Lenguaje dominante
TypeScript
Estrellas
3.4k
Forks
476
Merge medio
10 d 21 h
PR fusionados (30 d)
2

Descripción

Hi everyone,

Users are reporting that it is difficult to use the ViewPager to successfully scroll left and right between images, since the ScrollView that the ViewPager is nested in seems to grab the event more than it should.

[Example](https://photos.google.com/share/AF1QipM8vQJTpFJkYNWk4H2DttKGoPp_h1GQOWglxDdaV-PqukyPk1S1nOE3NjHw_af9HQ/photo/AF1QipOxZRQTf5imKOZqPpwqqdnPqSZkyO74F8zx02bN?key=NFJVY3ZlWFdWeXRJODFhQTlISGJrU2RIR3RZN3RR)

Indeed, I compared my app to Google Maps which has a very similar UI: A horizontally scrollable set of images inside a vertically scrolling parent view. In Google Maps, I can move my finger at 45 degrees to either side, and the horizontal images view takes the event. In my app, moving my finger 45 degrees is picked up by the ScrollView and the entire page begins scrolling up and down.

Here, the purple arrows are what is handled by both apps successfully. The blue arrows are what is handled successfully by Google Maps but not by ScrollView/ViewPager. In Google Maps, the result is a horizontal scroll, in my app the result is a vertical scroll - and angry users.

I have looked into the props and found: `ViewPager.onStartShouldSetResponder` and `ViewPager.onMoveShouldSetResponderCapture`. I tried providing a function that always returns true for both, but got no effect in my app. I also tried the same props but returning false for the ScrollView. Still nothing. I also tried `ScrollView.disableScrollViewPanResponder`, although I'm not really sure what this does.

Somewhat at a loss here, can anyone help?

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con el anidamiento reportado de ViewPager dentro de ScrollView y las props de responder mencionadas: ViewPager.onStartShouldSetResponder, ViewPager.onMoveShouldSetResponderCapture y ScrollView.disableScrollViewPanResponder. Reproduce el comportamiento del gesto diagonal del ejemplo enlazado y establece el manejo esperado de eventos horizontales frente a verticales antes de definir una solución.

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

Evaluación

Stack tecnológico
react-native
Área
mobile-dev
Tipo de issue
Error
Dificultad
5/5
Tiempo estimado
Más de una semana
Estado de actividad
Estancado
Claridad
Necesita aclaración
Aptitud para principiantes
20/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.