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