You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 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
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
Description
507139468-7bdc03a6-eaec-4df1-8ac7-8bfa2f3bd757.mp4
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
iOSdue to the different hit-testing model used by UIKit.here is what i think:
react native’s android hit-testing logic is implemented in:
TouchTargetHelperAndroid rejects the touch as soon as:
x < 0 || x > view.width || y < 0 || y > view.heightSo 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 customnativeIDfor layout animations.This changes the underlying native hierarchy in a way that exposes Android’s clipping limitation more often.
A plain RN 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
software-mansion/react-native-reanimated#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 infoStacktrace or Logs
MANDATORY Reproducer
Screenshots and Videos
No response