in this tutorial we will see example of how to create splash screen with animation using react native. you can learn a concept of how to execute animated splash screen using react native. if you want to see example of how to use splash screen with animated using react native then you are a right place. if you want to see example of how to add splash screen with animated using react native then you are a right place. Here, Generating a basic example of react native splash screen with animated example.
Let’s start with following example:
Step 1: Download ProjectThe first step you need to run the following command to create a new project.
expo init ExampleAppStep 2: App.js
Now, we will open the App.js file to our editor and add the code.
import React, { useEffect, useState } from 'react';
import { View, StyleSheet, Animated, Text } from 'react-native';
const App = () => {
const [isVisible, setisVisible] = useState(true);
const width = new Animated.Value(0);
const height = new Animated.Value(0);
const IMAGE =
'https://tsc-website-production.s3.amazonaws.com/uploads/2018/05/React-Native.png';
useEffect(() => {
Animated.timing(
width,
{
toValue: 360,
duration: 1200,
useNativeDriver: false,
},
).start();
Animated.timing(
height,
{
toValue: 100,
duration: 1200,
useNativeDriver: false,
},
).start();
}, []);
const Hide_Splash_Screen = () => {
setisVisible(false);
}
useEffect(() => {
let myTimeout = setTimeout(() => {
Hide_Splash_Screen();
}, 3000);
return () => clearTimeout(myTimeout);
}, []);
const Splash_Screen = () => {
return (
<View style={styles.container}>
<Animated.Image
source={{ uri: IMAGE }}
style={{
width: width,
height: height,
position: 'absolute',
}}
resizeMode='cover'
/>
</View>
);
}
return (
<>
{
(isVisible === true) ? Splash_Screen() : (
<View style={styles.container}>
<Text style={styles.title}>Animated Splash Screen Example</Text>
</View>
)
}
</>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFF',
justifyContent: 'center',
alignItems: 'center',
},
title: {
fontSize:23,
fontWeight:'800',
},
});
export default App;
Run Project
expo startYou can scan QR code with your phone by using Expo Go Application.
output
0 Comments