Skip to content

Instantly share code, notes, and snippets.

@beije beije/Loading.js
Last active Oct 26, 2019

Embed
What would you like to do?
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
You can’t perform that action at this time.