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)?

Can you update your question to include a [minimal, reproducible example](https://stackoverflow.com/help/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. — Andrew, Jul 13 '20 at 07:43

Aliaksei · Answer 1 · 2022-09-28T10:13:24.587

7

Probably you need concat function from reanimated library:

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

edited Sep 28 '22 at 10:13

answered Apr 05 '21 at 07:47

Aliaksei

1,094
11
20

score 4 · Answer 2 · answered Dec 06 '22 at 16:57

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` }],
    }
  })

score 1 · Answer 3 · answered Jul 13 '20 at 08:18

1

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

answered Jul 13 '20 at 08:18

Amir Doreh

1,369
1
13
25

come friend i was pass string value only my question was its not accepting rotate animation – viki Jul 13 '20 at 11:46
by the I was passing like this ==> const rotate = interpolate(transition, { inputRange: [0, 1], outputRange: ["0deg", "45deg"], }); ==> – viki Jul 13 '20 at 11:49
is your component Animated? – Amir Doreh Jul 13 '20 at 15:30
where is the component you want to animate on? – Amir Doreh Jul 13 '20 at 15:30

Ahmed5G · Answer 4 · 2023-02-28T18:47:54.977

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",
            },
          ],
        };
      });

react-native-reanimated not accepting rotation value in degrees

4 Answers4

Linked