0

I'm trying to animate a stack of cards moving up as the cards on the top get swiped off the deck but I cannot make the animation to run.

I try to run the animation when the number of cards on the deck changes

  useEffect(() => {
    LayoutAnimation.spring();
  },[currentCard]);

Also, I try to run it on the function that is called on swiped completion:

  function onSwipeComplete(direction) {
    const item = data[currentCard];
    direction === 1 ? onSwipeRigt(item) : onSwipeLeft(item);
    pan.setValue({ x: 0, y: 0 });
    setCurrentCard(index => index + 1);
    LayoutAnimation.configureNext({
      duration: 5000,
      update: {
        type: LayoutAnimation.Types.spring,
        springDamping: 0.7
      }
    });
  }

On the attached sandbox you will find both solutions implemented but of course I try to use one at the time.

To see the problem jump into the sandbox if you swipe the top card left or right you will notice that the cards bellow snap to the top, instead I want to slowly animate it to the top.

https://codesandbox.io/s/react-native-deckj-z1nwb?file=/src/Deck.js

Icaro
  • 14,585
  • 6
  • 60
  • 75
  • Have you tried this code on an emulator or an actual device? Because it works on my emulator, but doesn't work in the codesandbox (which probably doesn't support `LayoutAnimation` anyway) – giotskhada Jul 10 '20 at 11:44
  • @giotskhada I try on my iPhone and on an iPhone emulator and did not work. Did you try on an iPhone or Android? – Icaro Jul 10 '20 at 23:56
  • Tried it on an Android device (and emulator) and it works fine. In general `LayoutAnimation` should be working on IOS out of the box, so I don't think OS is the issue. Although, I did have to port your code to Typescript and may have unintentionally fixed an issue in the process, but I doubt it. Can you try it on Android somehow? – giotskhada Jul 11 '20 at 03:01

0 Answers0