callstack / callstack/react-native-pager-view

Support synchronous onScroll events on the UI thread by using Reanimated

Aperta
#316 7 commenti 8 reazioni 0 assegnatari Vedi su GitHub
enhancement
Lingua principale
TypeScript
Stelle
3.4k
Fork
476
Merge medio
10g 21h
PR unite (30g)
2

Descrizione

## Describe the feature

Currently the `onPageScroll`, `onPageSelected` and `onPageScrollStateChanged` events are dispatched as bubbling events using the batched bridge. This is really slow and doesn't allow for any smooth (60 FPS) interpolations based on scroll state, such as smooth title changes etc.

I'm suggesting to support synchronous callbacks by using the Reanimated APIs (worklets on the UI thread), which shouldn't be too hard to implement and allow for perfectly smooth 60 FPS animations all without crossing threads and spamming the bridge (see [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler), they do the same thing with the `onGesture` event.)

## Motivation

* Way better Performance
* No Bridge-spam
* Allow reanimated worklet interpolations with 60 FPS

## Implementation

I wanted to do the same thing for a gyroscope library but haven't come around to actually implement it. I believe reanimated already does a lot of work for you, but I don't exactly know how this is going to work. I'll have to take a look myself, but it [looks like they also just have an `RCTEventDispatcher` set up](https://github.com/software-mansion/react-native-gesture-handler/blob/c2bd377e1fb3c780bb4bea59038b2cadf8ef5624/ios/RNGestureHandlerManager.m#L44), which then simply [sends those events](https://github.com/software-mansion/react-native-gesture-handler/blob/c2bd377e1fb3c780bb4bea59038b2cadf8ef5624/ios/RNGestureHandlerManager.m#L183-L191)... 🤔 So I think there are no native code changes required here, but we somehow need a hook similar to [the `useAnimatedGestureHandler` hook](https://github.com/software-mansion/react-native-reanimated/blob/a8d9720ee5312a43cc4e3beb02e70b2fc6a030ae/src/reanimated2/Hooks.ts#L631-L708).

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia confrontando la configurazione di RCTEventDispatcher di react-native-gesture-handler a cui si fa riferimento e l'invio degli eventi con useAnimatedGestureHandler di Reanimated in Hooks.ts. Traccia come vengono attualmente inviati onPageScroll, onPageSelected e onPageScrollStateChanged, quindi definisci il completamento intorno a callback sincroni sul thread UI che supportino un'interpolazione fluida dei worklet senza traffico sul bridge.

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

Valutazione

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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.