React-Native-Custom-Switch

A lightweight, fully customizable switch component for React Native.

Installation

npm install react-native-custom-switch

Usage

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

Basic Usage

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

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

Flexible Sizing

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

Customizable Colors

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

Add background Text, and customize the style

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

Add text to the button

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

...including Emojis

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