Switch

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

boolean

default:false

The value of the switch. If true the switch will be turned on.

(value: boolean) => void

Invoked when the user tries to change the value of the switch. Receives the new value as an argument.

(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.

boolean

default:false

If true, the user won’t be able to toggle the switch.

ColorValue

Color of the foreground switch grip. If this is set on iOS, the switch grip will lose its drop shadow.

{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.

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

ColorValue

Background color when the switch is turned on.Deprecated: Use trackColor insteadPlatform: iOS

ColorValue

Color of the foreground switch grip.Deprecated: Use thumbColor insteadPlatform: iOS

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 }))
  }
/>

Core Components

User Interface

List Components

Android Components

iOS Components

Example

Props

Deprecated Props

Controlled Component

Styling

Basic Styling

Custom Colors

Platform Differences

iOS

Android

Accessibility

Common Patterns

Settings Toggle

Form Integration

​Example

​Props

​Deprecated Props

​Controlled Component

​Styling

​Basic Styling

​Custom Colors

​Platform Differences

​iOS

​Android

​Accessibility

​Common Patterns

​Settings Toggle

​Form Integration

Example

Props

Deprecated Props

Controlled Component

Styling

Basic Styling

Custom Colors

Platform Differences

iOS

Android

Accessibility

Common Patterns

Settings Toggle

Form Integration