Skip to content

panResponder inside ScrollView on Android behaves differently than iOS. Android can't scroll. #51205

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
andywall66 opened this issue May 8, 2025 · 2 comments

Comments

@andywall66
Copy link

Description

This is a revival of: #21894 ...which was closed but is still an issue as was described.

Attached is a simple demo (updated from original) - running on the latest Expo, which is up-to-date RN - which shows this issue persisting: different behavior between ios and android when using PanResponder on a View inside a ScrollView.

Steps to reproduce

In the Snack...

Load iOS version, then:

  1. Press down within the red square (which has a panResponder), wait briefly, then drag up or down, as you are intending to scroll the whole page (which is a ScrollView).
  2. The panResponder receives onPanResponderMove, but soon thereafter...
  3. The panResponder receives onPanResponderTerminate, so the ScrollView takes over. This is desired behavior.

Now load Android version, then:

  1. Press down within the red square (which has a panResponder), wait briefly, then drag up or down, as you are intending to scroll the whole page (which is a ScrollView).
  2. The panResponder receives onPanResponderMove, ...and continues to only receive this.
  3. The panResponder never receives onPanResponderTerminate, and the ScrollView never scrolls. This is not desired.

React Native Version

0.79.2

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info

System:
  OS: macOS 14.4.1
  CPU: (12) x64 Apple M2 Max
  Memory: 26.11 MB / 32.00 GB
  Shell:
    version: 3.2.57
    path: /bin/sh
Binaries:
  Node:
    version: 18.18.0
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.22
    path: ~/refresh/client/nativeweb/node_modules/.bin/yarn
  npm:
    version: 9.8.1
    path: /usr/local/bin/npm
  Watchman:
    version: 2023.10.30.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods: Not Found
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: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.79.2
    wanted: ^0.79.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

See snack

MANDATORY Reproducer

https://snack.expo.dev/@andywall66/fbc57d?platform=android

Screenshots and Videos

No response

@cipolleschi
Copy link
Contributor

@andywall66 thanks for the issue. I forwarded the issue internally to people with more experience on Android. I'll be back here as soon as I know more.

@javache
Copy link
Member

javache commented May 9, 2025

Can you try with with onShouldBlockNativeResponder={() => false}?

This is only supported on Android, and block native responder defaults to true on in PanResponder.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants