React Native Splash Screen Animation using the React Native Animated API
Animations are a cool way to present your application for a good user experience. If you are coming from YouTube, this is the same source for the video, feel free to copy the codes.
So we are making use of the animated from react native which we used to achieve the bounce effects using the native drive api.
I am not explaining much but I need to make this available because of the YouTube video
import React, {Component} from 'react';
import {
View,
Image,
Text,
StyleSheet,
Animated,
ActivityIndicator,
} from 'react-native';
class LoadingScene extends Component {
componentDidMount() {
const {LogoAnime, LogoText} = this.state;
Animated.parallel([
Animated.spring(LogoAnime, {
toValue: 1,
tension: 10,
friction: 2,
duration: 1000,
}).start(),
Animated.timing(LogoText, {
toValue: 1,
duration: 1200,
}),
]).start(() => {
this.setState({
loadingSpinner: true,
});
setTimeout(switchToAuth, 1500);
});
}
render() {
return (
<View style={styles.container}>
<Animated.View
style={{
opacity: this.state.LogoAnime,
top: this.state.LogoAnime.interpolate({
inputRange: [0, 1],
outputRange: [80, 0],
}),
}}>
<Image source={Logo} />
{this.state.loadingSpinner ? (
<ActivityIndicator
style={{
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
alignItems: 'center',
justifyContent: 'center',
}}
size="large"
color="#5257f2"
/>
) : null}
</Animated.View>
<Animated.View style={{opacity: this.state.LogoText}}>
<Text style={styles.logoText}> LogoText </Text>
</Animated.View>
</View>
);
}
}
Here is the video, feel free to watch it.
