SwitchIOS

Use SwitchIOS to render a boolean input on iOS. This is a controlled component, so you must hook in to the onValueChange callback and update the value prop in order for the component to update, otherwise the user's change will be reverted immediately to reflect props.value as the source of truth.

Edit on GitHubProps #

disabled bool #

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

onTintColor string #

Background color when the switch is turned on.

onValueChange function #

Callback that is called when the user toggles the switch.

thumbTintColor string #

Background color for the switch round button.

tintColor string #

Background color 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.

Edit on GitHubExamples #

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