`onPress` not working while animating views
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 127k
- Forks
- 25.3k
- Avg merge
- 1d 23h
- Merged PRs (30d)
- 4
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the mandatory reproducer at github.com/hannojg/rn-animated-pressability and compare pressing during animation with the new architecture enabled and disabled. Read the referenced implementations in ReactAndroid/src/main/java/com/facebook/react/uimanager/NativeViewHierarchyManager.java and ReactCommon/react/renderer/dom/DOM.cpp, then determine how native measurement should support Pressability. Done means presses work reliably during animations on the affected platforms without regressing measurement behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native
- Domain
- mobile-dev
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100