React-native loading component example for my blog post about react-native animations - https://benjaminhorn.io/code/different-ways-to-implement-a-circular-infinite-animation-in-react-native/
import React from 'react'; | |
import { Animated, Easing, Image, StyleSheet, View } from 'react-native'; | |
const Loading = (props) => { | |
const iconAnimation = new Animated.Value(0); | |
// Loop the animation | |
Animated.loop( | |
Animated.sequence([ | |
Animated.delay(100), | |
Animated.timing( | |
iconAnimation, | |
{ | |
toValue: 1, | |
duration: 800, | |
useNativeDriver: true | |
} | |
), | |
Animated.timing( | |
iconAnimation, | |
{ | |
toValue: 0, | |
duration: 0, | |
useNativeDriver: true | |
} | |
), | |
]), | |
{} | |
).start(); | |
const rotationalAnimation = iconAnimation.interpolate({ | |
inputRange: [0, 1], | |
outputRange: ['0deg', '360deg'] | |
}) | |
return ( | |
<View {...props}> | |
<View style={styles.innerContainer}> | |
<Animated.View style={{transform: [{rotate: rotationalAnimation}] }}> | |
<Image source={require('../../assets/icons/loading_circle.png')} /> | |
</Animated.View> | |
</View> | |
</View> | |
); | |
}; | |
const styles = StyleSheet.create({ | |
innerContainer: { | |
justifyContent: 'center', | |
alignItems: 'center', | |
} | |
}); | |
export default Loading; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment