Skip to content

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

@tomvankruijsbergen

Description

@tomvankruijsbergen

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions