Switch

Switch Primitive

Demo

A control enabling the user to switch between a checked and unchecked state.

Installation

CLI

npx @react-native-reusables/cli@latest add switch

Manual

Dependencies

Before copy/pasting, add the switch primitive to your project.

Copy/paste the following code to ~/components/ui/switch.tsx:

Usage

import * as React from 'react';
import { View } from 'react-native';
import { Label } from '~/components/ui/label';
import { Switch } from '~/components/ui/switch';

function Example() {
  const [checked, setChecked] = React.useState(false);

  return (
    <>
      <View className='flex-1 justify-center items-center p-6 gap-12'>
        <View className='flex-row items-center gap-2'>
          <Switch checked={checked} onCheckedChange={setChecked} nativeID='airplane-mode' />
          <Label
            nativeID='airplane-mode'
            onPress={() => {
              setChecked((prev) => !prev);
            }}
          >
            Airplane Mode
          </Label>
        </View>
      </View>
    </>
  );
}

Props

Switch

Extends Pressable props

Prop	Type	Note
checked	boolean
onCheckedChange	(checked: boolean) => void
disabled	boolean	(optional)
onKeyDown	(ev: React.KeyboardEvent) => void	Web Only (optional)