Vesta-react-native-switch NPM

React-Native-Custom-Switch

A lightweight, fully customizable switch component for React Native.

ezgif com-gif-maker (1)

Installation

npm install react-native-custom-switch

Usage

import CustomSwitch from 'react-native-custom-switch';
<CustomSwitch />

Basic Usage

ezgif com-gif-maker (2)

Provide a callback function to onSwitch() which will be called when the switch is pressed.

<CustomSwitch 
  onSwitch={() => changeToDarkTheme()>
/>

Flexible Sizing

ezgif com-gif-maker (3)

<CustomSwitch 
  onSwitch={() => sayHello()>
  buttonWidth={20}
  switchWidth={100}
  buttonPadding={2}
/>

Customizable Colors

ezgif com-gif-maker (4)

<CustomSwitch 
  buttonColor={'#EFE6DD'}
  switchBorderColor={'#F3DFA2'}
  buttonBorderColor={'#997048'}
  switchBackgroundColor={'#7EBDC2'}
  onSwitchBackgroundColor={'#BB4430'}
/>

Add background Text, and customize the style

ezgif com-gif-maker (5)

<CustomSwitch 
  switchLeftText={"Tea"}
  switchLeftTextStyle={{color: 'green', fontSize: 24}}
  switchRightText={"Coffee"}
  switchRightTextStyle={{color: 'brown', fontSize: 24}}
/>

Add text to the button

ezgif com-gif-maker (7)

<CustomSwitch 
  buttonText={'Hello'}
  onSwitchButtonText={'Bye'}
/>

...including Emojis

ezgif com-gif-maker (6)

<CustomSwitch 
  switchLeftText={"☀️"}
  switchRightText={"🌙"}
/>

Props	Description	Example	Default
buttonWidth	Adjusts the width of the button.	`buttonWidth={20}`	`20`
buttonPadding	Adjusts the amount of padding around the button.	`buttonPadding={5}`	`undefined`
buttonColor	Adjusts the color of the button.	`buttonColor={'#FFFFFF'}`	`#FFFFFF`
buttonBorderWidth	Adjusts the width of the button border.	`buttonBorderWidthbuttonBorderWidth={1}`	`undefined`
buttonBorderColor	Adjusts the color of the button border.	`buttonBorderColor={'#D4EDE1'}`	`undefined`
buttonText	Defines the text that will appear inside of the button.	`buttonText={"On"}`	`undefined`
buttonTextStyle	Adjusts the style of the text inside of the button.	`buttonTextStyle={{fontSize: 18}}`	`undefined`
switchWidth	Adjust the total width of the switch.	`switchWidth={75}`	`50`
switchBackgroundColor	Adjusts the background color of the switch.	`switchBackgroundColor={'#0f2832'}`	`#D4EDE1`
switchBorderWidth	Adjusts the width of the switch border.	`switchBorderWidth={2}`	`undefined`
switchBorderColor	Adjusts the color of the switch border.	`switchBorderColor={'#0f2832'}`	`undefined`
switchLeftText	Defines the text that appears on the left side of the switch.	`switchLeftText={'On'}`	`undefined`
switchLeftTextStyle	Adjusts the style of the text on the left side of the switch.	`switchLeftTextStyle={{fontSize: 18}}`	`undefined`
switchRightText	Defines the text that appears on the right side of the switch	`switchRightText={'Off}`	`undefined`
switchRightTextStyle	Adjusts the style of the text on the right side of the switch.	`switchRightTextStyle={{fontSize: 18}}`	`undefined`
onSwitch	Takes a callback that is called when the switch is pressed.	`onSwitch={() => changeTheme}`	`undefined`
onSwitchReverse	Takes a callback that is called when the switch position is reversed.	`onSwitchReverse={() => sayHello()}`	`undefined`
onSwitchButtonText	Defines the text that will appear in the button when the switch is pressed.	`onSwitchButtonText`	`undefined`
onSwitchButtonTextStyle	Adjusts the style of the text in the button when the switch is pressed.	`onSwitchButtonTextStyle={{fontSize: 18}}`	`undefined`
onSwitchBackgroundColor	Adjusts the background color of the switch when the switch is pressed.	`onSwitchBackgroundColor={'#0f2832'}`	`undefined`
animationSpeed	Adjuts the speed of the animation when the switch is pressed.	`animationSpeed={50}`	`150`
startOnLeft	Changes the start position of the switch to the right side.	`startOnLeft={true}`	`false`
disabled	Prevents the switch from being pressed.	`disabled={true}`	`false`

@everything-registry/sub-chunk-3051

1.0.7

3 years ago