1.0.10 • Published 1 year ago
@islacel/react-native-custom-switch v1.0.10
React-Native-Custom-Switch
A lightweight, fully customizable switch component for React Native.
Installation
npm install react-native-custom-switchUsage
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 |