Switch

A highly customizable and universal switch component for React Native and Web, part of the FlexNative design system.

Features

• 🌐 Universal: Works seamlessly on Android, iOS, and Web.
• 🎨 Themed: Integrated with @flexnative/theme-context for consistent styling.
• ⚡ Smooth Animations: Powered by React Native's Animated API for high-performance transitions.
• 🔧 Customizable: Control colors, dimensions, and animation duration with ease.
• 📝 TypeScript: Fully typed for a great developer experience.

Installation

Install the package via npm or yarn:

npm install @flexnative/switch
# or
yarn add @flexnative/switch

Peer Dependencies

This component requires react-native-svg and @flexnative/theme-context. Ensure they are installed in your project:

npm install react-native-svg @flexnative/theme-context

Props

Prop	Type	Default	Description
value	boolean	false	The value of the switch.
onValueChange	(value: boolean) => void	undefined	Callback called when the value changes.
activeTrackColor	ColorValue	theme.colors.primary	Background color when the switch is ON.
inactiveTrackColor`	ColorValue	theme.colors.default	Background color when the switch is OFF.
thumbColor	ColorValue	theme.colors.card	Color of the sliding thumb.
width	number	50	Total width of the switch component.
height	number	28	Total height of the switch component.
duration	number	200	Duration of the toggle animation in milliseconds.
disabled	boolean	undefined	If true, prevents user interaction.

Theming

The component automatically consumes colors from the @flexnative/theme-context. If you don't provide explicit colors via props, it will fallback to your theme's primary, default, and card colors.

Usage

import React, { useState } from 'react';
import Switch from '@flexnative/switch';

const Example = () => {
  const [isEnabled, setIsEnabled] = useState(false);

  return (
    <Switch
      value={isEnabled}
      onValueChange={(value) => setIsEnabled(value)}
      activeTrackColor="#2ecc71"
    />
  );
};

Interactive Playground

You can experiment with the Switch component in real-time below.

Live Editor

function SwitchPlayground() {
  const [isNotificationsEnabled, setIsNotificationsEnabled] = useState(false);

  return (
    <Switch
        value={isNotificationsEnabled}
        onValueChange={setIsNotificationsEnabled}
        activeTrackColor="#007AFF" // iOS blue
        width={60}
        height={32}
      />
  );
}

Result

Loading...