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.