react-native-switch-pro
v1.0.5
Published
an universal switcher for andriod and iOS
Downloads
4,819
Maintainers
Readme
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
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
andonAsyncPress
together or else, onlyonSyncPress
will be invoked.value
is used with bidirectional binding which could be redux, state and so on.
InonAsyncPress
, 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
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.