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