Animated.View passes touch events to sibling when child is absolute positioned

[Hasan-aga]

Description

I have two sibling components a <MapContainer/> and a <Card/>, the card is positioned using absolute so it overlays the map.
The setup works as expected until I decided to animate the card. wrapping the card with <Animated.View> makes the touch event reach the <MapContainer/>.

What I've tried:

• using onResponderStart={() => true} on the card component to stop touch events -> did nothing.
• wrapping the card with <TouchableWithoutFeedback onPress={() => console.log('press')}> the touch still finds its way to the sibling through the card.
• using pointerEvents it would make the card not touchable but the touch still finds its way to sibling.

Version

0.70.6

Output of npx react-native info

info Fetching system and libraries information...
System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (8) x64 AMD Ryzen 7 3750H with Radeon Vega Mobile Gfx
    Memory: 4.80 GB / 13.59 GB
    Shell: 3.5.1 - /usr/bin/fish
  Binaries:
    Node: 16.16.0 - /usr/local/n/versions/node/16.16.0/bin/node
    Yarn: 1.22.19 - ~/.npm-global/bin/yarn
    npm: 8.11.0 - /usr/local/n/versions/node/16.16.0/bin/npm
    Watchman: 20221102.224517.0 - /usr/local/bin/watchman
  SDKs:
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
  Languages:
    Java: 11.0.17 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.1.0 => 18.1.0 
    react-native: 0.70.6 => 0.70.6 
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

Create two components and overlay one over the other using absolute positioning. Then wrap the overlayed component in Animated.View. You should find that touching the overlaying component activates the touch on the sibling.

Snack, code example, screenshot, or link to a repository

[Hasan-aga]

I found a workaround by creating a custom animated view as follows:

  const AnimatedView = Animated.createAnimatedComponent(TouchableWithoutFeedback);

  return (
    <AnimatedView style={{transform: [{translateY: yPosition}]}}>
      <View style={styles.bottomUi}>{children}</View>
    </AnimatedView>
  );

Note: this is still less than ideal since wrapping a View with TouchableWithoutFeedback changes how the inner elements of the view react to touches. i.e. they don't.

[jludwiggreenaction]

Is there any solution for this? This issue occurs only on android. I am seeing all touch events on the panresponder get passed through to the view behind it.

This only started occurring in react native 0.7.

I can see that the onPanResponderStart and grant events are never triggered for the view behind, yet the onPanResponderMove is still triggered, which seems very unusual.

[Gp2mv3]

I can confirm this issue which appeared when upgrading to RN 0.7.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.