npm install @yyrdl/react-native-switch-button
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> ) } }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#cccinactiveSlotColor{String} the color of the slot when the switch is inactive,default#cccactiveCircleColor{String} the color of the circle when the switch is active,defaultblackinactiveCircleColor{String} the color of the circle when the switch is inactive,defaultblackactivated{Boolean} the initial state of the buttonanimationDurationthe duration of the animation when state changed
onChangeState{Function} the handler of the state-change-event
MIT License