react-native-switches

Customizable Switch components for react native

Using:

• react-move for animations

Installation

npm install --save react-native-switches

or

yarn add react-native-switches

Demo

Usage

Basic usage requires choosing between the line and pill shapes.

• line : requires the user to choose and to confirm a PIN code
• pill : requires the user to enter the PIN code he previously chose It also requires you to provide a boolean value for the switch and an onChange function.

import Switches from 'react-native-switches'
<Switches shape={'pill'} onChange={() => this.setState({switchValue: !this.state.switchValue})} value={this.state.switchValue}/>

Options

Key	Description	Default	Required	Type
animationDuration	Duration of the transition animation	300	false	number
borderColor	Color of the border of the switch	#D3D5DA	false	string
borderWidth	Width of the border of the switch	1	false	number
buttonColor	Color of the button of the switch	Line shape: #96CBCE / Pill shape: #FFF	false	string
buttonOffsetLeft	Difference between the maximum left position of the button and the maximum left position of the slide	Line shape: 0 / Pill shape: 2	false	number
buttonOffsetRight	Difference between the maximum right position of the button and the maximum right position of the slide	Line shape: 0 / Pill shape: 2	false	number
buttonSize	Height and width of the button of the switch	Line shape: 20 / Pill shape: 32	false	number
colorSwitchOff	Color of the slide when the switch is on off position	Line shape: #E8EAEC / Pill shape: #D3D5DA	false	string
colorSwitchOn	Color of the slide when the switch is on on position	Line shape: #E8EAEC / Pill shape: #96CBCE	false	string
colorTextOff	Color of the text when the switch is on off position	Line shape: #E8EAEC / Pill shape: #445878	false	string
colorTextOn	Color of the text when the switch is on on position	Line shape: #7BCDD0 / Pill shape: #FFF	false	string
disabled	Boolean disabling the click on the button	false	false	boolean
easingFunction	Easing function for the animation	easeQuadIn d3-ease function	false	function
icon	Icon to be placed on the button	None	false	any
onChange	Function triggered when the switch is tapped	None	true	function
paddingTextOff	Padding right foe the off text on pill switch	Pill shape: 0	false	number
paddingTextOn	Padding left for the on text on pill switch	Pill shape: 0	false	number
shape	Shape of the switch (line or pill)	None	true	Shapes enum
showText	Boolean indicating if the text should be visible or not	true	false	boolean
sliderHeight	Height of the slider of the switch	Line shape: 6 / Pill shape: 36	false	number
sliderWidth	Width of the slider of the switch	Line shape: 30 / Pill shape: 70	false	number
spaceBetween	Space between the two texts of the switch	Line shape: 10 / Pill shape: 10	false	number
testID	Text used for the testID property of the button	reactNativeSwitches	false	string
textFont	Font used for the text of the switch	courier	false	string
textOff	Text used for the off position of the switch	Line shape: No / Pill shape: off	false	string
textOn	Text used for the on position of the switch	Line shape: Yes / Pill shape: on	false	string
textSize	Size of the text	14	false	number
value	Boolean value of the switch matching its position (true is on)	None	true	boolean

Contributing

Pull requests are welcome.