Stack is not animating after swipe the first two cards

[mariovillamizar]

Hey @webraptor thank you for your effort trying to keep this library alive. I found a weird bug where the stack stops animating (zooming the next cards) after swipe the first two cards. Take a look to this video: https://user-images.githubusercontent.com/10704258/132953264-65a11e59-19c2-4334-badb-e1a15bc662d7.mp4

[tichpla]

Hey @webraptor & @mariovillamizar I have the exact same bug as you have!

[aanikid]

hello guys, same issue here 😢

[DiegoBM]

Unfortunately chances are this repo is not maintained either. Same error by the way, seems to come all the way back from the original repository

[webraptor]

@DiegoBM if you fix the issue, please open a PR and it will be reviewed / merged. Thanks

[DiegoBM]

For those of you who want to stick with this library, the problem is that the state values for "stackPositionN" and "stackScaleN" (N being the position number for each stack card) are not being reseted or recalculated upon stack re-renders. You can hack your way around it if you create a function that resets those specific state values before the call to "calculateStackCardZoomStyle", then it will work again as intended (Hint: you can use "rebuildStackAnimatedValues" as reference).

Hope it helps.

[mariovillamizar]

@DiegoBM can you create a pull request for this fix?

[grapefruitlips]

It worked for me by adding this function to the Swiper class in Swiper.js

rebuildStackValues = () => {
    const stackPositionsAndScales = {}
    const { stackSize, stackSeparation, stackScale } = this.props
    for (let position = 0; position < stackSize; position++) {
      stackPositionsAndScales[`stackPosition${position}`] = new Animated.Value(stackSeparation * position)
      stackPositionsAndScales[`stackScale${position}`] = new Animated.Value((100 - stackScale * position) * 0.01)
    }
    return stackPositionsAndScales
  }

and then setting the new state inside onSwipedCallbacks function

onSwipedCallbacks = (swipeDirectionCallback) => {
this.setState(this.rebuildStackValues)  //<-- add this line

[aanikid]

@webraptor i am edited a PR for this issue can u check it plz thanks ;)

[webraptor]

for some reason I didn't get the notification back then.

[webraptor]

pushed on npm as 2.0.6