react-native-switch-pro (2.0 is coming)

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

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

• Async

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

  <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