Are these v1.x.x helper methods deprecated in V2 or am I using them wrong?

Question

I'm quite new to react-native-reanimated v2 and I have this use case:

I made a swipeDeck component where the user swipes a card and the next one is revealed. Animations are implemented and they work. But now I want to add this new feature where the next card is flipped (Y-rotation) based on the x.value of the swipe gesture.

The rotation works but I'd like to add functionality where the card has a back-side background. To do that I saw that there would be 2 images. and based on the rotationY the opacity swaps resulting on a visual flip of the card.

this is my code, and as soon as I implement the helper methods const { cond, and, greaterOrEq, lesserThan } = Animated; the app crashes.

Am I doing this right? And if not, how would I approach this? My current approach is based on a YT video from 2019: https://www.youtube.com/watch?v=eJtwpjCIRsA&t=3s

Here are some more snippets:

This is the dynamic styling for the front face of the underlying card.

const nextCardStyle = useAnimatedStyle(() => {    
    const nextCardScale = interpolate(x.value,
      [-dimensions.width / 2, 0, dimensions.width / 2],
      [1, 0.8, 1],
      Extrapolate.CLAMP);
  
    // const nextCardOpacity = interpolate(x.value,
    //   [-dimensions.width / 2, 0, dimensions.width / 2],
    //   [1, 0, 1],
    //   Extrapolate.CLAMP);
    
    const nextCardRotationY = interpolate(x.value,
      [-dimensions.width / 2, -dimensions.width / 5, 0, dimensions.width / 5, dimensions.width / 2],
      [0, 155, 180, 155, 0],
      Extrapolate.CLAMP);

    const nextCardOpacity = cond(and(greaterOrEq(nextCardRotationY, -90), lessThan(nextCardRotationY, 90)), 1, 0);

    return {
      transform: [
        // { perspective },
        { scale: nextCardScale },
        { rotateY: `${nextCardRotationY}deg`}
      ],
      opacity: nextCardOpacity,
    } 
  });

So basically whenever the card rotated 90deg it needs to become fully transparent. And the backface, following the same animation path, will become fully opaque.

but with these v1.x.x methods imported the app crashes.

score 0 · Answer 1 · answered Jul 23 '21 at 10:00

I was struggling with this for a bit, but tried to just rewrite the condition to plain js. You can just read the interpolated value.

so

const nextCardOpacity = cond(and(greaterOrEq(nextCardRotationY, -90), lessThan(nextCardRotationY, 90)), 1, 0);

became:

const nextCardOpacity = nextCardRotationY >= -90 && nextCardRotationY < 90 ? 1 : 0;

This works, hope this might help someone struggling with the same thing.

Are these v1.x.x helper methods deprecated in V2 or am I using them wrong?

1 Answers1