question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Different behaviour panResponder inside scrollview on android and ios

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:7
  • Comments:7

github_iconTop GitHub Comments

4reactions
svenlombaertcommented, Mar 19, 2019

I just created an empty 0.59.1 project (using react-native-cli), pasted the code from the snack above, and can confirm, the issue persists.

0reactions
stale[bot]commented, Sep 15, 2019

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React-Native: Panresponder inside of a scrollview on Android
I have a ScrollView that contains elements which utilize a panresponder that relies on scrollEnabled to toggle the ScrollView's, well, scrolling ...
Read more >
Pan Responder Inside of a ScrollView - Code Daily
Lets talk PanResponder in a ScrollView . This gets brought up frequently, so lets address it. Scenario. You've got a PanResponder in your...
Read more >
ScrollView - React Native
Component that wraps platform ScrollView while providing integration with touch locking "responder" system. Keep in mind that ScrollViews must ...
Read more >
Reactnative: Scrollview Inside of Panresponder - ADocLib
I am using a ScrollView inside of a PanResponder.On Android it works fine but on iOS the ScrollView will not scroll.I did some...
Read more >
prevent touch parent on children view react native - You.com
In my case I simply put the View inside another TouchableOpacity (with ... about the same incorrect behaviour applying to Touchable s within...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found