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

Switch

GitHub

Changelog

npm

A Jetpack Compose Switch component for toggle controls.

Android

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 { Switch } from '@expo/ui/jetpack-compose';

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

See Official Jetpack Compose documentation for more information.

Checkbox

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

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

See Official Jetpack Compose documentation for more information.

API

Component

`Switch`

Android

Type: React.Element<SwitchProps>

SwitchProps

`color`

Android

Optional • Type: string

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

`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.

`style`

Android

Optional • Type: StyleProp<ViewStyle>

Optional style for the switch component.

`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'. The 'button' style is iOS only.

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