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.

onPress not triggered while scrolling over a FlatList

See original GitHub issue

šŸ› 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

Issue Analytics

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

github_iconTop GitHub Comments

6reactions
RoysyLeecommented, Jun 6, 2019

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

1reaction
esphungcommented, Nov 30, 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

Read more comments on GitHub >

github_iconTop Results From Across the Web

onPress event Triggered while scrolling in ListView | Voters
Currently while scrolling through items in a ListView, the onPress event of the item is being triggered before the scrollMomemtumEnds.
Read more >
How to implement a FlatList inside of a Pressable without ...
Try touch handling on FlatList item parent container like below so the scrolling issue would never come again and you can easily handle...
Read more >
FlatList - React Native Archive
Called once when the scroll position gets within onEndReachedThreshold of the rendered content. Type, Required. function, No. onEndReachedThreshold.
Read more >
Optimizing Flatlist Configuration - React Native
Pros: Bigger windowSize will result in less chance of seeing blank space while scrolling. On the other hand, smaller windowSize will resultĀ ...
Read more >
Handling Touches - React Native
TouchableOpacity can be used to provide feedback by reducing the opacity of the button, allowing the background to be seen through while theĀ ......
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