React Native Splash Screen

Splash Screen is a view which contains Text or Images that shows when the app first starts. It is used when the mobile app requires essential information before its start. The application may load the information from some external API or local storage.

Without that information, the application may not be able to display the user interface. For example, the application requires checking whether the user is authorized and deciding which screen is to display.

The Splash Screen will automatically hide after a few seconds (3-5) from the screen and display when the application starts next time.

Splash Screen Example

1. Import Platform, StyleSheet, View, Text, Image, TouchableOpacity, and Alert components in your project.
2. Create constructor() in the project and make a Boolean type state named as isVisible and set its default value true. This state is used to show and hide the Splash screen.
3. Create a function named as Hide_Splash_Screen(). It changes the state value as false.
4. Create componentDidMount() method in your class. It is an inbuilt method and called when the app fully loaded. In the same method, we can use the setTimeout() JavaScript function to change the state after a given time.

App.js

1. import React, { Component } from 'react';  
2.  import { Platform, StyleSheet, View, Text,  
3.  Image, TouchableOpacity, Alert } from 'react-native';  
4.  export default class Myapp extends Component<{}>  
5. {  
6.    constructor(){  
7.      super();  
8.      this.state={  
9.      isVisible : true,  
10.     }  
11.   }  
12.    Hide_Splash_Screen=()=>{  
13.     this.setState({   
14.       isVisible : false   
15.     });  
16.   }  
17.    
18.   componentDidMount(){  
19.     var that = this;  
20.     setTimeout(function(){  
21.       that.Hide_Splash_Screen();  
22.     }, 5000);  
23.    }  
24.    
25.     render()  
26.     {  
27.         let Splash_Screen = (  
28.              <View style={styles.SplashScreen_RootView}>  
29.                  <View style={styles.SplashScreen_ChildView}>  
30.                        <Image source={{uri:'https://static.javatpoint.com/tutorial/react-native/images/react-native-tutorial.png'}}  
31.                     style={{width:'100%', height: '100%', resizeMode: 'contain'}} />  
32.                 </View>  
33.              </View> )  
34.          return(  
35.              <View style = { styles.MainContainer }>  
36.                 <Text style={{textAlign: 'center'}}> Splash Screen Example</Text>  
37.                  {  
38.                   (this.state.isVisible === true) ? Splash_Screen : null  
39.                 }  
40.             </View>  
41.               );  
42.     }  
43. }  
44.  const styles = StyleSheet.create(  
45. {  
46.     MainContainer:  
47.     {  
48.         flex: 1,  
49.         justifyContent: 'center',  
50.         alignItems: 'center',  
51.         paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0  
52.     },  
53.    
54.     SplashScreen_RootView:  
55.     {  
56.         justifyContent: 'center',  
57.         flex:1,  
58.         margin: 10,  
59.         position: 'absolute',  
60.         width: '100%',  
61.         height: '100%',  
62.       },  
63.    
64.     SplashScreen_ChildView:  
65.     {  
66.         justifyContent: 'center',  
67.         alignItems: 'center',  
68.         backgroundColor: '#00BCD4',  
69.         flex:1,  
70.     },  
71. });  

Output: