@yyrdl/react-native-switch-button
v0.0.4
Published
switch button for react-native
Downloads
1
Readme
React Native Switch Button
Installation
npm install @yyrdl/react-native-switch-button
Example
import React from "react";
import {View,Text} from "react-native";
import SwitchButton from "@yyrdl/react-native-switch-button";
export default class App extends React.Component{
constructor(props){
super(props);
this.state = {text:"Off"}
}
render(){
return (
<View
style={{
flex:1,
alignItems:"center",
}}
>
<Text style={{fontSize:24,padding:30}}>{"react-native-switch-button"}</Text>
<Text>{"Default"}</Text>
<SwitchButton
slotWidth = { 80 }
slotHeight= { 20 }
circleRadius= { 15 }
/>
<Text style={{padding:20}}>{this.state.text}</Text>
<SwitchButton
slotWidth = { 40 }
slotHeight= { 20 }
circleRadius= { 10 }
activeSlotColor="#00cc00"
activeCircleColor="white"
onChangeState= {(active)=>{this.setState({text:active ? "On":"Off"})}}
/>
<Text style={{padding:20}}>{""}</Text>
<SwitchButton
slotWidth = { 15 }
slotHeight= { 80 }
circleRadius= { 15 }
/>
<Text style={{padding:20}}>{""}</Text>
<SwitchButton
slotWidth = { 100 }
slotHeight= { 10 }
circleRadius= { 10 }
inactiveCircleColor="red"
activeCircleColor= "#00cc00"
/>
</View>
)
}
}
Properties
slotWidth
(Number) the width of the slotslotHeight
(Number) the height of the slotcircleRadius
(Number) the radius of the circleactiveSlotColor
{String} the color of the slot when the switch is active,default#ccc
inactiveSlotColor
{String} the color of the slot when the switch is inactive,default#ccc
activeCircleColor
{String} the color of the circle when the switch is active,defaultblack
inactiveCircleColor
{String} the color of the circle when the switch is inactive,defaultblack
activated
{Boolean} the initial state of the button
Events
onChangeState
{Function} the handler of the state-change-event
License
MIT License