Search code examples
react-nativeanimationreact-animated

Property 'rotateZ' is not supported by native animated module

I'm trying to include a rotation in my React Native animation. The object should rotate in a "2D way" around its center. In the standard CSS3 transform model, this would be a rotation about the Z axis.

style.transform = [{
    'rotateZ': animatedValue.interpolate({
        inputRange: [0, 1],
        outputRange: ['0rad', targetAngle + 'rad']
    })
}]

This code works well, as long as I don't use useNativeDriver = true. So it seems that React Native indeed expects us to use rotateZ to rotate an item in a 2D way.

However, with useNativeDriver = true, I get an error:

Property 'rotateZ' is not supported by native animated module

How can I do this rotation with the native driver?

Solution

  • Figured it out: I need to use rotate instead of rotateZ.

    This seems strange, given that rotateZ works when not using useNativeDriver = true.

    The full list of properties that are supported by the React Native native animation driver can be seen in the TRANSFORM_WHITELIST constant. In React Native 0.60, the following properties are supported:

    translateX
translateY
scale
scaleX
scaleY
rotate
rotateX
rotateY
perspective

    It seems the missing rotateZ has since been added.