sandstreamdev/react-swipeable-list

blocking on scroll doesn't seem to work

MarkTension opened this issue · 7 comments

MarkTension commented

Describe the bug
When scrolling on mobile I cannot get the swipe to block.

To Reproduce
Here's my code:

`

        <SwipeableList>

          <SwipeableListItem
            threshold={0.2}
            style={{ marginTop: "0px" }}
            swipeLeft={{
              content: <span style={{ fontSize: "3em" }}>😍</span>,
            }}
            swipeRight={{
              content: <span style={{ fontSize: "3em" }}>😒</span>,
            }}
          >

            <div>

              <Text> hello</Text>

            </div>

          </SwipeableListItem>

          <SwipeableListItem
            threshold={0.2}
            style={{ marginTop: "0px" }}
            swipeLeft={{
              content: <span style={{ fontSize: "3em" }}>😍</span>,
            }}
            swipeRight={{
              content: <span style={{ fontSize: "3em" }}>😒</span>,
            }}
          >

            <div>

              <Text> hello</Text>

            </div>

          </SwipeableListItem>
          </SwipeableList>

`

I expected to block swiping when scrolling up or down.
The blockSwipe prop on SwipeableListItem does work though.

marekrozmus commented

Do you have your items between <SwipeableList> tags like in example? This component is reponsible for blocking swipe on scroll.

On what device is that bug reproducible?

Is there same problem when you are running example from readme?

  • 👍1
MarkTension commented

Yes, Items are between a <SwipeableList> (added it to my question just now), and I've tried it with the example itself as well.
I've tested so far on iphone SE & 7, and in google chrome browser basically all mobile devices.

Also tested it without wrapping it in components from external packages, like rebass FlexBox, but to no avail.

marekrozmus commented

We blocked only within list component. Now you can enter element for which scrolling is blocked.
Please check following branch:

npm install git://github.com/sandstreamdev/react-swipeable-list.git#fix_for_issues_36

and then in code add prop for SwipeableList

<SwipeableList scrollElement={window}>

Let me know if it helps.

  • 🎉1
MarkTension commented

Amazing, that solves it for me! Great work building this package btw❤️

marekrozmus commented

@all-contributors please add MarkTension for bug

marekrozmus commented

@MarkTension we have released new version, the branch from my previous comment does not exist anymore so please just use npm install @sandstreamdev/react-swipeable-list to install.

And you can set threshold on SwipeableList component, no need to do this separately for each SwipeableListItem.

  • 🚀1