React Native: update card issue

[abdullah-aj]

Hi,

I tried this library and it is really amazing. However, I am facing one critical issue, due to which I cant use it.

Platform: React Native: ios & android
Issue: On updating the data source, the tinder card switches back to card one.

Basically, what I am trying to do is; To show many cards with some static images initially, same as the example. but every card has a button to open the camera and capture a new image, which will then replace the static image. However, when I update the data source, the TinderCard switches back to card one.

I understand that state update rerenders the component, but I have tried to render every card individually in a separate state and still, I am facing this issue.

I even tried to save the image sources separately as a useRef, but still, when the image updates even in a single card, the whole deck resets and card one comes to the screen.

Kindly look into this issue.

[3DJakob]

This is unfortunately a bit tricky problem to solve. The issue lies in the fact that if react would track all card positions live in states the animations would be laggy. Thus they are not kept in state. That means that they get reset once a re-render occurs.

One way of solving this is updating your data array once a card has left the screen. However, the problem with that solution is that if the user quickly starts moving the next card before the first leaves the dragged card instantly snaps back. However, if the user never is swiping cards while you change images then it is as simple a removing the cards that have left the screen when updating the images to the state.

If not you need to use multiple card data states or use global variables for your data. Look at the native advanced usage example it is native but the code should be pretty much identical on the web. It uses an implementation that allows for dynamically removing swiped cards using global variables. It's not exactly what you are trying to do but it tackles the same issue.

I hope that can be help. I think with the knowledge of how it works you should be able to fix it.

Side note:
In the future it could be useful to send x and y coordintes on the left screen event and then allow a position input that would allow the user to render them outside when re-rendering which would be nicer since the undo buttons would still work for those cards then.