ScrollView inside swipeable modal is not working

[quachsimon]

Just recently did an update and have confirmed that v7 stops the ability to scroll inside the modal whereas v6 was still working (swapped between the versions)

I looked at the diff from 6.5.0 up to 7.0.2 and the only thing I can see that may effect the scroll view would be this line.

I've tried adding the Touchable... around the views as other closed issues have suggested to no luck.

I've been stumped on this for a couple days now and not sure what could be wrong.

The modal is something of this structure:

<Modal>
    <ScrollView horiztonal>
        <FlatList ... />
       ...
    </ScrollView>
</Modal>

Any idea what changes from v6.5.0 to v7.0.2 could be causing the scrolling to not work?

[mmazzarolo]

Hi @quachsimon ! Thank you for reporting the issue 👍
If you have some time could you check if removing return Math.abs(gestureState.dx) >= 4 || Math.abs(gestureState.dy) >= 4; fixes your issue?

[cjroth]

Hi @quachsimon ! Thank you for reporting the issue 👍
If you have some time could you check if removing return Math.abs(gestureState.dx) >= 4 || Math.abs(gestureState.dy) >= 4; fixes your issue?

@mmazzarolo removing that line fixes it for me.

[mmazzarolo]

@cjroth thank you for the feedback.
That check is needed to make the modal content respond correctly to the swipes.
Are you using supplying the swipeDirection to the modal? 🤔
Unless the modal is swipeable it shouldn't run that check.

[cjroth]

Yes I have a modal where swipeDirection is left with a vertically scrollable menu inside

[mmazzarolo]

@cjroth got it, at least it doesn't seem to be a bug then.
To make it work correctly both with a nested ScrollView and with a simple View we might want to control that specific bit of code trough a new prop.
Any suggestion on how to do it/name it? Anyone willing to give it a shot with a PR?

Honestly, I feel like adding props for such cases is not the best pattern... but that's what we get when we try to do too many things in a single component 😁

[cjroth]

I need to look at this a little closer to understand. It seems like swiping in a direction other than the swipeDirection should have no effect on the modal and the swipe event should propagate to the children components (which is what seems to happen when I remove the line you asked about). I'll try to think of the best way to solve this :)

[mmazzarolo]

To add a bit more context, the following check:

return Math.abs(gestureState.dx) >= 4 || Math.abs(gestureState.dy) >= 4;

Was added to make sure that when you press on a button inside a swipeable modal the touch won't be interpreted as a "swipe". This is probably swallowing your scrollview gesture.

Following your tests, adding a prop like hasScrollView and wrapping that check this way:

if (hasScrollView) {
  return Math.abs(gestureState.dx) >= 4 || Math.abs(gestureState.dy) >= 4;
}

should be enough to fix it, but it's also an unintuitive solution (the best way to handle it would be making the touch propagation work correctly without doing that check... but that's a different story 😀

[cjroth]

I'm actually finding that it works perfectly without the return Math.abs(gestureState.dx) >= 4 || Math.abs(gestureState.dy) >= 4; check - I suspect that this is because even if taping does get interpreted as a swipe, it isn't visibly noticeable and definitely doesn't come near the threshold that triggers dismissing the modal.

A hasScrollView or similarly named prop would make sense if the check is needed.

[mmazzarolo]

@cjroth 🤔 thanks for checking.
Did you try with a few buttons in a simple View (not ScrollView) on a real device?
If I recall correctly before the PR was merged I tested with a bunch of buttons in the modal and sometimes the tap was not working correctly (on a real device, not an emulator).

[cjroth]

Ahh, you are right. It does have an issue if I just remove that line. I haven't had any issues where the tap wasn't working, but rather swiping down on the modal only worked on parts of the modal that aren't touchable.

What do you think of propagateSwipe or allowChildSwipe as names for such a prop? Or is hasScrollView more understandable?

[mmazzarolo]

Hey! @cjroth has been published on v7.1.0-beta.1, willing to give it a shot?