switch-button-react-native

1.0.3 • Public • Published

switch-button-react-native

Customisable switch button in react native ( e.g: change view after change switch button )

switchbutton

Installation:

    npm i switch-button-react-native --save

how to use:

  1. import component

  2. set

     activeSwitch=1
    

to state

  1. use:

     <MySwitchButton  
           onValueChange={(val) => this.setState({ activeSwitch: val })} 
     /> 
    

in your code

  1. 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>

    );
}

Package Sidebar

Install

npm i switch-button-react-native

Weekly Downloads

41

Version

1.0.3

License

none

Last publish

Collaborators

  • siamak_rp