A lightweight, draggable, and customizable toggle switch component for React Native.

How to use it:

1. Install and import the component.

# Yarn
$ yarn add react-switcher-rc

# NPM
$ npm i react-switcher-rc

import React, {useState} from 'react';
import Switcher from 'react-switcher-rc';

2. Create a basic switch component in the app.

function SwitcherExample() {
  const [switcherState, setSwitcherState] = useState(false);
  const onHandleChange = e => {
    setSwitcherState(e.target.checked);
  }
  return (
    <div>
      <Switcher 
          name="my-switcher"
          onChange={onHandleChange}
          checked={switcherState}
      />
    </div>
  )
}

3. Available component props.

id: PropTypes.string,
name: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
ariaLabel: PropTypes.string,
className: PropTypes.string,
checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
checkedIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
unCheckedIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
disabled: PropTypes.bool,

Preview:

Download Details:

Author: Qubaish

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/Qubaish/react-switcher-component

License: MIT