switch-button-react-native
Version:
Customisable switch button in react native
79 lines (50 loc) • 2.67 kB
Markdown
# switch-button-react-native
Customisable switch button in react native ( e.g: change view after change switch button )
Installation:
npm i switch-button-react-native --save
how to use:
1) import component
2) set
activeSwitch=1
to state
3) use:
<MySwitchButton
onValueChange={(val) => this.setState({ activeSwitch: val })}
/>
in your code
4) use:
{ this.state.activeSwitch === 1 ? view1 : view2 }
small example: ...
import React, { Component } from 'react';
import { View } from 'react-native';
import SwitchButton from './mySwitchButton';
constructor () {
super();
this.state = {
activeSwitch: 1
};
}
render () {
return (
<View>
<SwitchButton
onValueChange={(val) => this.setState({ activeSwitch: val })} // this is necessary for this component
text1 = 'ON' // optional: first text in switch button --- default ON
text2 = 'OFF' // optional: second text in switch button --- default OFF
switchWidth = {100} // optional: switch width --- default 44
switchHeight = {44} // optional: switch height --- default 100
switchdirection = 'rtl' // optional: switch button direction ( ltr and rtl ) --- default ltr
switchBorderRadius = {100} // optional: switch border radius --- default oval
switchSpeedChange = {500} // optional: button change speed --- default 100
switchBorderColor = '#d4d4d4' // optional: switch border color --- default #d4d4d4
switchBackgroundColor = '#fff' // optional: switch background color --- default #fff
btnBorderColor = '#00a4b9' // optional: button border color --- default #00a4b9
btnBackgroundColor = '#00bcd4' // optional: button background color --- default #00bcd4
fontColor = '#b1b1b1' // optional: text font color --- default #b1b1b1
activeFontColor = '#fff' // optional: active font color --- default #fff
/>
{ this.state.activeSwitch === 1 ? console.log('view1') : console.log('view2') }
</View>
);
}