Switch #

Renders a boolean input.

This is a controlled component that requires an onValueChange callback that updates the value prop in order for the component to reflect user actions. If the value prop is not updated, the component will continue to render the supplied value prop instead of the expected result of any user actions.

@keyword checkbox @keyword toggle

Props #

disabled?: bool #

If true the user won't be able to toggle the switch. Default value is false.

onTintColor?: [object Object] #

Background color when the switch is turned on.

onValueChange?: function #

Invoked with the new value when the value changes.

testID?: string #

Used to locate this view in end-to-end tests.

thumbTintColor?: [object Object] #

Color of the foreground switch grip.

tintColor?: [object Object] #

Border color on iOS and background color on Android when the switch is turned off.

value?: bool #

The value of the switch. If true the switch will be turned on. Default value is false.

You can edit the content above on GitHub and send us a pull request!

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); var { Platform, Switch, Text, View } = ReactNative; class BasicSwitchExample extends React.Component { state = { trueSwitchIsOn: true, falseSwitchIsOn: false, }; render() { return ( <View> <Switch onValueChange={(value) => this.setState({falseSwitchIsOn: value})} style={{marginBottom: 10}} value={this.state.falseSwitchIsOn} /> <Switch onValueChange={(value) => this.setState({trueSwitchIsOn: value})} value={this.state.trueSwitchIsOn} /> </View> ); } } class DisabledSwitchExample extends React.Component { render() { return ( <View> <Switch disabled={true} style={{marginBottom: 10}} value={true} /> <Switch disabled={true} value={false} /> </View> ); } } class ColorSwitchExample extends React.Component { state = { colorTrueSwitchIsOn: true, colorFalseSwitchIsOn: false, }; render() { return ( <View> <Switch onValueChange={(value) => this.setState({colorFalseSwitchIsOn: value})} onTintColor="#00ff00" style={{marginBottom: 10}} thumbTintColor="#0000ff" tintColor="#ff0000" value={this.state.colorFalseSwitchIsOn} /> <Switch onValueChange={(value) => this.setState({colorTrueSwitchIsOn: value})} onTintColor="#00ff00" thumbTintColor="#0000ff" tintColor="#ff0000" value={this.state.colorTrueSwitchIsOn} /> </View> ); } } class EventSwitchExample extends React.Component { state = { eventSwitchIsOn: false, eventSwitchRegressionIsOn: true, }; render() { return ( <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}> <View> <Switch onValueChange={(value) => this.setState({eventSwitchIsOn: value})} style={{marginBottom: 10}} value={this.state.eventSwitchIsOn} /> <Switch onValueChange={(value) => this.setState({eventSwitchIsOn: value})} style={{marginBottom: 10}} value={this.state.eventSwitchIsOn} /> <Text>{this.state.eventSwitchIsOn ? 'On' : 'Off'}</Text> </View> <View> <Switch onValueChange={(value) => this.setState({eventSwitchRegressionIsOn: value})} style={{marginBottom: 10}} value={this.state.eventSwitchRegressionIsOn} /> <Switch onValueChange={(value) => this.setState({eventSwitchRegressionIsOn: value})} style={{marginBottom: 10}} value={this.state.eventSwitchRegressionIsOn} /> <Text>{this.state.eventSwitchRegressionIsOn ? 'On' : 'Off'}</Text> </View> </View> ); } } var examples = [ { title: 'Switches can be set to true or false', render(): React.Element<any> { return <BasicSwitchExample />; } }, { title: 'Switches can be disabled', render(): React.Element<any> { return <DisabledSwitchExample />; } }, { title: 'Change events can be detected', render(): React.Element<any> { return <EventSwitchExample />; } }, { title: 'Switches are controlled components', render(): React.Element<any> { return <Switch />; } }, { title: 'Custom colors can be provided', render(): React.Element<any> { return <ColorSwitchExample />; } } ]; exports.title = '<Switch>'; exports.displayName = 'SwitchExample'; exports.description = 'Native boolean input'; exports.examples = examples;