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

Toggle

A SwiftUI Toggle component for displaying native toggles.

iOS

tvOS

GitHub

npm

Changelog

Expo UI Toggle matches the official SwiftUI Toggle API and supports styling via the toggleStyle modifier.

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

Basic toggle

BasicToggleExample.tsx

import { useState } from 'react';
import { Host, Toggle } from '@expo/ui/swift-ui';

export default function BasicToggleExample() {
  const [isOn, setIsOn] = useState(false);

  return (
    <Host matchContents>
      <Toggle isOn={isOn} onIsOnChange={setIsOn} label="Enable Feature" />
    </Host>
  );
}

Toggle with system image

ToggleWithImageExample.tsx

import { useState } from 'react';
import { Host, Toggle } from '@expo/ui/swift-ui';

export default function ToggleWithImageExample() {
  const [airplaneMode, setAirplaneMode] = useState(false);

  return (
    <Host matchContents>
      <Toggle
        isOn={airplaneMode}
        onIsOnChange={setAirplaneMode}
        label="Airplane Mode"
        systemImage="airplane"
      />
    </Host>
  );
}

Toggle styles

Use the toggleStyle modifier to change the toggle's appearance. Available styles are: automatic, switch, and button.

Note: The button style is not available on tvOS.

ToggleStylesExample.tsx

import { useState } from 'react';
import { Host, Toggle, VStack } from '@expo/ui/swift-ui';
import { toggleStyle } from '@expo/ui/swift-ui/modifiers';

export default function ToggleStylesExample() {
  const [isOn, setIsOn] = useState(false);

  return (
    <Host matchContents>
      <VStack spacing={8}>
        <Toggle
          isOn={isOn}
          onIsOnChange={setIsOn}
          label="Switch Style"
          modifiers={[toggleStyle('switch')]}
        />
        <Toggle
          isOn={isOn}
          onIsOnChange={setIsOn}
          label="Button Style"
          modifiers={[toggleStyle('button')]}
        />
      </VStack>
    </Host>
  );
}

Tinted toggle

Use the tint modifier to change the toggle's color.

TintedToggleExample.tsx

import { useState } from 'react';
import { Host, Toggle } from '@expo/ui/swift-ui';
import { tint } from '@expo/ui/swift-ui/modifiers';

export default function TintedToggleExample() {
  const [isOn, setIsOn] = useState(true);

  return (
    <Host matchContents>
      <Toggle
        isOn={isOn}
        onIsOnChange={setIsOn}
        label="Custom Color"
        modifiers={[tint('#FF9500')]}
      />
    </Host>
  );
}

Custom label content

You can pass custom components as children for more complex toggle labels. Use multiple Text views where the first represents the title and the second represents the subtitle.

CustomLabelExample.tsx

import { useState } from 'react';
import { Host, Toggle, Text } from '@expo/ui/swift-ui';

export default function CustomLabelExample() {
  const [vibrateOnRing, setVibrateOnRing] = useState(false);

  return (
    <Host matchContents>
      <Toggle isOn={vibrateOnRing} onIsOnChange={setVibrateOnRing}>
        <Text>Vibrate on Ring</Text>
        <Text>Enable vibration when the phone rings</Text>
      </Toggle>
    </Host>
  );
}

Hidden label

Use the labelsHidden modifier to hide the label while keeping it for accessibility.

HiddenLabelExample.tsx

import { useState } from 'react';
import { Host, Toggle } from '@expo/ui/swift-ui';
import { labelsHidden } from '@expo/ui/swift-ui/modifiers';

export default function HiddenLabelExample() {
  const [isOn, setIsOn] = useState(false);

  return (
    <Host matchContents>
      <Toggle
        isOn={isOn}
        onIsOnChange={setIsOn}
        label="Hidden Label"
        modifiers={[labelsHidden()]}
      />
    </Host>
  );
}

API

Component

`Toggle`

iOS

tvOS

Type: React.Element<ToggleProps>

A control that toggles between on and off states.

ToggleProps

`children`

iOS

tvOS

Optional • Type: React.ReactNode

Custom content for the toggle label. Use multiple Text views where the first represents the title and the second represents the subtitle.

`isOn`

iOS

tvOS

Optional • Type: boolean

A Boolean value that determines the on/off state of the toggle.

`label`

iOS

tvOS

Optional • Type: string

A string that describes the purpose of the toggle.

`onIsOnChange`

iOS

tvOS

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

A callback that is called when the toggle's state changes.

isOn: boolean

The new state of the toggle.

`systemImage`

iOS

tvOS

Optional • Type: SFSymbol

The name of the SF Symbol to display alongside the label.

Inherited Props

CommonViewModifierProps