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

[czystyl]

🐛 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

[CatapultJesse]

Snack Repro: https://snack.expo.io/@jkcooper/rn23727-scrollview-touchableopacity
Not sure how you're getting android working from that gist. I don't get the touchableOpacity even firing when its not scrolling

[czystyl]

@CatapultJesse You are rendering TouchableOpacity inside the ScrollView, but I pointed out that it's not working when TouchabeOpacity is inside the ScrollView and when FlatList is scrolling.

[CatapultJesse]

@CatapultJesse You are rendering TouchableOpacity inside the ScrollView, but I pointed out that it's not working when TouchabeOpacity is inside the ScrollView and when FlatList is scrolling.

I can replicate the issue on iOS in the snack, but you said in the description that Android is working correctly which I can't replicate with the same code in the snack.

[dulmandakh]

I think you shouldn't be setting onStartShouldSetResponder on every view and it might be a cause of the issue, please see https://facebook.github.io/react-native/docs/gesture-responder-system.

[RoysyLee]

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

[ZJUZSY]

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

I use it ，but element in TouchableOpacity dont show now，the element is absolute position

[ZJUZSY]

🐛 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

plesae，have you resolve it now ？

[mloisotto]

Same issue. TouchableOpacity inside a FlatList doesn't trigger onPress event when user is scrolling. Any updates?

[czystyl]

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

[a-c-sreedhar-reddy]

any updates regarding this issue?

[a-c-sreedhar-reddy]

keyboardShouldPersistTaps have a look at this.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[pilot4u]

I'm still strangling with this issue
and the react-native-gesture-handler solution doesn't work.

[esphung]

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

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale[bot]]

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.