React NativeSwitch # | Edit on GitHub |
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.
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.
Examples # | Edit on GitHub |
'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;
