Switch

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/switch.json

Then run npx expo install --fix so react-native-reanimated match your Expo SDK. Files land in components/goodui-native/switch.

Usage

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

export function PushSetting() {
  const [push, setPush] = useState(true);
  return (
    <Switch
      label="Push notifications"
      description="Bookings, reminders and messages"
      value={push}
      onValueChange={async (next) => {
        await api.saveSettings({ push: next });
        setPush(next);
      }}
    />
  );
}

When to use

Examples

<Switch accessibilityLabel="Round-up savings" defaultValue tone="success" />

<Switch size="sm" accessibilityLabel="Show weekends" value={weekends} onValueChange={setWeekends} />

API reference

Motion and haptics

• •Press: the thumb widens toward the far side and squashes to 92 % height on the snappy spring, from touch down.
• •Change: the thumb travels on the snappy spring and the track color interpolates with it.
• •Pending: a spinner turns inside the thumb. Rejected: the switch flips back and shakes.
• •Reduced motion: no squash, stretch or shake; the thumb moves with a short timing.

• •Haptic: toggle-on or toggle-off on change
• •Haptic: error when a returned promise rejects

• •Thumb geometry and colors animate on the UI thread; a toggle is one React update.

Accessibility

• •accessibilityRole is switch with checked, disabled and busy (while a returned promise is pending) in accessibilityState.
• •In the row layout the whole row is the switch, labelled 'label, description'. Inline, pass accessibilityLabel.
• •A rejected change is announced ('Couldn't change the setting').
• •The inline switch has hitSlop up to a 44 pt target; the row is at least 44 pt tall.

Notes for AI

Related