On Android horizontal Animated.ScrollView, animated children with a transform: translate are not pressable correctly

tomvankruijsbergen commented 1 month ago

Description

On Android, a view in a horizontal ScrollView with a scroll-based transform on it does not register onPress events everywhere in its tap radius: it seems to be the intersection of the initial transform and its position if it had no transform.

Steps to reproduce

Vanilla expo install, apply the given Expo snack.
Run npx expo run:android.
In the blue scrollview, scroll a bit to the right until the orange box is fully vertically centered (has translateX: 0)
Broken: When you tap the lower two-third of the orange box, in the logs you'll see in and out. Expected behaviour is that this should trigger pressed as well.
As expected: When you tap the upper third of the orange box, in the log you'll see in, out, pressed.
As expected: Tapping above the orange box' radius does not trigger any logs.
Change the translateX outputRange to [200, 0] and see that now, you see pressed only when you tap the lower third of the orange box.

Notes:

If you change the animation from translateX to translateY, it still does not work.
If you recompile Android with newArchEnabled=false, everything works as expected.
If you change the ScrollView to animate vertically instead of horizontally, everything works as expected.
If you change the animation from translateX to skew, everything works as expected.
Changing from TouchableOpacity to Pressable does not change the behaviour
Works as expected on iOS.
I had initially reproduced this on RN 0.73.5. No change in behaviour (still broken) on 0.74.1

React Native Version

0.74.1

Affected Platforms

Runtime - Android

Areas

Fabric - The New Renderer

Output of `npx react-native info`

System:
  OS: macOS 14.4.1
  CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Memory: 6.39 GB / 32.00 GB
  Shell:
    version: 3.7.1
    path: /usr/local/bin/fish
Binaries:
  Node:
    version: 20.13.1
    path: /usr/local/bin/node
  Yarn: Not Found
  npm:
    version: 10.5.2
    path: /usr/local/bin/npm
  Watchman:
    version: 2024.05.06.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.3
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.4
      - iOS 17.4
      - macOS 14.4
      - tvOS 17.4
      - visionOS 1.1
      - watchOS 10.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.3 AI-233.14808.21.2331.11842104
  Xcode:
    version: 15.3/15E204a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.1
    wanted: 0.74.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

Reproducer

https://snack.expo.dev/Qp9FI928apoM_h6HHMXp8

Screenshots and Videos

No response

cortinico commented 1 month ago

Thanks for reporting this @tomvankruijsbergen This is an issue that we're already aware of and we're currently looking into it already. We'll update here once we have more news on what the resolution is

tomvankruijsbergen commented 1 month ago

Thanks for reporting this @tomvankruijsbergen This is an issue that we're already aware of and we're currently looking into it already. We'll update here once we have more news on what the resolution is

Thanks @cortinico 🙂 is there an issue or PR or so that I can track?

cortinico commented 1 month ago

This is practically the same issue as:

facebook / react-native