@expo/ui 56.0.16 → 56.0.18

package/src/community/slider/Slider.ios.tsx

@@ -32,7 +32,7 @@ export function Slider(props: SliderProps) {
     modifiers.push(tintModifier(minimumTrackTintColor as string));
   }
   return (
-    <Host matchContents={{ vertical: true }} style={hostStyle}>
+    <Host matchContents={{ vertical: true }} style={hostStyle} ignoreSafeArea="all">
       <SwiftUISlider
         value={value}
         min={minimumValue}

package/src/jetpack-compose/ModalBottomSheet/index.tsx

@@ -62,6 +62,12 @@ export type ModalBottomSheetProps = {
    * @default false
    */
   skipPartiallyExpanded?: boolean;
+  /**
+   * Opens the sheet fully expanded on first composition. Ignored when `skipPartiallyExpanded` is `true`.
+   * @default false
+   * @platform android
+   */
+  initialFullyExpanded?: boolean;
   /**
    * The background color of the bottom sheet.
    */
@@ -111,6 +117,7 @@ function transformProps(props: ModalBottomSheetProps): NativeModalBottomSheetPro
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
     skipPartiallyExpanded: props.skipPartiallyExpanded ?? false,
+    initialFullyExpanded: props.initialFullyExpanded ?? false,
     onDismissRequest: () => {
       onDismissRequest?.();
     },

package/src/jetpack-compose/RNHostView/index.tsx

@@ -1,5 +1,6 @@
 import { requireNativeView } from 'expo';
 import type { ReactElement, ComponentType } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 
 import type { ModifierConfig } from '../../types';
 import type { PrimitiveBaseProps } from '../layout';
@@ -21,6 +22,13 @@ export interface RNHostProps extends PrimitiveBaseProps {
    * Modifiers for the component.
    */
   modifiers?: ModifierConfig[];
+  /**
+   * Style applied to the host view's React Native shadow node. Useful for
+   * controlling its layout position (e.g. `position: 'absolute'`) so the shadow
+   * layout matches where the hosting Compose component draws the content —
+   * important for `measure()`-based hit-testing such as `Pressable`.
+   */
+  style?: StyleProp<ViewStyle>;
 }
 
 type NativeRNHostProps = RNHostProps;

package/src/jetpack-compose/TextField/BasicTextField.tsx

@@ -0,0 +1,118 @@
+import { requireNativeView } from 'expo';
+import type { ColorValue } from 'react-native';
+
+import {
+  type CommonNativeTextFieldProps,
+  type CommonTextFieldProperties,
+  type TextFieldRef,
+  useCommonTextFieldProps,
+} from './shared';
+import { Slot } from '../SlotView';
+
+// region Types
+
+/**
+ * Imperative methods for `BasicTextField`. Identical to {@link TextFieldRef}.
+ */
+export type BasicTextFieldRef = TextFieldRef;
+
+/**
+ * Props for `BasicTextField`. Mirrors Compose's `BasicTextField`: a bare,
+ * unstyled text field with no Material chrome (no container, indicator, or
+ * built-in padding). Shares {@link CommonTextFieldProperties} with `TextField` and
+ * `OutlinedTextField`; use `BasicTextField.DecorationBox` to add your own
+ * decoration.
+ */
+export type BasicTextFieldProps = CommonTextFieldProperties & {
+  /**
+   * Color of the text cursor. Maps to Compose's `cursorBrush` via
+   * `SolidColor(color)`. Defaults to the theme's primary color
+   * (`MaterialTheme.colorScheme.primary`) so it stays visible in light and dark.
+   */
+  cursorColor?: ColorValue;
+};
+
+// endregion Types
+
+// region Native
+
+type NativeBasicTextFieldProps = Omit<
+  BasicTextFieldProps,
+  | 'value'
+  | 'selection'
+  | 'onValueChange'
+  | 'onFocusChanged'
+  | 'onSelectionChange'
+  | 'keyboardActions'
+  | 'children'
+> &
+  CommonNativeTextFieldProps;
+
+const BasicTextFieldNativeView: React.ComponentType<NativeBasicTextFieldProps> = requireNativeView(
+  'ExpoUI',
+  'BasicTextFieldView'
+);
+
+const InnerTextFieldNativeView: React.ComponentType<object> = requireNativeView(
+  'ExpoUI',
+  'InnerTextFieldView'
+);
+
+const PlaceholderNativeView: React.ComponentType<{ children?: React.ReactNode }> =
+  requireNativeView('ExpoUI', 'PlaceholderView');
+
+function useTransformedProps(props: BasicTextFieldProps): NativeBasicTextFieldProps {
+  return useCommonTextFieldProps(props);
+}
+
+// endregion Native
+
+// region Slot components
+
+/**
+ * Wraps the editable text with custom decoration. Maps to Compose's
+ * `decorationBox`. Place {@link InnerTextField} inside it where the text
+ * should render.
+ */
+function DecorationBox(props: { children: React.ReactNode }) {
+  return <Slot slotName="decorationBox">{props.children}</Slot>;
+}
+
+/**
+ * The editable text itself, placed wherever you want it inside
+ * {@link DecorationBox}. Maps to the `innerTextField` lambda Compose passes to
+ * `decorationBox`.
+ */
+function InnerTextField() {
+  return <InnerTextFieldNativeView />;
+}
+
+/**
+ * A placeholder shown only while the field is empty. Place it inside
+ * {@link DecorationBox}, typically overlaying {@link InnerTextField}. Its
+ * visibility is toggled natively from the field's text, so it stays correct for
+ * every change — typing, `clear()`, `setText`, and writes to the `value`
+ * observable — without a JS round-trip.
+ */
+function Placeholder(props: { children: React.ReactNode }) {
+  return <PlaceholderNativeView>{props.children}</PlaceholderNativeView>;
+}
+
+// endregion Slot components
+
+// region Component
+
+/**
+ * A bare, unstyled Compose `BasicTextField` with no Material decoration.
+ */
+function BasicTextFieldComponent(props: BasicTextFieldProps) {
+  return <BasicTextFieldNativeView {...useTransformedProps(props)} />;
+}
+
+BasicTextFieldComponent.DecorationBox = DecorationBox;
+BasicTextFieldComponent.InnerTextField = InnerTextField;
+BasicTextFieldComponent.Placeholder = Placeholder;
+
+// endregion Component
+
+export { BasicTextFieldComponent as BasicTextField };

package/src/jetpack-compose/TextField/TextField.tsx

@@ -0,0 +1,198 @@
+import { requireNativeView } from 'expo';
+import type { ColorValue } from 'react-native';
+
+import {
+  type CommonNativeTextFieldProps,
+  type CommonTextFieldProperties,
+  useCommonTextFieldProps,
+} from './shared';
+import { type ObservableState } from '../../State';
+import { parseJSXShape, type ShapeJSXElement, type ShapeRecordProps } from '../Shape';
+import { Slot } from '../SlotView';
+
+// region Types
+
+/**
+ * Colors for `TextField` and `OutlinedTextField`.
+ * Maps to `TextFieldColors` in Compose, shared by both variants.
+ */
+export type TextFieldColors = {
+  focusedTextColor?: ColorValue;
+  unfocusedTextColor?: ColorValue;
+  disabledTextColor?: ColorValue;
+  errorTextColor?: ColorValue;
+  focusedContainerColor?: ColorValue;
+  unfocusedContainerColor?: ColorValue;
+  disabledContainerColor?: ColorValue;
+  errorContainerColor?: ColorValue;
+  cursorColor?: ColorValue;
+  errorCursorColor?: ColorValue;
+  focusedIndicatorColor?: ColorValue;
+  unfocusedIndicatorColor?: ColorValue;
+  disabledIndicatorColor?: ColorValue;
+  errorIndicatorColor?: ColorValue;
+  focusedLeadingIconColor?: ColorValue;
+  unfocusedLeadingIconColor?: ColorValue;
+  disabledLeadingIconColor?: ColorValue;
+  errorLeadingIconColor?: ColorValue;
+  focusedTrailingIconColor?: ColorValue;
+  unfocusedTrailingIconColor?: ColorValue;
+  disabledTrailingIconColor?: ColorValue;
+  errorTrailingIconColor?: ColorValue;
+  focusedLabelColor?: ColorValue;
+  unfocusedLabelColor?: ColorValue;
+  disabledLabelColor?: ColorValue;
+  errorLabelColor?: ColorValue;
+  focusedPlaceholderColor?: ColorValue;
+  unfocusedPlaceholderColor?: ColorValue;
+  disabledPlaceholderColor?: ColorValue;
+  errorPlaceholderColor?: ColorValue;
+  focusedSupportingTextColor?: ColorValue;
+  unfocusedSupportingTextColor?: ColorValue;
+  disabledSupportingTextColor?: ColorValue;
+  errorSupportingTextColor?: ColorValue;
+  focusedPrefixColor?: ColorValue;
+  unfocusedPrefixColor?: ColorValue;
+  disabledPrefixColor?: ColorValue;
+  errorPrefixColor?: ColorValue;
+  focusedSuffixColor?: ColorValue;
+  unfocusedSuffixColor?: ColorValue;
+  disabledSuffixColor?: ColorValue;
+  errorSuffixColor?: ColorValue;
+};
+
+// Material props inlined per variant (not a shared named base) so docs render them directly.
+export type TextFieldProps = CommonTextFieldProperties & {
+  /** @default false */
+  isError?: boolean;
+  /**
+   * Shape used for the field's container outline/fill. Use the helpers from
+   * `Shape` (for example, `<Shape.Pill />` or `<Shape.RoundedCorner cornerRadii={...} />`).
+   * Defaults to the Material `OutlinedTextFieldDefaults.shape`/`TextFieldDefaults.shape`.
+   */
+  shape?: ShapeJSXElement;
+  colors?: TextFieldColors;
+};
+
+export type OutlinedTextFieldProps = CommonTextFieldProperties & {
+  /** @default false */
+  isError?: boolean;
+  /**
+   * Shape used for the field's container outline/fill. Use the helpers from
+   * `Shape` (for example, `<Shape.Pill />` or `<Shape.RoundedCorner cornerRadii={...} />`).
+   * Defaults to the Material `OutlinedTextFieldDefaults.shape`/`TextFieldDefaults.shape`.
+   */
+  shape?: ShapeJSXElement;
+  colors?: TextFieldColors;
+};
+
+// endregion Types
+
+// region Native
+
+type NativeTextFieldProps = Omit<
+  TextFieldProps,
+  | 'value'
+  | 'selection'
+  | 'onValueChange'
+  | 'onFocusChanged'
+  | 'onSelectionChange'
+  | 'keyboardActions'
+  | 'children'
+  | 'shape'
+> &
+  CommonNativeTextFieldProps & {
+    variant: 'filled' | 'outlined';
+    colors?: TextFieldColors;
+    shape?: ShapeRecordProps;
+  };
+
+const TextFieldNativeView: React.ComponentType<NativeTextFieldProps> = requireNativeView(
+  'ExpoUI',
+  'TextFieldView'
+);
+
+function useTransformedProps(
+  props: TextFieldProps | OutlinedTextFieldProps,
+  variant: 'filled' | 'outlined'
+): NativeTextFieldProps {
+  const { shape, ...rest } = props;
+  return {
+    ...useCommonTextFieldProps(rest),
+    variant,
+    shape: parseJSXShape(shape),
+  };
+}
+
+// endregion Native
+
+// region Slot components
+
+function Label(props: { children: React.ReactNode }) {
+  return <Slot slotName="label">{props.children}</Slot>;
+}
+
+function Placeholder(props: { children: React.ReactNode }) {
+  return <Slot slotName="placeholder">{props.children}</Slot>;
+}
+
+function LeadingIcon(props: { children: React.ReactNode }) {
+  return <Slot slotName="leadingIcon">{props.children}</Slot>;
+}
+
+function TrailingIcon(props: { children: React.ReactNode }) {
+  return <Slot slotName="trailingIcon">{props.children}</Slot>;
+}
+
+function Prefix(props: { children: React.ReactNode }) {
+  return <Slot slotName="prefix">{props.children}</Slot>;
+}
+
+function Suffix(props: { children: React.ReactNode }) {
+  return <Slot slotName="suffix">{props.children}</Slot>;
+}
+
+function SupportingText(props: { children: React.ReactNode }) {
+  return <Slot slotName="supportingText">{props.children}</Slot>;
+}
+
+// endregion Slot components
+
+// region Components
+
+/**
+ * A Material3 `TextField`.
+ */
+function TextFieldComponent(props: TextFieldProps) {
+  return <TextFieldNativeView {...useTransformedProps(props, 'filled')} />;
+}
+
+TextFieldComponent.Label = Label;
+TextFieldComponent.Placeholder = Placeholder;
+TextFieldComponent.LeadingIcon = LeadingIcon;
+TextFieldComponent.TrailingIcon = TrailingIcon;
+TextFieldComponent.Prefix = Prefix;
+TextFieldComponent.Suffix = Suffix;
+TextFieldComponent.SupportingText = SupportingText;
+
+/**
+ * A Material3 `OutlinedTextField` with a transparent background and border outline.
+ */
+function OutlinedTextFieldComponent(props: OutlinedTextFieldProps) {
+  return <TextFieldNativeView {...useTransformedProps(props, 'outlined')} />;
+}
+
+OutlinedTextFieldComponent.Label = Label;
+OutlinedTextFieldComponent.Placeholder = Placeholder;
+OutlinedTextFieldComponent.LeadingIcon = LeadingIcon;
+OutlinedTextFieldComponent.TrailingIcon = TrailingIcon;
+OutlinedTextFieldComponent.Prefix = Prefix;
+OutlinedTextFieldComponent.Suffix = Suffix;
+OutlinedTextFieldComponent.SupportingText = SupportingText;
+
+// endregion Components
+
+export { TextFieldComponent as TextField, OutlinedTextFieldComponent as OutlinedTextField };
+
+// Exported for docs api data
+export { type ObservableState };

package/src/jetpack-compose/TextField/index.ts

@@ -0,0 +1,19 @@
+export {
+  TextField,
+  OutlinedTextField,
+  type TextFieldColors,
+  type TextFieldProps,
+  type OutlinedTextFieldProps,
+  type ObservableState,
+} from './TextField';
+export { BasicTextField, type BasicTextFieldProps, type BasicTextFieldRef } from './BasicTextField';
+export type {
+  TextFieldRef,
+  TextFieldCapitalization,
+  TextFieldImeAction,
+  TextFieldKeyboardType,
+  TextFieldKeyboardOptions,
+  TextFieldKeyboardActions,
+  TextFieldTextStyle,
+  CommonTextFieldProperties,
+} from './shared';