react-native-switch-pro

 
A universal switch for android and iOS, it could be the best switch for react-native on Github.

Preview

   

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 (

{...}}/>

)
}
...
`

* Async

`JavaScript
...
render() {
return (

{
You can call your async module and just invoke callback(true) when succeed,
callback(false) when fail.
}}/>

)
}
...
`

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
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.