`onPress` not working while animating views

[hannojg]

Description

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

• On Android horizontal Animated.ScrollView, animated children with a transform: translate are not pressable correctly #44768
• onPress is not called after using useNativeDriver transform button #36504
• Touchable components stop responding randomly #36710
• [New Arch][Android] Touchable components stop responding randomly #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:

• add missing synchronisation call for native animated #43374

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:
1000000790.mp4	1000000791.mp4

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:

• Pressable elements not working in native-stack on Android devices with new architecture software-mansion/react-native-screens#2219
• Pressable elements not working in native-stack on Android devices with new architecture react-navigation/react-navigation#12039
• fix: keep shadow nodes in sync kirillzyusko/react-native-keyboard-controller#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:

  react-native/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/NativeViewHierarchyManager.java

  Lines 700 to 757 in c59a532

  	public synchronized void measure(int tag, int[] outputBuffer) {
  	if (DEBUG_MODE) {
  	FLog.d(TAG, "measure[%d]", tag);
  	}
  	UiThreadUtil.assertOnUiThread();
  	View v = mTagsToViews.get(tag);
  	if (v == null) {
  	throw new NoSuchNativeViewException("No native view for " + tag + " currently exists");
  	}
  	View rootView = (View) RootViewUtil.getRootView(v);
  	// It is possible that the RootView can't be found because this view is no longer on the screen
  	// and has been removed by clipping
  	if (rootView == null) {
  	throw new NoSuchNativeViewException("Native view " + tag + " is no longer on screen");
  	}
  	computeBoundingBox(rootView, outputBuffer);
  	int rootX = outputBuffer[0];
  	int rootY = outputBuffer[1];
  	computeBoundingBox(v, outputBuffer);
  	outputBuffer[0] -= rootX;
  	outputBuffer[1] -= rootY;
  	}
  	private void computeBoundingBox(View view, int[] outputBuffer) {
  	mBoundingBox.set(0, 0, view.getWidth(), view.getHeight());
  	mapRectFromViewToWindowCoords(view, mBoundingBox);
  	outputBuffer[0] = Math.round(mBoundingBox.left);
  	outputBuffer[1] = Math.round(mBoundingBox.top);
  	outputBuffer[2] = Math.round(mBoundingBox.right - mBoundingBox.left);
  	outputBuffer[3] = Math.round(mBoundingBox.bottom - mBoundingBox.top);
  	}
  	private void mapRectFromViewToWindowCoords(View view, RectF rect) {
  	Matrix matrix = view.getMatrix();
  	if (!matrix.isIdentity()) {
  	matrix.mapRect(rect);
  	}
  	rect.offset(view.getLeft(), view.getTop());
  	ViewParent parent = view.getParent();
  	while (parent instanceof View) {
  	View parentView = (View) parent;
  	rect.offset(-parentView.getScrollX(), -parentView.getScrollY());
  	matrix = parentView.getMatrix();
  	if (!matrix.isIdentity()) {
  	matrix.mapRect(rect);
  	}
  	rect.offset(parentView.getLeft(), parentView.getTop());
  	parent = parentView.getParent();
  	}
  	}

• New arch:

  react-native/packages/react-native/ReactCommon/react/renderer/dom/DOM.cpp

  Lines 476 to 509 in 77c8608

  	RNMeasureRect measure(
  	const RootShadowNode::Shared& currentRevision,
  	const ShadowNode& shadowNode) {
  	auto shadowNodeInCurrentRevision =
  	getShadowNodeInRevision(currentRevision, shadowNode);
  	if (shadowNodeInCurrentRevision == nullptr) {
  	return RNMeasureRect{};
  	}
  	auto layoutMetrics = getRelativeLayoutMetrics(
  	*currentRevision,
  	*shadowNodeInCurrentRevision,
  	{.includeTransform = true, .includeViewportOffset = false});
  	if (layoutMetrics == EmptyLayoutMetrics) {
  	return RNMeasureRect{};
  	}
  	auto layoutableShadowNode = dynamic_cast<const LayoutableShadowNode*>(
  	shadowNodeInCurrentRevision.get());
  	Point originRelativeToParent = layoutableShadowNode != nullptr
  	? layoutableShadowNode->getLayoutMetrics().frame.origin
  	: Point();
  	auto frame = layoutMetrics.frame;
  	return RNMeasureRect{
  	.x = originRelativeToParent.x,
  	.y = originRelativeToParent.y,
  	.width = frame.size.width,
  	.height = frame.size.height,
  	.pageX = frame.origin.x,
  	.pageY = frame.origin.y};
  	}

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

[AftabUfaq]

same issue with me. randomly stop working touches with react-native-google-mobile-ads

[hannojg]

Just opened a PR for this:

• fix: pressability issues new arch #51835

Curious if you could try applying the diff to your project @AftabUfaq and see if it helps with your problem?

[joluet]

@hannojg thanks for your work on this issue! 🙏 What would be the easiest way to try your PR changes? We're currently using RN 0.79.4. Can I apply your changes somehow using patch-package?

[hannojg]

Yes you can, but you have to build react native from source for the patch to actually be picked up during build time

[brianbolnick]

This is a very large issue for us as we have many animated sheets across our app with touchables inside them and we're completely blocked right now. Any update on getting that PR merged or having another fix deployed?