React-native-segemented-control-tab NPM

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

react-native custom component SegmentedControlIOS SegmentedControlTab IOS Android

@infinitebrahmanuniverse/nolb-react-native-se @everything-registry/sub-chunk-2591 @zalastax/nolb-react-native-se

1.0.1

9 years ago

1.0.0

9 years ago