Android hit-testing rejects touches for children positioned outside parent bounds when view flattening is disabled (Reanimated)

[khldonAlkateeh]

Description

https://github.com/user-attachments/assets/0fe8b70d-77d7-4438-acc6-baeb399ba319

<Animated.View className="flex-1 items-center justify-center bg-red-600">
  <Animated.View className="h-40 w-48 bg-green-800">
    <Animated.View className="absolute top-96 h-20 bg-blue-800">
      <Switch onValueChange={setIsEnabled} value={isEnabled} />
    </Animated.View>
  </Animated.View>
</Animated.View>

There is an Android-only touches limitation in react native that becomes visible when using Reanimated’s Animated.View

Touch events are not delivered to children that are visually positioned outside the parent’s bounds(using position:absolute)

This does not happen on iOS due to the different hit-testing model used by UIKit.

here is what i think:

react native’s android hit-testing logic is implemented in:

TouchTargetHelper

Android rejects the touch as soon as: x < 0 || x > view.width || y < 0 || y > view.height

So even if the child is visually outside, hit-testing is clipped to the parent rectangle.

Why it appears with Reanimated:

Reanimated intentionally disables view flattening (collapsable={false}) and assigns a custom nativeID for layout animations.

This changes the underlying native hierarchy in a way that exposes Android’s clipping limitation more often. A plain RN <View> is often flattened, so the child becomes the direct hit-target. An Animated.View is not flattened, the parent remains the hit-target, android rejects touches outside its bounds. So the underlying behavior comes from React Native Android, not from Reanimated. This issue does not happen on iOS.

Expected behavior on android i should be able to touch on absolutely positioned elements just as IOS. This would match iOS behavior

i opened an issue on react-native-reanimated and i think the root cause is from react native https://github.com/software-mansion/react-native-reanimated/issues/8497

Steps to reproduce

1- Create an Animated.View as the main container (for example, a full-screen red background).

2- Inside that container, create another Animated.View. this will act as the parent box (for example, a green box with fixed width and height).

3- Inside the green box, create a third Animated.View that has position: 'absolute' and a large top value so it goes outside the green box

4- Inside that absolutely positioned blue box, create a touchable element such as a Switch from react native

5- Run the app on Android and try interacting with the Switch:

You’ll notice that the Switch doesn’t respond to touches when it’s outside the green box (its parent).

6- Run the same setup on iOS, the Switch works normally, even when positioned outside the parent’s layout.

React Native Version

0.81.4

Affected Platforms

Build - Windows

Output of npx @react-native-community/cli info

System:
  OS: Windows 11 10.0.26100
  CPU: (24) x64 Intel(R) Core(TM) i7-14650HX
  Memory: 6.26 GB / 15.78 GB
Binaries:
  Node:
    version: 22.17.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.22
    path: C:\Users\LEGION\AppData\Roaming\npm\yarn.CMD
  npm:
    version: 10.9.2
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: AI-251.26094.121.2513.14007798
  Visual Studio: Not Found
Languages:
  Java:
    version: 17.0.16
    path: C:\Program Files\Microsoft\jdk-17.0.16.8-hotspot\bin\javac.EXE
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.81.4
    wanted: 0.81.4
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

*

MANDATORY Reproducer

Screenshots and Videos

No response

[react-native-bot]

[!WARNING] Missing reproducer: We could not detect a reproducible example in your issue report. Reproducers are mandatory and we can accept only one of those as a valid reproducer:

• For majority of bugs: send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.
• If your bug is UI related: a Snack
• If your bug is build/upgrade related: a project using our Reproducer Template

You can read more about about it on our website: How to report a bug.

[react-native-bot]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.