react-native-switch-toggle

Simple switch toggle component for react-native. This component supports horizontal switch toggle with animation with several options like start/end background colors, start/end circle colors, and duration for animation.

News

Current package is fully redesigned in 2.0.0. We recommend you to use this package version >=2.0.0.

Alternative

Do you enjoy using react-native-switch-toggle? Then think about using dooboo-ui which is our ui integrated ilbrary. It included SwitchToggle from 0.1.6.

yarn add doobo-ui

Props

	necessary	types	default
switchOn	✓	boolean	false
onPress	✓	func	() => {}
containerStyle		styles	{ width: 80, height: 40, borderRadius: 25 ... }
circleStyle		styles	{ width: 32, height: 32, borderRadius: 16 ... }
backgroundColorOn		string	'black'
backgroundColorOff		string	'#C4C4C4'
circleColorOn		string	'white'
circleColorOff		string	'#C4C4C4'
duration		number	300
type		number	0 - Normal switch, 1 - Switch with a text
buttonText		string	Text on-top of the button
backTextRight		string	Text to appear in right side when button toggled to left
backTextLeft		string	Text to appear in left side when button toggled to right
buttonTextStyle		styles	Styles for text on the button
textRightStyle		styles	Styles for text in right
textLeftStyle		styles	Styles for text in left
buttonStyle		styles	Styles for the button
buttonContainerStyle		styles	Styles for button container
rightContainerStyle		styles	Styles for right text container
leftContainerStyle		styles	Styles for left text container

Getting started

$ npm install react-native-switch-toggle --save

importSwitchTogglefrom"react-native-switch-toggle";

Basic Style

<SwitchToggleswitchOn={on}onPress={()=>off(!on)}/>

Custom Color

<SwitchToggleswitchOn={on}onPress={()=>off(!on)}circleColorOff='#C4C4C4'circleColorOn='#00D9D5'backgroundColorOn='#6D6D6D'backgroundColorOff='#C4C4C4'/>

Custom Size

<SwitchToggleswitchOn={on}onPress={()=>off(!on)}containerStyle={{marginTop: 16,width: 106,height: 48,borderRadius: 25,padding: 5,}}circleStyle={{width: 40,height: 40,borderRadius: 20,}}/>