Skip to content

jarden-digital/react-native-switches

Repository files navigation

react-native-switches

npm

Customizable Switch components for react native

Using:

Installation

npm install --save react-native-switches

or

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

Contributing

Pull requests are welcome.

About

Switches component for react native

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •