Skip to content

Commit

Permalink
Prevent all except pressable
Browse files Browse the repository at this point in the history
Prevent default on all touchstart events except elements with the class "pressable". This allows to press elements without trigger scroll when pressing the card on mobile.
  • Loading branch information
3DJakob committed Oct 18, 2022
1 parent 3432fcc commit 47f660c
Show file tree
Hide file tree
Showing 3 changed files with 6 additions and 2 deletions.
2 changes: 1 addition & 1 deletion index.js
Expand Up @@ -203,7 +203,7 @@ const TinderCard = React.forwardRef(

React.useLayoutEffect(() => {
element.current.addEventListener(('touchstart'), (ev) => {
if (ev.srcElement.className.includes('card') && ev.cancelable) {
if (!ev.srcElement.className.includes('pressable') && ev.cancelable) {
ev.preventDefault()
}
})
Expand Down
2 changes: 1 addition & 1 deletion package.json
@@ -1,6 +1,6 @@
{
"name": "react-tinder-card",
"version": "1.6.0",
"version": "1.6.1",
"description": "A npm react module for making react elements swipeable like in the dating app tinder.",
"repository": "3DJakob/react-tinder-card",
"license": "MIT",
Expand Down
4 changes: 4 additions & 0 deletions readme.md
Expand Up @@ -68,6 +68,10 @@ The advanced example implements a state to dynamically remove swiped elements as

Both Web code examples can be tested on the [demo page.](https://3djakob.github.io/react-tinder-card-demo/) The Native code examples can be cloned and runned using `expo start`.

## Buttons inside a TinderCard

If you want a pressable element inside a TinderCard you will need to add `className="pressable"` for it to work properly on mobile. This is because touchstart events are normally prevent defaulted to avoid scrolling the page when dragging cards around.

## Props

### `flickOnSwipe`
Expand Down

0 comments on commit 47f660c

Please sign in to comment.