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: youandvern/react-tinder-card-demo@a2d6dcb
• 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

[AndersDJohnson]

No worries if no time to address - but noting that I'm experiencing the same issue. And I'm not sure memoizing will help, since I'd like to be able to change the internal state of the card to color it according to swipe left or right.

[AndersDJohnson]

No worries if no time to address - but noting that I'm experiencing the same issue. And I'm not sure memoizing will help, since I'd like to be able to change the internal state of the card to color it according to swipe left or right.

For what it's worth, I was able to work around this for now by memoizing the <TinderCard> JSX as suggested above, plus adding a custom class name to a wrapper <div> according to my swipe direction - i.e., swipe-direction-left or swipe-direction-right - and then having the internals of my cards react to that class by nesting rules under one or the other parent CSS selector, e.g.:

.swipe-direction-right .my-card-background {
  background-color: green;
}