react-native-segemented-control-tab

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

class ConsumerComponent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            selected: 0
        }
    }
    render() {
        return (
            <View>
                <SegmentedControlTab tabsContainerStyle={styles.tabsContainerStyle}
                    selectedIndex={this.state.selected}
                    values={['First', 'Second', 'Third']}
                    onPress= {index => this.setState({selected:index})}
                    />
            </View>)
    }
}

Props

Name	Description	Default	Type
values	titles of tabs	['One', 'Two', 'Three']	array
activeColor	color of an active tab item	#0076FF	string
inActiveColor	color of an inActive tab item	white	string
textActiveColor	text of color in active tab	#0076FF	string
borderRadius	borderRadius of whole tab	5	number
textInActiveColor	text of color in inactive tab	white	string
selected	index of selected tab item	0	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)
tabTitleStyle	external styles can be passed to override the default styles of the tab title	base styles added in SegmentedControlTab.js	object(styles)
onPress	call-back function for each item	() => {}	func

Custom styling

    <SegmentedControlTab tabsContainerStyle={styles.tabsContainerStyle}
        tabStyle={styles.tabStyle}
        tabTitleStyle={styles.tabTitleStyle}
        selectedIndex={this.state.selected}
        values={['First', 'Second', 'Third']}
        onPress= {index => this.setState({selected:index})}
        />

    const styles = StyleSheet.create({
        tabsContainerStyle: {
          //custom styles
        },
        tabStyle: {
          //custom styles
          },
        tabTitleStyle: {
          //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 rise a PR.😊🚀

License

MIT