callstack / callstack/react-native-pager-view

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

Aperta
#450 13 commenti 1 reazione 0 assegnatari Vedi su GitHub
question
Lingua principale
TypeScript
Stelle
3.4k
Fork
476
Merge medio
10g 21h
PR unite (30g)
2

Descrizione

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?

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con l'annidamento segnalato di ViewPager all'interno di ScrollView e con le props del responder menzionate: ViewPager.onStartShouldSetResponder, ViewPager.onMoveShouldSetResponderCapture e ScrollView.disableScrollViewPanResponder. Riproduci il comportamento del gesto diagonale dall'esempio collegato e stabilisci la gestione prevista degli eventi orizzontali rispetto a quelli verticali prima di definire una correzione.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
react-native
Ambito
mobile-dev
Tipo di issue
Bug
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Ferma
Chiarezza
Da chiarire
Idoneità per principianti
20/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.