Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/poberwong/react-native-switch-pro
a universal switch for android and iOS
https://github.com/poberwong/react-native-switch-pro
Last synced: about 1 month ago
JSON representation
a universal switch for android and iOS
- Host: GitHub
- URL: https://github.com/poberwong/react-native-switch-pro
- Owner: poberwong
- License: mit
- Created: 2016-12-04T14:02:01.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-03-21T11:49:26.000Z (6 months ago)
- Last Synced: 2024-04-13T22:24:56.296Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 3.51 MB
- Stars: 282
- Watchers: 3
- Forks: 93
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-switch-pro ★153 - A pretty nice switch for Android and iOS that have same performance on two platforms and clean code in the library. (Components / UI)
- awesome-react-native - react-native-switch-pro ★153 - A pretty nice switch for Android and iOS that have same performance on two platforms and clean code in the library. (Components / UI)
- awesome-react-native - react-native-switch-pro ★153 - A pretty nice switch for Android and iOS that have same performance on two platforms and clean code in the library. (Components / UI)
README
# react-native-switch-pro (2.0 is coming)
[](https://www.npmjs.com/package/react-native-switch-pro) [](https://www.npmjs.com/package/react-native-switch-pro)
[](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
## 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
{
callback(false or true, value => this.setState({value}))
}}
/>
```
`value => this.setState({value})` will only be invoked when result is true.
## License
*MIT*