CODEWITHSUNDEEP
react-nativereact-native-reanimated
viki
viki

Reputation: 77

react-native-reanimated not accepting rotation value in degrees

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

Upvotes: 4

Views: 9516

Answers (4)

Ahmed5G
Ahmed5G

Reputation: 385

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

Upvotes: 2

lmasneri
lmasneri

Reputation: 761

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

Upvotes: 6

Aliaksei Litsvin
Aliaksei Litsvin

Reputation: 1261

Probably you need concat function from reanimated library:

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

Upvotes: 8

Amir Doreh
Amir Doreh

Reputation: 1429

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

Upvotes: 1

Related Questions