react-spring/native rotate animation

menaka 0
Viewed 47

I am using react-spring lib. in the react-native application. I have archived most of animation but I can not figure out how to use rotate init.

Here is my current code =>

  <Spring
        from={ { width: '100%', resizeMode: "contain", rotate: 0 } }
        to={ { rotate: 360 } }
        loop
        config={ { duration: 1500 } }
    >
        {({ rotate, ...props }) => (
            <AnimatedImage source={img} style={ {...props, transform: [{ rotate: `${rotate}deg` }]} } />
        )}
    </Spring>

Then get a error Like this =>

TypeError: undefined is not a function (near '...transform.forEach...')

If someone can explain how to achieve the rotate animation with react-spring it would be really helpful.

you can find a simple example here

react-spring react-native
2 Answers

react-spring/native it's web based library maybe it's work but there's no clear way for it, but on the other hand you can archive this animation using native Animated like this:

const App: () => Node = () => {
  const spinValue = new Animated.Value(0);

  const spin = () => {
    spinValue.setValue(0);
    Animated.timing(spinValue, {
      toValue: 1,
      duration: 1500,
      easing: Easing.linear,
      useNativeDriver: true,
    }).start(() => spin());
  };
  useEffect(() => {
    spin();
  }, []);

  const rotate = spinValue.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg'],
  });
  return (
    <SafeAreaView>
      <View style={styles.container}>
        <Animated.View style={{transform: [{rotate}]}}>
          <AntDesign name={'loading1'} color={'blue'} size={50} />
        </Animated.View>
      </View>
    </SafeAreaView>
  );
};

you can check this working example from here.

and here's a repo on github with a working react native project also from here.

Hope it helps you :D

Louay Sleman0

You can achieve the rotation animation in @react-spring/native by using the interpolations methods.

const AnimatedImage = animated(Image)

const App = () => {
  
  const { rotate } = useSpring({
        from: { rotate: 0 },
        to: { rotate: 1 },
        loop: { reverse: true },
        config: { duration: 1500 }
    })
  
  return (
    <AnimatedImage source={img} style={{ transform: [ { rotate: rotate.to([0, 1], ['0deg', '360deg']) } ] }} />
  );
};

It is strange that we can not apply rotation directly, but i haven't found any other method other than this one in @react-spring/native

menaka0
Related