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:
- Created 5 years ago
- Reactions:2
- Comments:16 (3 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub 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
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