react-native: onPress not triggered while scrolling over a FlatList

🐛 Bug Report

In IOS if we try to render TouchableOpacity and FlatList inside the ScrollView the onPress handler from TouchableOpacity in not triggered when the FlatList is scrolling.

On Android, it’s working correctly, so I’m, wondering if it’s standard IOS behaviour or just a bug.

Similar issue #17626

To Reproduce

Try to render TouchableOpacity and FlatList inside the ScrollView. When the FlatList is scrolling then onPress is not triggered until FlatList stops scrolling.

Expected Behavior

onPress event should be triggered as on Android device.

Code Example

https://gist.github.com/czystyl/fa3ea7acd58bb6dd62725f5fed0c2407

Environment


  React Native Environment Info:
    System:
      OS: macOS 10.14.3
      CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
      Memory: 679.14 MB / 16.00 GB
      Shell: 5.6.2 - /usr/local/bin/zsh
    Binaries:
      Node: 11.3.0 - ~/.nvm/versions/node/v11.3.0/bin/node
      Yarn: 1.13.0 - /usr/local/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v11.3.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 23, 24, 25, 26, 27, 28
        Build Tools: 25.0.0, 25.0.2, 26.0.2, 26.0.3, 27.0.3, 28.0.2, 28.0.3
        System Images: android-24 | Google Play Intel x86 Atom, android-25 | Android Wear Intel x86 Atom, android-25 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.3 => 16.6.3
      react-native: ^0.58.3 => 0.58.6

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 2
Comments: 16 (3 by maintainers)

Most upvoted comments

I change from rn’s default TouchableOpacity to “TouchableOpacity” by react-native-gesture-handler. It works well. https://kmagiera.github.io/react-native-gesture-handler/docs/component-touchables.html

RoysyLee on Jun 6, 2019

I have this same issue. The TouchableOpacity belongs to a separate view (from the scrolling Flatlist). In fact, none of my other custom events fire while I am scrolling through the Flatlist. Uploaded issue video

esphung on Nov 30, 2019

I can confirm that using TouchableOpacity and FlatList from the react-native-gesture-handler - works exactly as I expected.

The bug still occurs using components from the RN components, with and without the onStartShouldSetResponder prop so. CC @dulmandakh

czystyl on Aug 7, 2019