Using a SegmentControl to show different views in React Native

Using this Module: react-native-segmented-control-tab

One of the tasks that I have received from my current company was to create a screen that contains a segment to display two different views, depending on the selected segment. It has been quite sometime that I have been digging into the React Native world so here I am thinking why not share some knowledge?

Getting Started

So once you have created a React Native project, (if you don’t know how, go to this link: https://reactnative.dev/docs/0.60/getting-started). Once you have your project open, make sure that you add the module on your terminal.

yarn add react-native-segmented-control-tab

After you have added the module, create a file (call it whatever you want), and add the following code:

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import SegmentedControlTab from 'react-native-segmented-control-tab';
class SegmentScreen extends Component {
  constructor() {
     super();
     
    this.state = {
      selectedIndex: 0
    }
  }
  handleIndexChange = index => {
    
      this.setState({
         ...this.state,
        selectedIndex: index
      });
  }
 render () {
    return (
       <View style={styles.container}>
          <SegmentedControlTab
             values             = { ["Segment 1", "Segment 2"] }
             selectedIndex      = { this.state.selectedIndex } 
             onTabPress         = { this.handleIndexChange }
             tabsContainerStyle = { styles.tabsContainerStyle }
             tabStyle           = { styles.tabStyle }
             tabTextStyle       = { styles.tabTextStyle }
             activeTabStyle     = { styles.activeTabStyle }
             activeTabTextStyle = { styles.activeTabTextStyle }
             borderRadius       = {10}
         />
       </View>
      )
  }
}
export default SegmentScreen;

If you need more info on the module and it’s props, check the repo out!: https://github.com/kirankalyan5/react-native-segmented-control-tab

Styling the SegmentControl Component

Style it however you want. But in case you have short amount of time, I got your back.

const styles = StyleSheet.create({
  container: {                
     backgroundColor: 'black',
     flex: 1,
     alignItems: 'center', justifyContent: 'center'
   },
  
  tabContainerStyle: {
     backgroundColor: 'transparent',
     width: '100%', height: '8%',
     borderRadius: 10
  },
  tabStyle: {         
     backgroundColor: 'lightgray',
     borderRadius: 10, borderColor: 'transparent',
     fontSize: 18,
     margin: 5
  },
  tabTextStyle: {
     color: '#818181',
     fontSize: 18
  },
  
  activeTabStyle: { 
     backgroundColor: 'white',
     borderRadius: 10, borderColor: 'transparent',
     margin: 5
  },
  activeTabTextStyle: {
     color: 'black',
     fontSize: 18
  },
  textStyle: {
     color: 'white',
     fontSize: 20, fontWeight: '700',
     marginTop: 40 
  }
});

Switching views to the appropriate segment

Now that you got your SegmentControlTab looking good, it’s time to do the logic implementation. It is quite easy actually. Add this inside your main View component (under the <SegmentControlTab> component)

{
  this.state.selectedIndex === 0 ? 
    <Text style {styles.textStyle}>Segment View #1</Text> : 
    <Text style={styles.textStyle}>Segment View #2</Text>
}

Pretty straight forward. Depending on the tab that the user tapped, using a state can help us keep track of which tab the user is on

Good to go!

Short and easy right? You know I got you! However, if there is any experienced React Native Developers out there that can provide any advice to improve on the code I provided, please feel free to comment!

As always, Happy Coding!