`onPress` not working while animating views
还没有人认领这个 Issue。
- 主要语言
- C++
- 星标
- 127k
- 派生
- 25.3k
- 平均合并
- 1 天 23 小时
- 30 天内合并 PR
- 4
描述
Description
Historically there have been issues with Pressability on the new arch:
- https://github.com/facebook/react-native/issues/44768
- https://github.com/facebook/react-native/issues/36504
- https://github.com/facebook/react-native/issues/36710
- https://github.com/facebook/react-native/issues/48387
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:
- https://github.com/software-mansion/react-native-screens/issues/2219
- https://github.com/react-navigation/react-navigation/issues/12039
- https://github.com/kirillzyusko/react-native-keyboard-controller/pull/950
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:
- Paper: https://github.com/facebook/react-native/blob/c59a532950ddfde6e597124b4dd3d07aa3811795/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/NativeViewHierarchyManager.java#L700-L757
- New arch: https://github.com/facebook/react-native/blob/77c860898e3ec8a195fb4f5cc2247665ff6df3a6/packages/react-native/ReactCommon/react/renderer/dom/DOM.cpp#L476-L509
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
- Get the reproducer
- yarn install
- yarn android
- Try pressing on the blue area
- (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
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 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