Awesome

react-native-custom-segmented-control

Native UI component for Segmented Control with custom style

animationType: 'middle-line' selectedLineAlign: 'text' selectedLineMode: 'full' Screenshots

animationType: 'open-and-close' selectedLineAlign: 'text' selectedLineMode: 'text' Screenshots

animationType: 'middle-line' selectedLineAlign: 'bottom' selectedLineMode: 'text' Screenshots

animationType: 'middle-line' selectedLineAlign: 'top' selectedLineMode: 'full' Screenshots

animationType: 'middle-line' selectedLineAlign: 'text' selectedLineMode: 'text' Screenshots

Installation

Install using npm:

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

Locate the module lib folder in your node modules: PROJECT_DIR/node_modules/react-native-custom-segmented-control/lib.
Drag the CustomSegmentedControl.xcodeproj project file into your project
Add libCustomSegmentedControl.a to your target's Linked Frameworks and Libraries.

How To Use

Require the native component:

import {CustomSegmentedControl} from 'react-native-custom-segmented-control'

Now use it in your jsx inside your View:

<CustomSegmentedControl 
	style={{
		flex:1,
		backgroundColor: 'white',	
		marginVertical: 8
	}}
	textValues={['ORDERS','PRODUCTS' ]}
	selected={0}
	segmentedStyle={{
		selectedLineHeight: 2,
		fontSize:17,
		fontWeight: 'bold', // bold, italic, regular (default)
		segmentBackgroundColor: 'transparent',
		segmentTextColor: '#7a92a5',
		segmentHighlightTextColor: '#7a92a599',
		selectedLineColor: '#00adf5',
		selectedLineAlign: 'bottom', // top/bottom/text
		selectedLineMode: 'text', // full/text
		selectedTextColor: 'black',                                                  
		selectedLinePaddingWidth: 30,
		segmentFontFamily: 'system-font-bold'
	}}
	animation={{
		duration: 0.7,
		damping: 0.5,
		animationType: 'middle-line',
		initialDampingVelocity: 0.4
	}}
	onSelectedWillChange={(event)=> {
	}}
	onSelectedDidChange={(event)=> {
	}}
/>

##Properties

Attribute	Description
textValues	[Array] Array of strings which will be presented on the segmented control
selected	[int] The selected segment
onSelectedWillChange	[function] callback function will be called before the selected animation will take place
onSelectedDidChange	[function] callback function will be called after the selected animation will take place
animation	[Object] see Animation Properties
segmentedStyle	[Object] see Segmented Style Properties

##Segmented Style Properties

Attribute	Description
selectedLineHeight	[float] The selected line height. Default is 2
fontSize	[float] The segmented control text font size. Default is 14
segmentBackgroundColor	[Color] The segmented control background color. Default is `'black'`
segmentTextColor	[Color] The segmented control text color. Default is system default (blue)
selectedTextColor	[Color] The selected segment color
segmentHighlightTextColor	[Color] The segmnet highlight color. Default is black with alpha 0.5
segmentFontFamily	[Font/`'system-font-bold'`/`'system-font'`] The segmented control font. Default is `system-font` default
selectedLineColor	[Color] The selected line color. Default is 'black'
selectedLineAlign	[`'top'`/`'bottom'`/`'text'`] The selected line vertical alignment. Defualt is `'text'`
selectedLineMode	[`'full'`/`'text'`] The selected line mode. For determine if the line will be text width of full button width. Default is `'text'`
selectedLinePaddingWidth	[float] The selected line width padding. Default is 2

##Animation Properties

Attribute	Description
duration	[float] The animation duration. Default is 0.2 sec
damping	[float] The damping ratio for the spring animation. Default is 0 (no damping)
animationType	[`'default'`, `'middle-line'`, `'close-and-open'`] The transition animation type. Default is `'default'`
initialDampingVelocity	(float) The initial damping velocity. Default is 0