react-native-segmented-control-tabs

1.4.0 • Public • Published

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
React Native iOS Segmented Control tabs with text React Native Android Segmented Control tabs with text

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
React Native iOS Segmented Control tabs with images React Native Android Segmented Control tabs with images

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
React Native iOS Segmented Control tabs with images React Native Android Segmented Control tabs with images

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.

Package Sidebar

Install

npm i react-native-segmented-control-tabs

Weekly Downloads

234

Version

1.4.0

License

MIT

Unpacked Size

931 kB

Total Files

11

Last publish

Collaborators

  • pavan168