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

...
import Switch from 'react-native-draggable-switch';

...
render() {
  ...
  return (
    <Switch
     width={50}
     height={30}
     value={this.state.isSwitchOn}
     onValueChange={(isSwitchOn) => this.setState({ isSwitchOn })}
    />
  )
}
...

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 |