# react-native-draggable-switch

> A stateless, JS-only, animated, draggable switch component that maintains itself at 60fps.

Latest version **1.1.1** (published 2020-02-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-draggable-switch
pnpm add react-native-draggable-switch
yarn add react-native-draggable-switch
bun add react-native-draggable-switch
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2020-02-29 |
| First published | 2019-03-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 26.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | thousight |
| Maintainers | thousight |
| Keywords | react, react-native, switch, animated, draggble |

## Links

- npm: https://www.npmjs.com/package/react-native-draggable-switch
- Repository: https://github.com/thousight/react-native-draggable-switch
- Homepage: https://github.com/thousight/react-native-draggable-switch#readme
- Issues: https://github.com/thousight/react-native-draggable-switch/issues
- npm.io page: https://npm.io/package/react-native-draggable-switch

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2020-02-29
- 1.1.0 — 2019-05-23
- 1.0.4 — 2019-03-23
- 1.0.3 — 2019-03-23
- 1.0.2 — 2019-03-22
- 1.0.1 — 2019-03-22
- 1.0.0 — 2019-03-22

## README

[![npm version](https://badge.fury.io/js/react-native-draggable-switch.svg)](https://badge.fury.io/js/react-native-draggable-switch)
[![Build Status](https://travis-ci.org/thousight/react-native-draggable-switch.svg?branch=master)](https://travis-ci.org/thousight/react-native-draggable-switch)
[![Greenkeeper Badge](https://badges.greenkeeper.io/thousight/react-native-draggable-switch.svg)](https://greenkeeper.io/)
[![Coverage Status](https://coveralls.io/repos/github/thousight/react-native-draggable-switch/badge.svg?branch=master)](https://coveralls.io/github/thousight/react-native-draggable-switch?branch=master)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/2d08b8ef83bd44bdbd8ce5fe94b94758)](https://app.codacy.com/app/thousight/react-native-draggable-switch?utm_source=github.com&utm_medium=referral&utm_content=thousight/react-native-draggable-switch&utm_campaign=Badge_Grade_Dashboard)

# React Native Draggable Switch

A stateless, JS-only, animated, draggable switch component that maintains itself at 60fps.

## Demo

![GIF DEMO](https://i.imgur.com/lcrZukf.gif)

## Getting started

`yarn add react-native-draggble-switch`

## Usage

```javascript
...
import Switch from 'react-native-draggable-switch';

...
render() {
  ...
  return (
    <Switch
     width={50}
     height={30}
     value={this.state.isSwitchOn}
     onValueChange={(isSwitchOn) => this.setState({ isSwitchOn })}
    />
  )
}
...
```

## Props Definitions

### `<Switch />`

| Prop            | Explanation                                                                                          | Type      | Default   | Required |
| --------------- | ---------------------------------------------------------------------------------------------------- | --------- | --------- | -------- |
| width           | The width of the switch                                                                              | number    |           | true     |
| height          | The height of the switch                                                                             | number    |           | true     |
| value           | The value of the switch, indicating if the switch is on or off                                       | boolean   |           | true     |
| onValueChange   | 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    |
| containerStyle  | Style for Switch outer container                                                                     | ViewStyle | null      | false    |
| circleStyle     | Style for the dragging circle of the switch                                                          | ViewStyle | null      | false    |
| backgroundColor | Background color of the Switch when it is not on                                                     | string    | '#F6F7FA' | false    |
| circleColor     | Color of the dragging circle                                                                         | string    | '#FFFFFF' | false    |
| activeColor     | Background color of the Switch when it is on                                                         | string    | '#66D0B1' | false    |
| disabledColor   | Background color of the Switch when it is disabled                                                   | string    | '#A1A1A1' | false    |

---
_Source: https://npm.io/package/react-native-draggable-switch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._