React-native-swipe-list-view: Windows: Swiping not working when vertical scrolling enabled on the list

[juanjo-ramos]

I'm consistently seen the following problem:
If the total number of rows can fit in the visible screen and or if they can't but scrolling is disabled on the underlying List, the horizontal swiping works as expected.

However, as soon as vertical scrolling is enabled the swiping doesn't work anymore when interacting with the finger. Using the mouse or a stylus makes the swipe work as expected as well.

[jemise111]

Hey @juanjo-ramos I haven't heard of this issue before. I'm a little confused.. is this only happening on emulators or on device as well? I only ask because you mentioned using a mouse.

If you have some example code to repro the issue that'd be really helpful and I'd be happy to take a look, thanks!

(Sorry for the delay in responding)

[ethanx94]

I have the same when nesting SwipeListView within a ScrollView. It seems as if the ScrollView is taking priority for only touch events but yet not mouse events.

[jemise111]

@ethanx94 is it completely necessary to nest the SwipeListView in a ScrollView? Can you make use of the header and footer for extra content and not use a ScrollView at all?

And then I'm a bit confused when you say "mouse events". Is this a problem only on an emulator?

Thanks!

[ethanx94]

I see what you mean. I actually didn't know the FlatList itself could be a psudeo-ScrollView (probably lacking a bit on the terminology here). With that said I tried pulling it out to the top (only nested in a normal view). But it looks like I'm still having some issues.

This is the difference between running with a mouse on desktop and running with a touchscreen on actual tablet hardware. The desktop responds to any swipe the mouse makes (just as it did in it's prior SwipeView nested implementation). But the tablet's touchscreen doesn't seem to want to cooperate with the swipe function. To be sure, I plugged a mouse into the tablet directly and the same behavior happens as it did on desktop, the rows swipe correctly.

I dropped in the experimental SwipeableFlatList from ReactNative and that doesn't cause this issue.
However that component is not nearly as fully featured as this. It looks like this problem has happened with the experimental component at one time and there was a workaround for it.
See: https://github.com/Microsoft/react-native-windows/pull/1228

Edit: One more weird thing to note. I do not have swipe problems until the page needs to scroll. Basically if I have a list with a few items that all fit within the current view then swiping works great. As soon as I have so many items that it requires scrolling, swiping no longer works.

Edit Edit: Please see my pull request. Got it fixed using the same method as experimental.

[jemise111]

@ethanx94 Awesome job finding that fix, thanks for doing the research on this!

[jemise111]

Fixed in v1.1.1

[matheusbaumgart]

I have the same when nesting SwipeListView within a ScrollView. It seems as if the ScrollView is taking priority for only touch events but yet not mouse events.

I'm also using it nested within a ScrollView and any vertical scrolling after starting the swipe action aborts the "swipe".

@jemise111, can you please advise or re-open this? Cheers

[VitaliiK91]

@jemise111 I am experiencing similar issue in iOS. If list is not scrolled (or is at the very top) swiper works just perfect. But once list is scrolled even slightly swiping functionality stops working. It lets you start the swipe gesture but forces row to close right away. Any ideas what might cause it? Thanks you!

[jemise111]

@VitaliiK91 This is a tough one for me to debug as I don't have Windows.

I suspect the issue is that the parent ScrollView is becoming the responder for all gesture handler and the SwipeListView is not receiving touch events. Can you remove the ScrollView entirely and just use the SwipeListView's header and footer to render the rest of your content?

This may help as well: https://stackoverflow.com/questions/51098599/flatlist-inside-scrollview-doesnt-scroll

[VitaliiK91]

@jemise111 Thanks for the quick response. Mine is actually not windows, but iOS (both simulator and actual device) I don't have it wrapped in ScrollView, however I use react-native-navigation in the app. I was debugging it last night and noticed that onPanResponderTerminate event is fired right away once I start to swipe row. Only happens if list view is scrolled even a tiny bit. Tested in Android and it works absolutely fine there. I will keep debugging and looking for the cause. If you have any ideas or suggestions let me know. Thanks 😉

[jemise111]

@VitaliiK91 Ah okay - in that case I would search through the GH issues here for "navigation" and see if any of the responses help you. Some people have found ways to make the gesture handlers play nice together but I don't know of any off the top of my head

[VitaliiK91]

Found the root of the problem (at least for my case). Sharing in case someone runs into similar issue. After more debugging I noticed that issue happens not when list is scrolled just a bit but when it is scrolled almost to the end (i.e. last item is seen). After wrapping the component in the <SaveAreaView/> the problem disappeared. I am pretty sure this can only happen on the devices with notch (in my case iPhoneX, 11 etc...) @jemise111 Thanks for the great library and help. Cheers 🤓

[jemise111]

Excellent @VitaliiK91 glad you found a solution

[nenjamin2405]

@VitaliiK91 Many thanks for your solution, I'm having the same issue just like you using react-native-navigation

[elirangoshen]

how you solve it ? i trie to use i have it both on android and ios ..
i tried to use SafeAresView but it doenst seems to work
thats really big issue so i wonder