expo-interface 0.2.0 → 0.3.0

package/src/menu/types.ts

@@ -2,12 +2,24 @@ import type {ReactNode} from 'react';
 import type {IconToken} from '../icons';
 import type {ButtonProps} from '../button/types';
 
-/** One entry of a `Menu` / `ContextMenu`. */
+/** One entry of a `Menu` / `ContextMenu` / `Fab` menu. */
 export interface MenuItem {
   /** Item text. */
   label: string;
   /** Leading icon. */
   icon?: IconToken;
+  /**
+   * A color dot (`#rrggbb`) in place of the icon, for a palette. Drawn on
+   * Android and web; iOS menus render images monochrome, so the dot is not
+   * shown there.
+   */
+  swatch?: string;
+  /**
+   * The item is the current state (the block's kind, the sort order): a
+   * check mark. SwiftUI shows it as a checked `Toggle` item, Compose as a
+   * trailing check, the web popup as a tick.
+   */
+  active?: boolean;
   /**
    * `destructive` renders the item in the danger color.
    * @default 'default'
@@ -21,6 +33,9 @@ export interface MenuItem {
   onPress?: () => void;
 }
 
+/** How the web `Menu` trigger looks. */
+export type MenuTrigger = 'button' | 'link';
+
 /**
  * Cross-platform dropdown menu opened from a button.
  *
@@ -28,17 +43,30 @@ export interface MenuItem {
  * `DropdownMenu` on Android, and a `role="menu"` popup on web. The trigger
  * looks like the kit's `Button` and takes the same styling props.
  */
-export interface MenuProps extends Pick<ButtonProps, 'variant' | 'size' | 'shape' | 'color' | 'hideLabel' | 'disabled'> {
+export interface MenuProps extends Pick<ButtonProps, 'variant' | 'size' | 'shape' | 'color' | 'tone' | 'hideLabel' | 'disabled'> {
   /** Trigger text (kept for accessibility when `hideLabel` is set). */
   label: string;
   /** Trigger icon. */
   icon?: IconToken;
   /** Entries shown when the menu opens. */
   items: MenuItem[];
+  /**
+   * Web only: `button` renders the kit's button, `link` a text link like the
+   * tab bar's tabs (the icon and the label in the tint), for a menu that
+   * sits in a bar.
+   * @default 'button'
+   */
+  trigger?: MenuTrigger;
   /** Identifier used to locate the trigger in end-to-end tests. */
   testID?: string;
 }
 
+/** A point a `ContextMenu` opens at, in the coordinates of its content. */
+export interface MenuPoint {
+  x: number;
+  y: number;
+}
+
 /**
  * Cross-platform context menu attached to arbitrary content.
  *
@@ -55,6 +83,17 @@ export interface ContextMenuProps {
   onPress?: () => void;
   /** Disables the menu. */
   disabled?: boolean;
+  /**
+   * Opens the menu at this point whenever it changes, so a canvas can open
+   * it where it says it was asked for (a right click it received itself, a
+   * press on a block's grip). Relative to the content's top-left corner on
+   * Android and web (web also accepts viewport coordinates for content that
+   * fills it). iOS has no menu at a point: the long-press stays the only
+   * trigger there. Pair with `onDismiss` to clear it once the menu closes.
+   */
+  at?: MenuPoint | null;
+  /** Called when a menu opened by `at` (or a gesture) closes. */
+  onDismiss?: () => void;
   /** Identifier used to locate the trigger in end-to-end tests. */
   testID?: string;
 }

package/src/scheme.ts

@@ -0,0 +1,140 @@
+import type {ColorSchemeName} from 'react-native';
+import {useSyncExternalStore} from 'react';
+import {Appearance, Platform} from 'react-native';
+import {colors} from './theme';
+
+/** The scheme the app is drawn in. */
+export type ColorScheme = 'light' | 'dark';
+
+/** What an app asks for: the system's scheme, or one forced by the user. */
+export type ColorSchemeMode = 'system' | ColorScheme;
+
+/**
+ * `localStorage` key under which `setColorScheme` keeps a forced scheme on
+ * web, read back by `getThemeBootScript` before the bundle runs.
+ */
+export const SCHEME_STORAGE_KEY = 'expo-interface:scheme';
+
+type Listener = (preferences: {colorScheme: ColorSchemeName}) => void;
+
+/**
+ * Web: react-native-web's `Appearance` only mirrors the `prefers-color-scheme`
+ * media query and has no `setColorScheme`. Its two methods are replaced at
+ * load: `getColorScheme` answers the forced scheme while one is set, and the
+ * change listeners (what React Native's `useColorScheme`, `@expo/ui`'s `Host`
+ * and the kit's `useColorScheme` subscribe through) hear a forced change as
+ * well as a system one.
+ */
+let forced: ColorScheme | null = null;
+const listeners = new Set<Listener>();
+let system: Pick<typeof Appearance, 'getColorScheme' | 'addChangeListener'> | undefined;
+
+function patchAppearance() {
+  if (system) return;
+  const original = {
+    getColorScheme: Appearance.getColorScheme.bind(Appearance),
+    addChangeListener: Appearance.addChangeListener.bind(Appearance),
+  };
+  system = original;
+  Appearance.getColorScheme = () => forced ?? original.getColorScheme();
+  Appearance.addChangeListener = (listener: Listener) => {
+    listeners.add(listener);
+    // A system change is only news while the scheme follows the system.
+    const subscription = original.addChangeListener(preferences => {
+      if (!forced) listener(preferences);
+    });
+    return {
+      remove() {
+        listeners.delete(listener);
+        subscription.remove();
+      },
+    };
+  };
+}
+
+if (Platform.OS === 'web') patchAppearance();
+
+const subscribe = (onChange: () => void) => {
+  const subscription = Appearance.addChangeListener(onChange);
+  return () => subscription.remove();
+};
+
+const snapshot = (): ColorScheme => (Appearance.getColorScheme() === 'dark' ? 'dark' : 'light');
+
+/**
+ * The color scheme as an external store: `'light'` or `'dark'`, never
+ * unspecified. React Native's own `useColorScheme` re-subscribes on every
+ * render; on web, where the change is a `matchMedia` event, an ancestor that
+ * re-renders during that event (the router's screens do) makes the hook drop
+ * and re-add its listener mid-dispatch, and the event never reaches it. One
+ * stable subscription does not. Follows `setColorScheme` on every platform.
+ */
+export function useColorScheme(): ColorScheme {
+  return useSyncExternalStore(subscribe, snapshot, snapshot);
+}
+
+const toKebab = (token: string) => token.replace(/[A-Z]/g, c => `-${c.toLowerCase()}`);
+
+/**
+ * Forces the color scheme, or follows the system again.
+ *
+ * - iOS and Android: `Appearance.setColorScheme`, so `useColorScheme`, the
+ *   kit's `useColor` and every native control follow.
+ * - Web: the palette of the forced scheme is written inline on the root
+ *   element as the `--color-*` variables (`tint`/`onTint` are left to
+ *   `AccentProvider`), `color-scheme` is set so form controls and scrollbars
+ *   follow, `data-theme` is set for `@expo/ui`'s own styles, the choice is
+ *   saved under `storageKey` for `getThemeBootScript`, and the `Appearance`
+ *   listeners hear the change.
+ */
+export function setColorScheme(mode: ColorSchemeMode, storageKey = SCHEME_STORAGE_KEY): void {
+  if (Platform.OS !== 'web') {
+    Appearance.setColorScheme(mode === 'system' ? 'unspecified' : mode);
+    return;
+  }
+  patchAppearance();
+  forced = mode === 'system' ? null : mode;
+  if (typeof document !== 'undefined') {
+    const root = document.documentElement;
+    for (const token of Object.keys(colors.light) as (keyof typeof colors.light)[]) {
+      if (token === 'tint' || token === 'onTint') continue;
+      const name = `--color-${toKebab(token)}`;
+      if (forced) root.style.setProperty(name, colors[forced][token]);
+      else root.style.removeProperty(name);
+    }
+    root.style.colorScheme = forced ?? '';
+    if (forced) root.dataset.theme = forced;
+    else delete root.dataset.theme;
+  }
+  try {
+    if (forced) localStorage.setItem(storageKey, forced);
+    else localStorage.removeItem(storageKey);
+  } catch {
+    // Storage may be unavailable (privacy mode, server render); the scheme still applies.
+  }
+  const colorScheme: ColorSchemeName = forced ?? system!.getColorScheme() ?? 'light';
+  for (const listener of listeners) listener({colorScheme});
+}
+
+/**
+ * The scheme forced by `setColorScheme` on web, or `'system'`. Natively the
+ * forced scheme is `Appearance`'s own and this always answers `'system'`.
+ */
+export function getColorSchemeMode(): ColorSchemeMode {
+  return forced ?? 'system';
+}
+
+/**
+ * Inline script for `+html.tsx`: before the bundle runs, applies a scheme
+ * saved by `setColorScheme` to the root element (`data-theme` and
+ * `color-scheme`), so the first paint of the static HTML is already in that
+ * scheme; `getThemeCSS` carries the matching `:root[data-theme]` palettes.
+ * A system scheme needs nothing: the variables switch on the media query.
+ *
+ * ```tsx
+ * <script dangerouslySetInnerHTML={{__html: getThemeBootScript()}}/>
+ * ```
+ */
+export function getThemeBootScript(storageKey = SCHEME_STORAGE_KEY): string {
+  return `(function(){try{var t=localStorage.getItem(${JSON.stringify(storageKey)});if(t==='light'||t==='dark'){document.documentElement.dataset.theme=t;document.documentElement.style.colorScheme=t;}}catch(e){}})();`;
+}

package/src/screen/index.tsx

@@ -1,13 +1,15 @@
 import type {ColorSchemeName, ColorValue} from 'react-native';
 import type {Edge} from 'react-native-safe-area-context';
+import type {PropsWithChildren, ReactNode} from 'react';
 
 import {Host} from '@expo/ui';
 import {useEffect} from 'react';
 import {StatusBar} from 'expo-status-bar';
-import {SafeAreaView} from 'react-native-safe-area-context';
-import {useColorScheme, Appearance, StyleSheet, View} from 'react-native';
+import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
+import {Appearance, Platform, StyleSheet, View} from 'react-native';
 import {setBackgroundColorAsync} from 'expo-system-ui';
 import {useAccentSeed} from '../accent';
+import {useColorScheme} from '../scheme';
 import * as theme from '../theme';
 
 import {hostAccentProps} from './host-accent';
@@ -19,15 +21,31 @@ const BG_COLOR: Record<ColorSchemeName, ColorValue> = {
   dark: theme.colors.dark.background,
 };
 
-setBackgroundColorAsync(BG_COLOR[Appearance.getColorScheme() ?? 'unspecified']);
+/**
+ * Web paints the palette's CSS variable: it follows the media query and a
+ * forced `data-theme` before any JavaScript runs, so the static export is not
+ * white behind dark controls until the first re-render. Native paints the
+ * scheme's literal color, which the system UI (`expo-system-ui`) also takes.
+ */
+const background = (scheme: ColorSchemeName): ColorValue =>
+  Platform.OS === 'web' ? theme.theme.background : BG_COLOR[scheme];
 
-interface ScreenProps extends React.PropsWithChildren {
+setBackgroundColorAsync(background(Appearance.getColorScheme() ?? 'unspecified'));
+
+export interface ScreenProps extends PropsWithChildren {
   /** Whether to expect an @expo/ui or normal RN component children. */
   native?: boolean;
   /** Screen sits below a stack header — skip redundant top inset/padding. */
   header?: boolean;
   /** Whether to apply a horizontal padding to the screen. */
   gutter?: boolean;
+  /**
+   * A floating action button (`Fab`) the screen places itself: bottom
+   * trailing, `spacing.three` from the edges plus the safe-area bottom inset
+   * natively (which includes the tab bar when the screen shows one), fixed
+   * to the viewport on web.
+   */
+  fab?: ReactNode;
 }
 
 export function Screen({
@@ -35,10 +53,12 @@ export function Screen({
   native = false,
   header = false,
   gutter = false,
+  fab,
 }: ScreenProps) {
   const seed = useAccentSeed();
   const scheme = useColorScheme();
-  const backgroundColor = BG_COLOR[scheme ?? 'unspecified'];
+  const insets = useSafeAreaInsets();
+  const backgroundColor = background(scheme);
 
   useEffect(() => {
     setBackgroundColorAsync(backgroundColor);
@@ -58,6 +78,19 @@ export function Screen({
           )}
         </View>
       </View>
+      {fab != null ? (
+        <View
+          testID="screen-fab"
+          pointerEvents="box-none"
+          style={[
+            styles.fab,
+            Platform.OS === 'web'
+              ? styles.fabFixed
+              : {right: theme.spacing.three + insets.right, bottom: theme.spacing.three + insets.bottom},
+          ]}>
+          {fab}
+        </View>
+      ) : null}
     </SafeAreaView>
   );
 }
@@ -76,4 +109,15 @@ const styles = StyleSheet.create({
   gutter: {
     paddingHorizontal: theme.spacing.three,
   },
+  fab: {
+    position: 'absolute',
+    right: theme.spacing.three,
+    bottom: theme.spacing.three,
+  },
+  // react-native-web passes `fixed` through to the CSS; React Native's types do not know it.
+  fabFixed: {
+    position: 'fixed' as 'absolute',
+    right: theme.spacing.three,
+    bottom: theme.spacing.three,
+  },
 });

package/src/tab-stack/index.tsx

@@ -1,8 +1,21 @@
+import type {ReactNode} from 'react';
 import {Stack} from 'expo-router';
 import {Platform} from 'react-native';
 import {useNavTheme} from '../theme';
 
-export function TabStack({title}: {title: string}) {
+export interface TabStackProps {
+  /** Title of the tab's root screen, in its native header. */
+  title: string;
+  /**
+   * Content of the header's trailing slot on iOS and Android (the web shows
+   * no header for a tab root: its actions go in the tab bar). A `HeaderMenu`
+   * survives Android's header re-parenting; a plain `Menu` in a host does
+   * not.
+   */
+  headerRight?: () => ReactNode;
+}
+
+export function TabStack({title, headerRight}: TabStackProps) {
   const {colors} = useNavTheme();
 
   return (
@@ -15,7 +28,7 @@ export function TabStack({title}: {title: string}) {
         headerTitleStyle: {color: colors.text},
         headerStyle: {backgroundColor: colors.background},
       }}>
-      <Stack.Screen name="index" options={{title}}/>
+      <Stack.Screen name="index" options={{title, headerRight}}/>
     </Stack>
   );
 }

package/src/tabs/index.tsx

@@ -2,13 +2,14 @@ import type {TabBarProps} from './types';
 import {NativeTabs} from 'expo-router/unstable-native-tabs';
 import {useColor} from '../theme';
 
-export function Tabs({routes}: TabBarProps) {
+export function Tabs({routes, hidden = false}: TabBarProps) {
   const rippleColor = useColor('pillBackground');
   const indicatorColor = useColor('backgroundElement');
   const labelColor = useColor('label');
 
   return (
     <NativeTabs
+      hidden={hidden}
       backgroundColor="transparent"
       indicatorColor={indicatorColor}
       rippleColor={rippleColor}

package/src/tabs/index.web.tsx

@@ -1,4 +1,5 @@
 import type {TabTriggerSlotProps, TabListProps} from 'expo-router/ui';
+import type {ReactNode} from 'react';
 import type {TabBarProps, TabRoute, WebLogo} from './types';
 
 import {Tabs as WebTabs, TabSlot, TabList, TabTrigger} from 'expo-router/ui';
@@ -10,12 +11,20 @@ import app from 'expo-constants';
 import {theme, spacing, bound} from '../theme';
 import {Headline, Label} from '../typography';
 
-export function Tabs({routes, webLogo = 'icon-and-text', webIcon}: TabBarProps) {
+export function Tabs({
+  routes,
+  hidden = false,
+  webLogo = 'icon-and-text',
+  webIcon,
+  webActions,
+  webActionsPlacement = 'before',
+}: TabBarProps) {
   return (
     <WebTabs>
       <TabSlot style={styles.slot}/>
+      {/* The triggers stay in the list even while the bar is hidden: that is where the router looks for the routes. */}
       <TabList asChild>
-        <WebTabList logo={webLogo} icon={webIcon}>
+        <WebTabList logo={webLogo} icon={webIcon} hidden={hidden} actions={webActions} actionsPlacement={webActionsPlacement}>
           {routes.map(route => (
             <TabTrigger key={route.name} name={route.name} href={route.href} asChild>
               <TabLink icon={route.icon}>{route.label}</TabLink>
@@ -27,12 +36,20 @@ export function Tabs({routes, webLogo = 'icon-and-text', webIcon}: TabBarProps)
   );
 }
 
-export function WebTabList({logo, icon, ...props}: TabListProps & {logo: WebLogo, icon?: TabBarProps['webIcon']}) {
+interface WebTabListProps extends TabListProps {
+  logo: WebLogo;
+  icon?: TabBarProps['webIcon'];
+  hidden?: boolean;
+  actions?: ReactNode;
+  actionsPlacement?: 'before' | 'after';
+}
+
+export function WebTabList({logo, icon, hidden = false, actions, actionsPlacement = 'before', ...props}: WebTabListProps) {
   const isPreset = typeof logo === 'string';
   const isTextOnly = logo === 'text-only';
   const isIconOnly = logo === 'icon-only';
   return (
-    <View {...props} style={styles.list}>
+    <View {...props} style={[styles.list, hidden && styles.hidden]}>
       <View style={styles.inner}>
         <View style={styles.logo}>
           {!isPreset ? logo : (
@@ -52,7 +69,9 @@ export function WebTabList({logo, icon, ...props}: TabListProps & {logo: WebLogo
             </>
           )}
         </View>
+        {actionsPlacement === 'before' ? actions : null}
         {props.children}
+        {actionsPlacement === 'after' ? actions : null}
       </View>
     </View>
   );
@@ -81,6 +100,9 @@ const styles = StyleSheet.create({
     width: '100%',
     padding: spacing.three,
   },
+  hidden: {
+    display: 'none',
+  },
   inner: {
     flexGrow: 1,
     flexDirection: 'row',
@@ -97,6 +119,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginRight: 'auto',
     gap: spacing.two,
+    // The slot shrinks before the tabs do, so a title in it is bounded by the bar.
+    flexShrink: 1,
+    minWidth: 0,
   },
   icon: {
     width: 24,

package/src/tabs/types.ts

@@ -8,7 +8,7 @@ import type {ImageSource} from 'expo-image';
  * @see Tabs
  */
 export interface TabBarProps {
-  /** 
+  /**
    * Configures the tab bar items for native & web.
    * @example
    * ```ts
@@ -29,9 +29,17 @@ export interface TabBarProps {
    * ```
    */
   routes: readonly TabRoute[];
+  /**
+   * Hides the tab bar while keeping the routes, so a screen that needs the
+   * whole display (an open document) can take it: natively the native tab
+   * bar's own `hidden`, on web the floating bar is not drawn.
+   * @default false
+   */
+  hidden?: boolean;
   /**
    * Controls the web tab bar logo. Use a preset mode to show the app icon
-   * and/or name, or pass a custom node to replace them entirely.
+   * and/or name, or pass a custom node to replace them entirely. The slot
+   * shrinks before the tabs do, so a title in it is bounded by the bar.
    * @default 'icon-and-text'
    */
   webLogo?: WebLogo;
@@ -40,6 +48,16 @@ export interface TabBarProps {
    * e.g. `require('./assets/icon.png')`. When omitted only the name is shown.
    */
   webIcon?: ImageSource | number;
+  /**
+   * Content rendered in the web tab bar beside the tabs: a `Menu` with a
+   * `link` trigger, a button. See `webActionsPlacement`.
+   */
+  webActions?: ReactNode;
+  /**
+   * Where `webActions` go: between the logo and the tabs, or after the tabs.
+   * @default 'before'
+   */
+  webActionsPlacement?: 'before' | 'after';
 }
 
 export type WebLogo =

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

@@ -1,9 +1,10 @@
-import type {TextFieldKeyboard, TextFieldProps} from './types';
-import type {TextFieldColors, TextFieldKeyboardType} from '@expo/ui/jetpack-compose';
+import type {TextFieldKeyboard, TextFieldProps, TextFieldReturnKey} from './types';
+import type {TextFieldColors, TextFieldImeAction, TextFieldKeyboardActions, TextFieldKeyboardType} from '@expo/ui/jetpack-compose';
 
 import {TextField as ComposeTextField, Text, useMaterialColors, useNativeState} from '@expo/ui/jetpack-compose';
 import {fillMaxWidth, offset, testID as testIDModifier} from '@expo/ui/jetpack-compose/modifiers';
 import {useColor} from '../theme';
+import {InlineTextField} from './inline';
 import {useSyncedState} from './shared';
 
 const TRANSPARENT = 'transparent';
@@ -18,14 +19,25 @@ const TRANSPARENT = 'transparent';
  */
 const CONTENT_PADDING = 16;
 
+/**
+ * The `row` variant is the Compose field; `inline` is a React Native
+ * `TextInput` for fields inside a React Native layout.
+ */
+export function TextField(props: TextFieldProps) {
+  if (props.variant === 'inline') return <InlineTextField {...props}/>;
+  return <RowTextField {...props}/>;
+}
+
 /**
  * Android's Material `TextField` ships with a filled background and a bottom
  * indicator line that clash with the iOS `Form` look. Here those are stripped
  * to transparent so the field reads as a plain borderless row — the placeholder
  * doubles as the label — living natively inside the surrounding
- * `Host`/`FieldGroup`.
+ * `Host`/`FieldGroup`. The keyboard's action key is `returnKeyType` (`done`
+ * when there is only an `onSubmit`); Compose keeps the field focused after
+ * it, so `submitBehavior` has nothing to add here.
  */
-export function TextField({
+function RowTextField({
   placeholder,
   value,
   onChangeText,
@@ -37,6 +49,7 @@ export function TextField({
   autoCorrect,
   multiline,
   autoFocus,
+  returnKeyType,
   maxLength,
   accentColor,
   testID,
@@ -79,9 +92,9 @@ export function TextField({
         keyboardType: keyboardTypeFor(keyboardType, secureTextEntry),
         capitalization: autoCapitalize,
         autoCorrectEnabled: autoCorrect,
-        imeAction: onSubmit ? 'done' : 'default',
+        imeAction: imeActionFor(returnKeyType, !!onSubmit),
       }}
-      keyboardActions={onSubmit ? {onDone: onSubmit} : undefined}
+      keyboardActions={onSubmit ? keyboardActionsFor(onSubmit) : undefined}
       colors={fieldColors}
       textStyle={{fontSize: 16, color: colors.onSurface}}
       modifiers={[
@@ -98,6 +111,17 @@ export function TextField({
   );
 }
 
+/** The action key: the requested one, `done` for a bare `onSubmit`, the default otherwise. */
+export function imeActionFor(returnKeyType: TextFieldReturnKey | undefined, hasSubmit: boolean): TextFieldImeAction {
+  if (returnKeyType) return returnKeyType;
+  return hasSubmit ? 'done' : 'default';
+}
+
+/** Every action key reports through `onSubmit`, whichever `imeAction` is shown. */
+export function keyboardActionsFor(onSubmit: (text: string) => void): TextFieldKeyboardActions {
+  return {onDone: onSubmit, onGo: onSubmit, onNext: onSubmit, onSearch: onSubmit, onSend: onSubmit};
+}
+
 function keyboardTypeFor(
   type: TextFieldKeyboard | undefined,
   secure: boolean | undefined,

package/src/text-field/index.ios.tsx

@@ -2,16 +2,27 @@ import type {TextFieldCapitalize, TextFieldProps} from './types';
 import type {ViewModifier} from '@expo/ui/swift-ui/modifiers';
 
 import {SecureField, TextField as SwiftUITextField, useNativeState} from '@expo/ui/swift-ui';
-import {autocorrectionDisabled, disabled as disabledMod, keyboardType as keyboardTypeMod, onSubmit as onSubmitMod, textInputAutocapitalization, tint} from '@expo/ui/swift-ui/modifiers';
+import {autocorrectionDisabled, disabled as disabledMod, keyboardType as keyboardTypeMod, onSubmit as onSubmitMod, submitLabel, textInputAutocapitalization, tint} from '@expo/ui/swift-ui/modifiers';
+import {InlineTextField} from './inline';
 import {keyboardTypeFor, useSyncedState} from './shared';
 
+/**
+ * The `row` variant is the SwiftUI field; `inline` is a React Native
+ * `TextInput` for fields inside a React Native layout.
+ */
+export function TextField(props: TextFieldProps) {
+  if (props.variant === 'inline') return <InlineTextField {...props}/>;
+  return <RowTextField {...props}/>;
+}
+
 /**
  * iOS renders the field inline using SwiftUI's `TextField` (or `SecureField`
  * for masked input), which is exactly the borderless `Form` row look the other
  * platforms emulate: a placeholder that doubles as the label and the value
- * filling the row. Drop it straight into a `FieldGroup.Section`.
+ * filling the row. Drop it straight into a `FieldGroup.Section`. The
+ * keyboard's action key is `returnKeyType` (the `submitLabel` modifier).
  */
-export function TextField({
+function RowTextField({
   placeholder,
   value,
   onChangeText,
@@ -23,6 +34,7 @@ export function TextField({
   autoCorrect,
   multiline,
   autoFocus,
+  returnKeyType,
   maxLength,
   accentColor,
   testID,
@@ -35,6 +47,7 @@ export function TextField({
   if (keyboardType) modifiers.push(keyboardTypeMod(keyboardTypeFor(keyboardType)));
   if (autoCorrect === false) modifiers.push(autocorrectionDisabled(true));
   if (autoCapitalize) modifiers.push(textInputAutocapitalization(autocapitalizationFor(autoCapitalize)));
+  if (returnKeyType) modifiers.push(submitLabel(returnKeyType));
   if (onSubmit) modifiers.push(onSubmitMod(() => onSubmit(text.value)));
   if (disabled) modifiers.push(disabledMod(true));