Home » React Native Switch

React Native Switch

by Online Tutorials Library

React Native Switch

React Native Switch is a Boolean control component which sets its value to true or false. It has an onValueChange callback method that updates its value prop. If the value prop is not changed, the Switch component continues supplied the value prop instead of the expected result of any user actions.

Props of Switch

disabledIt is a Boolean property, if it is set to true then it cannot be toggled to switch. Its default value is false.
trackColorIt is used to customize the color for switch track.
ios_backgroundColorIt set the custom background color in iOS. The background can be visible either when the switch value is disabled or when the switch is false.
onValueChangeIt invoked when the switch value is changed.
testIDIt is used to locate this view in end-to-end tests.
thumbColorIt colors the foreground switch grip. When it is set to iOS, the switch grip will lose its drop shadow.
tintColorIt sets the border color on iOS and background color on Android when the switch is turned off. This property is deprecated; use trackColor at the place of it.
valueIt is the value of switch. When it is set to true, it turns on. The default value is false.

React Native Switch Example

In this example, we initialy set the Switch value to false and display a Text with ‘off’. When the value of Switch change to true by calling onValueChange the Text component is reset to ‘on’.



React Native Switch React Native Switch

You may also like