Animated tracking using the native driver does not work as expected
まだ誰も着手していません。
- 主要言語
- C++
- スター
- 127k
- フォーク
- 25.3k
- 平均マージ
- 1日 23時間
- マージ済み PR(30日)
- 4
説明
Description
Tracking a dynamic animated value (such as scroll position) using the native driver doesn't work correctly. Instead of animating the pinned value simultaneously, the animation only starts once the dynamic value stops changing.
React Native Version
0.71.11
Output of npx react-native info
System:
OS: macOS 13.2.1
CPU: (10) arm64 Apple M1 Max
Memory: 81.73 MB / 32.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm
Watchman: 2022.11.07.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.11 => 0.71.11
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
Steps to reproduce
I have created an example app that illustrates the problem.
- Clone the repository from https://github.com/kolking/animated-tracking, install and run the app in the simulator.
- When the native driver is disabled, scroll the bottom part horizontally to see how red dots follow the scroll position with a stagger effect.
- Now, in the
App.tsxchange theNATIVE_DRIVERconstant totrue, reload the app and try scrolling the bottom part again.
Snack, code example, screenshot, or link to a repository
Also please take note that when the native driver is enabled, it ignores the initial contentOffset. As a result, the red dots are initially displayed on the left and will only move to the center after a manually triggered scroll event.
useNativeDriver: false |
useNativeDriver: true |
|---|---|
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
リンクされたアニメーショントラッキングの例の動作を、App.tsx と NATIVE_DRIVER トグルから始めて再現します。ネイティブドライバーを無効にした場合と有効にした場合のスクロールを、初期 contentOffset を含めて比較します。ネイティブドライバーが有効な場合に、アニメーションするドットがスタガー効果付きで変化するスクロール位置を追跡し、初期オフセットから開始すれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react-native, typescript
- 領域
- mobile
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100