React-native Switch

Our React-native switch component has a similar purpose to checkboxes - they’re a multiple choice element that is rarely used in forms, but rather as separate objects.

The main difference between them and checkboxes is that action caused by switching a switch does not have to be confirmed by a “Submit” button.


Default usage:

<Switch />


Property Type Default Description
id string ‘Switch’ id for testID & accesibilityLabel
checked boolean false Switch checked value
style ViewStyle undefined Renders the Switch style
thumbColor ColorValue ‘white’ Renders the thumb color value
activeFillColor ColorValue undefined Renders the switch active thumb backgroundColor value
inactiveFillColor ColorValue undefined Renders the switch inactive thumb backgroundColor value
thumbStyle ViewStyle undefined Renders the thumb style
switchStyle ViewStyle undefined Renders the switch container style
onPress (checked: boolean) => void undefined Switch onPress callback passing the checked value as params
haptic boolean true Provides haptic feedback when toggling the switch
duration Animated.TimingAnimationConfig[‘duration’] 250 Duration in ms for thumb animated position