Skip to main content
The Switch component is a customizable, animated toggle switch with iOS-style animations and interactions.

​
Import

import { Switch } from 'react-native-switchery';

​
Basic Usage

import { useState } from 'react';
import { Switch } from 'react-native-switchery';

export default function App() {
  const [isEnabled, setIsEnabled] = useState(false);

  return (
    <Switch
      value={isEnabled}
      onValueChange={setIsEnabled}
    />
  );
}

​
Props

​
value
boolean
required
The current state of the switch (on/off).
​
onValueChange
(nextValue: boolean) => void
default:"() => {}"
Callback function called when the switch is toggled. Receives the new value as an argument.
<Switch
  value={enabled}
  onValueChange={(newValue) => {
    setEnabled(newValue);
    console.log('Switch toggled:', newValue);
  }}
/>
​
activeColor
string
Fill color of the animated pill when expanded (visible when switch is OFF). Overrides variant color.
<Switch
  value={false}
  activeColor="#34C759"
/>
​
inactiveColor
string
Track background color when pill is collapsed (visible when switch is ON). Overrides variant color.
<Switch
  value={true}
  inactiveColor="#E5E5EA"
/>
​
thumbColor
string
The color of the thumb (circular part that slides). Overrides variant color.
<Switch
  value={true}
  thumbColor="#FFFFFF"
/>
​
disabled
boolean
default:"false"
Whether the switch is disabled. When disabled, the switch cannot be toggled and shows a disabled overlay.
<Switch
  value={true}
  disabled={true}
/>
​
size
'mini' | 'small' | 'default' | 'large'
default:"'default'"
The size preset for the switch. Each size has predefined dimensions:
  • mini: 38x20px with 16px thumb
  • small: 48x26px with 22px thumb
  • default: 56x30px with 26px thumb
  • large: 68x36px with 32px thumb
<Switch value={true} size="large" />
​
variant
SwitchVariant
Predefined color variant for the switch. Available variants: 'primary', 'danger', 'warning', 'success', 'info'.
<Switch value={true} variant="success" />
Variant colors:
  • primary: Blue (#2196F3)
  • danger: Red (#E53935)
  • warning: Orange (#FB8C00)
  • success: Green (#43A047)
  • info: Light Blue (#1E88E5)
​
trackBorderColor
string
Custom border color for the track (outer container).
<Switch
  value={true}
  trackBorderColor="#000000"
  trackBorderWidth={2}
/>
​
trackBorderWidth
number
Border width for the track in pixels.
​
thumbBorderColor
string
Custom border color for the thumb (sliding circle).
<Switch
  value={true}
  thumbBorderColor="#CCCCCC"
  thumbBorderWidth={1}
/>
​
thumbBorderWidth
number
Border width for the thumb in pixels.
​
testID
string
default:"'switch'"
Test identifier for automated testing.
<Switch
  value={true}
  testID="my-switch"
/>
​
accessibilityLabel
string
Accessibility label for screen readers.
<Switch
  value={true}
  accessibilityLabel="Enable notifications"
/>
​
accessibilityHint
string
Accessibility hint providing additional context for screen readers.
<Switch
  value={true}
  accessibilityLabel="Dark mode"
  accessibilityHint="Toggles dark mode for the app"
/>

​
Examples

​
Using Variants

<Switch value={true} variant="success" />
<Switch value={true} variant="danger" />
<Switch value={true} variant="warning" />

​
Custom Colors

<Switch
  value={true}
  activeColor="#FF6B6B"
  inactiveColor="#C0C0C0"
  thumbColor="#FFFFFF"
/>

​
Different Sizes

<Switch value={true} size="mini" />
<Switch value={true} size="small" />
<Switch value={true} size="default" />
<Switch value={true} size="large" />

​
With Borders

<Switch
  value={true}
  trackBorderColor="#000000"
  trackBorderWidth={2}
  thumbBorderColor="#666666"
  thumbBorderWidth={1}
/>

​
Disabled State

<Switch
  value={true}
  disabled={true}
  variant="primary"
/>

​
Accessibility

The Switch component includes built-in accessibility support:
  • Automatically sets accessibilityRole="switch"
  • Provides accessibilityState with disabled and checked properties
  • Supports custom accessibilityLabel and accessibilityHint props
  • Keyboard and screen reader friendly

Build docs developers (and LLMs) love

Get started for freeTalk to us