Invariant Violation: Rotate transform must be expressed in degrees (deg) or radians (rad)
Closed this issue · 5 comments
Is there an existing issue for this?
- I have searched the existing issues
Current Behavior
MotiView with a rotate transform and an animation loop results in the following exception:
Invariant Violation: Rotate transform must be expressed in degrees (deg) or radians (rad): {"rotate":"undefinedNaN"}
Tested on iOS only.
Expected Behavior
No exception.
Steps To Reproduce
- Instantiate the following
MotiView:
<MotiView
from={{
opacity: 0,
transform: [
{ rotate: '45deg' },
],
}}
animate={{
opacity: 1,
}}
transition={{
loop: true,
type: 'timing',
duration: 500,
}}
>
<Text>
Hello, Moti.
</Text>
</MotiView>
Versions
- Moti: 0.18.0
- Reanimated: 2.9.1
- React Native: 0.68.2Screenshots
No response
Reproduction
Attempted to create an Expo example, but received an error when executing:
npx create-react-native-app -t with-moti
hey! could you make an expo snack?
I'm getting a similar issue, which is causing a spinner I made to freeze.
You can see it starts out with 0deg and transitions to 360deg and then repeats, but while it repeats, the value sometimes becomes undefined.
Here is a link to the code.
Here is a video showing what happens.
Here is a link to my story on storybook. I'm getting the same issue on Android and iOS.
I also believe that the value becomes undefined right after nextAnimation.onFrame is called in the reanimated repeat logic. In other words, nextAnimation.current becomes undefined for some reason. I'm not sure if this helps.
Any shot you guys could provide an Expo snack?