react / react/react-native

Android - Animated.event useNativeDriver:true sets incorrect translate position when scrolling interrupted by user

オープン
#50,496 コメント 27 件 リアクション 4 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

Issue: Author Provided Repro Type: New Architecture
主要言語
C++
スター
127k
フォーク
25.3k
平均マージ
1日 23時間
マージ済み PR(30日)
4

説明

Description

I have 2 transform translateY animation. When the useNativeDriver:false, there is no issue except performance. I can see the animation moves couple frames behind from native animation. When the useNativeDriver:true, while moving fast the component jumps around (usually to final position if there were no distruption to moementum scroll)

Steps to reproduce
  1. Install the application to you andorid using npx expo run:android --device while useNativeDriver: true
  2. Make a slide with momentum and while momentum exists stop and make small movement and remove you finger from screen. (see the video)
React Native Version

0.77.2

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info
info Fetching system and libraries information...
System:
  OS: Windows 10 10.0.19045
  CPU: (16) x64 Intel(R) Core(TM) i7-10870H CPU @ 2.20GHz
  Memory: 17.67 GB / 31.84 GB
Binaries:
  Node:
    version: 22.14.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.22
    path: ~\AppData\Roaming\npm\yarn.CMD
  npm:
    version: 11.2.0
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK:
    API Levels:
      - "22"
      - "33"
      - "33"
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 30.0.2
      - 30.0.3
      - 33.0.1
      - 34.0.0
      - 35.0.0
      - 35.0.1
    System Images:
      - android-34 | Google APIs Intel x86_64 Atom
      - android-35 | AOSP ATD Intel x86_64 Atom
      - android-35 | Intel x86_64 Atom
      - android-35 | Google APIs Intel x86_64 Atom
    Android NDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    Versions:
      - 10.0.19041.0
      - 10.0.22621.0
IDEs:
  Android Studio: AI-242.23726.103.2422.13016713
  Visual Studio:
    - 17.13.35825.156 (Visual Studio Community 2022)
Languages:
  Java: 17.0.7
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 15.1.3
    wanted: ^15.1.0
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.77.2
    wanted: ^0.77.2
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

info React Native v0.78.2 is now available (your project is running on v0.77.2).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.78.2
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.77.2&to=0.78.2
info For more info, check out "https://reactnative.dev/docs/upgrading?os=windows".
Stacktrace or Logs
N/A
Reproducer

https://snack.expo.dev/@kocburak/usenativedriverbug

Screenshots and Videos

https://github.com/user-attachments/assets/54fe474c-1fdb-4efd-8f84-137afce9465b

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

リンク先の Snack reproducer から始め、useNativeDriver を有効にして Android で実行します。Animated.event を使って中断された慣性スクロールを再現し、useNativeDriver を無効にした場合と比較します。ジェスチャーが中断された後に、翻訳されたコンポーネントが誤った位置や最終位置にジャンプしなくなれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
android, react-native
領域
mobile
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
35/100

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

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