Skip to main content
This guide will help you create your first Switch component with React Native Switchery.

​
Basic Usage

Here’s a complete example showing how to use the Switch component with state management: 
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Switch } from 'react-native-switchery';

export const Demo = () => {
  const [value, setValue] = React.useState(false);

  return (
    <View style={styles.container}>
      <Text style={styles.label}>Enable notifications</Text>
      <Switch
        value={value}
        onValueChange={setValue}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: 16,
  },
  label: {
    fontSize: 16,
  },
});

​
Using Variants

React Native Switchery provides built-in color variants for common use cases: 
<Switch
  value={value}
  onValueChange={setValue}
  variant="primary"
/>

​
Sizing Options

Control the size of your switch with the size prop: 
import React from 'react';
import { View } from 'react-native';
import { Switch } from 'react-native-switchery';

export const SizeDemo = () => {
  const [value, setValue] = React.useState(false);

  return (
    <View>
      <Switch value={value} onValueChange={setValue} size="mini" />
      <Switch value={value} onValueChange={setValue} size="small" />
      <Switch value={value} onValueChange={setValue} size="default" />
      <Switch value={value} onValueChange={setValue} size="large" />
    </View>
  );
};

​
Custom Colors

Override the default colors with custom values: 
import React from 'react';
import { Switch } from 'react-native-switchery';

export const CustomColorDemo = () => {
  const [value, setValue] = React.useState(false);

  return (
    <Switch
      value={value}
      onValueChange={setValue}
      activeColor="#6366f1"
      inactiveColor="#e5e7eb"
      thumbColor="#ffffff"
    />
  );
};

​
Disabled State

Disable user interaction with the disabled prop: 
<Switch
  value={value}
  onValueChange={setValue}
  disabled={true}
/>
When disabled, the switch displays a frosted overlay and ignores press events.

​
Accessibility

React Native Switchery includes first-class accessibility support: 
<Switch
  value={value}
  onValueChange={setValue}
  accessibilityLabel="Enable notifications"
  accessibilityHint="Toggles push notifications on or off"
/>
The component automatically:
  • Sets accessibilityRole to “switch”
  • Updates accessibilityState with disabled and checked states
  • Supports VoiceOver on iOS and TalkBack on Android

​
Complete Example

Here’s a comprehensive example combining multiple features: 
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Switch } from 'react-native-switchery';

export const SettingsScreen = () => {
  const [notifications, setNotifications] = React.useState(true);
  const [darkMode, setDarkMode] = React.useState(false);
  const [autoSync, setAutoSync] = React.useState(true);

  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <Text style={styles.label}>Push Notifications</Text>
        <Switch
          value={notifications}
          onValueChange={setNotifications}
          variant="info"
          size="small"
          accessibilityLabel="Push notifications"
        />
      </View>

      <View style={styles.row}>
        <Text style={styles.label}>Dark Mode</Text>
        <Switch
          value={darkMode}
          onValueChange={setDarkMode}
          variant="primary"
          size="small"
          accessibilityLabel="Dark mode"
        />
      </View>

      <View style={styles.row}>
        <Text style={styles.label}>Auto-sync</Text>
        <Switch
          value={autoSync}
          onValueChange={setAutoSync}
          variant="success"
          size="small"
          accessibilityLabel="Auto-sync"
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#e5e7eb',
  },
  label: {
    fontSize: 16,
    color: '#374151',
  },
});

​
Next Steps

API Reference

Explore all available props and types

Customization

Learn advanced customization techniques

Build docs developers (and LLMs) love

Get started for freeTalk to us