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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions