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

A SwiftUI Form component for collecting user input in a structured layout.

A container for grouping controls used for data entry, such as in settings or inspection panes.

Installation

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

Usage

import { useState } from 'react';
import { Form, Host, Section, TextField, Switch, Button } from '@expo/ui/swift-ui';

function FormExample() {
  const [notifications, setNotifications] = useState(false);
  const [darkMode, setDarkMode] = useState(false);

  return (
    <Host style={{ flex: 1 }}>
      <Form>
        <Section title="Profile">
          <TextField placeholder="Name" onChangeText={() => {}} />
          <TextField placeholder="Enter your email" />
        </Section>

        <Section title="Preferences">
          <Switch
            label="Enable notifications"
            value={notifications}
            onValueChange={setNotifications}
          />
          <Switch label="Dark mode" value={darkMode} onValueChange={setDarkMode} />
        </Section>

        <Section>
          <Button>Save Changes</Button>
        </Section>
      </Form>
    </Host>
  );
}

See Official SwiftUI documentation for more information.

API

Component