Skip to content

Different behaviour panResponder inside scrollview on android and ios #21894

Closed
@svenlombaert

Description

@svenlombaert

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
      Memory: 1.53 GB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.12.0 - /usr/local/bin/node
      Yarn: 1.10.1 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
      Android SDK:
        Build Tools: 23.0.1, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.3
        API Levels: 23, 25, 26
    IDEs:
      Xcode: 10.0/10A255 - /usr/bin/xcodebuild
    npmPackages:
      react: ^16.5.0 => 16.5.0
      react-native: ^0.57.2 => 0.57.2
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7
      react-native-sensors: 4.0.0
      react-native-store-review: 0.1.5

Description

I've made a simple demo which shows different behaviour between ios and android when using PanResponder on a View inside a ScrollView.

iOS: If I scroll over the red square, the panResponder triggers onPanResponderTerminate, so the ScrollView takes over

Android: If I scroll over the red square, the panResponder triggers onPanResponderMove, so the ScrollView doesn't scroll.

I don't know which one is the right behaviour, but I'd like to reproduce the iOS behaviour for both.

Reproducible Demo

https://snack.expo.io/@svrnlombaert/panresponder-behaviour-on-scroll

Android behaviour:
https://i.imgur.com/UXjajkr.gifv

iOS behaviour:
https://i.imgur.com/4YImWKL.gifv

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