react-native-segmented-control-tab

by kirankalyan5

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

438 Stars 108 Forks Last release: over 1 year ago (v3.4.1) MIT License 180 Commits 3 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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 ( ); } }

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

 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.