Skip to content

An extendable tab components for React Native similar to iOSSegmentedControl, Primarily built to support both iOS and Android.

License

Notifications You must be signed in to change notification settings

gbhasha/react-native-segmented-control-ui

Repository files navigation

react-native-segmented-control-ui(for Android/iOS) 🚀

npm Monthly Downloads Build Status codecov Codacy Badge

NPM

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

Demo

iOS

Demo

License

MIT