rn-switcher
A simple draggable switch component for React Native that supports text and svg
Demo
Getting started
yarn add rn-switcher
Usage
...
import Switch from 'rn-switcher';
...
render() {
...
return (
<Switch
leftContent="Off"
rightContent="On"
/>
)
}
...Props Definitions
<Switch />
| Prop | Explanation | Type | Default | Required |
|---|---|---|---|---|
| leftContent | Text/Icon on the left side of switch | string/React.Node | "" | false |
| rightContent | Text/Icon on the left side of switch | string/React.Node | "" | false |
| value | The value of the switch, indicating if the switch is on or off | boolean | true | |
| onChange | 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 |
| containerStyles | Style for Switch container | StyleSheet | null | false |
| buttonStyles | Style for selectable buttons | StyleSheet | null | false |
| switchStyle | Style for the circle of the switch | StyleSheet | null | false |
| backgroundColor | Background color of the Switch when it is not on | string | '#F3F4F6' | false |
| switchColor | Color of the switch circle | string | 'black' | false |
| textColor | Color of the text/svg when it is active | string | 'white' | false |
| disabledColor | Background color of the Switch when it is disabled | string | '#A1A1A1' | false |