Splash Screen is a View containing Images and Text that shows when the app starts first time, it will automatically hide after few seconds(3-5) from the screen and only shows when the application starts next time. Splash screen is mostly used to show a message from app developer and also shows the progress bar while loading data from backhand. So in this tutorial we would going to implement Create Simple Splash Screen in React Native Android iOS App full example tutorial. The splash screen is mostly used in E-Commerce applications to show daily offers and daily deals directly to app user each and every time when user opens the application, like New year offers, festival offers etc. The big E-Commerce platforms FlipKart, Amazon, Jabong, E-bay, Myntra, Snapdeal and Shopclues uses the Splash screen feature in their apps.
Screenshot:
Splash screen close Icon image: This button will show just the right top corner of Splash screen, If user want to hide the splash screen before the automatically hiding time then user can close the splash screen by pressing this button.
Image used in this tutorial: I am using a welcome image in this tutorial to welcome the user on my application. You can use any image as per your requirement in this tutorial.
Contents in this project Create Simple Splash Screen in React Native Android iOS App Example Tutorial:
1. Import Platform, StyleSheet, View, Text, Image, TouchableOpacity and Alert component in your project.
|
1 2 3 |
import React, { Component } from 'react'; import { Platform, StyleSheet, View, Text, Image, TouchableOpacity, Alert } from 'react-native'; |
2. Create constructor() in your project, Now we would make a Boolean type state named as isVisible and set its default value as True. This state is used to show and hide the Splash screen.
|
1 2 3 4 5 6 7 8 9 10 11 |
constructor(){ super(); this.state={ isVisible : true, } } |
3. Create a function named as Hide_Splash_Screen(), This function would change the State value as False.
|
1 2 3 4 5 6 7 8 |
Hide_Splash_Screen=()=>{ this.setState({ isVisible : false }); } |
4. Create componentDidMount() method in your class. This is a inbuilt method and called automatically when app starts up every time. We are using the setTimeout() JavaScript function to change state after given time. So it would automatically change the state value. Here 1000 = 1 second.
|
1 2 3 4 5 6 7 8 9 |
componentDidMount(){ var that = this; setTimeout(function(){ that.Hide_Splash_Screen(); }, 5000); |
5. Create Splash screen view in render’s block and store the complete View inside let variable.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
render() { let Splash_Screen = ( <View style={styles.SplashScreen_RootView}> <View style={styles.SplashScreen_ChildView}> {/* Put all your components Image and Text here inside Child view which you want to show in Splash Screen. */} <Image source={{uri: 'https://reactnativecode.com/wp-content/uploads/2018/01/welcome.png'}} style={{width:'100%', height: '100%', resizeMode: 'contain'}} /> </View> <TouchableOpacity activeOpacity = { 0.5 } style={styles.TouchableOpacity_Style} onPress={this.Hide_Splash_Screen} > <Image source={{uri: 'https://reactnativecode.com/wp-content/uploads/2018/01/close_button.png'}} style={{width:25, height: 25}} /> </TouchableOpacity> </View> ) return( ); } |
6. Create A root View in render’s return block. Now we would call the Splash_Screen with Ternary operator, If the value of State is True then it will show the Splash screen and if the State value is false the it will hide the splash screen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
render() { let Splash_Screen = ( <View style={styles.SplashScreen_RootView}> <View style={styles.SplashScreen_ChildView}> {/* Put all your components Image and Text here inside Child view which you want to show in Splash Screen. */} <Image source={{uri: 'https://reactnativecode.com/wp-content/uploads/2018/01/welcome.png'}} style={{width:'100%', height: '100%', resizeMode: 'contain'}} /> </View> <TouchableOpacity activeOpacity = { 0.5 } style={styles.TouchableOpacity_Style} onPress={this.Hide_Splash_Screen} > <Image source={{uri: 'https://reactnativecode.com/wp-content/uploads/2018/01/close_button.png'}} style={{width:25, height: 25}} /> </TouchableOpacity> </View> ) return( <View style = { styles.MainContainer }> <Text style={{textAlign: 'center'}}> Hello Guys </Text> { (this.state.isVisible === true) ? Splash_Screen : null } </View> ); } |
7. Create Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
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: '#00BCD4', flex:1, margin: 20, }, TouchableOpacity_Style:{ width:25, height: 25, top:9, right:9, position: 'absolute' } }); |
8. Complete source code for App.js File :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
import React, { Component } from 'react'; import { Platform, StyleSheet, View, Text, Image, TouchableOpacity, Alert } from 'react-native'; export default class Myapp 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}> {/* Put all your components Image and Text here inside Child view which you want to show in Splash Screen. */} <Image source={{uri: 'https://reactnativecode.com/wp-content/uploads/2018/01/welcome.png'}} style={{width:'100%', height: '100%', resizeMode: 'contain'}} /> </View> <TouchableOpacity activeOpacity = { 0.5 } style={styles.TouchableOpacity_Style} onPress={this.Hide_Splash_Screen} > <Image source={{uri: 'https://reactnativecode.com/wp-content/uploads/2018/01/close_button.png'}} style={{width:25, height: 25}} /> </TouchableOpacity> </View> ) return( <View style = { styles.MainContainer }> <Text style={{textAlign: 'center'}}> Hello Guys </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: '#00BCD4', flex:1, margin: 20, }, TouchableOpacity_Style:{ width:25, height: 25, top:9, right:9, position: 'absolute' } }); |
Screenshots in Android device :
Screenshots in iOS device :
Also Read :
React Native Getting Started With NativeBase Cross Platform UI Components
React Native Refresh Previous Screen on Go Back React Navigation Example
React Native Fast Image Cache Package – Android iOS Example
React Native Custom Radio Button Group Component for Android iOS
React Native Convert Complete Array Object To Single String Variable
what is that=this sir?????????????
Sanjeep what are u asking ?
Sir in componentwillmount
var that=this; ??????what is that????????
Sanjeep we just storing the this object into that variable so we can use this using that.
that is just a var?
Sandeep that is class object.
this is not the splash screen. this is a real misunderstanding of splash screen conseption
Hello sir,
thanks for the code. it worked for me but I had a white area between the status bar and the splash and I don’t know why . can you help me please?
I had that white area with android
Samar the white area is around the cross button ? or as the background .
Nice post, thank you!
While it does not use the classic concept of an app splash screen (system-driven more than application-driven), it is a really simple solution.
Are you aware of any limitations your approach might have compared to other solutions that require using the specific OS IDE’s (Android Studio and XCode) and/or additional splash screen libraries?
How can this called be a Splash Screen ?
Splash Screen should be shown at the time of App loading not after the App is loaded.
Goutham currently there is not certain component for splash screen so its just a way to do it for now.
sir navigation bar is showing with splash screen how i can hide bar for splash screen and show for home screen
Gourav you want to hide the top navigation bar then you have to read our this tutorial : https://reactnativecode.com/hide-activity-navigation-bar/ .
If i will go with this approach, specially in iOS, first iOS will show its default splash screen and then load our react native application. Does there any way that i can directly load react native page and avoid that white/black screen in iOS application.
Ravi you want to load the content of your app while it shows us the splash screen ? Am i right ?