Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @yyrdl/react-native-switch-button with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-native/package.json"); // react-native is a peer dependency. var reactNativeSwitchButton = require("@yyrdl/react-native-switch-button")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@yyrdl/react-native-switch-button v0.0.4

switch button for react-native

React Native Switch Button

Installation

npm install @yyrdl/react-native-switch-button

Example

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 slot
  • slotHeight (Number) the height of the slot
  • circleRadius (Number) the radius of the circle
  • activeSlotColor {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,default black
  • inactiveCircleColor {String} the color of the circle when the switch is inactive,default black
  • activated {Boolean} the initial state of the button

Events

  • onChangeState {Function} the handler of the state-change-event

License

MIT License

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free