Switch
Universal two-state toggle component.
disabled bool #
If true the user won't be able to toggle the switch.
Default value is false.
onValueChange function #
Invoked with the new value when the value changes.
testID string #
Used to locate this view in end-to-end tests.
value bool #
The value of the switch. If true the switch will be turned on.
Default value is false.
iosonTintColor ColorPropType #
Background color when the switch is turned on.
iosthumbTintColor ColorPropType #
Color of the foreground switch grip.
iostintColor ColorPropType #
Background color when the switch is turned off.
'use strict';
var React = require('react-native');
var {
Switch,
Text,
View
} = React;
var BasicSwitchExample = React.createClass({
getInitialState() {
return {
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>
);
}
});
var DisabledSwitchExample = React.createClass({
render() {
return (
<View>
<Switch
disabled={true}
style={{marginBottom: 10}}
value={true} />
<Switch
disabled={true}
value={false} />
</View>
);
},
});
var ColorSwitchExample = React.createClass({
getInitialState() {
return {
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>
);
},
});
var EventSwitchExample = React.createClass({
getInitialState() {
return {
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(): ReactElement { return <BasicSwitchExample />; }
},
{
title: 'Switches can be disabled',
render(): ReactElement { return <DisabledSwitchExample />; }
},
{
title: 'Change events can be detected',
render(): ReactElement { return <EventSwitchExample />; }
},
{
title: 'Switches are controlled components',
render(): ReactElement { return <Switch />; }
}
];
if (React.Platform.OS === 'ios') {
examples.push({
title: 'Custom colors can be provided',
render(): ReactElement { return <ColorSwitchExample />; }
});
}
exports.title = '<Switch>';
exports.displayName = 'SwitchExample';
exports.description = 'Native boolean input';
exports.examples = examples;