App Intro Slider is a group of multiple slides shows at the application start time in mobile phones. App Intro Slider contain useful information in picture format about application like what is the most useful nature of application. In react native we can create App Intro Slider using react-native-app-intro-slider NPM GitHub library. I am telling you guys this library is awesome and if you want to make cool app intro slider in react native for both android and iOS devices this should be your choice. This library comes with a ton of features to customize the app intro slider. We can put our own icons, title text, description text, set background color and style the text. So let’s get started .
Note: Icon image used in current project is in white color so it may be not display properly on white background screen.
Contents in this project React Native Create App Intro Slider Welcome Walk-through Screen Android iOS Tutorial:
1. Open your react native project folder in Command Prompt or Terminal and execute below NPM command to install react-native-app-intro-slider library.
|
1
|
npm install react–native–app–intro–slider —save
|
Screenshot of CMD:
There is no need to execute react-native link command, because this library is developed in pure react native JavaScript code.
2. Open your project’s App.js file and import StyleSheet, View, Text & Platform component.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text, Platform } from ‘react-native’;
|
3. Import AppIntroSlider component from react-native-app-intro-slider library in your project.
|
1
|
import AppIntroSlider from ‘react-native-app-intro-slider’;
|
4. Create constructor() in class. In constructor() we would make a State named as show_Main_App containing Boolean value. We would set its default value as false. This state is used to manage App intro slider and real application screen scenario. If state value is false then the App intro slider will display on screen and if its value is true then the application main screen will display.
|
1
2
3
4
5
6
7
8
|
constructor(props) {
super(props);
this.state = {
show_Main_App: false
};
}
|
5. Create 2 functions named as on_Done_all_slides() and on_Skip_slides(). In both functions we would change the state value from false to true. We would call these functions on slider Done & Skip buttons.
|
1
2
3
4
5
6
7
|
on_Done_all_slides = () => {
this.setState({ show_Main_App: true });
};
on_Skip_slides = () => {
this.setState({ show_Main_App: true });
};
|
6. Put a IF condition with show_Main_App state in render’s block. If the state value is true then it will show us the main application screen and if the state value is false then it will display the App intro slider screen. In the Else part we would create the AppIntroSlider component and call the both functions on onDone & onSkip prop.
slides : Here we calls the slides constant array created after styles.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
render() {
if (this.state.show_Main_App) {
return (
<View style={styles.MainContainer}>
<Text style={{ textAlign: ‘center’, fontSize: 20, color: ‘#000’ }}>
This is your main App screen After App Intro.
</Text>
</View>
);
} else {
return (
<AppIntroSlider
slides={slides}
onDone={this.on_Done_all_slides}
showSkipButton={true}
onSkip={this.on_Skip_slides}
/>
);
}
}
|
7. Creating 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
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
alignItems: ‘center’,
justifyContent: ‘center’,
padding: 20
},
title: {
fontSize: 26,
color: ‘#fff’,
fontWeight: ‘bold’,
textAlign: ‘center’,
marginTop: 20,
},
text: {
color: ‘#fff’,
fontSize: 20,
},
image: {
width: 200,
height: 200,
resizeMode: ‘contain’
}
});
|
8. Creating a constant array named as slides. This array will contain all information about slides. We have to create the array at the end of code after declaring Style sheet code. because if we create the array before declaring style sheet code then the styles will not not be able to call successfully in slides.
- key : Should be unique for each slide.
- title : Title of slide.
- text : Description text of slide.
- image : Pass the image Path in slide here.
- titleStyle : Call the title style here.
- textStyle : Description text style.
- imageStyle : Call the image style.
- backgroundColor : Define background color HEX color code format.
|
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
|
const slides = [
{
key: ‘k1’,
title: ‘Event Organizer’,
text: ‘Best Event Organizers’,
image: {
uri:
‘/wp-content/uploads/2019/04/calendar.png’,
},
titleStyle: styles.title,
textStyle: styles.text,
imageStyle: styles.image,
backgroundColor: ‘#FF1744’,
},
{
key: ‘k2’,
title: ‘Weather Reports’,
text: ‘Latest Weather Reports’,
image: {
uri:
‘/wp-content/uploads/2019/04/cloud.png’,
},
titleStyle: styles.title,
textStyle: styles.text,
imageStyle: styles.image,
backgroundColor: ‘#D500F9’,
},
{
key: ‘k3’,
title: ‘Technology Informations’,
text: ‘Latest Technology Reports’,
image: {
uri: ‘/wp-content/uploads/2019/04/computer.png’,
},
titleStyle: styles.title,
textStyle: styles.text,
imageStyle: styles.image,
backgroundColor: ‘#2979FF’,
},
{
key: ‘k4’,
title: ‘Flight Bookings’,
text: ‘ Best Deals on Flights’,
image: {
uri: ‘/wp-content/uploads/2019/04/flight.png’,
},
titleStyle: styles.title,
textStyle: styles.text,
imageStyle: styles.image,
backgroundColor: ‘#1DE9B6’,
},
{
key: ‘k5’,
title: ‘Restaurant Bookings’,
text: ‘ 20% off on first Restaurant booking’,
image: {
uri:
‘/wp-content/uploads/2019/04/restaurants.png’,
},
titleStyle: styles.title,
textStyle: styles.text,
imageStyle: styles.image,
backgroundColor: ‘#FF3D00’,
},
];
|
9. Complete source code for App.js file class.
|
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
129
130
131
132
133
134
135
136
137
138
139
140
141
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text, Platform } from ‘react-native’;
import AppIntroSlider from ‘react-native-app-intro-slider’;
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
show_Main_App: false
};
}
on_Done_all_slides = () => {
this.setState({ show_Main_App: true });
};
on_Skip_slides = () => {
this.setState({ show_Main_App: true });
};
render() {
if (this.state.show_Main_App) {
return (
<View style={styles.MainContainer}>
<Text style={{ textAlign: ‘center’, fontSize: 20, color: ‘#000’ }}>
This is your main App screen After App Intro.
</Text>
</View>
);
} else {
return (
<AppIntroSlider
slides={slides}
onDone={this.on_Done_all_slides}
showSkipButton={true}
onSkip={this.on_Skip_slides}
/>
);
}
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
alignItems: ‘center’,
justifyContent: ‘center’,
padding: 20
},
title: {
fontSize: 26,
color: ‘#fff’,
fontWeight: ‘bold’,
textAlign: ‘center’,
marginTop: 20,
},
text: {
color: ‘#fff’,
fontSize: 20,
},
image: {
width: 200,
height: 200,
resizeMode: ‘contain’
}
});
const slides = [
{
key: ‘k1’,
title: ‘Event Organizer’,
text: ‘Best Event Organizers’,
image: {
uri:
‘/wp-content/uploads/2019/04/calendar.png’,
},
titleStyle: styles.title,
textStyle: styles.text,
imageStyle: styles.image,
backgroundColor: ‘#FF1744’,
},
{
key: ‘k2’,
title: ‘Weather Reports’,
text: ‘Latest Weather Reports’,
image: {
uri:
‘/wp-content/uploads/2019/04/cloud.png’,
},
titleStyle: styles.title,
textStyle: styles.text,
imageStyle: styles.image,
backgroundColor: ‘#D500F9’,
},
{
key: ‘k3’,
title: ‘Technology Informations’,
text: ‘Latest Technology Reports’,
image: {
uri: ‘/wp-content/uploads/2019/04/computer.png’,
},
titleStyle: styles.title,
textStyle: styles.text,
imageStyle: styles.image,
backgroundColor: ‘#2979FF’,
},
{
key: ‘k4’,
title: ‘Flight Bookings’,
text: ‘ Best Deals on Flights’,
image: {
uri: ‘/wp-content/uploads/2019/04/flight.png’,
},
titleStyle: styles.title,
textStyle: styles.text,
imageStyle: styles.image,
backgroundColor: ‘#1DE9B6’,
},
{
key: ‘k5’,
title: ‘Restaurant Bookings’,
text: ‘ 20% off on first Restaurant booking’,
image: {
uri:
‘/wp-content/uploads/2019/04/restaurants.png’,
},
titleStyle: styles.title,
textStyle: styles.text,
imageStyle: styles.image,
backgroundColor: ‘#FF3D00’,
},
];
|
Screenshots:
Also Read :
React Native Scalable Image – Android iOS Example
No Component Found for View with name ARTShape React Native iOS Error
React Native Rotate Text View Elements to Specific Degree using Transform
React Native Change TextInput PlaceHolder Text Color iOS Android
React Native Detect Device Screen Orientation is Portrait or Landscape
