expo-interface 0.1.1 → 0.3.0

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/segmented/index.tsx

@@ -24,7 +24,7 @@ function SegmentedControlComponent<T extends PickerValue>({
 }: SegmentedControlProps<T>) {
   const items = extractItems<T>(children);
   const [current, setValue] = useSelectedValue(selectedValue, onValueChange, items[0]?.value);
-  const vars = flatten((StyleSheet.flatten(style) ?? undefined) as TextStyle | undefined) as CSSProperties;
+  const vars = flatten(StyleSheet.flatten(style) as TextStyle) as CSSProperties;
   return (
     <div
       className={['ui-segmented', disabled && 'ui-segmented--disabled'].filter(Boolean).join(' ')}

package/src/segmented/segmented.css

@@ -35,18 +35,17 @@
   transition: background-color 0.15s ease, box-shadow 0.15s ease;
 }
 
+/*
+ * Raised segment (iOS: white light / systemGray2-ish dark). `light-dark()`
+ * follows the element's `color-scheme`, which the theme CSS sets from the OS
+ * and which a host can force (Storybook's scheme toolbar does).
+ */
 .ui-segmented__item[aria-checked='true'] {
-  background: #ffffff;
+  background: light-dark(#ffffff, #636366);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
   font-weight: 600;
 }
 
-@media (prefers-color-scheme: dark) {
-  .ui-segmented__item[aria-checked='true'] {
-    background: #636366;
-  }
-}
-
 .ui-segmented__item:disabled {
   cursor: default;
 }

package/src/slider/index.tsx

@@ -26,7 +26,7 @@ export function Slider({
 }: SliderProps) {
   const vars = {
     ...(accentColor ? {'--ui-slider-accent': accentColor} : null),
-    ...flatten((StyleSheet.flatten(style) ?? undefined) as TextStyle | undefined),
+    ...flatten(StyleSheet.flatten(style) as TextStyle),
   } as CSSProperties;
   const read = (event: ChangeEvent<HTMLInputElement>) => Number(event.target.value);
   return (

package/src/stepper/index.tsx

@@ -14,7 +14,7 @@ import {clampStep, stepBounds} from './shared';
 export function Stepper(props: StepperProps) {
   const {label, value, onValueChange, step = 1, min, max, formatValue, disabled, testID, style} = props;
   const {canDecrement, canIncrement} = stepBounds(props);
-  const vars = flatten((StyleSheet.flatten(style) ?? undefined) as TextStyle | undefined) as CSSProperties;
+  const vars = flatten(StyleSheet.flatten(style) as TextStyle) as CSSProperties;
   return (
     <div
       className={['ui-stepper', disabled && 'ui-stepper--disabled'].filter(Boolean).join(' ')}

package/src/switch/index.tsx

@@ -28,6 +28,8 @@ export function Switch({
       value={value}
       onValueChange={onValueChange}
       disabled={disabled}
+      // The label is a sibling, not a <label>, so name the input directly.
+      accessibilityLabel={label}
       thumbColor={THUMB}
       trackColor={{true: onColor, false: offColor}}
       testID={label == null ? testID : undefined}

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));
 

package/src/text-field/index.tsx

@@ -1,9 +1,20 @@
 import type {TextFieldProps} from './types';
-import type {TextStyle} from 'react-native';
+import type {NativeSyntheticEvent, TextInputKeyPressEventData, TextStyle} from 'react-native';
 
+import {useRef} from 'react';
 import {StyleSheet, TextInput} from 'react-native';
 import {fonts, fontWeights, theme, variants} from '../theme';
-import {keyboardTypeFor, useTextValue} from './shared';
+import {InlineTextField} from './inline';
+import {keyboardTypeFor, useAutoFocus, useTextValue} from './shared';
+
+/**
+ * The `row` variant is the form row below; `inline` is the borderless field
+ * for a React Native layout (the same `TextInput`, sized to its room).
+ */
+export function TextField(props: TextFieldProps) {
+  if (props.variant === 'inline') return <InlineTextField {...props}/>;
+  return <RowTextField {...props}/>;
+}
 
 /**
  * On web the field mirrors the native iOS/Android row: a borderless, full-width
@@ -11,11 +22,12 @@ import {keyboardTypeFor, useTextValue} from './shared';
  * typography so it sits flush inside a `FieldGroup.Section`. The browser focus
  * outline is suppressed to match the chromeless iOS `Form` look.
  */
-export function TextField({
+function RowTextField({
   placeholder,
   value,
   onChangeText,
   onSubmit,
+  onKeyPress,
   disabled,
   secureTextEntry,
   keyboardType,
@@ -23,16 +35,21 @@ export function TextField({
   autoCorrect,
   multiline,
   autoFocus,
+  returnKeyType,
+  submitBehavior,
   maxLength,
   accentColor,
   testID,
   style,
 }: TextFieldProps) {
+  const input = useRef<TextInput>(null);
   const [current, setValue] = useTextValue(value, onChangeText);
   const cursor = accentColor ?? (theme.tint as string);
+  useAutoFocus(input, autoFocus);
 
   return (
     <TextInput
+      ref={input}
       value={current}
       onChangeText={setValue}
       placeholder={placeholder}
@@ -43,11 +60,14 @@ export function TextField({
       autoCapitalize={autoCapitalize}
       autoCorrect={autoCorrect}
       multiline={multiline}
-      autoFocus={autoFocus}
       maxLength={maxLength}
       cursorColor={cursor}
       selectionColor={cursor}
+      returnKeyType={returnKeyType}
+      submitBehavior={submitBehavior}
       onSubmitEditing={onSubmit ? event => onSubmit(event.nativeEvent.text) : undefined}
+      onKeyPress={onKeyPress ? (event: NativeSyntheticEvent<TextInputKeyPressEventData & {shiftKey?: boolean}>) =>
+        onKeyPress(event.nativeEvent.key, event.nativeEvent.shiftKey === true) : undefined}
       aria-label={placeholder}
       testID={testID}
       style={[styles.input, disabled && styles.disabled, style]}

package/src/text-field/inline.tsx

@@ -0,0 +1,87 @@
+import type {NativeSyntheticEvent, TextInputKeyPressEventData} from 'react-native';
+import type {TextFieldProps} from './types';
+import {useRef} from 'react';
+import {StyleSheet, TextInput} from 'react-native';
+import {fonts, fontWeights, spacing, useColor} from '../theme';
+import {keyboardTypeFor, useAutoFocus, useTextValue} from './shared';
+
+/**
+ * The `inline` variant: a borderless React Native `TextInput` on every
+ * platform, for a field that sits inside a React Native layout (a search
+ * row in a toolbar, a prompt in a bar) where the native form control would
+ * need a host of its own. It grows to the room it is given, focuses on
+ * mount when asked (and makes sure the keyboard came on Android), and steps
+ * with the keyboard's action key (`returnKeyType` with `submitBehavior`).
+ */
+export function InlineTextField({
+  placeholder,
+  value,
+  onChangeText,
+  onSubmit,
+  onKeyPress,
+  disabled,
+  secureTextEntry,
+  keyboardType,
+  autoCapitalize,
+  autoCorrect,
+  multiline,
+  autoFocus,
+  returnKeyType,
+  submitBehavior,
+  maxLength,
+  accentColor,
+  testID,
+  style,
+}: TextFieldProps) {
+  const input = useRef<TextInput>(null);
+  const [current, setValue] = useTextValue(value, onChangeText);
+  const label = useColor('label');
+  const placeholderColor = useColor('tertiaryLabel');
+  const tint = useColor('tint');
+  const cursor = accentColor ?? tint;
+  useAutoFocus(input, autoFocus);
+
+  return (
+    <TextInput
+      ref={input}
+      value={current}
+      onChangeText={setValue}
+      placeholder={placeholder}
+      placeholderTextColor={placeholderColor}
+      editable={!disabled}
+      secureTextEntry={secureTextEntry}
+      keyboardType={keyboardTypeFor(keyboardType)}
+      autoCapitalize={autoCapitalize}
+      autoCorrect={autoCorrect}
+      multiline={multiline}
+      maxLength={maxLength}
+      cursorColor={cursor}
+      selectionColor={cursor}
+      returnKeyType={returnKeyType}
+      submitBehavior={submitBehavior}
+      onSubmitEditing={onSubmit ? event => onSubmit(event.nativeEvent.text) : undefined}
+      onKeyPress={onKeyPress ? (event: NativeSyntheticEvent<TextInputKeyPressEventData & {shiftKey?: boolean}>) =>
+        onKeyPress(event.nativeEvent.key, event.nativeEvent.shiftKey === true) : undefined}
+      aria-label={placeholder}
+      testID={testID}
+      style={[styles.input, {color: label}, disabled && styles.disabled, style]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  input: {
+    flexGrow: 1,
+    flexShrink: 1,
+    minWidth: 0,
+    margin: 0,
+    paddingVertical: spacing.one,
+    paddingHorizontal: spacing.two,
+    fontSize: 14,
+    fontFamily: fonts?.sans,
+    fontWeight: fontWeights.normal,
+  },
+  disabled: {
+    opacity: 0.4,
+  },
+});