csath/react-native-segment-controller

A react-native segment controller(Tab) for both ios and android.

react-native-segment-controller

A react-native segment controller for both android and ios. You can define any number of tabs or segemnts and this will automatically adjust according to the wrapped view's width. You can also add badge count to specify any integer to user.

Demo

Installation

yarn add react-native-segment-controller  or npm install --save react-native-segment-controller

Usage

import SegmentControl from 'react-native-segment-controller';

 <SegmentControl
          values={['One', 'Two', 'Three', 'Four']}
          badges={[0, 5, 0, 2]}
          selectedIndex={0}
          height={30}
          onTabPress={() => {}}
          borderRadius={5}
 />

Prop-types

Prop name	Type
values	list - list of names for Tabs
badges	list - list of integers matching to defined tab names corresponding to indicate any badge count need to be specified
onTabPress	function - this returns the selected tab index
selectedIndex	int - indicates the selected tab index corresponding to given values list
tabsContainerStyle	int - radius of the container
tabBadgeContainerStyle	object - styles for view
activeTabBadgeContainerStyle	object - styles for view
tabBadgeStyle	object - styles for view
activeTabBadgeStyle	object - styles for view
borderRadius	int - radius of the container
tabStyle	object - styles for view
activeTabStyle	object - styles for view
tabTextStyle	object - styles for Text
activeTabTextStyle	object - styles for Text
height	int - height in number of pixels

Example

checkout sample directory and findout a react-native app. First run npm install or yarn

then run

react-native run-android  or  react-native run-ios

Created by @ Chanaka Athurugiriya

react-native-segment-controller's Issues

Tab disabled

Selecting another tab using IOS is not possible or disabled.

Segment not selectable on iOS and Android

When click on segment, its not getting selected

How to disable user interaction for react-native-segment-controller.

Do we have something like "enabled={false}" to disable user interaction.
<SegmentedControlTab
values={['OPTION 1', 'OPTION 2',]}
enabled={false}
selectedIndex={this.state.selectedIndex}
onTabPress={this.handleIndexChange}
tabStyle={{ backgroundColor: 'white',marginTop: Platform.OS === 'ios' ? 15 : 10,borderColor: 'rgb(48,140,247)',height: 50,}}
borderRadius={30}
tabTextStyle={{ fontSize: 15,textAlign: 'left',color: 'rgb(48,140,247)',fontWeight: '500',marginBottom: 5, }}
/>