React-native-segmented-control-tab NPM

react-native-segmented-control-tab(for Android/iOS) 🚀

A react native component with the same concept of react native's SegmantedControlIOS, Primarily built to support both IOS and Android. 💡

ScreenShots

Android

Demo

iOS

Demo

Install

npm install react-native-segmented-control-tab --save

Usage

IMPORTANT

This has been made into a controlled component from 3.0. Those who are familiar with 2.0, read below for the updated usage.

import SegmentedControlTab from "react-native-segmented-control-tab";

class ConsumerComponent extends Component {
  constructor() {
    super();
    this.state = {
      selectedIndex: 0
    };
  }

  handleIndexChange = index => {
    this.setState({
      ...this.state,
      selectedIndex: index
    });
  };

  render() {
    return (
      <View>
        <SegmentedControlTab
          values={["First", "Second", "Third"]}
          selectedIndex={this.state.selectedIndex}
          onTabPress={this.handleIndexChange}
        />
      </View>
    );
  }
}

Props

Name	Description	Default	Type
values	titles of tabs	`['One', 'Two', 'Three']`	array
selectedIndex	index of tab item to be selected initially	0	number
selectedIndices	Array of indices of tab items to be selected initially - when multiple prop is true else it will take selectedIndex	0	arrayOf(PropTypes.number)
enabled	Boolean to enable or disable the component	true	bool
multiple	Boolean which enables the multiple selection option	false	bool
borderRadius	borderRadius of whole tab	5	number
tabsContainerStyle	external styles can be passed to override the default styles of the segmentedControl wrapper	base styles added in SegmentedControlTab.js	object(styles)
tabsContainerDisableStyle	Custom style that can be passed when `enable` is set to false	default style `opacity: 0.6`	object(styles)
tabStyle	external styles can be passed to override the default styles of the tabs	base styles added in SegmentedControlTab.js	object(styles)
firstTabStyle	external styles can be passed to override the default styles of the first tab	base styles added in SegmentedControlTab.js	object(styles)
lastTabStyle	external styles can be passed to override the default styles of the last tab	base styles added in SegmentedControlTab.js	object(styles)
tabTextStyle	external styles can be passed to override the default styles of the tab title	base styles added in SegmentedControlTab.js	object(styles)
activeTabStyle	external styles can be passed to override the default styles of the active tab	base styles added in SegmentedControlTab.js	object(styles)
activeTabTextStyle	external styles can be passed to override the default styles of the active tab text	base styles added in SegmentedControlTab.js	object(styles)
badges	badges values to display	`[1, 2, 3]`	array
tabBadgeContainerStyle	external style can be passed to override the default style of the badge container	base styles added in SegmentedControlTab.js	object(styles)
activeTabBadgeContainerStyle	external style can be passed to override the default style of the active badge container	base styles added in SegmentedControlTab.js	object(styles)
tabBadgeStyle	external style can be passed to override the default style of the badge text	base styles added in SegmentedControlTab.js	object(styles)
activeTabBadgeStyle	external style can be passed to override the default style of the active badge text	base styles added in SegmentedControlTab.js	object(styles)
onTabPress	call-back function when a tab is selected	() => {}	func
allowFontScaling	whether the segment & badge text should allow font scaling (default matches React Native default)	true	bool
accessible	enables accessibility for each tab	true	bool
accessibilityLabels	Reads out the given text on each tab press when voice over is enabled. If not set, uses the text passed in as values in props as a fallback	'Label 1', 'Label 2', 'Label 3'	array
activeTabOpacity	Opacity value to customize tab press	1	number

Custom styling

<SegmentedControlTab
  tabsContainerStyle={styles.tabsContainerStyle}
  tabStyle={styles.tabStyle}
  firstTabStyle={styles.firstTabStyle}
  lastTabStyle={styles.lastTabStyle}
  tabTextStyle={styles.tabTextStyle}
  activeTabStyle={styles.activeTabStyle}
  activeTabTextStyle={styles.activeTabTextStyle}
  selectedIndex={1}
  allowFontScaling={false}
  values={["First", "Second", "Third"]}
  onTabPress={index => this.setState({ selected: index })}
/>;

const styles = StyleSheet.create({
  tabsContainerStyle: {
    //custom styles
  },
  tabStyle: {
    //custom styles
  },
  firstTabStyle: {
    //custom styles
  },
  lastTabStyle: {
    //custom styles
  },
  tabTextStyle: {
    //custom styles
  },
  activeTabStyle: {
    //custom styles
  },
  activeTabTextStyle: {
    //custom styles
  },
  tabBadgeContainerStyle: {
    //custom styles
  },
  activeTabBadgeContainerStyle: {
    //custom styles
  },
  tabBadgeStyle: {
    //custom styles
  },
  activeTabBadgeStyle: {
    //custom styles
  }
});

P.S.

🙏 credits to all the other devs who had built the similar concept, had referred some of the their components on the github, to get a fair idea 💡 to build this.😊 If you have any idea in implementing this further, let me know or you can update it and raise a PR.😊🚀