expo-interface 0.1.1 → 0.3.0

package/src/fab/index.android.tsx

@@ -0,0 +1,72 @@
+import type {ModifierConfig} from '@expo/ui/jetpack-compose/modifiers';
+import type {FabProps, FabSize} from './types';
+
+import {useState} from 'react';
+import {
+  DropdownMenu,
+  ExtendedFloatingActionButton,
+  FloatingActionButton,
+  Icon,
+  LargeFloatingActionButton,
+  SmallFloatingActionButton,
+  Text,
+} from '@expo/ui/jetpack-compose';
+import {alpha, testID as testIDModifier} from '@expo/ui/jetpack-compose/modifiers';
+import {NativeHost} from '../host';
+import {MenuItems} from '../menu/index.android';
+import {useColor} from '../theme';
+import {FAB_ICON} from './shared';
+
+const VARIANT: Record<FabSize, typeof FloatingActionButton> = {
+  small: SmallFloatingActionButton,
+  regular: FloatingActionButton,
+  large: LargeFloatingActionButton,
+  extended: ExtendedFloatingActionButton,
+};
+
+/**
+ * Android renders the Material 3 `FloatingActionButton` family, filled with
+ * the accent (the container color) and the icon in `onTint`, inside its own
+ * accent-seeded host so it can float over a React Native screen. With
+ * `items` the button is the trigger of the same Compose `DropdownMenu` the
+ * kit's `Menu` anchors, so the menu is shared and only the trigger differs.
+ */
+export function Fab({label, icon, onPress, items, size = 'regular', disabled, testID}: FabProps) {
+  const tint = useColor('tint');
+  const onTint = useColor('onTint');
+  const [expanded, setExpanded] = useState(false);
+  const Component = VARIANT[size];
+  const modifiers: ModifierConfig[] = [];
+  if (disabled) modifiers.push(alpha(0.4));
+  if (testID) modifiers.push(testIDModifier(testID));
+  const press = items ? () => setExpanded(true) : onPress;
+
+  const button = (
+    <Component containerColor={tint} onClick={disabled ? undefined : press} modifiers={modifiers}>
+      <FloatingActionButton.Icon>
+        {icon.drawable ? (
+          <Icon source={icon.drawable} size={FAB_ICON[size]} tint={onTint} contentDescription={label}/>
+        ) : (
+          // No drawable registered for this icon (see `icon()`): the label stands in.
+          <Text color={onTint}>{label.slice(0, 1)}</Text>
+        )}
+      </FloatingActionButton.Icon>
+      {size === 'extended' ? (
+        <ExtendedFloatingActionButton.Text>
+          <Text color={onTint} style={{fontWeight: '600'}}>{label}</Text>
+        </ExtendedFloatingActionButton.Text>
+      ) : null}
+    </Component>
+  );
+
+  return (
+    <NativeHost fit>
+      {items ? (
+        <DropdownMenu expanded={expanded} onDismissRequest={() => setExpanded(false)}>
+          <DropdownMenu.Trigger>{button}</DropdownMenu.Trigger>
+          <MenuItems items={items} onClose={() => setExpanded(false)}/>
+        </DropdownMenu>
+      ) : button}
+    </NativeHost>
+  );
+}

package/src/fab/index.ios.tsx

@@ -0,0 +1,68 @@
+import type {ViewModifier} from '@expo/ui/swift-ui/modifiers';
+import type {FabProps} from './types';
+
+import {Button, HStack, Image, Menu as SwiftUIMenu, Text} from '@expo/ui/swift-ui';
+import {
+  accessibilityLabel,
+  background,
+  buttonStyle,
+  disabled as disabledMod,
+  font,
+  foregroundStyle,
+  frame,
+  opacity,
+  padding,
+  shadow,
+  shapes,
+} from '@expo/ui/swift-ui/modifiers';
+import {iosSymbol} from '../button/shared';
+import {NativeHost} from '../host';
+import {MenuItems} from '../menu/index.ios';
+import {useColor} from '../theme';
+import {FAB_EXTENDED_PADDING, FAB_GAP, FAB_ICON, FAB_SIZE} from './shared';
+
+/**
+ * iOS has no floating action button, so it is drawn in SwiftUI: a circle
+ * (56 pt, 40 small, 96 large) or a capsule when extended, filled with the
+ * tint, the icon in `onTint`, a soft shadow, as the label of a plain
+ * `Button`; with `items`, as the label of a SwiftUI `Menu`, whose entries are
+ * the ones the kit's `Menu` renders.
+ */
+export function Fab({label, icon, onPress, items, size = 'regular', disabled, testID}: FabProps) {
+  const tint = useColor('tint');
+  const onTint = useColor('onTint');
+  const circle = size !== 'extended';
+  const dimension = FAB_SIZE[size];
+  const faceModifiers: ViewModifier[] = [
+    circle ? frame({width: dimension, height: dimension}) : frame({height: dimension}),
+  ];
+  if (!circle) faceModifiers.push(padding({horizontal: FAB_EXTENDED_PADDING}));
+  faceModifiers.push(
+    background(tint, circle ? shapes.circle() : shapes.capsule()),
+    shadow({radius: 4, y: 2, color: 'rgba(0, 0, 0, 0.25)'}),
+  );
+  const face = (
+    <HStack spacing={FAB_GAP} modifiers={faceModifiers}>
+      <Image systemName={iosSymbol(icon)} color={onTint} size={FAB_ICON[size]}/>
+      {circle ? null : (
+        <Text modifiers={[foregroundStyle({type: 'color', color: onTint}), font({weight: 'semibold'})]}>{label}</Text>
+      )}
+    </HStack>
+  );
+  const modifiers: ViewModifier[] = [buttonStyle('plain'), accessibilityLabel(label)];
+  if (disabled) modifiers.push(disabledMod(true), opacity(0.4));
+
+  return (
+    <NativeHost fit>
+      {items ? (
+        <SwiftUIMenu label={face} modifiers={modifiers} testID={testID}>
+          <MenuItems items={items}/>
+        </SwiftUIMenu>
+      ) : (
+        <Button onPress={onPress} modifiers={modifiers} testID={testID}>
+          {face}
+        </Button>
+      )}
+    </NativeHost>
+  );
+}

package/src/fab/index.tsx

@@ -0,0 +1,37 @@
+import './fab.css';
+import type {CSSProperties} from 'react';
+import type {FabProps} from './types';
+import {useId, useRef} from 'react';
+import {SymbolView} from 'expo-symbols';
+import {MenuList, menuIdent} from '../menu/list';
+import {FAB_ICON} from './shared';
+
+/**
+ * On web the button is a `<button>` with the Material geometry (a circle or
+ * an extended capsule, filled with the tint) styled via `fab.css`. With
+ * `items` it carries a `popovertarget` to the kit's popup menu, the same
+ * `MenuList` the `Menu` opens, anchored above the button by CSS anchor
+ * positioning. Where it floats is the screen's job (`Screen`'s `fab` slot).
+ */
+export function Fab({label, icon, onPress, items, size = 'regular', disabled, testID}: FabProps) {
+  const ident = menuIdent(useId());
+  const anchor = `--${ident}`;
+  const wrapper = useRef<HTMLSpanElement>(null);
+  const extended = size === 'extended';
+  return (
+    <span ref={wrapper} className="ui-fab__anchor" style={{anchorName: anchor} as CSSProperties}>
+      <button
+        type="button"
+        className={`ui-fab ui-fab--${size}`}
+        aria-label={extended ? undefined : label}
+        disabled={disabled}
+        onClick={items ? undefined : onPress}
+        popoverTarget={items ? ident : undefined}
+        data-testid={testID}>
+        <SymbolView name={icon.symbol} size={FAB_ICON[size]} tintColor="currentColor"/>
+        {extended ? <span className="ui-fab__label">{label}</span> : null}
+      </button>
+      {items ? <MenuList id={ident} items={items} anchor={anchor} anchorRef={wrapper}/> : null}
+    </span>
+  );
+}

package/src/fab/shared.ts

@@ -0,0 +1,23 @@
+import type {FabSize} from './types';
+
+/** Diameter of the circular sizes and height of the extended one, in points (Material's). */
+export const FAB_SIZE: Record<FabSize, number> = {
+  small: 40,
+  regular: 56,
+  large: 96,
+  extended: 56,
+};
+
+/** Icon size per `FabSize`. */
+export const FAB_ICON: Record<FabSize, number> = {
+  small: 24,
+  regular: 24,
+  large: 36,
+  extended: 24,
+};
+
+/** Horizontal padding of the extended capsule. */
+export const FAB_EXTENDED_PADDING = 20;
+
+/** Gap between the icon and the label of the extended one. */
+export const FAB_GAP = 12;

package/src/fab/types.ts

@@ -0,0 +1,39 @@
+import type {IconToken} from '../icons';
+import type {MenuItem} from '../menu/types';
+
+/**
+ * Size of a `Fab`. `regular`, `small` and `large` are circles (56, 40 and
+ * 96 points); `extended` is a capsule that shows the label beside the icon.
+ */
+export type FabSize = 'small' | 'regular' | 'large' | 'extended';
+
+/**
+ * Floating action button: the screen's primary action, floating over its
+ * content at the bottom trailing corner (`Screen`'s `fab` slot places it).
+ *
+ * Android renders the Material 3 `FloatingActionButton` family; iOS, which
+ * has no such control, draws the same geometry in SwiftUI (a circle or
+ * capsule filled with the tint, the icon in `onTint`, a soft shadow); web
+ * renders a DOM button with that geometry. With `items` the button opens a
+ * menu instead of pressing: the same menu `Menu` renders, only the trigger
+ * differs.
+ */
+export interface FabProps {
+  /** Accessibility name of the button, and the text of an `extended` one. */
+  label: string;
+  /** The icon. */
+  icon: IconToken;
+  /** Called when the button is pressed (ignored when `items` are given). */
+  onPress?: () => void;
+  /** With items the button opens a menu instead of pressing. */
+  items?: MenuItem[];
+  /**
+   * The size.
+   * @default 'regular'
+   */
+  size?: FabSize;
+  /** Disables interaction and dims the button. */
+  disabled?: boolean;
+  /** Identifier used to locate the button in end-to-end tests. */
+  testID?: string;
+}

package/src/field-group/field-group.css

@@ -7,12 +7,28 @@
 }
 
 /*
- * @expo/ui hardcodes inverted iOS grouped-list colors on web (#f2f2f7 page,
- * #ffffff cards). Light mode should match native: white page, grey cards.
- * Target only section cards — not nested pills/controls inside rows.
+ * @expo/ui paints inverted iOS grouped-list colors on web (grey page, white
+ * cards in light mode). Match native instead: the page is the screen
+ * background and the cards the raised element color, in both schemes, so the
+ * cards follow the kit palette rather than @expo/ui's own (which switches on
+ * `prefers-color-scheme` and can disagree with a forced scheme).
+ *
+ * The section card reads `--expo-ui-background`, so remap that variable here
+ * rather than matching react-native-web class names: those carry the property
+ * name (`r-borderRadius-…`) only in development and are hashed to `r-…` in a
+ * production build. Nothing else the kit renders inside a group reads it.
  */
-@media (prefers-color-scheme: light) {
-  .field-group [class*='r-borderRadius-']:not([class*='r-borderRadius-'] [class*='r-borderRadius-']) {
-    background-color: var(--color-background-element) !important;
-  }
+.field-group {
+  --expo-ui-background: var(--color-background-element);
+}
+
+/*
+ * Row dividers: @expo/ui paints them in its gray-100, which is within a few
+ * shades of the card color above in both schemes. The selected-background
+ * token is one step away from the card in either scheme: visible, not heavy.
+ * `role="separator"` is the only stable hook; kit overlays inside a row (a
+ * Menu's own separator) carry `ui-*` classes and keep their color.
+ */
+.field-group [role='separator']:not([class^='ui-']) {
+  background-color: var(--color-background-selected);
 }

package/src/field-group/index.android.tsx

@@ -1,12 +1,8 @@
 import type {ReactNode, ReactElement} from 'react';
-import type {
-  FieldGroupProps,
-  FieldSectionProps,
-  FieldSectionHeaderProps,
-  FieldSectionFooterProps,
-} from '@expo/ui';
+import type {FieldSectionHeaderProps, FieldSectionFooterProps} from '@expo/ui';
+import type {FieldGroupProps, FieldGroupSectionProps} from './types';
 import {Children, Fragment, isValidElement} from 'react';
-import {Box, Column, LazyColumn, Text} from '@expo/ui/jetpack-compose';
+import {Box, Column, Text} from '@expo/ui/jetpack-compose';
 import {
   background,
   clip,
@@ -15,6 +11,7 @@ import {
   padding,
   Shapes,
   testID as testIDModifier,
+  verticalScroll,
   type ModifierConfig,
 } from '@expo/ui/jetpack-compose/modifiers';
 import {useColor} from '../theme';
@@ -22,6 +19,12 @@ import {useColor} from '../theme';
 /**
  * Android `FieldGroup`. Mirrors `@expo/ui`'s Material 3 connected-list
  * layout, with app deviations for web parity:
+ * - the group is a scrolling `Column`, not a `LazyColumn`: a lazy list
+ *   disposes and recomposes its items as it scrolls and on any state change,
+ *   and every React Native view hosted inside an item is then added to the
+ *   view tree a second time while still attached ("The specified child
+ *   already has a parent"). A settings form has a dozen rows and does not
+ *   need laziness; composed once, its rows can hold anything the kit offers;
  * - the group has no background (the universal one paints the Host palette's
  *   `surface`, a grey panel over the app's screen background);
  * - rows use the `backgroundElement` token instead of the seeded
@@ -33,16 +36,13 @@ import {useColor} from '../theme';
  */
 function FieldGroupBase({children, style, hidden, testID}: FieldGroupProps) {
   if (hidden) return null;
-  const modifiers: ModifierConfig[] = [];
+  const modifiers: ModifierConfig[] = [fillMaxWidth(), verticalScroll(), padding(16, 16, 16, 16)];
   if (style?.backgroundColor) modifiers.push(background(String(style.backgroundColor)));
   if (testID) modifiers.push(testIDModifier(testID));
   return (
-    <LazyColumn
-      verticalArrangement={{spacedBy: 24}}
-      contentPadding={{start: 16, end: 16, top: 16, bottom: 16}}
-      modifiers={modifiers}>
+    <Column verticalArrangement={{spacedBy: 24}} modifiers={modifiers}>
       {groupChildren(children)}
-    </LazyColumn>
+    </Column>
   );
 }
 
@@ -56,12 +56,14 @@ function SectionFooter(props: FieldSectionFooterProps) {
   return <>{props.children}</>;
 }
 
-function Section({children, title, titleUppercase = false, hidden}: FieldSectionProps) {
+function Section({children, title, titleUppercase = false, hidden, footer: footerText, footerColor = 'secondaryLabel'}: FieldGroupSectionProps) {
   const card = useColor('backgroundElement');
   const subtle = useColor('secondaryLabel');
+  const danger = useColor('destructive');
+  const label = useColor('label');
   if (hidden) return null;
 
-  const {header, footer, rows} = extractSlots(children);
+  const {header, footer, rows} = extractSlots(children, label);
   const headerNode = header ?? (title ? (
     <Text
       color={subtle}
@@ -69,6 +71,11 @@ function Section({children, title, titleUppercase = false, hidden}: FieldSection
       {titleUppercase ? title.toUpperCase() : title}
     </Text>
   ) : null);
+  const footerNode = footer ?? (footerText != null ? (
+    <Text color={footerColor === 'destructive' ? danger : subtle} style={{typography: 'bodySmall'}}>
+      {footerText}
+    </Text>
+  ) : null);
 
   return (
     <Column verticalArrangement={{spacedBy: 4}} modifiers={[fillMaxWidth()]}>
@@ -93,7 +100,7 @@ function Section({children, title, titleUppercase = false, hidden}: FieldSection
           ))}
         </Column>
       ) : null}
-      {footer ? <Column modifiers={[padding(16, 4, 16, 0)]}>{footer}</Column> : null}
+      {footerNode ? <Column modifiers={[padding(16, 4, 16, 0)]}>{footerNode}</Column> : null}
     </Column>
   );
 }
@@ -104,7 +111,7 @@ export const FieldGroup = Object.assign(FieldGroupBase, {
   SectionFooter,
 });
 
-export type {FieldGroupProps};
+export type {FieldGroupProps, FieldGroupSectionProps};
 
 /**
  * Per-position corner radii producing the Material 3 grouped-list look:
@@ -118,33 +125,33 @@ function cornerRadii(index: number, total: number) {
   return {topStart: top, topEnd: top, bottomStart: bottom, bottomEnd: bottom};
 }
 
-/** Pulls `SectionHeader`/`SectionFooter` slots out of a section's children. */
-function extractSlots(children: ReactNode) {
+/**
+ * Pulls `SectionHeader`/`SectionFooter` slots out of a section's children.
+ * Empty children (`null`, booleans) are dropped, and raw strings or numbers
+ * become a `Text` row, since Compose slots cannot render them directly.
+ */
+function extractSlots(children: ReactNode, textColor: string) {
   let header: ReactNode | undefined;
   let footer: ReactNode | undefined;
   const rows: ReactNode[] = [];
 
   const walk = (node: ReactNode) => {
-    Children.forEach(node, child => {
+    for (const child of Children.toArray(node)) {
       if (!isValidElement(child)) {
-        rows.push(child);
-        return;
+        rows.push(<Text color={textColor}>{String(child)}</Text>);
+        continue;
       }
       const props = child.props as {children?: ReactNode};
       if (child.type === SectionHeader) {
         header = props.children;
-        return;
-      }
-      if (child.type === SectionFooter) {
+      } else if (child.type === SectionFooter) {
         footer = props.children;
-        return;
-      }
-      if (child.type === Fragment) {
+      } else if (child.type === Fragment) {
         walk(props.children);
-        return;
+      } else {
+        rows.push(child);
       }
-      rows.push(child);
-    });
+    }
   };
 
   walk(children);
@@ -175,13 +182,12 @@ function groupChildren(children: ReactNode): ReactNode[] {
       return;
     }
     if (isValidElement(child) && child.type === Fragment) {
-      for (const nested of groupChildren((child.props as {children?: ReactNode}).children)) {
-        if (isSection(nested)) {
-          flush();
-          result.push(nested);
-        } else {
-          buffered.push(nested);
-        }
+      // The recursion yields sections only (loose rows come back wrapped in
+      // their own implicit section), so they close any open implicit section.
+      const nested = groupChildren((child.props as {children?: ReactNode}).children);
+      if (nested.length > 0) {
+        flush();
+        result.push(...nested);
       }
       return;
     }

package/src/field-group/index.tsx

@@ -1,8 +1,39 @@
+import type {FieldGroupProps, FieldGroupSectionProps, FieldSectionFooterColor} from './types';
+import {FieldGroup as Base} from '@expo/ui';
+import {Text} from '@expo/ui/swift-ui';
+import {font, foregroundStyle} from '@expo/ui/swift-ui/modifiers';
+import {useColor} from '../theme';
+import {baseSection, mapSections} from './shared';
+
 /**
  * App `FieldGroup`: a scrollable container of grouped settings-style rows.
- * iOS uses `@expo/ui`'s SwiftUI `Form`. Android (`index.android.tsx`) keeps
- * the Material 3 connected-list look with app palette colors. Web
- * (`index.web.tsx` + `field-group.css`) re-themes the universal component via
- * CSS instead of forking its layout.
+ * iOS (this file) uses `@expo/ui`'s SwiftUI `Form`, whose `Section` gains
+ * the `footer` prop as the native section footer slot. Android
+ * (`index.android.tsx`) keeps the Material 3 connected-list look with app
+ * palette colors. Web (`index.web.tsx` + `field-group.css`) re-themes the
+ * universal component via CSS instead of forking its layout.
  */
-export {FieldGroup, type FieldGroupProps} from '@expo/ui';
+
+/** The section `footer` as SwiftUI text, in the footnote size and the token's color. */
+function FooterText({color, children}: {color: FieldSectionFooterColor; children: string}) {
+  const resolved = useColor(color);
+  return <Text modifiers={[foregroundStyle({type: 'color', color: resolved}), font({size: 13})]}>{children}</Text>;
+}
+
+const renderFooter = (footer: string, color: FieldSectionFooterColor) => <FooterText color={color}>{footer}</FooterText>;
+
+function Section(props: FieldGroupSectionProps) {
+  return baseSection(props, renderFooter);
+}
+
+function FieldGroupBase({children, ...props}: FieldGroupProps) {
+  return <Base {...props}>{mapSections(children, Section, renderFooter)}</Base>;
+}
+
+export const FieldGroup = Object.assign(FieldGroupBase, {
+  Section,
+  SectionHeader: Base.SectionHeader,
+  SectionFooter: Base.SectionFooter,
+});
+
+export type {FieldGroupProps, FieldGroupSectionProps};

package/src/field-group/index.web.tsx

@@ -1,24 +1,40 @@
 import './field-group.css';
-import {FieldGroup as BaseFieldGroup, type FieldGroupProps} from '@expo/ui';
+import type {FieldGroupProps, FieldGroupSectionProps, FieldSectionFooterColor} from './types';
+import {FieldGroup as Base} from '@expo/ui';
+import {Footnote} from '../typography';
+import {baseSection, mapSections} from './shared';
+
+const renderFooter = (footer: string, color: FieldSectionFooterColor) => <Footnote color={color}>{footer}</Footnote>;
+
+/**
+ * Web: the universal `FieldGroup.Section` with the `footer` prop as its
+ * footer slot, drawn as the kit's `Footnote`.
+ */
+function Section(props: FieldGroupSectionProps) {
+  return baseSection(props, renderFooter);
+}
 
 /**
  * Web hook for `field-group.css`. Clears the universal component's hardcoded
- * scroll background so the wrapper supplies the app palette; section cards are
- * recolored in CSS (light mode only — dark matches @expo/ui).
+ * scroll background so the wrapper supplies the app palette; section cards
+ * and row dividers are recolored to the kit tokens in the CSS.
  */
-function FieldGroup({style, ...props}: FieldGroupProps) {
+function FieldGroupBase({style, children, ...props}: FieldGroupProps) {
   return (
     <div className="field-group">
-      <BaseFieldGroup
+      <Base
         {...props}
-        style={{...style, backgroundColor: 'transparent'}}
-      />
+        style={{...style, backgroundColor: 'transparent'}}>
+        {mapSections(children, Section, renderFooter)}
+      </Base>
     </div>
   );
 }
 
-FieldGroup.Section = BaseFieldGroup.Section;
-FieldGroup.SectionHeader = BaseFieldGroup.SectionHeader;
-FieldGroup.SectionFooter = BaseFieldGroup.SectionFooter;
+export const FieldGroup = Object.assign(FieldGroupBase, {
+  Section,
+  SectionHeader: Base.SectionHeader,
+  SectionFooter: Base.SectionFooter,
+});
 
-export {FieldGroup, type FieldGroupProps};
+export type {FieldGroupProps, FieldGroupSectionProps};

package/src/field-group/shared.tsx

@@ -0,0 +1,49 @@
+import type {ComponentType, ReactElement, ReactNode} from 'react';
+import type {FieldGroupSectionProps, FieldSectionFooterColor} from './types';
+import {Children, Fragment, isValidElement} from 'react';
+import {FieldGroup as Base} from '@expo/ui';
+
+/** Renders the `footer` prop's text in the platform's own text control. */
+export type FooterRenderer = (footer: string, color: FieldSectionFooterColor) => ReactNode;
+
+/** Whether the section's children already carry a `SectionFooter` slot. */
+export function hasFooterSlot(children: ReactNode): boolean {
+  return Children.toArray(children).some(child => isValidElement(child) && child.type === Base.SectionFooter);
+}
+
+/**
+ * The universal `FieldGroup.Section` with the `footer` prop turned into a
+ * `SectionFooter` slot (unless the children carry one already).
+ */
+export function baseSection(
+  {footer, footerColor = 'secondaryLabel', children, ...props}: FieldGroupSectionProps,
+  renderFooter: FooterRenderer,
+): ReactElement {
+  const note = footer != null && !hasFooterSlot(children) ? (
+    <Base.SectionFooter>{renderFooter(footer, footerColor)}</Base.SectionFooter>
+  ) : null;
+  return (
+    <Base.Section {...props}>
+      {children}
+      {note}
+    </Base.Section>
+  );
+}
+
+/**
+ * The universal `FieldGroup` groups loose rows into implicit sections by
+ * checking each child's type against its own `Section`, so a kit `Section`
+ * wrapping it would be grouped as a row. The kit sections are therefore
+ * replaced by the universal ones (with the footer slot) before the children
+ * reach the group; fragments are walked like the group walks them.
+ */
+export function mapSections(children: ReactNode, Section: ComponentType<FieldGroupSectionProps>, renderFooter: FooterRenderer): ReactNode {
+  return Children.map(children, child => {
+    if (!isValidElement(child)) return child;
+    if (child.type === Section) return baseSection(child.props as FieldGroupSectionProps, renderFooter);
+    if (child.type === Fragment) {
+      return <Fragment>{mapSections((child.props as {children?: ReactNode}).children, Section, renderFooter)}</Fragment>;
+    }
+    return child;
+  });
+}

package/src/field-group/types.ts

@@ -0,0 +1,25 @@
+import type {FieldGroupProps, FieldSectionProps} from '@expo/ui';
+
+/** Color of a section's `footer` text. */
+export type FieldSectionFooterColor = 'secondaryLabel' | 'destructive';
+
+/**
+ * Props of `FieldGroup.Section`: `@expo/ui`'s, plus a plain-text footer.
+ * SwiftUI's `Section` has a footer, the web draws a caption under the group
+ * and Android under the rows, so a note under a section (what a setting
+ * does, why it failed) is one prop on every platform.
+ */
+export interface FieldGroupSectionProps extends FieldSectionProps {
+  /**
+   * A note under the rows, in the secondary color. Ignored when a
+   * `<FieldGroup.SectionFooter>` child is given.
+   */
+  footer?: string;
+  /**
+   * Color of the footer text: `destructive` for an error.
+   * @default 'secondaryLabel'
+   */
+  footerColor?: FieldSectionFooterColor;
+}
+
+export type {FieldGroupProps};