A react native component with the same concept of react native's SegmantedControlIOS, Primarily built to support both IOS and Android. 💡
npm install react-native-segmented-control-tab --save
class ConsumerComponent extends Component {
render() {
return (
<View>
<SegmentedControlTab
values={['First', 'Second', 'Third']}
onTabPress= {index => console.log(index))}
/>
</View>)
}
}
Name | Description | Default | Type |
---|---|---|---|
values | titles of tabs | ['One', 'Two', 'Three'] |
array |
selectedIndex | index of tab item to be selected initially | 0 | number |
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) |
onTabPress | call-back function for each item | () => {} | func |
<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
},
})
🙏 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.😊🚀
MIT