click not work on mobile view on tindercards

Can you share the code please? There are only examples available.

Thanks

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.

in index.js

React.useLayoutEffect(() => {
let offset = { x: null, y: null }
let speed = { x: 0, y: 0 }
let lastLocation = { x: 0, y: 0, time: new Date().getTime() }
let mouseIsClicked = false

How can I adjust this to get around this warning, please

My package.json
...

"dependencies": {
"@popperjs/core": "^2.9.0",
"@tailwindcss/postcss7-compat": "^2.0.2",
"autoprefixer": "^9",
"axios": "^0.21.1",
"dotenv": "^8.2.0",
"isomorphic-unfetch": "^3.1.0",
"next": "10.0.5",
"next-images": "^1.7.0",
"popper.js": "1.15.0",
"postcss": "^8.1.4",
"react": "17.0.1",
"react-accessible-accordion": "^3.3.4",
"react-awesome-reveal": "^3.7.1",
"react-collapsible": "^2.8.3",
"react-dom": "17.0.1",
"react-icons": "^4.2.0",
"react-responsive": "^7",
"react-tabs": "^3.2.0",
"react-tinder-card": "^1.3.1",
"react-transition-group": "^4.4.1",
"sass": "^1.32.5",
"swr": "^0.5.3"
},
"devDependencies": {
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-import": "^14.0.0",
"postcss-preset-env": "^6.7.0",
"precss": "^4.0.0",
"tailwindcss": "npm:@tailwindcss/postcss7-compat"
}
}...

won't build without updating packages. like React

There's a small typo in Advanced.js : alredyRemoved instead of alreadyRemoved.
Absolutely not code-breaking, just makes a small semantic error.

Hi, I'm not able to see any animation when I use the advanced example with swipe('top') or swipe('bottom') value. If I change to swipe('left') or swipe('right'), it works perfectly. I don't understand why.

Hey @3DJakob

I saw a weird issue in the advanced example.

I am sharing the video here.

The issue is when we swipe a card and then undo the action and then we click on the card it swipes the card in previous direction automatically.

There is an issue with typing preventSwipe?: [String], with more that one string in typescript.
Change it to String[].

I keep getting this error when using the 'Advanced' example. I'm not sure how the example is working using 'ref' on the functional component?

this is neat

When the card leaves the screen it doesn't get removed
is there any way to remove or hide the element after it has left the screen?

Shows error when using React v18+ but when force downloaded via --force it works well

Is it possible to do this? I would like to pass the key property value to the onSwipe function.
<TinderCard
className="swipe"
//key={person.name}//
key={person.email}
preventSwipe={["up", "down"]}
onSwipe={(e) => onSwipe(e.target.key)}
flickOnSwipe={true}
>

Styles are not add, i have installed this library, imported it, all working good, but without styles

Props interface is missing className, hence the issue thrown by Typescript.

Screen flickers after doing the swipe action. On swipe you can see the scroll bar at bottom for a split second until the next item is loaded. It is reproable in the demo too: https://3djakob.github.io/react-tinder-card-demo/

I have five characters and names and they do get swiped, but they dont leave screen

Module not found error after import TinderCard from 'react-tinder-card'

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

and more similar messages in the console.

I would like to create a swappable effect using buttons

This repo needs to be in typescript

Hi!

I use TinderCard with getting data from firebase via useEffect first. The example is shown with a local data-array - where it's easy to initially use the useMemo-hook (to get the binding to the TinderCard-html-element later).

In my case, with getting asynchronous data from a database first and storing them in a useState-hook:
const [users, setUsers] = useState([] as any[]);

… it's not possible to initialize the useMemo-hook, because the data isn’t loaded yet (as both hooks fire at the same time I guess).

I just want to achieve to do the swipe-animation when a button is pressed, but I can’t get the binding without useMemo (or?).
Any ideas how I can manage this? I already thought about something like putting a short timeout before executing useMemo, but I don’t know how to do this.

Thanks a lot in advance! :)