In this example we will learn how to create a Splash Screen In React Native Projects.
What is Splash Screen In React Native?
Not in React Native but also all types applications are using Splash Screen. Generally the Splash Screen opens first when the app launches. Mainly it contains a logo and name of the application. It redirects a new screen automatically after some seconds.
How to create Splash Screen in RN?
There is nothing to create a Splash Screen. You have to open the screen on launch which you want as splash screen. Then call the another class after any time period. A demo example is shown in the below code. You can use it directly by copying or can modify as you needed.
componentDidMount() calls when the component first loads and the setTimeout() method calls after completing the given time like 3000ms (3 second in below example). Create a component Splash.java either class or functional. After 3 seconds this Splash screen automatically redirects to the Login screen. Please replace the logo name by your logo name and put the logo in the assets folder.
import React from "react";
import {
View,
Text,
StyleSheet,
Image,
Alert,
Button
} from "react-native";
class Splash extends React.Component {
constructor(){
super();
this.state={
isVisible : true,
}
}
componentDidMount(){
setTimeout(() => {
this.props.navigation.navigate('Login');
}, 5000);
}
render() {
return (
<View style={[Style.container]}>
<View style={[Style.first]}>
<Image source={require('../assets/Logo.jpg')}/>
</View>
</View>
)
}
}
const Style = StyleSheet.create({
container: {
flex: 1,
},
first: {
}
})
export default Splash;
Optional
You have to first load this Splash Component in the app.js file in the React Native. If you are using Routes than declare initialRouteName: Splash to load first in the app like as below.
const appNavigator = createStackNavigator({
Login: {
screen: App
},
Register: {
screen: Register
},
Home: {
screen: Home
},
userdetails: {
screen: userdetails
},
Splash: {
screen: Splash,
},
},
{
initialRouteName: 'Splash'
}
);
Read out React Native Interview Questions.
Thank you for visiting the tutorial on FlutterTPoint. Please visit more Useful React Native Tutorials for improve your development skills.
For any query and issue you can comment in the comment section below, we will try to reply as soon as possible.