react-native-simple-switch
A simple customizable switch for react native
Version
1.0.2. update example 1.0.1. fixed height, when diameter over height & make example 1.0.0. init
Support
react-native >= 0.55
- Maybe even in lower version
Installation
npm install react-native-simple-switch
Properties
props | types | default | comment |
---|---|---|---|
width | number | 32 | |
height | number | 13 | |
diameter | number | 20 | have to smaller than width |
value | bool | false | switch's state |
buttonColor | string | '#eee' | |
activeButtonColor | string | '#009685' | |
shadowColor | string | '#ccc' | if you dont want to see shadow, use same color with button |
activeShadowColor | string | '#00a396' | if you dont want to see shadow, use same color with button |
barColor | string | '#aaa' | |
activeBarColor | string | '#9ddfdc' | |
callback | func | () => null | callback when finished animation |
Usage
;
<Switch value={} onPress={}/>
Trick
- this properties are similar to both platform.
a little?
1.Android
<Switch width=32 height=13 diameter=20 buttonColor='#eee' activeButtonColor='#009685' shadowColor='#ccc' activeShadowColor='#00a396' barColor='#aaa' activeBarColor='#9ddfdc'/>
2.ios
<Switch width=50 height=30 diameter=28 buttonColor='#eee' activeButtonColor='#fff' shadowColor='#ccc' activeShadowColor='#eee' barColor='#aaa' activeBarColor='#4cd864'/>
Example
;;; const data = value:true value:false width:50 height:30 diameter:28 buttonColor:'#eee' activeButtonColor:'#fff' shadowColor:'#ccc' activeShadowColor:'#eee' barColor:'#aaa' activeBarColor:'#4cd864' value:true width:100 activeBarColor:'#ffa19c' activeButtonColor:'#ff4a41' activeShadowColor:'#c13932' // if you dont want to see shadow, use same color with button value:false width:50 height:30 value:true diameter:100 ; type Props = {};<Props> { superprops; thisstate= data:...data ; } { this; } { const onSwitches = thisstatedata; ifonSwitcheslength<=0 ; } { return <View style=stylescontainer> thisstatedata </View> ; } const styles = StyleSheet;