callstack / callstack/react-native-pager-view
Support synchronous onScroll events on the UI thread by using Reanimated
- Lenguaje dominante
- TypeScript
- Estrellas
- 3.4k
- Forks
- 476
- Merge medio
- 10 d 21 h
- PR fusionados (30 d)
- 2
Descripción
## 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).
Guía de contribución
Línea de trabajo
Comienza comparando la configuración de RCTEventDispatcher de react-native-gesture-handler a la que se hace referencia y el envío de eventos con useAnimatedGestureHandler de Reanimated en Hooks.ts. Traza cómo se envían actualmente onPageScroll, onPageSelected y onPageScrollStateChanged, y define la finalización en torno a callbacks síncronos en el hilo de UI que admitan una interpolación fluida de worklets sin tráfico por el bridge.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- react-native, typescript
- Área
- mobile
- Tipo de issue
- Nueva funcionalidad
- Dificultad
- 5/5
- Tiempo estimado
- Más de una semana
- Estado de actividad
- Estancado
- Claridad
- Necesita aclaración
- Aptitud para principiantes
- 25/100