CODEWITHSUNDEEP
react-nativeanimationreact-animated
yaken
yaken

Reputation: 162

React Native - Animated.spring() isn't called as it should

The output I want : When I click on the card, it is flipped and it set isValidated to true. When I click a second time, is it flipped back to its original position.

I don't understand why I need to trigger onPressCard two times in order for the card to flip.

Console output are real strange too :

'rotationValue 0', when pressed 1 time

'rotationValue3 0 rotationValue 0' when pressed a second time

Here is the code :

    
interface RotativeCardProps {
  card: RotativeCardType,
  index: number
}

const Rotative = ({ card, index }: RotativeCardProps) => {
  const [isValidated, setIsValidated] = useState<boolean>(false);
  let rotationValue = 0;
  const animatedValue = new Animated.Value(0);
  animatedValue.addListener(({ value }) => { rotationValue = value; });

  const onPressCard = () => {
    if (!isValidated) { setIsValidated(true); }
    flipCard();
  };

  const flipCard = () => {
    console.log('rotationValue', rotationValue);

    if (rotationValue > 89) {
      console.log('rotationValue2', rotationValue);
      Animated.spring(animatedValue, {
        toValue: 0,
        friction: 8,
        tension: 10,
        useNativeDriver: true,
      }).start();
    } else {
      console.log('rotationValue3', rotationValue);
      Animated.spring(animatedValue, {
        toValue: 180,
        friction: 8,
        tension: 10,
        useNativeDriver: true,
      }).start();
    }
  };

  const frontInterpolate = animatedValue.interpolate({ inputRange: [0, 180], outputRange: ['0deg', '180deg'] });
  const backInterpolate = animatedValue.interpolate({ inputRange: [0, 180], outputRange: ['180deg', '360deg'] });
  const frontAnimatedStyle = { transform: [{ rotateY: frontInterpolate }] };
  const backAnimatedStyle = { transform: [{ rotateY: backInterpolate }] };

```

Upvotes: 1

Views: 254

Answers (1)

Mohan Murugesan
Mohan Murugesan

Reputation: 276

flipCard();

calling this function onPressCard should be removed and moved to useEffect

useEffect(()=>{
flipCard();
},[isValidated])

this fill fix the issue as set state is blocking the animation

Upvotes: 1

Related Questions