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

Switch

GitHub

Changelog

npm

A SwiftUI Switch component for toggle controls.

iOS

tvOS

A switch component that provides toggle functionality with different visual styles.

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.

Toggle switch

Note: Also known as Toggle.

import { Host, Switch } from '@expo/ui/swift-ui';

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

See Official SwiftUI documentation for more information.

Checkbox

import { Host, Switch } from '@expo/ui/swift-ui';

<Host matchContents>
  <Switch
    checked={checked}
    onValueChange={checked => {
      setChecked(checked);
    }}
    label="Play music"
    variant="checkbox"
  />
</Host>

See Official SwiftUI documentation for more information.

API

Component

`Switch`

iOS

tvOS

Type: React.Element<SwitchProps>

Displays a native switch component.

SwitchProps

`color`

iOS

tvOS

Optional • Type: ColorValue

Picker color. On iOS, it only applies to the menu variant.

`label`

iOS

tvOS

Optional • Type: string

Label for the switch.

`onValueChange`

iOS

tvOS

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

Callback function that is called when the checked state changes.

`value`

iOS

tvOS

Type: boolean

Indicates whether the switch is checked.

`variant`

iOS

tvOS

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

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

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

Inherited Props

CommonViewModifierProps