Nerds Publishing Monstrosities

    react-native-switch-toggle
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.1 • Public • Published

    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.

    Npm Version Downloads CI codecov code style: prettier LICENSE PRs Welcome supports iOS supports Android supports web runs with expo

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

    Install

    npm i react-native-switch-toggle

    DownloadsWeekly Downloads

    2,856

    Version

    2.2.1

    License

    MIT

    Unpacked Size

    20.9 kB

    Total Files

    10

    Last publish

    Collaborators

    • dooboolab
    • yujonglee