0

I am using reanimated on a project and I am receiving an error

Argument of type '() => { transform: ({ rotateX: `${number}deg`; rotateY?: undefined; } | { rotateY: `${number}deg`; rotateX?: undefined; })[]; }' is not assignable to parameter of type '() => DefaultStyle'.

React Native version : 0.78.0 Reanimated Version : 3.17.1

export const FlipCard = ({
  isFlipped,
  cardStyle,
  direction = "y",
  duration = 500,
  RegularContent,
  FlippedContent,
}: FlipCardProps) => {
  const isDirectionX = direction === "x"

  const regularCardAnimatedStyle = useAnimatedStyle(() => {
    const spinValue = interpolate(Number(isFlipped.value), [0, 1], [0, 180])
    const rotateValue = withTiming(`${spinValue}deg`, { duration })

    return {
      transform: [isDirectionX ? { rotateX: rotateValue } : { rotateY: rotateValue }],
    }
  })

  const flippedCardAnimatedStyle = useAnimatedStyle(() => {
    const spinValue = interpolate(Number(isFlipped.value), [0, 1], [180, 360])
    const rotateValue = withTiming(`${spinValue}deg`, { duration })

    return {
      transform: [isDirectionX ? { rotateX: rotateValue } : { rotateY: rotateValue }],
    }
  })

My code is from the reanimated documentation and when replacing their code with mine in a snack everything works as expected. Any thoughts as to what is going on?

Documentation used : https://docs.swmansion.com/react-native-reanimated/examples/flipCard/

2
  • Where are you getting this error? Commented Mar 14 at 4:28
  • Can You Share Full Code For More Clarity So You Give Us Chance To Debug What Is Actually Happening Because I Tested Your Code Myself And It Works And About The Snack I Am Not Confident Enough Now Commented Aug 15 at 19:35

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.