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 |