Switch

Switch is a toggle control for turning settings on or off. It provides clear visual feedback with smooth animation and supports multiple sizes.

Preview

Basic Usage

Notifications

Dark Mode

Auto-save

const [notifications, setNotifications] = useState(true);
const [darkMode, setDarkMode] = useState(false);
const [autoSave, setAutoSave] = useState(true);

<Switch
  value={notifications}
  onValueChange={setNotifications}
  accessibilityLabel="Notifications"
/>
<Switch
  value={darkMode}
  onValueChange={setDarkMode}
  accessibilityLabel="Dark mode"
/>
<Switch
  value={autoSave}
  onValueChange={setAutoSave}
  accessibilityLabel="Auto-save"
/>

Sizes

Size	Dimensions	Thumb	Usage
`sm`	36×20px	16px	Compact settings lists
`md`	48×28px	24px	Default
`lg`	56×32px	28px	Prominent controls

<Switch size="sm" value={value} onValueChange={setValue} accessibilityLabel="Small switch" />
<Switch size="md" value={value} onValueChange={setValue} accessibilityLabel="Medium switch" />
<Switch size="lg" value={value} onValueChange={setValue} accessibilityLabel="Large switch" />

States

Disabled

<Switch
  value={false}
  onValueChange={() => {}}
  disabled
  accessibilityLabel="Disabled off"
/>
<Switch
  value={true}
  onValueChange={() => {}}
  disabled
  accessibilityLabel="Disabled on"
/>

Custom Colors

Use activeColor to customize the track color when on.

<Switch
  value={true}
  onValueChange={setValue}
  activeColor="#d4af37"
  accessibilityLabel="Gold switch"
/>
<Switch
  value={true}
  onValueChange={setValue}
  activeColor="#10b981"
  accessibilityLabel="Success switch"
/>
<Switch
  value={true}
  onValueChange={setValue}
  activeColor="#6366f1"
  accessibilityLabel="Info switch"
/>

API Reference

Props

Prop	Type	Default	Description
`value`	`boolean`	Required	Current switch state
`onValueChange`	`(value: boolean) => void`	Required	Called when toggled
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Switch size
`disabled`	`boolean`	`false`	Disable interaction
`activeColor`	`string`	Gold	Custom track color when on
`style`	`ViewStyle`	-	Custom styles
`accessibilityLabel`	`string`	Required	A11y label

Complete Example

import { Switch, Card, Text } from '@synchronicity/react-native';
import { View, StyleSheet } from 'react-native';
import { useState } from 'react';

function SettingsScreen() {
  const [settings, setSettings] = useState({
    notifications: true,
    darkMode: false,
    haptics: true,
    analytics: false,
  });

  const updateSetting = (key: string, value: boolean) => {
    setSettings(prev => ({ ...prev, [key]: value }));
  };

  return (
    <Card>
      <SettingRow
        label="Push Notifications"
        value={settings.notifications}
        onChange={(v) => updateSetting('notifications', v)}
      />
      <SettingRow
        label="Dark Mode"
        value={settings.darkMode}
        onChange={(v) => updateSetting('darkMode', v)}
      />
      <SettingRow
        label="Haptic Feedback"
        value={settings.haptics}
        onChange={(v) => updateSetting('haptics', v)}
      />
      <SettingRow
        label="Analytics"
        value={settings.analytics}
        onChange={(v) => updateSetting('analytics', v)}
      />
    </Card>
  );
}

function SettingRow({ label, value, onChange }) {
  return (
    <View style={styles.row}>
      <Text>{label}</Text>
      <Switch
        value={value}
        onValueChange={onChange}
        accessibilityLabel={label}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 12,
  },
});