Skip to content

PanResponder inside a horizontal FlatList - interfering scroll events issue since React Native 0.61 on iOS #28039

@superKalo

Description

@superKalo

I described the problem here in details: react-native-elements/react-native-elements#2260

I think it might be due to a problem with React Native v0.61 in general, because it works just fine with v0.59 and I have this issue with all PanResponders in my project, not specifically with this plugin.

I'll paste in the details here too. I have the following structure (pseudo-code):

<ScrollView>
    <FlatList horizontal={true}>
        <Slider />
    </FlatList>
</ScrollView>

With React Native 0.59, swiping the slider or any PanResponder in general was working perfectly fine (Expo SDK v35).
Since updating to React Native 0.61 (Expo SDK v36) swiping the Slider or any PanResponder is triggering the FlatList scroll too.

Expected behavior & Describe the bug

When I swipe the Slider or any PanResponder - the FlatList scrolling should not get triggered too. Or in general, the Slider component should block all other interfering scroll events while it gets swiped.

To Reproduce

I re-created the bug on a Snack.

On Android - all good. On iOS however - when you swipe (change) the Slider value, the FlatList and the ScrollView gets scrolled too. Blah.

Android (all good):

ezgif-3-36d8dc4beba0

iOS: issue:

ezgif-3-1b5d1c94ae5f

I assume this is a bug related to React Native v0.61?

System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-6600 CPU @ 3.30GHz
    Memory: 1.05 GB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.3.1 - ~/.nvm/versions/node/v12.3.1/bin/node
    Yarn: 1.17.3 - ~/.nvm/versions/node/v12.3.1/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v12.3.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.0, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      API Levels: 22, 28
      Build Tools: 21.1.2, 29.0.1
      System Images: android-22 | ARM EABI v7a, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5900203
    Xcode: 11.0/11A420a - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz => 0.61.4
```

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs: Environment InfoPlease run `react-native info` and edit your issue with that command's output.Needs: Triage 🔍Ran CommandsOne of our bots successfully processed a command.Resolution: LockedThis issue was locked by the bot.

    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