Skip to main content
React Native Switchery comes with 5 pre-configured color variants that follow common UI design patterns. Each variant has specific colors optimized for different use cases.

​
Available Variants

​
Primary

The default blue variant, ideal for general-purpose switches. 
import { Switch } from 'react-native-switchery';

export default function App() {
  const [enabled, setEnabled] = useState(false);
  
  return (
    <Switch
      value={enabled}
      onValueChange={setEnabled}
      variant="primary"
    />
  );
}
Colors:
  • When ON: #2196F3 (Blue track)
  • When OFF: #FFFFFF (White pill)
  • Thumb: #FFFFFF (White)

​
Success

Green variant, perfect for confirmation or approval actions. 
<Switch
  value={enabled}
  onValueChange={setEnabled}
  variant="success"
/>
Colors:
  • When ON: #43A047 (Green track)
  • When OFF: #FFFFFF (White pill)
  • Thumb: #FFFFFF (White)

​
Danger

Red variant, suitable for destructive or warning actions. 
<Switch
  value={enabled}
  onValueChange={setEnabled}
  variant="danger"
/>
Colors:
  • When ON: #E53935 (Red track)
  • When OFF: #FFFFFF (White pill)
  • Thumb: #FFFFFF (White)

​
Warning

Orange variant, ideal for caution or attention-required actions. 
<Switch
  value={enabled}
  onValueChange={setEnabled}
  variant="warning"
/>
Colors:
  • When ON: #FB8C00 (Orange track)
  • When OFF: #FFFFFF (White pill)
  • Thumb: #FFFFFF (White)

​
Info

Light blue variant, useful for informational toggles. 
<Switch
  value={enabled}
  onValueChange={setEnabled}
  variant="info"
/>
Colors:
  • When ON: #1E88E5 (Light Blue track)
  • When OFF: #FFFFFF (White pill)
  • Thumb: #FFFFFF (White)

​
Combining Variants with Sizes

Variants work seamlessly with all size options: 
<Switch variant="success" size="large" value={enabled} onValueChange={setEnabled} />
<Switch variant="danger" size="small" value={enabled} onValueChange={setEnabled} />
<Switch variant="warning" size="mini" value={enabled} onValueChange={setEnabled} />
Variants provide a quick way to style your switches. For complete color control, see the Customization guide.

​
Overriding Variant Colors

You can override individual colors while still using a variant: 
<Switch
  variant="primary"
  activeColor="#000000"  // Override active color
  value={enabled}
  onValueChange={setEnabled}
/>
When you specify custom color props, they take precedence over the variant’s default colors.

Build docs developers (and LLMs) love

Get started for freeTalk to us