expo-interface 0.1.0

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

@@ -0,0 +1,123 @@
+import type {TextFieldKeyboard, TextFieldProps} from './types';
+import type {TextFieldColors, 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 {useSyncedState} from './shared';
+
+const TRANSPARENT = 'transparent';
+
+/**
+ * Material 3's filled `TextField` bakes a 16dp horizontal content padding into
+ * the field itself (`TextFieldDefaults.contentPaddingWithoutLabel`), which the
+ * published `@expo/ui` does not expose (`BasicTextField` is documented for
+ * v56 but not shipped yet). Inside a `FieldGroup` row that padding stacks on
+ * the row's own 16dp inset, pushing the text 16dp right of sibling rows — so
+ * the field is shifted back by the same amount to line up.
+ */
+const CONTENT_PADDING = 16;
+
+/**
+ * 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`.
+ */
+export function TextField({
+  placeholder,
+  value,
+  onChangeText,
+  onSubmit,
+  disabled,
+  secureTextEntry,
+  keyboardType,
+  autoCapitalize,
+  autoCorrect,
+  multiline,
+  autoFocus,
+  maxLength,
+  accentColor,
+  testID,
+}: TextFieldProps) {
+  const colors = useMaterialColors();
+  const tint = useColor('tint');
+  // Placeholder uses the app palette's tertiaryLabel (like web and iOS's
+  // `placeholderText`) instead of Material's onSurfaceVariant, which reads
+  // too bright in dark mode next to the other platforms.
+  const placeholderColor = useColor('tertiaryLabel');
+  const text = useNativeState(value ?? '');
+  useSyncedState(text, value);
+
+  const fieldColors: TextFieldColors = {
+    focusedContainerColor: TRANSPARENT,
+    unfocusedContainerColor: TRANSPARENT,
+    disabledContainerColor: TRANSPARENT,
+    errorContainerColor: TRANSPARENT,
+    focusedIndicatorColor: TRANSPARENT,
+    unfocusedIndicatorColor: TRANSPARENT,
+    disabledIndicatorColor: TRANSPARENT,
+    focusedTextColor: colors.onSurface,
+    unfocusedTextColor: colors.onSurface,
+    disabledTextColor: colors.onSurfaceVariant,
+    // Live accent seed by default — matches the web cursor (`theme.tint`) and
+    // the iOS field tint, even inside sheets whose native host is unseeded.
+    cursorColor: accentColor ?? tint,
+  };
+
+  return (
+    <ComposeTextField
+      value={text}
+      onValueChange={onChangeText}
+      enabled={disabled !== true}
+      singleLine={!multiline}
+      autoFocus={autoFocus}
+      maxLength={maxLength}
+      visualTransformation={secureTextEntry ? 'password' : 'none'}
+      keyboardOptions={{
+        keyboardType: keyboardTypeFor(keyboardType, secureTextEntry),
+        capitalization: autoCapitalize,
+        autoCorrectEnabled: autoCorrect,
+        imeAction: onSubmit ? 'done' : 'default',
+      }}
+      keyboardActions={onSubmit ? {onDone: onSubmit} : undefined}
+      colors={fieldColors}
+      textStyle={{fontSize: 16, color: colors.onSurface}}
+      modifiers={[
+        fillMaxWidth(),
+        offset(-CONTENT_PADDING, 0),
+        ...(testID ? [testIDModifier(testID)] : []),
+      ]}>
+      {placeholder != null ? (
+        <ComposeTextField.Placeholder>
+          <Text color={placeholderColor}>{placeholder}</Text>
+        </ComposeTextField.Placeholder>
+      ) : null}
+    </ComposeTextField>
+  );
+}
+
+function keyboardTypeFor(
+  type: TextFieldKeyboard | undefined,
+  secure: boolean | undefined,
+): TextFieldKeyboardType {
+  if (secure) {
+    return type === 'number' ? 'numberPassword' : 'password';
+  }
+  switch (type) {
+    case 'email':
+      return 'email';
+    case 'number':
+      return 'number';
+    case 'phone':
+      return 'phone';
+    case 'decimal':
+      return 'decimal';
+    case 'url':
+      return 'uri';
+    case 'default':
+    default:
+      return 'text';
+  }
+}

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

@@ -0,0 +1,73 @@
+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 {keyboardTypeFor, useSyncedState} from './shared';
+
+/**
+ * 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`.
+ */
+export function TextField({
+  placeholder,
+  value,
+  onChangeText,
+  onSubmit,
+  disabled,
+  secureTextEntry,
+  keyboardType,
+  autoCapitalize,
+  autoCorrect,
+  multiline,
+  autoFocus,
+  maxLength,
+  accentColor,
+  testID,
+}: TextFieldProps) {
+  const text = useNativeState(value ?? '');
+  useSyncedState(text, value);
+
+  const modifiers: ViewModifier[] = [];
+  if (accentColor) modifiers.push(tint(accentColor));
+  if (keyboardType) modifiers.push(keyboardTypeMod(keyboardTypeFor(keyboardType)));
+  if (autoCorrect === false) modifiers.push(autocorrectionDisabled(true));
+  if (autoCapitalize) modifiers.push(textInputAutocapitalization(autocapitalizationFor(autoCapitalize)));
+  if (onSubmit) modifiers.push(onSubmitMod(() => onSubmit(text.value)));
+  if (disabled) modifiers.push(disabledMod(true));
+
+  if (secureTextEntry) {
+    return (
+      <SecureField
+        text={text}
+        placeholder={placeholder}
+        autoFocus={autoFocus}
+        maxLength={maxLength}
+        onTextChange={onChangeText}
+        modifiers={modifiers}
+        testID={testID}
+      />
+    );
+  }
+
+  return (
+    <SwiftUITextField
+      text={text}
+      placeholder={placeholder}
+      autoFocus={autoFocus}
+      maxLength={maxLength}
+      axis={multiline ? 'vertical' : 'horizontal'}
+      onTextChange={onChangeText}
+      modifiers={modifiers}
+      testID={testID}
+    />
+  );
+}
+
+function autocapitalizationFor(
+  value: TextFieldCapitalize,
+): 'never' | 'words' | 'sentences' | 'characters' {
+  return value === 'none' ? 'never' : value;
+}

package/src/text-field/index.tsx

@@ -0,0 +1,78 @@
+import type {TextFieldProps} from './types';
+import type {TextStyle} from 'react-native';
+
+import {StyleSheet, TextInput} from 'react-native';
+import {fonts, fontWeights, theme, variants} from '../theme';
+import {keyboardTypeFor, useTextValue} from './shared';
+
+/**
+ * On web the field mirrors the native iOS/Android row: a borderless, full-width
+ * input whose placeholder doubles as the label, styled with the shared body
+ * 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({
+  placeholder,
+  value,
+  onChangeText,
+  onSubmit,
+  disabled,
+  secureTextEntry,
+  keyboardType,
+  autoCapitalize,
+  autoCorrect,
+  multiline,
+  autoFocus,
+  maxLength,
+  accentColor,
+  testID,
+  style,
+}: TextFieldProps) {
+  const [current, setValue] = useTextValue(value, onChangeText);
+  const cursor = accentColor ?? (theme.tint as string);
+
+  return (
+    <TextInput
+      value={current}
+      onChangeText={setValue}
+      placeholder={placeholder}
+      placeholderTextColor={theme.tertiaryLabel}
+      editable={!disabled}
+      secureTextEntry={secureTextEntry}
+      keyboardType={keyboardTypeFor(keyboardType)}
+      autoCapitalize={autoCapitalize}
+      autoCorrect={autoCorrect}
+      multiline={multiline}
+      autoFocus={autoFocus}
+      maxLength={maxLength}
+      cursorColor={cursor}
+      selectionColor={cursor}
+      onSubmitEditing={onSubmit ? event => onSubmit(event.nativeEvent.text) : undefined}
+      aria-label={placeholder}
+      testID={testID}
+      style={[styles.input, disabled && styles.disabled, style]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  input: {
+    width: '100%',
+    margin: 0,
+    paddingVertical: 0,
+    // `label` (14px) matches the sibling rows in a `FieldGroup.Section`:
+    // `@expo/ui`'s universal `Text` renders at react-native-web's 14px
+    // default, and rows like `DateTimePicker` use the `label` variant.
+    fontSize: variants.label.fontSize,
+    lineHeight: variants.label.lineHeight,
+    fontFamily: fonts?.sans,
+    fontWeight: fontWeights.normal,
+    color: theme.label,
+    // Web-only: drop the default browser focus ring so the field stays flush
+    // with the surrounding card, matching the iOS Form row.
+    ...({outlineStyle: 'none'} as unknown as TextStyle),
+  },
+  disabled: {
+    opacity: 0.4,
+  },
+});

package/src/text-field/shared.ts

@@ -0,0 +1,83 @@
+import type {TextFieldKeyboard} from './types';
+import type {ObservableState} from '@expo/ui';
+import {useCallback, useEffect, useState} from 'react';
+
+/**
+ * Keyboard variants understood by both React Native's `keyboardType` prop and
+ * SwiftUI's `keyboardType` modifier — the overlap the web and iOS fields share.
+ */
+type AppleKeyboardType =
+  | 'default'
+  | 'email-address'
+  | 'numeric'
+  | 'phone-pad'
+  | 'decimal-pad'
+  | 'url';
+
+/**
+ * Bridges controlled and uncontrolled usage on web, mirroring `useDateValue`.
+ * When `value` is provided the component is controlled; otherwise it falls back
+ * to internal state seeded with an empty string.
+ * @param value - The current value of the field.
+ * @param onChangeText - The function to call when the text changes.
+ * @returns The current text and the function to call when the text changes.
+ */
+export function useTextValue(
+  value: string | undefined,
+  onChangeText: ((text: string) => void) | undefined,
+): [string, (next: string) => void] {
+  const [internal, setInternal] = useState(value ?? '');
+  const current = value ?? internal;
+
+  const setValue = useCallback(
+    (next: string) => {
+      if (value === undefined) {
+        setInternal(next);
+      }
+      onChangeText?.(next);
+    },
+    [value, onChangeText],
+  );
+
+  return [current, setValue];
+}
+
+/**
+ * Pushes a controlled `value` prop into a native `useNativeState` observable so
+ * parent-driven updates reflect in the field. Uncontrolled fields (no `value`)
+ * are left to manage their own state. The native field writes user input back
+ * into the same observable, so this only fires for external changes.
+ * @param state - The observable bound to the native field's text.
+ * @param value - The controlled value, or `undefined` when uncontrolled.
+ */
+export function useSyncedState(state: ObservableState<string>, value: string | undefined): void {
+  useEffect(() => {
+    if (value !== undefined && state.value !== value) {
+      state.value = value;
+    }
+  }, [state, value]);
+}
+
+/**
+ * Maps the conformed keyboard variant to the React Native / SwiftUI keyboard
+ * type, shared by the web and iOS implementations.
+ * @param type - The cross-platform keyboard variant.
+ * @returns The matching `KeyboardTypeOptions` value.
+ */
+export function keyboardTypeFor(type: TextFieldKeyboard | undefined): AppleKeyboardType {
+  switch (type) {
+    case 'email':
+      return 'email-address';
+    case 'number':
+      return 'numeric';
+    case 'phone':
+      return 'phone-pad';
+    case 'decimal':
+      return 'decimal-pad';
+    case 'url':
+      return 'url';
+    case 'default':
+    default:
+      return 'default';
+  }
+}

package/src/text-field/types.ts

@@ -0,0 +1,64 @@
+import type {StyleProp, TextStyle} from 'react-native';
+
+/** Keyboard variant shown while editing, conformed across platforms. */
+export type TextFieldKeyboard =
+  | 'default'
+  | 'email'
+  | 'number'
+  | 'phone'
+  | 'decimal'
+  | 'url';
+
+/** Automatic capitalization behaviour while typing. */
+export type TextFieldCapitalize = 'none' | 'sentences' | 'words' | 'characters';
+
+/**
+ * Cross-platform single/multi-line text input with a conformed iOS-style
+ * appearance — a borderless field whose placeholder doubles as the row label,
+ * exactly the SwiftUI `Form` row look the other platforms emulate. Drop it
+ * straight into a `FieldGroup.Section` alongside other rows.
+ *
+ * The control may be used controlled (pass `value` + `onChangeText`) or
+ * uncontrolled (omit both and it manages its own state).
+ */
+export interface TextFieldProps {
+  /** Placeholder shown when the field is empty, doubling as the row's label. */
+  placeholder?: string;
+  /** Current text (controlled). When omitted the component keeps its own state. */
+  value?: string;
+  /** Called whenever the text changes. */
+  onChangeText?: (text: string) => void;
+  /** Called when the user presses the keyboard return key. Receives the text. */
+  onSubmit?: (text: string) => void;
+  /** Disables editing and dims the field. */
+  disabled?: boolean;
+  /** Masks the input for sensitive values such as passwords. */
+  secureTextEntry?: boolean;
+  /**
+   * Keyboard variant to display.
+   * @default 'default'
+   */
+  keyboardType?: TextFieldKeyboard;
+  /**
+   * Automatic capitalization behaviour.
+   * @default 'sentences'
+   */
+  autoCapitalize?: TextFieldCapitalize;
+  /**
+   * Enables autocorrect / spellcheck suggestions.
+   * @default true
+   */
+  autoCorrect?: boolean;
+  /** Allows multiple lines of input that grow vertically. */
+  multiline?: boolean;
+  /** Focuses the field automatically when mounted. */
+  autoFocus?: boolean;
+  /** Maximum number of characters allowed. Truncates natively as the user types. */
+  maxLength?: number;
+  /** Tint applied to the cursor/selection (web/android) and the field (iOS). */
+  accentColor?: string;
+  /** Identifier used to locate the component in end-to-end tests. */
+  testID?: string;
+  /** Style applied to the text content (web only). */
+  style?: StyleProp<TextStyle>;
+}