React Native Splash Screen Example

Hi friends,

Today, I am explaining react native splash screen example. I will show you the splash screen in react native. In this tutorial, we’ll demonstrate how to build and show a splash screen in React Native. We’ll walk you through how to build stunning welcome displays for both iOS and Android apps using react native splash screen.

A splash screen is arguably the best way to make your mobile application’s brand name and icon stick in the user’s subconscious. The splash screen is the first screen that appears before the user accesses the rest of your app’s functionalities.

There are many benefits to creating a splash screen in React Native.

So let's start following example:

Step 1 - Create project

expo init nicesnippets

Step 2 - App.js

import React, { Component } from 'react';  
import { Platform, StyleSheet, View, Text,  Image, TouchableOpacity, Alert } from 'react-native';  

export default class Nicesnippetsapp extends Component<{}>  
{  
   constructor(){  
         super();  
         this.state={  
         isVisible : true,  
        }  
    }

    Hide_Splash_Screen=()=>{  
        this.setState({   
          isVisible : false   
        });  
    }  
   
   componentDidMount(){  
    var that = this;  
    setTimeout(function(){  
      that.Hide_Splash_Screen();  
    }, 5000);  
    }  
   
    render()  
    {  
        let Splash_Screen = (  
             <View style={styles.SplashScreen_RootView}>  
                 <View style={styles.SplashScreen_ChildView}>  
                       <Image source={{uri:'https://www.pngkey.com/png/full/826-8263801_react-native-debugger-react-native-icon.png'}} style={{width:'100%', height: '100%', resizeMode: 'contain'}} />  
                </View>  
             </View> )  
         return(  
             <View style = { styles.MainContainer }>  
                <Text style={{textAlign: 'center'}}> Splash Screen Example - nicesnippets.com</Text>  
                 {  
                  (this.state.isVisible === true) ? Splash_Screen : null  
                }  
            </View>  
              );  
    }  
}  
 const styles = StyleSheet.create(  
{  
    MainContainer:  
    {  
        flex: 1,  
        justifyContent: 'center',  
        alignItems: 'center',  
        paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0  
    },  
   
    SplashScreen_RootView:  
    {  
        justifyContent: 'center',  
        flex:1,  
        margin: 10,  
        position: 'absolute',  
        width: '100%',  
        height: '100%',  
      },  
   
    SplashScreen_ChildView:  
    {  
        justifyContent: 'center',  
        alignItems: 'center',  
        backgroundColor: '#008B8B',  
        flex:1,  
    },  
}); 

Step 3 - Run project

expo start

Output: