React Native Segmented Control Tabs

A React Native component for iOS and Android based on SegmentedControlIOS. The component supports Expo and React Native.

Installing

With npm

npm install react-native-segmented-control-tabs --save

With yarn

yarn add react-native-segmented-control-tabs

Usage

import SegmentedControlTabs from 'react-native-segmented-control-tabs';

Examples

Tabs with text

iOS	Android

Example code

<SegmentedControlTabs
                    values={[
                        <Text style={{ color: '#1B3964' }]}>LOG IN</Text>,
                        <Text style={{ color: '#89AECC' }}>SIGN UP</Text>
                    ]}
                    handleOnChangeIndex={handleSelectedIndex}
                    activeIndex={selectedIndex}
                    tabsContainerStyle={{
                        width: '100%',
                        height: 35,
                        backgroundColor: '#EAF3FF',
                        borderTopLeftRadius: 20,
                        borderBottomLeftRadius: 20,
                        borderTopRightRadius: 20,
                        borderBottomRightRadius: 20,
                        borderColor: '#EAF3FF',
                        borderWidth: 1
                    }}
                    activeTabStyle={{
                        borderBottomColor: "rgb(255,177,120)",
                        borderBottomWidth: 3,
                        borderColor: "rgb(213,228,241)",
                        zIndex: 1,
                    }}
                    firstTabStyle={{
                        borderTopLeftRadius: 20,
                        borderBottomLeftRadius: 20,
                        backgroundColor: '#fff'
                    }}
                    lastTabStyle={{
                        borderTopRightRadius: 20,
                        borderBottomRightRadius: 20,
                    }}
                    tabStyle={{
                        borderColor: 'transparent'
                    }}
                />

Tabs with images

iOS	Android

Example code

<SegmentedControlTabs
                    values={[
                        <Image
                            style={{ width: 40, height: 40, resizeMode: 'contain' }}
                            source={require('../../assets/icon.png')}
                        />,
                        <Image
                            style={{ width: 40, height: 40, resizeMode: 'contain' }}
                            source={require('../../assets/icon.png')}
                        />,
                        <Image
                            style={{ width: 40, height: 40, resizeMode: 'contain' }}
                            source={require('../../assets/icon.png')}
                        />,
                        <Image
                            style={{ width: 40, height: 40, resizeMode: 'contain' }}
                            source={require('../../assets/icon.png')}
                        />,
                    ]}
                    handleOnChangeIndex={handleSelectedIndex}
                    selectedIndexes={[0]}
                    activeIndex={selectedIndex}
                    selectedTabStyle={{ backgroundColor: '#fff' }}
                    selectedFirstTabStyle={{ backgroundColor: '#fff' }}
                    selectedLastTabStyle={{ backgroundColor: '#fff', 
                    borderBottomRightRadius: 20, 
                    borderTopRightRadius: 20 
                    }}
                    tabsContainerStyle={{
                        width: '100%',
                        height: 35,
                        backgroundColor: '#EAF3FF',
                        borderTopLeftRadius: 20,
                        borderBottomLeftRadius: 20,
                        borderTopRightRadius: 20,
                        borderBottomRightRadius: 20,
                        borderColor: '#EAF3FF',
                        borderWidth: 1
                    }}
                    activeTabStyle={{
                        borderBottomColor: "rgb(255,177,120)",
                        borderBottomWidth: 3,
                        borderColor: "rgb(213,228,241)",
                        zIndex: 1,
                    }}
                    firstTabStyle={{
                        borderTopLeftRadius: 20,
                        borderBottomLeftRadius: 20,
                        backgroundColor: '#fff'
                    }}
                    lastTabStyle={{
                        borderTopRightRadius: 20,
                        borderBottomRightRadius: 20,
                    }}
                    tabStyle={{
                        borderColor: 'transparent'
                    }}
                />

Multiple selected tabs

iOS	Android

Pass an array of indexes as shown below.

selectedIndexes={[0,1,2]}

Props

Prop	Description	Type	Required
values	List of titles, images or a mix of both	Array	Yes
handleOnChangeIndex	Callback function when a tab is selected	func	Yes
selectedIndexes	Indexes of the tabs to be highlighted	Array	No
activeIndex	Index of the active tab	Array	Yes
selectedTabStyle	Style to be used for highlighted tabs	Style Object	Yes, when selectedIndexes is used
selectedFirstTabStyle	Style to be used for first highlighted tab	Style Object	Yes, when selectedIndexes is used
selectedLastTabStyle	Style to be used for last highlighted tab	Style Object	Yes, when selectedIndexes is used
tabsContainerStyle	Style to be used for tab container	Style Object	Yes
activeTabStyle	Style to be used for active tab	Style Object	No
firstTabStyle	Style to be used for first tab when selected tabs are not used	Style Object	No
lastTabStyle	Style to be used for last tab when selected tabs are not used	Style Object	No
tabStyle	Style to be used as default tab	Style Object	Yes

Authors

• Pavan Welihinda - Initial work - pavan168

License

This project is licensed under the MIT License.