Switch

Switch component gives an option to the user to toggle between two option to either pick one of the value base the switch value,this can be helpful when you are giving the user an option to choose between any two option.

Usage

<Switch

isOn={isOn}

onColor="#00D09C"

offColor="#E6E7E8"

// label="Example label"

// size="small"

onToggle={onThemeSwitch}

/>

Props

isOn

A boolean value to keep track whether the switch value is active or deactive.

Type	Default	Required
boolean	false	Yes

onColor

color which you want to have as switch component's background when its ON

Type	Default	Required
string	#00D09C	No

offColor

color which you want to have as switch component's background when its OFF

Type	Default	Required
string	#EBEBF5	No

onToggle

callback function that will be called to set isOn in your Parent component's state to control you ui with it.

Type	Default	Required
function	None	Yes

size

you can set this props to control your dimension of switch

Type	Default	Required
enum('sm', 'md', 'lg')	md	No

icon

You can pass custom icon for switch to make the ui more impressive,like if you are having light mode and dark mode then you can pass sunlight and moonlight icon into switch to make you switch to look much more good. you can use react-native-vector-icons to send ON & OFF icons

Type	Default	Required
ReactNode	None	No

disabled

boolean to disable click event on the switch

Type	Default	Required
boolean	false	No