Reanimated2: Transform with key of "rotate" must be a string

Question

I am using Reanimated2 on my React Native app in an Android emulator. I am trying to rotate a component using useAnimatedStyle. Here's my code. It works on iOS, but on Android I get an error.

const animatedStyle = useAnimatedStyle(() => {
    let rotate = interpolate(x.value, [-150, 0, 150], [-Math.PI / 36, 0, Math.PI / 36], Extrapolate.CLAMP);
    return {
      transform: [{ translateY: y.value }, { translateX: x.value }, { rotate }],
    }
  });

I'm getting the following error on Android only: Transform with key of "rotate" must be a string: {"rotate":0}]

Then I change the code to a string:

const animatedStyle = useAnimatedStyle(() => {
    let rotate = interpolate(x.value, [-150, 0, 150], ["-10deg", "0deg", "10deg"], Extrapolate.CLAMP);
    return {
      transform: [{ translateY: y.value }, { translateX: x.value }, { rotate }],
    }
  });

Then I get this error:

Error while updating property 'transform' of a view managed by: RTCView

null

For input string: "-10degNaN"

Can anyone help me fix this?

score 0 · Answer 1 · answered Jun 17 '21 at 00:34

https://docs.swmansion.com/react-native-reanimated/docs/1.x.x/nodes/interpolate/

The documentation states, that you should use your first approach. Interpolate the numbers and then add the deg afterwards.

This should do the trick:

const animatedStyle = useAnimatedStyle(() => {
    let rotate = interpolate(x.value, [-150, 0, 150], [-Math.PI / 36, 0, Math.PI / 36], Extrapolate.CLAMP);
    return {
      transform: [{ translateY: y.value }, { translateX: x.value }, { rotate: `${rotate}deg` }],
    }
  });

Reanimated2: Transform with key of "rotate" must be a string

1 Answers1