@expo/ui 55.0.4 → 55.0.6

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

@@ -1,6 +1,7 @@
 import { requireNativeView } from 'expo';
+import * as React from 'react';
 
-import { ExpoModifier } from '../../types';
+import { type ModifierConfig } from '../../types';
 import { getTextFromChildren } from '../../utils';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
@@ -37,9 +38,56 @@ export type TextDecoration = 'none' | 'underline' | 'lineThrough';
 
 /**
  * Text overflow behavior options.
+ * - 'clip': Clips the overflowing text to fit its container
+ * - 'ellipsis': Uses an ellipsis to indicate that the text has overflowed
+ * - 'visible': Renders overflow text outside its container
  */
 export type TextOverflow = 'clip' | 'ellipsis' | 'visible';
 
+/**
+ * Line break strategy options.
+ * - 'simple': Basic line breaking.
+ * - 'heading': Optimized for short text like headings.
+ * - 'paragraph': Produces more balanced line lengths for body text.
+ */
+export type TextLineBreak = 'simple' | 'heading' | 'paragraph';
+
+/**
+ * Font family for text styling.
+ * Built-in system families: 'default', 'sansSerif', 'serif', 'monospace', 'cursive'.
+ * Custom font families loaded via expo-font can be referenced by name (for example, 'Inter-Bold').
+ */
+export type TextFontFamily =
+  | 'default'
+  | 'sansSerif'
+  | 'serif'
+  | 'monospace'
+  | 'cursive'
+  | (string & {});
+
+/**
+ * Text shadow configuration.
+ * Corresponds to Jetpack Compose's Shadow class.
+ */
+export type TextShadow = {
+  /**
+   * The color of the shadow.
+   */
+  color?: string;
+  /**
+   * The horizontal offset of the shadow in dp.
+   */
+  offsetX?: number;
+  /**
+   * The vertical offset of the shadow in dp.
+   */
+  offsetY?: number;
+  /**
+   * The blur radius of the shadow in dp.
+   */
+  blurRadius?: number;
+};
+
 /**
  * Material 3 Typography scale styles.
  * Corresponds to MaterialTheme.typography in Jetpack Compose.
@@ -62,23 +110,10 @@ export type TypographyStyle =
   | 'labelSmall';
 
 /**
- * Text style properties that can be applied to text.
- * Corresponds to Jetpack Compose's TextStyle.
+ * Shared span-level style properties used by both `TextStyle` and `TextSpanRecord`.
+ * Adding a property here ensures it's available on both parent text and nested spans.
  */
-export type TextStyle = {
-  /**
-   * Material 3 Typography style to use as the base style.
-   * When specified, applies the predefined Material 3 typography style.
-   * Other properties in this style object will override specific values from the typography.
-   *
-   * @example
-   * ```tsx
-   * style={{ typography: "bodyLarge" }}
-   * style={{ typography: "headlineMedium", fontWeight: "bold" }}
-   * ```
-   */
-  typography?: TypographyStyle;
-
+export type TextSpanStyleBase = {
   /**
    * The font size in sp (scale-independent pixels).
    */
@@ -95,9 +130,9 @@ export type TextStyle = {
   fontStyle?: TextFontStyle;
 
   /**
-   * The text alignment.
+   * The font family.
    */
-  textAlign?: TextAlign;
+  fontFamily?: TextFontFamily;
 
   /**
    * The text decoration.
@@ -109,15 +144,60 @@ export type TextStyle = {
    */
   letterSpacing?: number;
 
+  /**
+   * The background color behind the text.
+   */
+  background?: string;
+
+  /**
+   * The shadow applied to the text.
+   */
+  shadow?: TextShadow;
+};
+
+/**
+ * Text style properties that can be applied to text.
+ * Corresponds to Jetpack Compose's `TextStyle`.
+ */
+export type TextStyle = TextSpanStyleBase & {
+  /**
+   * Material 3 Typography style to use as the base style.
+   * When specified, applies the predefined Material 3 typography style.
+   * Other properties in this style object will override specific values from the typography.
+   */
+  typography?: TypographyStyle;
+
+  /**
+   * The text alignment.
+   */
+  textAlign?: TextAlign;
+
   /**
    * The line height in sp.
    */
   lineHeight?: number;
+
+  /**
+   * The line break strategy.
+   */
+  lineBreak?: TextLineBreak;
+};
+
+/**
+ * A record representing a styled text span, sent to the native side.
+ * Can be a leaf (has `text`) or a branch (has `children`).
+ * Style inheritance is handled natively via nested `withStyle` on the Kotlin side.
+ */
+type TextSpanRecord = TextSpanStyleBase & {
+  text?: string;
+  color?: string;
+  children?: TextSpanRecord[];
 };
 
 export type TextProps = {
   /**
-   * The text content to display.
+   * The text content to display. Can be a string, number, or nested `Text` components
+   * for inline styled spans.
    */
   children?: React.ReactNode;
 
@@ -128,9 +208,6 @@ export type TextProps = {
 
   /**
    * How visual overflow should be handled.
-   * - 'clip': Clips the overflowing text to fix its container
-   * - 'ellipsis': Uses an ellipsis to indicate that the text has overflowed
-   * - 'visible': Renders overflow text outside its container
    */
   overflow?: TextOverflow;
 
@@ -160,114 +237,107 @@ export type TextProps = {
   /**
    * Modifiers for the component.
    */
-  modifiers?: ExpoModifier[];
+  modifiers?: ModifierConfig[];
 };
 
-type NativeTextProps = Omit<TextProps, 'children' | 'style'> & {
-  text: string;
-  typography?: TypographyStyle;
-  fontSize?: number;
-  fontWeight?: TextFontWeight;
-  fontStyle?: TextFontStyle;
-  textAlign?: TextAlign;
-  textDecoration?: TextDecoration;
-  letterSpacing?: number;
-  lineHeight?: number;
-};
+type NativeTextProps = Omit<TextProps, 'children' | 'style'> &
+  TextSpanStyleBase & {
+    text?: string;
+    spans?: TextSpanRecord[];
+    typography?: TypographyStyle;
+    textAlign?: TextAlign;
+    lineHeight?: number;
+    lineBreak?: TextLineBreak;
+  };
 
 const TextNativeView: React.ComponentType<NativeTextProps> = requireNativeView(
   'ExpoUI',
   'TextView'
 );
 
+// Constructs tree of spans from nested Text components
+function collectSpans(children: React.ReactNode): TextSpanRecord[] | null {
+  if (children === undefined || children === null) return null;
+
+  const childArray = React.Children.toArray(children);
+  if (childArray.length === 0) return null;
+
+  const hasNestedText = childArray.some(
+    (child) => React.isValidElement(child) && child.type === Text
+  );
+
+  if (!hasNestedText) return null;
+
+  const spans: TextSpanRecord[] = [];
+
+  for (const child of childArray) {
+    if (typeof child === 'string') {
+      spans.push({ text: child });
+    } else if (typeof child === 'number') {
+      spans.push({ text: String(child) });
+    } else if (React.isValidElement(child) && child.type === Text) {
+      const childProps = child.props as TextProps;
+      const span: TextSpanRecord = {
+        color: childProps.color,
+        fontSize: childProps.style?.fontSize,
+        fontWeight: childProps.style?.fontWeight,
+        fontStyle: childProps.style?.fontStyle,
+        fontFamily: childProps.style?.fontFamily,
+        textDecoration: childProps.style?.textDecoration,
+        letterSpacing: childProps.style?.letterSpacing,
+        background: childProps.style?.background,
+        shadow: childProps.style?.shadow,
+      };
+
+      const nestedSpans = collectSpans(childProps.children);
+      if (nestedSpans) {
+        span.children = nestedSpans;
+      } else {
+        span.text = getTextFromChildren(childProps.children) ?? '';
+      }
+
+      spans.push(span);
+    } else if (__DEV__ && React.isValidElement(child)) {
+      console.warn(
+        'Text: Unsupported child element of type "%s" inside <Text>. Only <Text>, string, and number children are supported.',
+        typeof child.type === 'function' ? child.type.name || 'Unknown' : child.type
+      );
+    }
+  }
+
+  return spans.length > 0 ? spans : null;
+}
+
 function transformTextProps(props: TextProps): NativeTextProps {
   const { children, modifiers, style, ...restProps } = props;
 
+  const spans = collectSpans(children);
+
   return {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
-    text: getTextFromChildren(children) ?? '',
+    // When spans are present, use them instead of flat text
+    ...(spans ? { spans } : { text: getTextFromChildren(children) ?? '' }),
     // Extract typography from style (used as base style)
     typography: style?.typography,
     // Flatten other style properties (these override the typography style)
     fontSize: style?.fontSize,
     fontWeight: style?.fontWeight,
     fontStyle: style?.fontStyle,
+    fontFamily: style?.fontFamily,
     textAlign: style?.textAlign,
     textDecoration: style?.textDecoration,
     letterSpacing: style?.letterSpacing,
     lineHeight: style?.lineHeight,
+    lineBreak: style?.lineBreak,
+    background: style?.background,
+    shadow: style?.shadow,
   };
 }
 
 /**
  * Renders a Text component using Jetpack Compose.
- *
- * The Text component provides comprehensive text styling capabilities.
- * The API is aligned with Jetpack Compose's Text composable, where:
- * - Top-level props (color, maxLines, etc.) match Compose's Text parameters
- * - `style` object corresponds to TextStyle, including typography, fontSize, fontWeight, textAlign, etc.
- * - `style.typography` applies Material 3 typography styles (like MaterialTheme.typography)
- *
- * @example
- * Basic usage:
- * ```tsx
- * import { Text } from 'expo-ui';
- *
- * <Text>Hello World</Text>
- * ```
- *
- * @example
- * Using Material 3 Typography (matches Jetpack Compose MaterialTheme.typography):
- * ```tsx
- * <Text style={{ typography: "bodyLarge" }}>Body text</Text>
- * <Text style={{ typography: "headlineMedium" }}>Headline</Text>
- * <Text style={{ typography: "titleSmall" }}>Small title</Text>
- * ```
- *
- * @example
- * Typography with style overrides:
- * ```tsx
- * <Text
- *   color="#007AFF"
- *   style={{
- *     typography: "bodyLarge",
- *     fontWeight: "bold"  // Override the typography's font weight
- *   }}
- * >
- *   Custom styled body text
- * </Text>
- * ```
- *
- * @example
- * With custom style object (matches Jetpack Compose TextStyle):
- * ```tsx
- * <Text
- *   color="#007AFF"
- *   style={{
- *     fontSize: 18,
- *     fontWeight: "bold",
- *     textAlign: "center",
- *     letterSpacing: 1.2
- *   }}
- *   modifiers={[ExpoUI.padding(16)]}
- * >
- *   Styled text
- * </Text>
- * ```
- *
- * @example
- * Text truncation with ellipsis:
- * ```tsx
- * <Text
- *   maxLines={2}
- *   overflow="ellipsis"
- * >
- *   This is a very long text that will be truncated after two lines
- *   with an ellipsis at the end to indicate there's more content...
- * </Text>
- * ```
  */
 export function Text(props: TextProps) {
   return <TextNativeView {...transformTextProps(props)} />;

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

@@ -4,6 +4,16 @@ import { Ref } from 'react';
 import { ExpoModifier, ViewEvent } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
+type SlotNativeViewProps = {
+  slotName: string;
+  children: React.ReactNode;
+};
+
+const SlotNativeView: React.ComponentType<SlotNativeViewProps> = requireNativeView(
+  'ExpoUI',
+  'SlotView'
+);
+
 /**
  * @hidden Not used anywhere yet.
  */
@@ -89,17 +99,22 @@ export type TextInputProps = {
    * @platform android
    */
   autoCapitalize?: 'characters' | 'none' | 'sentences' | 'unspecified' | 'words';
-
   /**
-   * Modifiers for the component.
+   * Placeholder text shown inside the field when empty and focused.
+   *
    */
+  placeholder?: string;
+  /** Modifiers for the component */
   modifiers?: ExpoModifier[];
+  /**
+   * Slot children (e.g. `TextInput.Label`).
+   */
+  children?: React.ReactNode;
 };
 
-export type NativeTextInputProps = Omit<TextInputProps, 'onChangeText'> & {} & ViewEvent<
-    'onValueChanged',
-    { value: string }
-  >;
+export type NativeTextInputProps = Omit<TextInputProps, 'onChangeText' | 'children'> & {
+  children?: React.ReactNode;
+} & ViewEvent<'onValueChanged', { value: string }>;
 
 // We have to work around the `role` and `onPress` props being reserved by React Native.
 const TextInputNativeView: React.ComponentType<NativeTextInputProps> = requireNativeView(
@@ -108,20 +123,35 @@ const TextInputNativeView: React.ComponentType<NativeTextInputProps> = requireNa
 );
 
 function transformTextInputProps(props: TextInputProps): NativeTextInputProps {
-  const { modifiers, ...restProps } = props;
+  const { modifiers, children, ...restProps } = props;
   return {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
+    children,
     onValueChanged: (event) => {
       props.onChangeText?.(event.nativeEvent.value);
     },
   };
 }
 
+/**
+ * A label slot for `TextInput`.
+ * The label floats above the text field when focused or filled.
+ *
+ * @platform android
+ */
+function Label(props: { children: React.ReactNode }) {
+  return <SlotNativeView slotName="label">{props.children}</SlotNativeView>;
+}
+
 /**
  * Renders a `TextInput` component.
  */
-export function TextInput(props: TextInputProps) {
+function TextInputComponent(props: TextInputProps) {
   return <TextInputNativeView {...transformTextInputProps(props)} />;
 }
+
+TextInputComponent.Label = Label;
+
+export { TextInputComponent as TextInput };

package/src/jetpack-compose/index.ts

@@ -1,7 +1,7 @@
 import './MaterialSymbolsAssetsTransformer.fx';
 
 export * from './AlertDialog';
-export * from './BasicAlertDialog';
+export { BasicAlertDialog, type BasicAlertDialogProps } from './BasicAlertDialog';
 export * from './Card';
 export * from './Checkbox';
 export * from './Chip';
@@ -32,7 +32,7 @@ export * from './FloatingActionButton';
 export * from './PullToRefreshBox';
 export * from './RadioButton';
 export * from './Surface';
-export * from './Text';
+export { type TextProps, Text } from './Text';
 
 export * from './AnimatedVisibility';
 export * from './Box';

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

@@ -104,6 +104,16 @@ export const wrapContentWidth = (alignment?: 'start' | 'centerHorizontally' | 'e
 export const wrapContentHeight = (alignment?: 'top' | 'centerVertically' | 'bottom') =>
   createModifier('wrapContentHeight', alignment ? { alignment } : {});
 
+// =============================================================================
+// Inset Modifiers
+// =============================================================================
+
+/**
+ * Adds padding to avoid the software keyboard (IME).
+ * When the keyboard is visible, padding is added to keep content above it.
+ */
+export const imePadding = () => createModifier('imePadding');
+
 // =============================================================================
 // Position Modifiers
 // =============================================================================

package/src/swift-ui/modifiers/index.ts

@@ -495,7 +495,7 @@ export const grayscale = (amount: number) => createModifier('grayscale', { amoun
 
 /**
  * Sets the button style for button views.
- * @param style - The button style.
+ * @param style - The button style. `'glass'` and `'glassProminent'` are available on iOS 26+ and tvOS 26+ only.
  * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/buttonstyle(_:)).
  */
 export const buttonStyle = (

package/src/types.ts

@@ -23,3 +23,30 @@ export interface ModifierConfig {
  * with JSON Config pattern for better DX and platform consistency.
  */
 export type ExpoModifier = ModifierConfig;
+
+/**
+ * Properties for the dialog window, matching `DialogProperties` in Compose.
+ */
+export type DialogProperties = {
+  /**
+   * Whether the dialog can be dismissed by pressing the back button.
+   * @default true
+   */
+  dismissOnBackPress?: boolean;
+  /**
+   * Whether the dialog can be dismissed by clicking outside of it.
+   * @default true
+   */
+  dismissOnClickOutside?: boolean;
+  /**
+   * Whether the dialog should use the platform default width.
+   * @default true
+   */
+  usePlatformDefaultWidth?: boolean;
+  /**
+   * Whether the dialog's decor fits system windows (status bar, navigation bar, and more).
+   * When `true`, the dialog's content will be inset to avoid overlapping with system UI.
+   * @default true
+   */
+  decorFitsSystemWindows?: boolean;
+};

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.4/expo.modules.ui-55.0.4-sources.jar.md5

@@ -1 +0,0 @@
-137fa3f768ea1d63be1de27d7d663a43

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.4/expo.modules.ui-55.0.4-sources.jar.sha1

@@ -1 +0,0 @@
-d37f422ef8d7251d743ce6bbee5e16230ee6d654

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.4/expo.modules.ui-55.0.4-sources.jar.sha256

@@ -1 +0,0 @@
-2798646e8f071faefc4a8c8678182ac8aa59fb458469aa6cc088658f4337ada2

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.4/expo.modules.ui-55.0.4-sources.jar.sha512

@@ -1 +0,0 @@
-3d3bc9ee569cd399519716c66d92850b7bdde1ec0b0c328b938044699727988e55dbafec203f8f1b4613dd361bcfec03a21c084e031d73d95c45b982bd8ccd76

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.4/expo.modules.ui-55.0.4.aar.md5

@@ -1 +0,0 @@
-10502ee86098bcfdce95a529c46261bb

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.4/expo.modules.ui-55.0.4.aar.sha1

@@ -1 +0,0 @@
-734807c9b8517ef0239b2f71af20b03bef6fa322

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.4/expo.modules.ui-55.0.4.aar.sha256

@@ -1 +0,0 @@
-7ebaf9bde2723bcb47dd8a3cf5ffbdcf0f81b2d00b9db2926469cb968da468bf

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.4/expo.modules.ui-55.0.4.aar.sha512

@@ -1 +0,0 @@
-5ef7ef206deaa6dfef5a2e05e537a30f0403374ac99fdaa68f1c9e93971f6b61fde7ca393032684eb926a3f9ab5f54f706eb6dd8c3908c26f4cb40408401a2f0

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.4/expo.modules.ui-55.0.4.module.md5

@@ -1 +0,0 @@
-8e56924bfbdfce193f64db998c3a9eed

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.4/expo.modules.ui-55.0.4.module.sha1

@@ -1 +0,0 @@
-b832195b632ff8761b0a6c59d4a12c0bbfb38f69

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.4/expo.modules.ui-55.0.4.module.sha256

@@ -1 +0,0 @@
-3cde2316fb065490b2bf67953e88eb1c0490df22f69928632b795e760e13a9eb

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.4/expo.modules.ui-55.0.4.module.sha512

@@ -1 +0,0 @@
-1cd6df7a2b2207a6167ddd1f4f34c37745a18fb16c125d58848cf3146fd8a11f43ccdc15f4c1a352a0d55efb1d2df382df19b30051197081b90a52077cb4a6e9

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.4/expo.modules.ui-55.0.4.pom.md5

@@ -1 +0,0 @@
-d5d19d69bd1c2c6b960efb092f40bbe1

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.4/expo.modules.ui-55.0.4.pom.sha1

@@ -1 +0,0 @@
-31874fcef8f1e3fef61c13fe7d64a32ac62819ce

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.4/expo.modules.ui-55.0.4.pom.sha256

@@ -1 +0,0 @@
-16bf7ce47844a5483c85b20fad391cfc6c74912b344eddb1e95f70395d9e1c68

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.4/expo.modules.ui-55.0.4.pom.sha512

@@ -1 +0,0 @@
-f415dd7401f64dcab069526d91ecb1a42d76946ccf955930887bb74c84ac0cc3a7be6c13185cd34105466d1378532f738620c23cf6caa83444088a36d98acdb9