A lightweight, fully customizable switch component for React Native.
npm i react-native-custom-switch-new
yarn add react-native-custom-switch-newimport CustomSwitch from 'react-native-custom-switch-new';
<CustomSwitch />
Provide a callback function to onSwitch() which will be called when the switch is pressed.
<CustomSwitch
onSwitch={() => changeToDarkTheme()>
/>
<CustomSwitch
onSwitch={() => sayHello()>
buttonWidth={20}
switchWidth={100}
buttonPadding={2}
/>
<CustomSwitch
buttonColor={'#EFE6DD'}
switchBorderColor={'#F3DFA2'}
buttonBorderColor={'#997048'}
switchBackgroundColor={'#7EBDC2'}
onSwitchBackgroundColor={'#BB4430'}
/>
<CustomSwitch
switchLeftText={"Tea"}
switchLeftTextStyle={{color: 'green', fontSize: 24}}
switchRightText={"Coffee"}
switchRightTextStyle={{color: 'brown', fontSize: 24}}
/>
<CustomSwitch
buttonText={'Hello'}
onSwitchButtonText={'Bye'}
/>
<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 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent