react-spring/native rotate animation - react-native

Question

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

Answer 1

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

Answer 2

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