Switch

Overview

Switch is a React Native component designed for creating a switch or toggle control. It’s built on top of React Native’s Switch. It can be customized with Tailwind classes through the className prop.

Preview

Preview

Light mode

Dark mode

Code

import { Switch } from './components/Switch';

function SwitchDemo() {
  const [isEnabled, setIsEnabled] = useState(false);

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

Installation

CLI

npx nativecn-ui add Switch

Manual

1. First Step

   Include Switch.tsx in your project.

2. Second Step

   Update the import paths to match your project setup.

Properties

• className?: string (optional) - The classes for the switch.
• See React Native’s Switch props

Usage

Basic Usage

Here’s how you can use the Switch component:

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

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