react-spring/native rotate animation-CodePudding

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

CodePudding user response：

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