search

3DJakob / react-tinder-card

A npm react module for making react elements swipeable like in the dating app tinder.
https://www.npmjs.com/package/react-tinder-card
MIT License
353 stars 110 forks source link

Examples with HTTP loading #36

Open leifg opened 3 years ago

leifg commented 3 years ago

I absolutely love this library. It makes the swiping gesture super convenient.

I was wondering though if anyone ever achieved a loading additional parts of the stack from an external resource (load 10 cards initially, once you get to 2 or 3 cards, load the rest and add them to the "back").

For me unfortunately updating the stack seems to get in the way of the animation. whenever I call a setState in one of the callback function, the animation gets messed up.

I already try to make sure to just use useRef for the onSwipe callback and only set the new state in the onLeftScreen callback but it still seems kinda clunky.

What I'm doing right now is only fetching new cards once the whole stack has been depleted, that seems to work but it would be great if I could have an "endless" stack by loading new cards whenever the stack gets close to zero.

3DJakob commented 3 years ago

@leifg Hey glad you like my module! Yes this problem has been very apparent when developing this module. For instance if you take a look at my advanced example you can see a very ugly work around for this using a global variable of which cards to be removed (https://github.com/3DJakob/react-tinder-card-demo/blob/master/src/examples/Advanced.js#L28). I did this to avoid rerenders while cards are animating.

With this in mind you can do a similar implementation. It is fine to modify the cards array as long as the user is not moving any cards and secondly there are no cards currently animating. This is problematic because although onLeftScreen might have happened the user might already have started moving the next one.

I might revisit this plugin in the future as I believe it would be possible to fix this in a smarter way but I don't have time for that right now unfortunately.

Another possible solution for your specific problem could be having two tinder card stacks with different state arrays on top of each other. As soon as the first one is depleted you could move it to the bottom and add new cards. This would probably solve your issue! An even better variant of this would probably be just rendering 2 cards at the time. As soon as one of them calls onLeftScreen just put it in the back with new card information.

I hope this helps! And if it does please reply here so I can see how you solved it. Good luck!

msveshnikov commented 2 years ago

Hi guys, I think I implemented endless loading quite well here: https://github.com/msveshnikov/swiper/blob/master/src/App.js

Demo: https://swiper.ml/