callstack / callstack/react-native-pager-view
Support synchronous onScroll events on the UI thread by using Reanimated
- Langage dominant
- TypeScript
- Étoiles
- 3.4k
- Forks
- 476
- Merge moyen
- 10 j 21 h
- PR mergées (30 j)
- 2
Description
## 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).
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par comparer la configuration de RCTEventDispatcher de react-native-gesture-handler mentionnée et l’envoi des événements avec useAnimatedGestureHandler de Reanimated dans Hooks.ts. Suivez la manière dont onPageScroll, onPageSelected et onPageScrollStateChanged sont actuellement envoyés, puis définissez l’achèvement autour de callbacks synchrones sur le thread UI qui prennent en charge une interpolation fluide des worklets sans trafic via le bridge.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- react-native, typescript
- Domaine
- mobile
- Type d'issue
- Fonctionnalité
- Difficulté
- 5/5
- Temps estimé
- Plus d'une semaine
- Activité
- À l'abandon
- Clarté
- À clarifier
- Accessibilité débutants
- 25/100