React Native Draggable Switch
A stateless, JS-only, animated, draggable switch component that maintains itself at 60fps.
Demo
Getting started
yarn add react-native-draggble-switch
Usage
...; ... { ... return <Switch width=50 height=30 value=thisstateisSwitchOn onValueChange= this /> }...
Props Definitions
<Switch />
Prop | Explanation | Type | Default | Required |
---|---|---|---|---|
width | The width of the switch | number | true | |
height | The height of the switch | number | true | |
value | The value of the switch, indicating if the switch is on or off | boolean | true | |
onValueChange | The callback function for when the value is changed in Switch, providing the updated value in params | function | true | |
disabled | If user touch is disabled | boolean | false | false |
containerStyle | Style for Switch outer container | ViewStyle | null | false |
circleStyle | Style for the dragging circle of the switch | ViewStyle | null | false |
backgroundColor | Background color of the Switch when it is not on | string | '#F6F7FA' | false |
circleColor | Color of the dragging circle | string | '#FFFFFF' | false |
activeColor | Background color of the Switch when it is on | string | '#66D0B1' | false |
disabledColor | Background color of the Switch when it is disabled | string | '#A1A1A1' | false |