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: ‘/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: ‘/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: ‘/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: ‘/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: ‘/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: ‘/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
