This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 54).

Switch

A Jetpack Compose Switch component for toggle controls.

Android

GitHub

npm

Changelog

Expo UI Switch matches the official Jetpack Compose Switch and Checkbox APIs and supports switch, checkbox, and button variants.

Installation

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Toggle switch

Use the variant="switch" prop to display a standard toggle switch.

ToggleSwitchExample.tsx

import { useState } from 'react';
import { Host, Switch } from '@expo/ui/jetpack-compose';

export default function ToggleSwitchExample() {
  const [checked, setChecked] = useState(false);

  return (
    <Host matchContents>
      <Switch
        value={checked}
        onValueChange={setChecked}
        label="Play music"
        variant="switch"
        color="#6200EE"
      />
    </Host>
  );
}

Checkbox

Use the variant="checkbox" prop to display a checkbox control.

CheckboxExample.tsx

import { useState } from 'react';
import { Host, Switch } from '@expo/ui/jetpack-compose';

export default function CheckboxExample() {
  const [checked, setChecked] = useState(false);

  return (
    <Host matchContents>
      <Switch
        value={checked}
        onValueChange={setChecked}
        label="Accept terms"
        variant="checkbox"
        color="#6200EE"
      />
    </Host>
  );
}

Button variant

Use the variant="button" prop to display a toggle button.

ButtonVariantExample.tsx

import { useState } from 'react';
import { Host, Switch } from '@expo/ui/jetpack-compose';

export default function ButtonVariantExample() {
  const [checked, setChecked] = useState(false);

  return (
    <Host matchContents>
      <Switch
        value={checked}
        onValueChange={setChecked}
        label="Notifications"
        variant="button"
        color="#6200EE"
      />
    </Host>
  );
}

API

import { Switch } from '@expo/ui/jetpack-compose';

Components

`Switch`

Android

Type: React.Element<SwitchProps>

SwitchProps

`children`

Android

Optional • Type: React.ReactNode

Children containing ThumbContent slot.

`color`

Android

Optional • Type: ColorValue

Picker color.

`label`

Android

Optional • Type: string

Label for the switch.

On Android, the label has an effect only when the Switch is used inside a ContextMenu.

`modifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the component.

`onValueChange`

Android

Optional • Type: (value: boolean) => void

Callback function that is called when the checked state changes.

`value`

Android

Type: boolean

Indicates whether the switch is checked.

`variant`

Android

Optional • Literal type: string • Default: 'switch'

Type of the switch component. Can be 'checkbox', 'switch', or 'button'.

Acceptable values are: 'checkbox' | 'switch' | 'button'

`SwitchThumbContent`

Android

Type: React.Element<ThumbContentProps>

Custom content to be displayed inside the switch thumb.