react-native-switchery

react-native-switchery

An iOS-inspired, highly customizable switch component for React Native that runs seamlessly on iOS and Android with smooth thumb glides, elastic pill fill, and first-class accessibility support.

Demo

Features

• 🎨 Variants & palettes – Built-in primary, info, success, warning, danger presets or override the colors directly.
• ✨ iOS-style animation – Thumb glides first; pill fill collapses with a delayed scale for a native feel.
• 🛠️ Fine-grained styling – Control track/thumb borders, sizes, and shadows.
• 🧠 Accessibility ready – Switch role, disabled/checked state, custom labels and hints.

Quick Start

Installation

npm install react-native-switchery
# or
yarn add react-native-switchery

Usage

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

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

  return (
    <Switch
      value={value}
      onValueChange={setValue}
      variant="info"
      size="small"
    />
  );
};

Props

Prop	Type	Default	Description
value	boolean	–	Controlled value of the switch.
onValueChange	(value: boolean) => void	() => {}	Callback fired after a press toggles the value.
variant	'primary' | 'info' | 'success' | 'warning' | 'danger'	primary	Built-in palette presets (overridden by explicit colors).
activeColor	string	variant color	Fill color when expanded.
inactiveColor	string	variant color	Track color when collapsed.
thumbColor	string	variant color	Thumb fill color.
size	'mini' | 'small' | 'default' | 'large'	default	Track/thumb preset dimensions.
trackBorderColor	string	contextual	Outline color for the pill.
trackBorderWidth	number	1	Outline width for the pill.
thumbBorderColor	string	rgba(0,0,0,0.1)	Thumb outline color.
thumbBorderWidth	number	1	Thumb outline width.
disabled	boolean	false	Disables presses and shows a frosted overlay.
testID	string	switch	Identifier for testing (overlay uses testID-disabled).
accessibilityLabel	string	–	VoiceOver/TalkBack label.
accessibilityHint	string	–	VoiceOver/TalkBack hint.

License

MIT © Ehtisham Ali