React native segmented control tab component

React native segmented control tab component

react-native-segmented-control-tab(for Android/iOS) šŸš€

npm Build Status Monthly Downloads GitHub stars PRs Welcome

NPM

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

NameDescriptionDefaultType
valuestitles of tabs['One', 'Two', 'Three']array
selectedIndexindex of tab item to be selected initially0number
selectedIndicesArray of indices of tab items to be selected initially - when multiple prop is true else it will take selectedIndex0arrayOf(PropTypes.number)
enabledBoolean to enable or disable the componenttruebool
multipleBoolean which enables the multiple selection optionfalsebool
borderRadiusborderRadius of whole tab5number
tabsContainerStyleexternal styles can be passed to override the default styles of the segmentedControl wrapperbase styles added in SegmentedControlTab.jsobject(styles)
tabsContainerDisableStyleCustom style that can be passed when enable is set to falsedefault style opacity: 0.6object(styles)
tabStyleexternal styles can be passed to override the default styles of the tabsbase styles added in SegmentedControlTab.jsobject(styles)
firstTabStyleexternal styles can be passed to override the default styles of the first tabbase styles added in SegmentedControlTab.jsobject(styles)
lastTabStyleexternal styles can be passed to override the default styles of the last tabbase styles added in SegmentedControlTab.jsobject(styles)
tabTextStyleexternal styles can be passed to override the default styles of the tab titlebase styles added in SegmentedControlTab.jsobject(styles)
activeTabStyleexternal styles can be passed to override the default styles of the active tabbase styles added in SegmentedControlTab.jsobject(styles)
activeTabTextStyleexternal styles can be passed to override the default styles of the active tab textbase styles added in SegmentedControlTab.jsobject(styles)
badgesbadges values to display[1, 2, 3]array
tabBadgeContainerStyleexternal style can be passed to override the default style of the badge containerbase styles added in SegmentedControlTab.jsobject(styles)
activeTabBadgeContainerStyleexternal style can be passed to override the default style of the active badge containerbase styles added in SegmentedControlTab.jsobject(styles)
tabBadgeStyleexternal style can be passed to override the default style of the badge textbase styles added in SegmentedControlTab.jsobject(styles)
activeTabBadgeStyleexternal style can be passed to override the default style of the active badge textbase styles added in SegmentedControlTab.jsobject(styles)
onTabPresscall-back function when a tab is selected() => {}func
allowFontScalingwhether the segment & badge text should allow font scaling (default matches React Native default)truebool
accessibleenables accessibility for each tabtruebool
accessibilityLabelsReads 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
activeTabOpacityOpacity value to customize tab press1number

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.šŸ˜ŠšŸš€

License

MIT

Check it on GitHub