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
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) |
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) |
tabStyle | external styles can be passed to override the default styles of the tabs | 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 |
Custom styling
<SegmentedControlTab tabsContainerStyle={styles.tabsContainerStyle}
tabStyle={styles.tabStyle}
tabTextStyle={styles.tabTextStyle}
activeTabStyle={styles.activeTabStyle}
activeTabTextStyle={styles.activeTabTextStyle}
selectedIndex={1}
values={['First', 'Second', 'Third']}
onPress= {index => this.setState({selected:index})}
/>
const styles = StyleSheet.create({
tabsContainerStyle: {
//custom styles
},
tabStyle: {
//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