Setting state in onSwipeRequirementFulfilled breaks animation in mobile browser

[youandvern]

Whenever I try to call a react state setter from within the onSwipeRequirementFulfilled callback, the card animation breaks for mobile browsers. The card seems to re-render and stops being dragged. You can keep holding the screen down and the callback keeps getting called, but the card is no longer being dragged. **This is only visible on mobile browsers or devtools mobile view.

I forked the demo repo to display this bug:

• Commit with changes to demo PR: https://github.com/youandvern/react-tinder-card-demo/commit/a2d6dcb347c1dc179e2badb6471428e4c863194a
• Live demo with active bug: https://youandvern.github.io/react-tinder-card-demo/

[3DJakob]

Ok, good catch! Unfortunately, I don't have time to look at this right now but PRs are accepted.

[ikesler]

As a workaround - put TinderCard in React's useMemo. Working flawlessly for me. Btw, the issue happened to me also in desktop.

[anonimitoraf]

Hey @ikesler do you mind elaborating or giving a snippet of how you did it?

[ikesler]

Hey @ikesler do you mind elaborating or giving a snippet of how you did it?

The code was a bit specific to my project, here is the simplified version:

  const MemoizedCard = useMemo(() => (
    <VerseSwipeCardInternal {...myPropsObj} />
  ), [...myPropsArray]);

const VerseSwipeCardInternal: FC<VerseSwipeCardInternalProps> = (props) => {
...
  return <TinderCard
...
}

And yes - we've switched to entirely different UX eventually, so I do not use swipes anymore

[anonimitoraf]

Ah, thanks for sharing