react-native-segmented-control-tab
Version:
A react native component with the same concept of react native's SegmantedControlIOS, Primarily built to support both IOS and Android.
158 lines (131 loc) ā¢ 10.2 kB
Markdown
# react-native-segmented-control-tab(for Android/iOS) š
[](https://www.npmjs.com/package/react-native-segmented-control-tab)
[](https://travis-ci.com/kirankalyan5/react-native-segmented-control-tab)
[](https://npmjs.org/package/react-native-segmented-control-tab)
[](https://npmjs.org/package/react-native-segmented-control-tab)
[ ](https://github.com/kirankalyan5/react-native-segmented-control-tab/pulls)
[](https://npmjs.org/package/react-native-segmented-control-tab)
A react native component with the same concept of react native's SegmantedControlIOS, Primarily built to support both IOS and Android. š”
## ScreenShots
### Android
### iOS
## Install
```shell
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.
```javascript
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
```javascript
<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_