Skip to main content
Renders a boolean input (toggle switch). 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;

​
Props

​
value
boolean
default:false
The value of the switch. If true the switch will be turned on.
​
onValueChange
(value: boolean) => void
Invoked when the user tries to change the value of the switch. Receives the new value as an argument.
​
onChange
(event: SwitchChangeEvent) => void
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.
​
disabled
boolean
default:false
If true, the user won’t be able to toggle the switch.
​
thumbColor
ColorValue
Color of the foreground switch grip. If this is set on iOS, the switch grip will lose its drop shadow.
​
trackColor
{false?: ColorValue, true?: ColorValue}
Custom colors for the switch track.iOS Note: When the switch value is false, the track shrinks into the border. If you want to change the color of the background exposed by the shrunken track, use ios_backgroundColor.
​
ios_backgroundColor
ColorValue
On iOS, custom color for the background. This background color can be seen either when the switch value is false or when the switch is disabled (and the switch is translucent).Platform: iOS

​
Deprecated Props

​
onTintColor
ColorValue
Background color when the switch is turned on.Deprecated: Use trackColor insteadPlatform: iOS
​
thumbTintColor
ColorValue
Color of the foreground switch grip.Deprecated: Use thumbColor insteadPlatform: iOS
​
tintColor
ColorValue
Background color when the switch is turned off.Deprecated: Use trackColor insteadPlatform: iOS

​
Controlled Component

Switch is a controlled component, which means you must manage its state: 
const [isEnabled, setIsEnabled] = useState(false);

<Switch
  value={isEnabled}
  onValueChange={setIsEnabled}
/>
If you don’t update the value prop in response to onValueChange, the switch will not respond to user input.

​
Styling

​
Basic Styling

<Switch
  trackColor={{ false: '#767577', true: '#81b0ff' }}
  thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
  ios_backgroundColor="#3e3e3e"
  value={isEnabled}
  onValueChange={setIsEnabled}
/>

​
Custom Colors

<Switch
  trackColor={{ false: '#d3d3d3', true: '#4cd964' }}
  thumbColor={isEnabled ? '#ffffff' : '#f4f3f4'}
  value={isEnabled}
  onValueChange={setIsEnabled}
/>

​
Platform Differences

​
iOS

  • Native iOS switch with system styling
  • Supports ios_backgroundColor for the exposed background
  • Track shrinks into a border when value is false
  • Grip has a subtle drop shadow (removed if custom thumbColor is set)

​
Android

  • Material Design switch component
  • Uses trackColor for the track in both states
  • thumbColor affects the circular button color
  • No drop shadow on the grip

​
Accessibility

Switch automatically has the switch accessibility role. You can enhance accessibility with: 
<Switch
  value={isEnabled}
  onValueChange={setIsEnabled}
  accessibilityLabel="Toggle notifications"
  accessibilityHint="Enables or disables push notifications"
/>

​
Common Patterns

​
Settings Toggle

import { View, Switch, Text } from 'react-native';

const SettingsToggle = ({ label, value, onValueChange }) => (
  <View style={{ flexDirection: 'row', alignItems: 'center', padding: 10 }}>
    <Text style={{ flex: 1 }}>{label}</Text>
    <Switch value={value} onValueChange={onValueChange} />
  </View>
);

​
Form Integration

const [formData, setFormData] = useState({
  notifications: false,
  darkMode: true,
});

<Switch
  value={formData.notifications}
  onValueChange={(value) => 
    setFormData(prev => ({ ...prev, notifications: value }))
  }
/>

Build docs developers (and LLMs) love

Get started for freeTalk to us