@expo/ui 55.0.0-preview.6 → 55.0.0

package/local-maven-repo/expo/modules/ui/expo.modules.ui/{55.0.0-preview.6/expo.modules.ui-55.0.0-preview.6.pom → 55.0.0/expo.modules.ui-55.0.0.pom}

@@ -9,16 +9,28 @@
   <modelVersion>4.0.0</modelVersion>
   <groupId>expo.modules.ui</groupId>
   <artifactId>expo.modules.ui</artifactId>
-  <version>55.0.0-preview.6</version>
+  <version>55.0.0</version>
   <packaging>aar</packaging>
   <name>expo.modules.ui</name>
   <url>https://github.com/expo/expo</url>
+  <organization>
+    <name>650 Industries, Inc. (“Expo”)</name>
+    <url>https://expo.dev/home</url>
+  </organization>
   <licenses>
     <license>
       <name>MIT License</name>
       <url>https://github.com/expo/expo/blob/main/LICENSE</url>
+      <distribution>https://github.com/expo/expo/blob/main/LICENSE</distribution>
     </license>
   </licenses>
+  <developers>
+    <developer>
+      <name>Expo Maintainers</name>
+      <email>support@expo.dev</email>
+      <url>https://github.com/orgs/expo/people</url>
+    </developer>
+  </developers>
   <scm>
     <connection>https://github.com/expo/expo.git</connection>
     <developerConnection>https://github.com/expo/expo.git</developerConnection>
@@ -31,34 +43,39 @@
       <version>2.1.20</version>
       <scope>runtime</scope>
     </dependency>
+    <dependency>
+      <groupId>com.facebook.react</groupId>
+      <artifactId>react-android</artifactId>
+      <scope>runtime</scope>
+    </dependency>
     <dependency>
       <groupId>androidx.compose.foundation</groupId>
       <artifactId>foundation-android</artifactId>
-      <version>1.9.1</version>
+      <version>1.10.2</version>
       <scope>runtime</scope>
     </dependency>
     <dependency>
       <groupId>androidx.compose.ui</groupId>
       <artifactId>ui-android</artifactId>
-      <version>1.9.1</version>
+      <version>1.10.2</version>
       <scope>runtime</scope>
     </dependency>
     <dependency>
       <groupId>androidx.compose.material3</groupId>
       <artifactId>material3</artifactId>
-      <version>1.5.0-alpha08</version>
+      <version>1.5.0-alpha13</version>
       <scope>runtime</scope>
     </dependency>
     <dependency>
       <groupId>androidx.compose.material3</groupId>
       <artifactId>material3-android</artifactId>
-      <version>1.5.0-alpha08</version>
+      <version>1.5.0-alpha13</version>
       <scope>runtime</scope>
     </dependency>
     <dependency>
       <groupId>androidx.lifecycle</groupId>
       <artifactId>lifecycle-runtime</artifactId>
-      <version>2.9.3</version>
+      <version>2.10.0</version>
       <scope>runtime</scope>
     </dependency>
     <dependency>
@@ -70,7 +87,19 @@
     <dependency>
       <groupId>androidx.graphics</groupId>
       <artifactId>graphics-shapes</artifactId>
-      <version>1.0.1</version>
+      <version>1.1.0</version>
+      <scope>runtime</scope>
+    </dependency>
+    <dependency>
+      <groupId>com.squareup.okhttp3</groupId>
+      <artifactId>okhttp</artifactId>
+      <version>4.9.2</version>
+      <scope>runtime</scope>
+    </dependency>
+    <dependency>
+      <groupId>androidx.core</groupId>
+      <artifactId>core-ktx</artifactId>
+      <version>1.17.0</version>
       <scope>runtime</scope>
     </dependency>
   </dependencies>

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

@@ -0,0 +1 @@
+f252338c6e97eeea2181d83d5c5493f2

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

@@ -0,0 +1 @@
+a69749732bbb74d9ef23ce0c1508c38bb41707d9

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

@@ -0,0 +1 @@
+8ef946a320955f52ed239de327c0006d9806229a7c6a2b25f0080634dab7ed82

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

@@ -0,0 +1 @@
+b1cbb30b5a78b049422d1589a4285d58c6a56ac85f07689e4a372e11b3bad54efc4482e6f1c2c3b8bace60e9c4fc173cae08ba7b235826b957e28f7f37bdcaad

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml

@@ -3,11 +3,11 @@
   <groupId>expo.modules.ui</groupId>
   <artifactId>expo.modules.ui</artifactId>
   <versioning>
-    <latest>55.0.0-preview.6</latest>
-    <release>55.0.0-preview.6</release>
+    <latest>55.0.0</latest>
+    <release>55.0.0</release>
     <versions>
-      <version>55.0.0-preview.6</version>
+      <version>55.0.0</version>
     </versions>
-    <lastUpdated>20260216170142</lastUpdated>
+    <lastUpdated>20260225012649</lastUpdated>
   </versioning>
 </metadata>

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.md5

@@ -1 +1 @@
-fb29da15a6b0af32c432e7688e7f6c7a
+be097b1ca9d6557ce603d9fa8337d298

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.sha1

@@ -1 +1 @@
-24f63827173ead87114fdcb3faecdd22c8155f23
+ffb870c3e214c6335eda475340ecf91bb97a95e1

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.sha256

@@ -1 +1 @@
-5c2f32f27d0891f18819068b66db579fc30aff97ae6e2ecbe34f4dbf44ae44a9
+9fbe3d7daf56d306b01466ba459a1ca9a073df5d11712ba9746a45f54383c32f

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.sha512

@@ -1 +1 @@
-df0a925c4d2c01c42edede4434a6e436f93a6bdeab2b75eab6b890504b5d2d57d1ce508240b4283737d333cf1ea81308f2b8c331bc475560e852dd03563a7387
+fbfe14ec891c0a4f30a9da397ed8fad0422f6e68ab4d93830c4340800bad782a8fdfc84a5c1fb989966f1a38bcca1136353d0bfae3d9029885f57d663ec0af4a

package/package.json

@@ -1,8 +1,10 @@
 {
   "name": "@expo/ui",
-  "version": "55.0.0-preview.6",
+  "version": "55.0.0",
   "description": "A collection of UI components",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.fx.js"
+  ],
   "exports": {
     "./package.json": "./package.json",
     "./swift-ui": {
@@ -58,5 +60,5 @@
     "react": "*",
     "react-native": "*"
   },
-  "gitHead": "928cc951854450f3c72e00e8e420e567fabd1f8c"
+  "gitHead": "b183e5cbd95eb6ee54a878291c7077d8d63e4850"
 }

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

@@ -2,6 +2,7 @@ import { requireNativeView } from 'expo';
 import { type ColorValue } from 'react-native';
 
 import { ExpoModifier } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
 
 export type AlertDialogButtonColors = {
   /**
@@ -67,9 +68,18 @@ const AlertDialogNativeView: React.ComponentType<NativeAlertDialogProps> = requi
   'AlertDialogView'
 );
 
+function transformProps(props: AlertDialogProps): NativeAlertDialogProps {
+  const { modifiers, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+  };
+}
+
 /**
  * Renders an `AlertDialog` component.
  */
 export function AlertDialog(props: AlertDialogProps) {
-  return <AlertDialogNativeView {...props} />;
+  return <AlertDialogNativeView {...transformProps(props)} />;
 }

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

@@ -0,0 +1,51 @@
+import { requireNativeView } from 'expo';
+
+import { type ViewEvent, type ExpoModifier } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+export type BasicAlertDialogProps = {
+  /**
+   * The content to display inside the dialog.
+   */
+  children?: React.ReactNode;
+  /**
+   * Callback that is called when the user tries to dismiss the dialog
+   * (e.g. by tapping outside of it or pressing the back button).
+   */
+  onDismissRequest?: () => void;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ExpoModifier[];
+};
+
+type NativeBasicAlertDialogProps = Omit<BasicAlertDialogProps, 'onDismissRequest'> &
+  ViewEvent<
+    'onDismissRequest',
+    {
+      onDismissRequest?: () => void;
+    }
+  >;
+
+const BasicAlertDialogNativeView: React.ComponentType<NativeBasicAlertDialogProps> =
+  requireNativeView('ExpoUI', 'BasicAlertDialogView');
+
+function transformProps(props: BasicAlertDialogProps): NativeBasicAlertDialogProps {
+  const { modifiers, onDismissRequest, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    onDismissRequest: () => {
+      onDismissRequest?.();
+    },
+    ...restProps,
+  };
+}
+
+/**
+ * A basic alert dialog that provides a blank container for custom content.
+ * Unlike `AlertDialog`, this component does not have structured title/text/buttons slots.
+ */
+export function BasicAlertDialog(props: BasicAlertDialogProps) {
+  return <BasicAlertDialogNativeView {...transformProps(props)} />;
+}

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

@@ -5,6 +5,7 @@ import { MaterialIcon } from './types';
 import { ExpoModifier, ViewEvent } from '../../types';
 import { getTextFromChildren } from '../../utils';
 import { parseJSXShape, ShapeJSXElement, ShapeRecordProps } from '../Shape';
+import { createViewModifierEventListener } from '../modifiers/utils';
 
 /**
  * The built-in button styles available on Android.
@@ -96,12 +97,23 @@ const ButtonNativeView: React.ComponentType<NativeButtonProps> = requireNativeVi
  * @hidden
  */
 export function transformButtonProps(props: ButtonProps): NativeButtonProps {
-  const { children, onPress, leadingIcon, trailingIcon, systemImage, shape, ...restProps } = props;
+  const {
+    children,
+    onPress,
+    leadingIcon,
+    trailingIcon,
+    systemImage,
+    shape,
+    modifiers,
+    ...restProps
+  } = props;
 
   // Handle backward compatibility: systemImage maps to leadingIcon
   const finalLeadingIcon = leadingIcon ?? systemImage;
 
   return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
     text: getTextFromChildren(children) ?? '',
     children: getTextFromChildren(children) !== undefined ? undefined : children,

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

@@ -0,0 +1,62 @@
+import { requireNativeView } from 'expo';
+import { type ColorValue } from 'react-native';
+
+import { ExpoModifier } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+/**
+ * Colors for card's core elements.
+ */
+export type CardElementColors = {
+  containerColor?: ColorValue;
+  contentColor?: ColorValue;
+};
+
+export type CardProps = {
+  /**
+   * The content to display inside the card.
+   */
+  children?: React.ReactNode;
+  /**
+   * The variant of the card.
+   * - 'default' - A filled card with no outline.
+   * - 'elevated' - A filled card with elevation/shadow.
+   * - 'outlined' - A card with an outline border.
+   * @default 'default'
+   */
+  variant?: 'default' | 'elevated' | 'outlined';
+  /**
+   * The background color of the card.
+   */
+  color?: ColorValue;
+  /**
+   * Colors for card's core elements.
+   */
+  elementColors?: CardElementColors;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ExpoModifier[];
+};
+
+type NativeCardProps = CardProps;
+const CardNativeView: React.ComponentType<NativeCardProps> = requireNativeView(
+  'ExpoUI',
+  'CardView'
+);
+
+function transformProps(props: CardProps): NativeCardProps {
+  const { modifiers, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+  };
+}
+
+/**
+ * A card component that provides a surface for content.
+ */
+export function Card(props: CardProps) {
+  return <CardNativeView {...transformProps(props)} />;
+}

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

@@ -1,6 +1,7 @@
 import { requireNativeView } from 'expo';
 
 import { ExpoModifier } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
 
 export type PaddingValuesRecord = {
   start?: number;
@@ -45,7 +46,12 @@ const CarouselNativeView: React.ComponentType<NativeCarouselProps> = requireNati
 );
 
 export function transformCarouselProps(props: CarouselProps): NativeCarouselProps {
-  return { ...props } as NativeCarouselProps;
+  const { modifiers, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+  };
 }
 
 export function Carousel(props: CarouselProps) {

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

@@ -2,6 +2,7 @@ import { requireNativeView } from 'expo';
 import React from 'react';
 
 import { ExpoModifier } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
 
 /**
  * Available text style variants for chip labels.
@@ -71,14 +72,20 @@ export interface ChipProps {
   onDismiss?: () => void;
 }
 
+type NativeChipProps = ChipProps;
 // Native component declaration using the same pattern as Button
-const ChipNativeView: React.ComponentType<ChipProps> = requireNativeView('ExpoUI', 'ChipView');
-
-/**
- * @hidden
- */
-export function transformChipProps(props: ChipProps): ChipProps {
-  return { ...props };
+const ChipNativeView: React.ComponentType<NativeChipProps> = requireNativeView(
+  'ExpoUI',
+  'ChipView'
+);
+
+function transformChipProps(props: ChipProps): NativeChipProps {
+  const { modifiers, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+  };
 }
 
 /**

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

@@ -8,6 +8,7 @@ import { ModifierConfig } from '../../types';
 import { ButtonProps } from '../Button';
 import { PickerProps } from '../Picker';
 import { SwitchProps } from '../Switch';
+import { createViewModifierEventListener } from '../modifiers/utils';
 
 const MenuNativeView: React.ComponentType<NativeMenuProps> = requireNativeView(
   'ExpoUI',
@@ -101,6 +102,7 @@ export function Preview(props: { children: React.ReactNode }) {
 }
 
 function ContextMenu(props: ContextMenuProps) {
+  const { modifiers, ...restProps } = props;
   const eventHandlersMap: EventHandlers = {};
   const initialChildren = Children.map(
     props.children as any,
@@ -131,8 +133,9 @@ function ContextMenu(props: ContextMenuProps) {
       onContextMenuButtonPressed={createEventHandler('onPress')}
       onContextMenuSwitchValueChanged={createEventHandler('onValueChange')}
       onContextMenuPickerOptionSelected={createEventHandler('onOptionSelected')}
-      modifiers={props.modifiers}
-      {...props}>
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}>
       {activationElement}
     </MenuNativeView>
   );

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

@@ -2,6 +2,7 @@ import { requireNativeView } from 'expo';
 import { type ColorValue } from 'react-native';
 
 import { ExpoModifier, ViewEvent } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
 
 export type AndroidVariant = 'picker' | 'input';
 
@@ -57,16 +58,15 @@ type NativeDatePickerProps = Omit<
   initialDate?: number | null;
 } & ViewEvent<'onDateSelected', { date: Date }>;
 
-/**
- * @hidden
- */
-export function transformDateTimePickerProps(props: DateTimePickerProps): NativeDatePickerProps {
-  const { variant, initialDate, ...rest } = props;
+function transformDateTimePickerProps(props: DateTimePickerProps): NativeDatePickerProps {
+  const { modifiers, variant, initialDate, ...rest } = props;
 
   // Convert ISO string to timestamp for Android
   const initialDateTimestamp = initialDate ? new Date(initialDate).getTime() : null;
 
   return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...rest,
     initialDate: initialDateTimestamp,
     onDateSelected: ({ nativeEvent: { date } }) => {

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

@@ -1,6 +1,7 @@
 import { requireNativeView } from 'expo';
 
 import { ExpoModifier } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
 
 export type DividerProps = {
   /**
@@ -9,14 +10,24 @@ export type DividerProps = {
   modifiers?: ExpoModifier[];
 };
 
-const DividerNativeView: React.ComponentType<DividerProps> = requireNativeView(
+type NativeDividerProps = DividerProps;
+const DividerNativeView: React.ComponentType<NativeDividerProps> = requireNativeView(
   'ExpoUI',
   'DividerView'
 );
 
+function transformProps(props: DividerProps): NativeDividerProps {
+  const { modifiers, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+  };
+}
+
 /**
  * A visual element that can be used to separate other content.
  */
 export function Divider(props: DividerProps) {
-  return <DividerNativeView {...props} />;
+  return <DividerNativeView {...transformProps(props)} />;
 }

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

@@ -0,0 +1,78 @@
+import { requireNativeView } from 'expo';
+
+import { type ExpoModifier, type ViewEvent } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+export type DockedSearchBarProps = {
+  /**
+   * Callback function that is called when the search query changes.
+   */
+  onQueryChange?: (query: string) => void;
+
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ExpoModifier[];
+
+  /**
+   * The children of the component.
+   */
+  children?: React.ReactNode;
+};
+
+type PlaceholderProps = {
+  children: React.ReactNode;
+};
+
+type LeadingIconProps = {
+  children: React.ReactNode;
+};
+
+type NativeDockedSearchBarProps = Omit<DockedSearchBarProps, 'onQueryChange'> &
+  ViewEvent<'onQueryChange', { value: string }>;
+
+type NativeSlotViewProps = {
+  slotName: string;
+  children: React.ReactNode;
+};
+
+const DockedSearchBarNativeView: React.ComponentType<NativeDockedSearchBarProps> =
+  requireNativeView('ExpoUI', 'DockedSearchBarView');
+
+const SlotNativeView: React.ComponentType<NativeSlotViewProps> = requireNativeView(
+  'ExpoUI',
+  'SlotView'
+);
+
+export function DockedSearchBarPlaceholder(props: PlaceholderProps) {
+  return <SlotNativeView slotName="placeholder">{props.children}</SlotNativeView>;
+}
+
+export function DockedSearchBarLeadingIcon(props: LeadingIconProps) {
+  return <SlotNativeView slotName="leadingIcon">{props.children}</SlotNativeView>;
+}
+
+function transformDockedSearchBarProps(props: DockedSearchBarProps): NativeDockedSearchBarProps {
+  const { modifiers, onQueryChange, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+    onQueryChange: (event) => {
+      onQueryChange?.(event.nativeEvent.value);
+    },
+  };
+}
+
+function DockedSearchBar(props: DockedSearchBarProps) {
+  return (
+    <DockedSearchBarNativeView {...transformDockedSearchBarProps(props)}>
+      {props.children}
+    </DockedSearchBarNativeView>
+  );
+}
+
+DockedSearchBar.Placeholder = DockedSearchBarPlaceholder;
+DockedSearchBar.LeadingIcon = DockedSearchBarLeadingIcon;
+
+export { DockedSearchBar };

package/src/jetpack-compose/ExpoUIModule.ts

@@ -0,0 +1,3 @@
+import { requireNativeModule } from 'expo';
+
+export const ExpoUIModule = requireNativeModule('ExpoUI');

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

@@ -0,0 +1,89 @@
+import { requireNativeView } from 'expo';
+
+import { ExpoModifier } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+export type FilterChipProps = {
+  /**
+   * Whether the chip is currently selected.
+   */
+  selected: boolean;
+  /**
+   * The text label to display on the chip.
+   */
+  label: string;
+  /**
+   * Whether the chip is enabled and can be interacted with.
+   */
+  enabled?: boolean;
+  /**
+   * Callback fired when the chip is clicked.
+   */
+  onPress?: () => void;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ExpoModifier[];
+  /**
+   * Children containing LeadingIcon and TrailingIcon slots.
+   */
+  children?: React.ReactNode;
+};
+
+type SlotChildProps = {
+  children: React.ReactNode;
+};
+
+type NativeFilterChipProps = FilterChipProps;
+
+type NativeSlotViewProps = {
+  slotName: string;
+  children: React.ReactNode;
+};
+
+const FilterChipNativeView: React.ComponentType<NativeFilterChipProps> = requireNativeView(
+  'ExpoUI',
+  'FilterChipView'
+);
+
+const SlotNativeView: React.ComponentType<NativeSlotViewProps> = requireNativeView(
+  'ExpoUI',
+  'SlotView'
+);
+
+/**
+ * Leading icon slot for FilterChip.
+ */
+function FilterChipLeadingIcon(props: SlotChildProps) {
+  return <SlotNativeView slotName="leadingIcon">{props.children}</SlotNativeView>;
+}
+
+/**
+ * Trailing icon slot for FilterChip.
+ */
+function FilterChipTrailingIcon(props: SlotChildProps) {
+  return <SlotNativeView slotName="trailingIcon">{props.children}</SlotNativeView>;
+}
+
+/**
+ * A filter chip component following Material 3 design guidelines.
+ * Supports slot-based `LeadingIcon` and `TrailingIcon` children.
+ */
+function FilterChipComponent(props: FilterChipProps) {
+  const { children, modifiers, onPress, ...restProps } = props;
+
+  return (
+    <FilterChipNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}
+      onPress={onPress}>
+      {children}
+    </FilterChipNativeView>
+  );
+}
+
+FilterChipComponent.LeadingIcon = FilterChipLeadingIcon;
+FilterChipComponent.TrailingIcon = FilterChipTrailingIcon;
+
+export { FilterChipComponent as FilterChip };