callstack / callstack/react-native-pager-view
Support synchronous onScroll events on the UI thread by using Reanimated
- 主要言語
- TypeScript
- スター
- 3.4k
- フォーク
- 476
- 平均マージ
- 10日 21時間
- マージ済み PR(30日)
- 2
説明
## 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).
コントリビューションガイド
調査の方向性
まず、参照されているreact-native-gesture-handlerのRCTEventDispatcherのセットアップとイベント送信を、Hooks.tsにあるReanimatedのuseAnimatedGestureHandlerと比較します。現在onPageScroll、onPageSelected、onPageScrollStateChangedがどのようにディスパッチされているかを追跡し、bridgeトラフィックなしで滑らかなworklet補間をサポートするUIスレッド上の同期コールバックを基準に完了条件を定義します。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react-native, typescript
- 領域
- mobile
- issue の種類
- 機能追加
- 難易度
- 5/5
- 見積もり時間
- 1週間以上
- 活発さ
- 停滞
- 明瞭さ
- 説明が足りない
- 初心者へのやさしさ
- 25/100