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,
  }}
/>