React Native Segmented Control Tab Android iOS NPM Example

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

  1. Simple Segment Control Tab
  2. Simple Segment Control Tab with Badges
  3. Multiple Select Simple Segment Control Tab
  4. 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.

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.

3. import SegmentedControlTab from ‘react-native-segmented-control-tab’ package in your file.

4. Creating our main export default App component.

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.

  1. 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.
  2. 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.
  3. 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.
  4. 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.

6. Creating a function named as updateSingleSegment. In this method we would update the setSingleIndex State value.

7. Creating a function named as updateSingleSegmentBadge. In this function we would call the setSingleIndexBadge method to update State value.

8. Creating a function named as updateMultipleSegment. Inside this function we handle multiple tabs at once.

9. Creating another function named as updateCustomSegment. In this function we would handle custom segment tabs state value.

10. Creating Return block, Now first we would make a Safe area view component -> View component.

11. Creating SegmentedControlTab, SegmentedControlTab with Badge, SegmentedControlTab with multiple segment control selection and SegmentedControlTab with custom style.

12. Creating Style.

13. Complete Source Code for App.js file :-

Screenshot in Android device :-

React Native Segmented Control Tab Android iOS NPM ExampleScreenshot in iOS device :-

Leave a Reply

Your email address will not be published.