In iOS mobile application development we have all seen Segment control tab but when it comes to android there are simple tab navigation. Yet in react native there is no inbuilt component which can be used as Segment control tab. But using the react-native-segmented-control-tab(for Android/iOS) NPM package we can easily implement segment control tab in both android and iOS applications. There are basically 4 Types of segment control tab we can use using this package, we would learn them all in today’s example. So in this tutorial we would learn about React Native Segmented Control Tab Android iOS NPM Example.
Types of Segment Control tab:-
- Simple Segment Control Tab
- Simple Segment Control Tab with Badges
- Multiple Select Simple Segment Control Tab
- Custom Style Segment Control Tab
Contents in this project React Native Segmented Control Tab Android iOS NPM Example:-
1. First we have to download and install the react-native-segmented-control-tab(for Android/iOS) NPM package in our react native project. So open your react native project Root directory in Command Prompt or Terminal and execute below command to install it.
|
1
|
npm install react–native–segmented–control–tab —save
|
Screenshot before installation :
Screenshot after done installation :
2. Now open your project’s main App.js file and import View, SafeAreaView, StyleSheet, Text and useState component.
|
1
2
3
|
import React, { useState } from ‘react’;
import { View, SafeAreaView, StyleSheet, Text } from ‘react-native’;
|
3. import SegmentedControlTab from ‘react-native-segmented-control-tab’ package in your file.
|
1
|
import SegmentedControlTab from ‘react-native-segmented-control-tab’;
|
4. Creating our main export default App component.
|
1
2
3
4
5
|
export default function App() {
}
|
5. Creating 4 different type of State named as singleIndex, singleIndexBadge, multipleSelectedIndex and customSelectedIndex with State update method named as setSingleIndex, setSingleIndexBadge, setMultipleSelectedIndex and setCustomSelectedIndex component.
- singleIndex :- The singleIndex State is used to hold single selection segment control index position. We would use the setSingleIndex method to update the State value.
- singleIndexBadge :- The singleIndexBadge State is used to hold the single selection segment control tab with Badges. Here we would use the setSingleIndexBadge method to update the state value.
- multipleSelectedIndex :- The multipleSelectedIndex State is used to hold multiple selection segment control tab index position. We would use the setMultipleSelectedIndex function to update to State value.
- customSelectedIndex :- The customSelectedIndex State is used to hold the index position of custom styled segment control tab index. Here we would use the setCustomSelectedIndex function to update the State value.
|
1
2
3
4
5
6
7
|
const [singleIndex, setSingleIndex] = useState(0);
const [singleIndexBadge, setSingleIndexBadge] = useState(0);
const [multipleSelectedIndex, setMultipleSelectedIndex] = useState([0]);
const [customSelectedIndex, setCustomSelectedIndex] = useState(0);
|
6. Creating a function named as updateSingleSegment. In this method we would update the setSingleIndex State value.
|
1
2
3
|
const updateSingleSegment = (index) => {
setSingleIndex(index);
};
|
7. Creating a function named as updateSingleSegmentBadge. In this function we would call the setSingleIndexBadge method to update State value.
|
1
2
3
|
const updateSingleSegmentBadge = (index) => {
setSingleIndexBadge(index);
};
|
8. Creating a function named as updateMultipleSegment. Inside this function we handle multiple tabs at once.
|
1
2
3
4
5
6
7
8
9
|
const updateMultipleSegment = (index) => {
if (multipleSelectedIndex.includes(index)) {
setMultipleSelectedIndex(
multipleSelectedIndex.filter((i) => i !== index)
);
} else {
setMultipleSelectedIndex([...multipleSelectedIndex, index]);
}
};
|
9. Creating another function named as updateCustomSegment. In this function we would handle custom segment tabs state value.
|
1
2
3
|
const updateCustomSegment = (index) => {
setCustomSelectedIndex(index);
};
|
10. Creating Return block, Now first we would make a Safe area view component -> View component.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
return (
<SafeAreaView style={stylesSheet.MainContainer}>
<View style={stylesSheet.MainContainer}>
</View>
</SafeAreaView>
);
|
11. Creating SegmentedControlTab, SegmentedControlTab with Badge, SegmentedControlTab with multiple segment control selection and SegmentedControlTab with custom 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<Text style={stylesSheet.titleText}> Single Selection Segment Control </Text>
<SegmentedControlTab
values={[‘Segment One’, ‘Segment two’]}
selectedIndex={singleIndex}
tabStyle={{ borderColor: ‘#48fe01’ }}
activeTabStyle={{ backgroundColor: ‘#FF3D00’ }}
onTabPress={updateSingleSegment} />
<View style={stylesSheet.divider} />
<Text style={stylesSheet.titleText}> Single Selection Segment Control with Badges </Text>
<SegmentedControlTab
badges={[10, 20]}
values={[‘Segment One’, ‘Segment two’]}
selectedIndex={singleIndexBadge}
onTabPress={updateSingleSegmentBadge} />
<View style={stylesSheet.divider} />
<Text style={stylesSheet.titleText}> Multiple Selection Segment Control </Text>
<SegmentedControlTab
values={[‘Segment One’, ‘Segment two’, ‘Segment Three’]}
multiple
selectedIndices={multipleSelectedIndex}
onTabPress={updateMultipleSegment} />
<View style={stylesSheet.divider} />
<Text style={stylesSheet.titleText}> Custom Style Segment Control </Text>
<SegmentedControlTab
borderRadius={0}
values={[‘Tab-1’, ‘Tab-2’, ‘Tab-3’]}
selectedIndex={customSelectedIndex}
onTabPress={updateCustomSegment}
tabsContainerStyle={{
height: 45,
backgroundColor: ‘#263238’
}}
tabStyle={{
backgroundColor: ‘#263238’,
borderWidth: 0,
borderColor: ‘transparent’,
}}
activeTabStyle={{ backgroundColor: ‘#F5F5F5’, marginTop: 2 }}
tabTextStyle={{ color: ‘#fff’, fontWeight: ‘bold’, fontSize: 16 }}
activeTabTextStyle={{ color: ‘#000’, fontSize: 16 }}
/>
{customSelectedIndex === 0 && (
<Text style={stylesSheet.tabTextStyle}> Selected Tab = Tab One </Text>
)}
{customSelectedIndex === 1 && (
<Text style={stylesSheet.tabTextStyle}> Selected Tab = Tab Two </Text>
)}
{customSelectedIndex === 2 && (
<Text style={stylesSheet.tabTextStyle}> Selected Tab = Tab Three </Text>
)}
|
12. 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
27
28
29
|
const stylesSheet = StyleSheet.create({
MainContainer: {
flex: 1,
alignItems: ‘center’,
padding: 8,
},
titleText: {
fontSize: 22,
color: ‘#000’,
textAlign: ‘center’,
padding: 8,
},
tabTextStyle: {
padding: 20,
color: ‘#000’,
fontSize: 18,
},
divider: {
alignSelf: ‘stretch’,
borderBottomWidth: 1,
borderBottomColor: ‘#000’,
marginTop: 20
}
});
|
13. 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
129
130
131
132
133
134
135
|
import React, { useState } from ‘react’;
import { View, SafeAreaView, StyleSheet, Text } from ‘react-native’;
import SegmentedControlTab from ‘react-native-segmented-control-tab’;
export default function App() {
const [singleIndex, setSingleIndex] = useState(0);
const [singleIndexBadge, setSingleIndexBadge] = useState(0);
const [multipleSelectedIndex, setMultipleSelectedIndex] = useState([0]);
const [customSelectedIndex, setCustomSelectedIndex] = useState(0);
const updateSingleSegment = (index) => {
setSingleIndex(index);
};
const updateSingleSegmentBadge = (index) => {
setSingleIndexBadge(index);
};
const updateMultipleSegment = (index) => {
if (multipleSelectedIndex.includes(index)) {
setMultipleSelectedIndex(
multipleSelectedIndex.filter((i) => i !== index)
);
} else {
setMultipleSelectedIndex([...multipleSelectedIndex, index]);
}
};
const updateCustomSegment = (index) => {
setCustomSelectedIndex(index);
};
return (
<SafeAreaView style={stylesSheet.MainContainer}>
<View style={stylesSheet.MainContainer}>
<Text style={stylesSheet.titleText}> Single Selection Segment Control </Text>
<SegmentedControlTab
values={[‘Segment One’, ‘Segment two’]}
selectedIndex={singleIndex}
tabStyle={{ borderColor: ‘#48fe01’ }}
activeTabStyle={{ backgroundColor: ‘#FF3D00’ }}
onTabPress={updateSingleSegment} />
<View style={stylesSheet.divider} />
<Text style={stylesSheet.titleText}> Single Selection Segment Control with Badges </Text>
<SegmentedControlTab
badges={[10, 20]}
values={[‘Segment One’, ‘Segment two’]}
selectedIndex={singleIndexBadge}
onTabPress={updateSingleSegmentBadge} />
<View style={stylesSheet.divider} />
<Text style={stylesSheet.titleText}> Multiple Selection Segment Control </Text>
<SegmentedControlTab
values={[‘Segment One’, ‘Segment two’, ‘Segment Three’]}
multiple
selectedIndices={multipleSelectedIndex}
onTabPress={updateMultipleSegment} />
<View style={stylesSheet.divider} />
<Text style={stylesSheet.titleText}> Custom Style Segment Control </Text>
<SegmentedControlTab
borderRadius={0}
values={[‘Tab-1’, ‘Tab-2’, ‘Tab-3’]}
selectedIndex={customSelectedIndex}
onTabPress={updateCustomSegment}
tabsContainerStyle={{
height: 45,
backgroundColor: ‘#263238’
}}
tabStyle={{
backgroundColor: ‘#263238’,
borderWidth: 0,
borderColor: ‘transparent’,
}}
activeTabStyle={{ backgroundColor: ‘#F5F5F5’, marginTop: 2 }}
tabTextStyle={{ color: ‘#fff’, fontWeight: ‘bold’, fontSize: 16 }}
activeTabTextStyle={{ color: ‘#000’, fontSize: 16 }}
/>
{customSelectedIndex === 0 && (
<Text style={stylesSheet.tabTextStyle}> Selected Tab = Tab One </Text>
)}
{customSelectedIndex === 1 && (
<Text style={stylesSheet.tabTextStyle}> Selected Tab = Tab Two </Text>
)}
{customSelectedIndex === 2 && (
<Text style={stylesSheet.tabTextStyle}> Selected Tab = Tab Three </Text>
)}
</View>
</SafeAreaView>
);
};
const stylesSheet = StyleSheet.create({
MainContainer: {
flex: 1,
alignItems: ‘center’,
padding: 8,
},
titleText: {
fontSize: 22,
color: ‘#000’,
textAlign: ‘center’,
padding: 8,
},
tabTextStyle: {
padding: 20,
color: ‘#000’,
fontSize: 18,
},
divider: {
alignSelf: ‘stretch’,
borderBottomWidth: 1,
borderBottomColor: ‘#000’,
marginTop: 20
}
});
|
Screenshot in Android device :-
Screenshot in iOS device :-
Also Read :
React Native Create Custom Sliding Drawer Using Animation iOS Android
React Native set View Align Horizontally Center dynamically on button click
Add Custom External Text Fonts in React Native App Android iOS Tutorial
React Native Change Image Source Dynamically using State on Button Click
React Native Scroll Down To Bottom and Scroll To Top in ListView Android iOS Example
