React-native-switches NPM

react-native-switches

Customizable Switch components for react native

Using:

react-move for animations

Installation

npm install --save react-native-switches

yarn add react-native-switches

Demo

pill-switch line-switch

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`