react-native-reanimated not accepting rotation value in degrees

Question

I'm learning reanimated because it works on the UI thread and I want to achieve a rotation animation. Rotating in degrees (like 45deg) is not working and prompts an error. So how can we achieve rotation animation in react-native-reanimation v1(version 1)?

Surname

i m used Math.PI but its not getting proper result – Surname

Can you update your question to include a minimal, reproducible example. Currently it is not possible to run your code (as you haven't included any), so the ability for anyone to provide meaningful help is limited. – Preposition

Answer 1

Probably you need concat function from reanimated library:

import Animated, { concat } from 'react-native-reanimated';
...
return (
  <Animated.View style={{
    transform: [{rotateZ: concat(yourAnimatedValue, 'deg')}],
  }}/>
);

Suffice

Answer 2

The easiest way for me is doing like this (even if I don't understand why there is no interpolate for input number[] to output string[]...

const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ rotate: `${interpolate(rotation.value, [0, 1], [90, 180])}deg` }],
    }
  })

Jin

Answer 3

this way worked with me

"react-native-reanimated": "~2.12.0",

      let openTabProgress = useSharedValue(0);
    
    //careful next line it is useDerivedValue not useSharedValue

      let iconRotate = useDerivedValue(() => {
        return interpolate(openTabProgress.value, [0, 1], [0, 180]);
      });
    
      const upIconReanimatedStyle = useAnimatedStyle(() => {
        return {
          transform: [
            {
              rotate: iconRotate.value + "deg",
            },
          ],
        };
      });

Chambray

Answer 4

dont forget to pass as string like { transform: [{ rotate: '45deg' }] } not rotate: 45deg

Flanker

come friend i was pass string value only my question was its not accepting rotate animation – Surname

by the I was passing like this ==> const rotate = interpolate(transition, { inputRange: [0, 1], outputRange: ["0deg", "45deg"], }); ==> <Animated.View style={{ transform:[{ rotate }]}} /> – Surname

is your component Animated? – Flanker

where is the component you want to animate on? – Flanker