react-native-gesture-handler: `FlatList` component does not scroll vertically on touch in mobile responsive mode
Description
Hello, I’m experiencing an issue with the FlatList component from react-native-gesture-handler when it’s used in conjunction with the Swipeable component. Specifically, the FlatList component does not scroll vertically on touch in mobile responsive mode.
Steps to reproduce
- Clone the branch with the development from the public repository: https://github.com/echarbeto/tamagui_test/tree/TEST/flatlist_with_swipeable_elements
- Install the necessary libraries. Please note that this is an Expo SDK 49 project.
- Run the project using the command npm run start.
- Access the project from your browser at localhost:8081.
- If accessing from a desktop, switch to mobile view.
- Try to scroll vertically.
The issue occurs when trying to scroll vertically in mobile view. The FlatList component does not respond to vertical scrolling actions.
Snack or a link to a repository
https://github.com/echarbeto/tamagui_test/tree/TEST/flatlist_with_swipeable_elements
Gesture Handler version
2.13.1
React Native version
0.72.5
Platforms
Web
JavaScript runtime
None
Workflow
Expo managed workflow
Architecture
None
Build type
Debug mode
Device
None
Device model
No response
Acknowledgements
Yes
About this issue
- Original URL
- State: closed
- Created 9 months ago
- Reactions: 2
- Comments: 17 (7 by maintainers)
Hi! Thanks for submitting this issue. I’ve managed to identify what causes this problem. We still have to find good way to fix it though.
@m-bert Scrolling and swiping now work in Safari. I’ve tested the latest commit in
@mbert/fix-scroll-interactions.https://github.com/software-mansion/react-native-gesture-handler/assets/28631281/b7a6291d-017e-445c-8f55-898ad7b252f6
@m-bert, I installed the version
github:software-mansion/react-native-gesture-handler#@mbert/fix-scroll-interactionswhich includes your proposed solution for mobile web. It works well. Both scrolling and swiping are functioning as expected. https://github.com/echarbeto/tamagui_test/tree/TEST/flatlist_with_swipeable_elementsThanks!
Hi @m-bert ,
You’re right. If I add a margin to the containerStyle of Swipeable, and touch outside of the container, I can scroll vertically.
I’ll wait for your instructions to test. Once done, I’ll upload the changes to the test project I used and let you know how the tests turn out.
Thanks!
Hello @m-bert ! Let me know if you need any help with the tests. Thanks!