ViewPager is common among mobile developers, It is a group of multiple views connecting to each other with swipe effect. User can swipe left and right to change between views. In react native it is possible using React-Native-ViewPager NPM library. This library comes with 3 different types of ViewPager TitleIndicator, DotIndicator and TabIndicator. In this tutorial we would Create ViewPager with Tab Title Dot Indicator in react native iOS Android mobile application with coding example tutorial.
1. DotIndicator View Pager Screenshot:
2. TitleIndicator View Pager Screenshot:
3. TabIndicator View Pager Screenshot:
Contents in this project Create ViewPager with Tab Title Dot Indicator in iOS Android React Native app:
1. Open your react native project folder in Command Prompt or Terminal and execute below command to install React-Native-ViewPager library.
|
1
|
npm install rn–viewpager —save
|
Screenshot of CMD :
2. Import StyleSheet, View, Text and Platform component in your project’s App.js file.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text, Platform } from ‘react-native’;
|
3. Import PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator and PagerDotIndicator component from rn-viewpager library.
|
1
|
import { PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator } from ‘rn-viewpager’;
|
4. Create 3 functions named as _renderTitleIndicator(), _renderDotIndicator() and _renderTabIndicator(). Using these function we would set the ViewPager showing type.
PagerTitleIndicator : Used to set the ViewPager with Title text.
PagerDotIndicator : Used to set ViewPager dots.
PagerTabIndicator : Used to set page tabs.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
_renderTitleIndicator() {
return <PagerTitleIndicator titles={[‘One’, ‘Two’, ‘Three’]} />;
}
_renderDotIndicator() {
return <PagerDotIndicator pageCount={3} />;
}
_renderTabIndicator() {
let tabs = [
{
text: ‘One’,
},
{
text: ‘Two’,
},
{
text: ‘Three’,
},
];
return <PagerTabIndicator tabs={tabs} />;
}
|
5. Create 3 different components with 3 different ViewPager in render’s return block and call the above functions. The above defined functions will used to set View Pager type.
|
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
|
<View style={styles.MainContainer}>
<IndicatorViewPager
style={{ height: 200 }}
indicator={this._renderDotIndicator()}>
<View style={[styles.indicatorView, { backgroundColor: ‘#FF5252’ }]}>
<Text style={styles.text}> One </Text>
</View>
<View style={[styles.indicatorView, { backgroundColor: ‘#FF1744’ }]}>
<Text style={styles.text}> Two </Text>
</View>
<View style={[styles.indicatorView, { backgroundColor: ‘#F44336’ }]}>
<Text style={styles.text}> Three </Text>
</View>
</IndicatorViewPager>
<IndicatorViewPager
style={{ flex: 1, paddingTop: 20, backgroundColor: ‘#fff’ }}
indicator={this._renderTitleIndicator()}>
<View style={[styles.indicatorView, { backgroundColor: ‘#AA00FF’ }]}>
<Text style={styles.text}> One </Text>
</View>
<View style={[styles.indicatorView, { backgroundColor: ‘#D500F9’ }]}>
<Text style={styles.text}> Two </Text>
</View>
<View style={[styles.indicatorView, { backgroundColor: ‘#EA80FC’ }]}>
<Text style={styles.text}> Three </Text>
</View>
</IndicatorViewPager>
<IndicatorViewPager
style={{ flex: 1, paddingTop: 20, backgroundColor: ‘#fff’ }}
indicator={this._renderTabIndicator()}>
<View style={[styles.indicatorView, { backgroundColor: ‘#2E7D32’ }]}>
<Text style={styles.text}> One </Text>
</View>
<View style={[styles.indicatorView, { backgroundColor: ‘#1B5E20’ }]}>
<Text style={styles.text}> Two </Text>
</View>
<View style={[styles.indicatorView, { backgroundColor: ‘#69F0AE’ }]}>
<Text style={styles.text}> Three </Text>
</View>
</IndicatorViewPager>
</View>
|
6. 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
|
const styles = StyleSheet.create({
MainContainer: {
justifyContent: ‘center’,
flex: 1,
paddingTop: (Platform.OS === ‘iOS’) ? 20 : 0
},
indicatorView: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
text: {
color: ‘#fff’,
fontSize: 30
}
});
|
7. 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
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text, Platform } from ‘react-native’;
import { PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator } from ‘rn-viewpager’;
export default class App extends Component {
_renderTitleIndicator() {
return <PagerTitleIndicator titles={[‘One’, ‘Two’, ‘Three’]} />;
}
_renderDotIndicator() {
return <PagerDotIndicator pageCount={3} />;
}
_renderTabIndicator() {
let tabs = [
{
text: ‘One’,
},
{
text: ‘Two’,
},
{
text: ‘Three’,
},
];
return <PagerTabIndicator tabs={tabs} />;
}
render() {
return (
<View style={styles.MainContainer}>
<IndicatorViewPager
style={{ height: 200 }}
indicator={this._renderDotIndicator()}>
<View style={[styles.indicatorView, { backgroundColor: ‘#FF5252’ }]}>
<Text style={styles.text}> One </Text>
</View>
<View style={[styles.indicatorView, { backgroundColor: ‘#FF1744’ }]}>
<Text style={styles.text}> Two </Text>
</View>
<View style={[styles.indicatorView, { backgroundColor: ‘#F44336’ }]}>
<Text style={styles.text}> Three </Text>
</View>
</IndicatorViewPager>
<IndicatorViewPager
style={{ flex: 1, paddingTop: 20, backgroundColor: ‘#fff’ }}
indicator={this._renderTitleIndicator()}>
<View style={[styles.indicatorView, { backgroundColor: ‘#AA00FF’ }]}>
<Text style={styles.text}> One </Text>
</View>
<View style={[styles.indicatorView, { backgroundColor: ‘#D500F9’ }]}>
<Text style={styles.text}> Two </Text>
</View>
<View style={[styles.indicatorView, { backgroundColor: ‘#EA80FC’ }]}>
<Text style={styles.text}> Three </Text>
</View>
</IndicatorViewPager>
<IndicatorViewPager
style={{ flex: 1, paddingTop: 20, backgroundColor: ‘#fff’ }}
indicator={this._renderTabIndicator()}>
<View style={[styles.indicatorView, { backgroundColor: ‘#2E7D32’ }]}>
<Text style={styles.text}> One </Text>
</View>
<View style={[styles.indicatorView, { backgroundColor: ‘#1B5E20’ }]}>
<Text style={styles.text}> Two </Text>
</View>
<View style={[styles.indicatorView, { backgroundColor: ‘#69F0AE’ }]}>
<Text style={styles.text}> Three </Text>
</View>
</IndicatorViewPager>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
justifyContent: ‘center’,
flex: 1,
paddingTop: (Platform.OS === ‘iOS’) ? 20 : 0
},
indicatorView: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
text: {
color: ‘#fff’,
fontSize: 30
}
});
|
Screenshots:
Also Read :
Get Image from Local Resource Folder in React Native Android iOS Tutorial
React Native Add Floating Action Button in Both Android iOS App
React Native Generate Random Number Between 1 to 100 in Android iOS
React Native Add onLongPress on Button using TouchableOpacity
What is Props in React Native Explained Tutorial with Example
