React-native-deck-swiper: Stack effect causes huge slowdowns

[MindRave]

Hello there!

Since the latest update, after the introduction of the stack effect, an app using the component becomes impossible to use. Frame rate is next to zero, and I'm afraid it's because the "renderStack" method does one simple thing: just renders everything.

So if I have 50 cards, it'll just render them all, one underneath the other, with no consideration for performance (my cards have a drop shadow, and the slight shade turned into a huge black cloud as they're all stacked one on top of another).

Maybe I'm wrong (I hope I am), maybe I'm not seeing something new I should use? I am kind of able to fix this on my own (by simply removing the stack effect completely), but I was wondering if anyone else saw this. The component became unusable on an iPhone X — the fastest Apple device as of now…

Using "showSecondCard" is really not an option — it's the weirdest thing, not seeing a second card underneath when you swipe the topmost card.

Thank you all in advance! 😄

[andreystarkov]

Same thing

[andreystarkov]

In "Exemples", with empty cards it works fine. But when i put into card some heavy component (~15 cards total), it works very slow. Tested only in simulator, with disabled debugger.

[dmitrika]

Seems, like we render all stack even if we can see only 3 cards.
https://github.com/alexbrillant/react-native-deck-swiper/blob/master/Swiper.js#L692

@alexbrillant What if we render only 3 cards?
1st from renderFirstCard()
2nd, 3rd from renderStack()

[alexbrillant]

All the cards are rendered. I need to review and test pull requests more carefully. Sorry guys :/
I am on it.

[alexbrillant]

@dmitrika @andreystarkov @MindRave The stack now cannot render more cards then the stackSize props.
Here is what it looks like so far https://github.com/alexbrillant/react-native-deck-swiper/blob/3d947effe1762bfb7c69eb227767f4a97c06e3a9/Exemples/Swiper.js#L699

I need to add a different animation for the last card if the swiping is infinite. Any ideas ? Maybe I could add one last card behind the stack at the same position of the last card.

[dmitrika]

Thanks for the fast fix!

Maybe I could add one last card behind the stack at the same position of the last card.

Yep, it seems reasonable and requires less additional animation. 👍

[webraptor]

The best fix would be using shouldComponentUpdate . Whenever someone pans on a card, the render and renderstack methods are called without that being necessary, since you're just moving content around.

[webraptor]

Will be pushing a fix for this one within the next few hours. Trying to nail https://github.com/alexbrillant/react-native-deck-swiper/issues/130 at the same time.

[webraptor]

If anyone's interested in the fix before it's merged: https://github.com/luminos-software/react-native-deck-swiper/commit/ff391f9fd11640190f81769895a84b2a3172e392