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.
Example
import React, {useState} from 'react';
import {View, Switch, StyleSheet} from 'react-native';
const App = () => {
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(previousState => !previousState);
return (
<View style={styles.container}>
<Switch
trackColor={{false: '#767577', true: '#81b0ff'}}
thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
ios_backgroundColor="#3e3e3e"
onValueChange={toggleSwitch}
value={isEnabled}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
export default App;
Reference
Props
View Props
Inherits View Props.
disabled
If true the user won't be able to toggle the switch.
| Type | Default |
|---|---|
| bool | false |
onChange
Invoked when the user tries to change the value of the switch. Receives the change event as an argument. If you want to only receive the new value, use onValueChange instead.
| Type |
|---|
| function |
onValueChange
Invoked when the user tries to change the value of the switch. Receives the new value as an argument. If you want to instead receive an event, use onChange.
| Type |
|---|
| function |
thumbColor
Color of the foreground switch grip. If this is set on iOS, the switch grip will lose its drop shadow.
| Type |
|---|
| color |
trackColor
Custom colors for the switch track.
| Type |
|---|
object: {false: [color](colors), true: [color](colors)} |
value
The value of the switch. If true the switch will be turned on. Default value is false.
| Type |
|---|
| bool |
Last updated: Sep 30, 2025
