callstack / callstack/react-native-pager-view

Support synchronous onScroll events on the UI thread by using Reanimated

オープン
#316 コメント 7 件 リアクション 8 件 担当者 0 名 GitHub で見る
enhancement
主要言語
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

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。