react-native-segmented-control-tabs v1.4.0

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

Authors

• Pavan Welihinda - Initial work - pavan168

License

This project is licensed under the MIT License.