FieldGroup

A scrollable container of grouped settings-style rows.

Android

iOS

Web

Included in Expo Go

Recommended version:

~56.0.26

A scrollable container for grouped settings-style rows, mirroring the look of an iOS Settings screen. Compose FieldGroup.Section (for explicit groups), FieldGroup.SectionHeader, and FieldGroup.SectionFooter slots inside.

Note: FieldGroup scrolls and has no height of its own. It stretches to fill its parent, so give it a parent with a definite size, such as a <Host style={{ flex: 1 }}> or a host with an explicit height. It will not appear inside a size-to-fit container like <Host matchContents>, because there is no bounded height for the group to fill.

Installation

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun expo install @expo/ui

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

Usage

Sectioned form

FieldGroupExample.tsx

import { useState } from 'react';
import { Host, FieldGroup, Switch, Text } from '@expo/ui';

export default function FieldGroupExample() {
  const [notifications, setNotifications] = useState(true);
  const [analytics, setAnalytics] = useState(false);

  return (
    <Host style={{ flex: 1 }}>
      <FieldGroup>
        <FieldGroup.Section title="Notifications">
          <Switch label="Push" value={notifications} onValueChange={setNotifications} />
          <Switch label="Email" value={analytics} onValueChange={setAnalytics} />
        </FieldGroup.Section>

        <FieldGroup.Section title="About">
          <Text>Version 1.0.0</Text>
        </FieldGroup.Section>
      </FieldGroup>
    </Host>
  );
}

Custom section header and footer

Use FieldGroup.SectionHeader and FieldGroup.SectionFooter to render fully styled header/footer slots in place of the default title text.

FieldGroupSlotsExample.tsx

import { useState } from 'react';
import { Host, FieldGroup, Switch, Text } from '@expo/ui';

export default function FieldGroupSlotsExample() {
  const [enabled, setEnabled] = useState(false);

  return (
    <Host style={{ flex: 1 }}>
      <FieldGroup>
        <FieldGroup.Section>
          <FieldGroup.SectionHeader>
            <Text textStyle={{ fontSize: 16, fontWeight: '700' }}>Privacy</Text>
          </FieldGroup.SectionHeader>

          <Switch label="Share usage" value={enabled} onValueChange={setEnabled} />

          <FieldGroup.SectionFooter>
            <Text textStyle={{ fontSize: 12, color: '#8E8E93' }}>
              Helps us improve the app. You can disable this at any time.
            </Text>
          </FieldGroup.SectionFooter>
        </FieldGroup.Section>
      </FieldGroup>
    </Host>
  );
}

API

import { FieldGroup } from '@expo/ui';

No API data file found, sorry!