# react-native-switch-pro

> an universal switcher for andriod and iOS

Latest version **1.0.5** (published 2020-07-29) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2020-07-29 |
| First published | 2016-12-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 11.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | poberwong |
| Maintainers | poberwong |
| Keywords | switch, universal, react-native |

## Links

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

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10

## Recent versions

- 1.0.5 (latest) — 2020-07-29
- 1.0.4 — 2019-05-18
- 1.0.3 — 2019-05-13
- 1.0.2 — 2019-03-21
- 1.0.2-beta — 2018-11-07
- 1.0.1-beta — 2018-08-28
- 1.0.0-beta — 2018-06-18
- 0.4.11 — 2018-04-20
- 0.4.10 — 2018-03-13
- 0.4.9 — 2018-03-13
- 0.4.8 — 2018-02-01
- 0.4.7 — 2018-01-08
- 0.4.6 — 2017-09-17
- 0.4.5 — 2017-07-25
- 0.4.4 — 2017-07-24
- … 14 more at https://npm.io/package/react-native-switch-pro/versions

## README

# react-native-switch-pro
[![version](https://img.shields.io/npm/v/react-native-switch-pro.svg)](https://www.npmjs.com/package/react-native-switch-pro) [![downloads](https://img.shields.io/npm/dm/react-native-switch-pro.svg?style=flat)](https://www.npmjs.com/package/react-native-switch-pro)
[![downloads](https://img.shields.io/npm/dt/react-native-switch-pro.svg?style=flat)](https://www.npmjs.com/package/react-native-switch-pro)  
A universal switch for android and iOS, it could be the best switch for react-native on Github.

## Preview
<img src="http://ww4.sinaimg.cn/large/005zU9b3jw1faioulkg79j30kq10wq3c.jpg" width="340" height="600"/>
&nbsp;&nbsp;&nbsp;
<img src="http://ww2.sinaimg.cn/large/005zU9b3jw1faioygbedfg30a90iejrd.gif" width="340" height="600"/>

## Feature
* Almost perfect switch on react-native
* Have a good performance on both iOS and Android  
* Add gesture with `PanResponder`  
* More animations to follow iOS native performance
* Support async and sync event
* Support bidirectional data binding
* Clear code style

## Install
`npm install react-native-switch-pro --save`

## Usage
* Sync  
  
```JavaScript
import Switch from 'react-native-switch-pro'
...
  render() {
    return (
      <View style={styles.container}>
        <Switch onSyncPress={value => {...}}/>
      </View>
    )
  }
...
```

* Async  
 
```JavaScript
...
  render() {
    return (
      <View style={styles.container}>
        <Switch onAsyncPress={(callback) => {
          You can call your async module and just invoke callback(true) when succeed,  
          callback(false) when fail.
        }}/>
      </View>
    )
  }
...
```

## Props
 Name | Description | Default | Type
------|-------------|----------|-----------
width | width of switch | 40 | number
height | height of switch | 21 | number
value | state of switch which can be used to bidirectional binding | undefined | bool
disabled | whether switch is clickable | false | bool
circleColorActive | color for circle handler of switch when it is on | white | string
circleColorInactive | color for circle handler of switch when it is off | white | string
style | styles that will be applied for switch container | undefined | style
circleStyle | styles that will be applied for the circle | undefined | style
backgroundActive | color of switch when it is on | green | string
backgroundInactive | color of switch when it is off | '#ddd' | string
onSyncPress | callback when switch is clicked | () => null | func
onAsyncPress | has a callback with result of async | (value, callback) => {callback(true)} | func

## Notice
* You'd better not use `onSyncPress` and `onAsyncPress` together or else, only `onSyncPress` will be invoked.
* `value` is used with bidirectional binding which could be redux, state and so on.  
In `onAsyncPress`, you should write like following (with state):  

	```javascript
	<Switch
	  value={this.state.value}
	  onAsyncPress={(callback) => {
	    callback(false or true, value => this.setState({value}))
     }}
	/>
	```
	`value => this.setState({value})` will only be invoked when result is true.

## License
*MIT*

## Maybe I need your help
It's my pleasure to develop the library for you.  
Now I'm looking for a new and nice job and if you can help me, just click [here](https://github.com/poberwong/Maybe-I-need-your-help/blob/master/README.md).

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