Switch

Installation

Switch ships with the library — install it once, then import:

import { Switch } from "@delacour/react-native-ui/switch";

Or copy the source into your project, to own and edit it:

bunx delacour@latest add switch

Usage

app/index.tsx

import { Switch } from "@/components/ui/switch";
import { useState } from "react";
import { View } from "react-native";

export default function Example() {
  const [notify, setNotify] = useState(true);

  return (
    <View className="flex-1 items-center justify-center p-4">
      <Switch isSelected={notify} onSelectedChange={setNotify} />
    </View>
  );
}

Tap or drag

A tap toggles; a drag carries the thumb and settles on release by position, or by the flick's velocity if you let go fast.

Tap or drag

Colours

color says what being on means — an off switch is the same chrome at all six.

Colours

<Switch color="default" />
<Switch color="primary" />
<Switch color="success" />
<Switch color="warning" />
<Switch color="destructive" />
<Switch color="info" />

Sizes

<Switch size="sm" />
<Switch size="md" />
<Switch size="lg" />

Start and end content

Both layers are written once with no conditionals — StartContent is revealed as the switch turns on and EndContent as it turns off, each fading with the thumb's travel.

Start and end content

import { Icon } from "@delacour/react-native-ui/icon";
import { IconCheckmark1Small, IconX } from "@delacour/react-native-ui/icons/central";

<Switch color="primary" defaultSelected>
  <Switch.StartContent>
    <Icon icon={IconCheckmark1Small} />
  </Switch.StartContent>
  <Switch.EndContent>
    <Icon icon={IconX} />
  </Switch.EndContent>
</Switch>

The glyphs take their size step and colour from the switch.

States

<Switch isDisabled />
<Switch isInvalid />

In a settings list

The row's own press toggles the switch, in a ListGroup.Item or in an enclosing Field — so a form switch can be a bare <Switch /> with Field.Label naming it.

<ListGroup.Item onPress={toggle}>
  <ListGroup.ItemPrefix>
    <Icon icon={IconBell} />
  </ListGroup.ItemPrefix>
  <ListGroup.ItemContent>
    <ListGroup.ItemTitle>Notifications</ListGroup.ItemTitle>
  </ListGroup.ItemContent>
  <ListGroup.ItemSuffix>
    <Switch accessibilityLabel="Notifications" color="success" isSelected={on} onSelectedChange={setOn} size="sm" />
  </ListGroup.ItemSuffix>
</ListGroup.Item>

API Reference

Anatomy

Part	What it is
`Switch`	The track. Owns the gesture, the spring and the state
`Switch.Thumb`	The knob. Composed in automatically; write it out to restyle it or fill it
`Switch.StartContent`	Behind the thumb at the leading edge — revealed as the switch turns on
`Switch.EndContent`	Behind the thumb at the trailing edge — revealed as the switch turns off

ViewProps, minus children and style — the root writes its own animated style.

Prop

Type

There is no Switch.Label and no Switch.Group — use Field. And RTL is not handled: the thumb travels on translateX, which does not flip.

Switch

On this page