react-native-switch-toggle
Simple switch toggle component for react-native. This component supports horizontal switch toggle with animation with several options like start/end background colors, start/end circle colors, and duration for animation.
News
Current package is fully redesigned in 2.0.0. We recommend you to use this package version >=2.0.0.
Alternative
Do you enjoy using react-native-switch-toggle? Then think about using dooboo-ui which is our ui integrated ilbrary. It included SwitchToggle from 0.1.6.
yarn add doobo-ui
Props
| necessary | types | default | |
|---|---|---|---|
| switchOn | ✓ | boolean | false |
| onPress | ✓ | func | () => {} |
| containerStyle | styles | { width: 80, height: 40, borderRadius: 25 ... } | |
| circleStyle | styles | { width: 32, height: 32, borderRadius: 16 ... } | |
| backgroundColorOn | string | 'black' | |
| backgroundColorOff | string | '#C4C4C4' | |
| circleColorOn | string | 'white' | |
| circleColorOff | string | '#C4C4C4' | |
| duration | number | 300 | |
| type | number | 0 - Normal switch, 1 - Switch with a text | |
| buttonText | string | Text on-top of the button | |
| backTextRight | string | Text to appear in right side when button toggled to left | |
| backTextLeft | string | Text to appear in left side when button toggled to right | |
| buttonTextStyle | styles | Styles for text on the button | |
| textRightStyle | styles | Styles for text in right | |
| textLeftStyle | styles | Styles for text in left | |
| buttonStyle | styles | Styles for the button | |
| buttonContainerStyle | styles | Styles for button container | |
| rightContainerStyle | styles | Styles for right text container | |
| leftContainerStyle | styles | Styles for left text container |
Getting started
$ npm install react-native-switch-toggle --save
import SwitchToggle from "react-native-switch-toggle";Basic Style
<SwitchToggle switchOn={on} onPress={() => off(!on)} />Custom Color
<SwitchToggle
switchOn={on}
onPress={() => off(!on)}
circleColorOff='#C4C4C4'
circleColorOn='#00D9D5'
backgroundColorOn='#6D6D6D'
backgroundColorOff='#C4C4C4'
/>Custom Size
<SwitchToggle
switchOn={on}
onPress={() => off(!on)}
containerStyle={{
marginTop: 16,
width: 106,
height: 48,
borderRadius: 25,
padding: 5,
}}
circleStyle={{
width: 40,
height: 40,
borderRadius: 20,
}}
/>