react-native-segmented-control-ui(for Android/iOS) 🚀
An extendable tab components for React Native similar to iOSSegmentedControl, Primarily built to support both iOS and Android.
Usage
import SegmentedControlTab from 'react-native-segmented-control-ui'
const ConsumerComponent extends Component {
constructor(){
super()
this.state = {
selectedIndex: 0
};
}
handleIndexChange = (index) => {
this.setState({
selectedIndex: index
});
}
render() {
return (
<View>
<SegmentedControlTab
values={['First', 'Second', 'Third']}
selectedIndex={this.state.selectedIndex}
onTabPress={this.handleIndexChange}
/>
</View>
);
}
}
API
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 | tabsContainerStyle | object(styles) |
tabStyle | external styles can be passed to override the default styles of the tabs | tabStyle | object(styles) |
tabTextStyle | external styles can be passed to override the default styles of the tab title | tabTextStyle | object(styles) |
activeTabStyle | external styles can be passed to override the default styles of the active tab | activeTabStyle | object(styles) |
activeTabTextStyle | external styles can be passed to override the default styles of the active tab text | activeTabTextStyle | 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 | tabBadgeContainerStyle | object(styles) |
activeTabBadgeContainerStyle | external style can be passed to override the default style of the active badge container | activeTabBadgeContainerStyle | object(styles) |
tabBadgeStyle | external style can be passed to override the default style of the badge text | tabsContainerStyle | object(styles) |
activeTabBadgeStyle | external style can be passed to override the default style of the active badge text | activeTabBadgeStyle | 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 |
testIDs | Unique identifier for each tab which acts as a hook for functional test | ['Label 1', 'Label 2', 'Label 3'] | array |
Custom styling
```javascript
<SegmentedControlTab
tabsContainerStyle={styles.tabsContainerStyle}
tabStyle={styles.tabStyle}
tabTextStyle={styles.tabTextStyle}
activeTabStyle={styles.activeTabStyle}
activeTabTextStyle={styles.activeTabTextStyle}
selectedIndex={1}
allowFontScaling={false}
values={['First', 'Second', 'Third']}
onPress={this.handleIndexChange}
/>
const styles = StyleSheet.create({
tabsContainerStyle: {
borderColor: '#706fd3'
},
tabStyle: {
borderLeftColor: '#706fd3',
backgroundColor: 'transparent',
},
activeTabStyle: {
backgroundColor: '#33d9b2'
},
tabTextStyle: {
color: '#706fd3'
},
})
```
Try it out
You can try it out default example online using Expo Snack
You can try it out custom styling example online using Expo Snack
Example
Look at the full example code at /Example
folder to run the expo app locally. or try with Exponent App here.
ScreenShots
Android
iOS
License
MIT