react / react/react-native

`onPress` not working while animating views

未关闭
#51,621 5 条评论 28 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

Issue: Author Provided Repro Resolution: PR Submitted Type: New Architecture
主要语言
C++
星标
127k
派生
25.3k
平均合并
1 天 23 小时
30 天内合并 PR
4

描述

Description

Historically there have been issues with Pressability on the new arch:

There was a specific fix for the Animated API where we on animation end make a state update to actually re-render the component with the latest animated value to sync back to the shadow tree:

While this fix works on animation end it doesn't work for running animations.

In these recordings you can see how the onPress is fired while animating while on new arch its not, so its a regression:

Old Arch New Arch
Works on every press during animation: Doesn't work:

Now, this problem isn't exactly just limited to RNs Animated API. There are examples from other libraries, for example reanimated. They don't sync the values back on the JS thread yet in any way once an animation is done. Now we could blame reanimated for it and ask them to fix it, but ultimately it would suffer the same problem as RNs Animated API that it will be broken during animation. Issues for reference:

Potential solutions

One solution is to switch the native implementation for the measure function back to how it's working on paper: measuring on the native view hierarchy.

This way when a touch gets dispatched on the native side and we calculate the area of the view, we know 100% for sure that it will be accurately the same to what we have on the screen right now:

In a lot of those issues it's recommended to switch to use Pressable from react-native-gesture-handler. This works because RNGH also uses the native view hierarchy to figure out where things are.

We might either want to fully switch measure and measureInWindow or create separate methods like measureNative and use those for press-ability (or just add a param like measureOnUI)?

The only downside I can see is that measureNative would be async. That would be fine for the pressability use case but I am not sure if thats causing issues in other places for Meta? Right now measure is also async by callback although it could become sync as far as I can see.

Another solution might be to still commit those updates to the shadow tree but ask to not mount the updates?

Steps to reproduce
  1. Get the reproducer
  2. yarn install
  3. yarn android
  4. Try pressing on the blue area
  5. (In gradle.proeprties turn off new arch and test again, notice how its working)
React Native Version

0.79.2

Affected Platforms

Runtime - Android, Runtime - iOS

Areas

Fabric - The New Renderer

Output of npx @react-native-community/cli info
System:
  OS: macOS 15.3.1
  CPU: (12) arm64 Apple M2 Pro
  Memory: 83.97 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.18.1
    path: ~/.nvm/versions/node/v20.18.1/bin/node
  Yarn:
    version: 1.22.19
    path: ~/.nix-profile/bin/yarn
  npm:
    version: 10.8.2
    path: ~/.nvm/versions/node/v20.18.1/bin/npm
  Watchman:
    version: 2024.03.11.00
    path: /Users/hannomargelo/.nix-profile/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/hannomargelo/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK:
    API Levels:
      - "28"
      - "30"
      - "31"
      - "32"
      - "33"
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 28.0.3
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 33.0.1
      - 33.0.2
      - 34.0.0
      - 35.0.0
      - 35.0.1
      - 36.0.0
    System Images:
      - android-33 | Google Play ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
      - android-34 | Google APIs ATD ARM 64
    Android NDK: 27.1.12297006
IDEs:
  Android Studio: 2024.3 AI-243.24978.46.2431.13208083
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.7
    path: /Users/hannomargelo/.jenv/shims/javac
  Ruby:
    version: 3.3.4
    path: /Users/hannomargelo/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 18.0.0
    wanted: 18.0.0
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.79.2
    wanted: 0.79.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: false
Stacktrace or Logs
Logs are not relevant for this bug.
MANDATORY Reproducer

https://github.com/hannojg/rn-animated-pressability

Screenshots and Videos

See description above

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

从 github.com/hannojg/rn-animated-pressability 中的必需复现器开始,比较启用和禁用新架构时动画期间的按压行为。阅读 ReactAndroid/src/main/java/com/facebook/react/uimanager/NativeViewHierarchyManager.java 和 ReactCommon/react/renderer/dom/DOM.cpp 中引用的实现,然后确定原生测量应如何支持 Pressability。当受影响的平台在动画期间能够可靠地响应按压,且测量行为没有回归时,即可视为完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
react-native
领域
mobile-dev
Issue 类型
缺陷
难度
5/5
预计耗时
一周以上
活跃度
停滞
描述清晰度
基本清楚
新手友好度
30/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。