@expo/ui 56.0.17 → 56.0.19

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

@@ -98,7 +98,7 @@ export type TimePickerElementColors = {
   timeSelectorUnselectedContentColor?: ColorValue;
 };
 
-export type DateTimePickerProps = {
+export interface DateTimePickerProps {
   /**
    * The initial date to display on the picker.
    */
@@ -154,7 +154,7 @@ export type DateTimePickerProps = {
    * Modifiers for the component.
    */
   modifiers?: ModifierConfig[];
-};
+}
 
 type NativeDatePickerProps = Omit<
   DateTimePickerProps,
@@ -212,7 +212,7 @@ export function DateTimePicker(props: DateTimePickerProps) {
 
 // -- Dialog views (used internally by the compat layer) ---------------------
 
-export type DatePickerDialogProps = {
+export interface DatePickerDialogProps {
   initialDate?: string | null;
   variant?: AndroidVariant;
   showVariantToggle?: boolean;
@@ -223,7 +223,7 @@ export type DatePickerDialogProps = {
   selectableDates?: { start?: Date; end?: Date };
   onDateSelected?: (date: Date) => void;
   onDismissRequest: () => void;
-};
+}
 
 type NativeDatePickerDialogProps = Omit<
   DatePickerDialogProps,
@@ -260,7 +260,7 @@ export function DatePickerDialog(props: DatePickerDialogProps) {
   return <DatePickerDialogNativeView {...nativeProps} />;
 }
 
-export type TimePickerDialogProps = {
+export interface TimePickerDialogProps {
   initialDate?: string | null;
   is24Hour?: boolean;
   confirmButtonLabel?: string;
@@ -269,7 +269,7 @@ export type TimePickerDialogProps = {
   elementColors?: DatePickerElementColors & TimePickerElementColors;
   onDateSelected?: (date: Date) => void;
   onDismissRequest: () => void;
-};
+}
 
 type NativeTimePickerDialogProps = Omit<
   TimePickerDialogProps,

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

@@ -3,7 +3,7 @@ import { requireNativeView } from 'expo';
 import { type ExpoModifier, type ViewEvent } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
-export type DockedSearchBarProps = {
+export interface DockedSearchBarProps {
   /**
    * Callback function that is called when the search query changes.
    */
@@ -18,7 +18,7 @@ export type DockedSearchBarProps = {
    * The children of the component.
    */
   children?: React.ReactNode;
-};
+}
 
 type PlaceholderProps = {
   children: React.ReactNode;

package/src/jetpack-compose/DropdownMenu/DropdownMenuItem.tsx

@@ -31,7 +31,7 @@ export type DropdownMenuItemElementColors = {
 /**
  * Props of the `DropdownMenuItem` component.
  */
-export type DropdownMenuItemProps = {
+export interface DropdownMenuItemProps {
   /**
    * Whether the menu item is enabled.
    * @default true
@@ -53,7 +53,7 @@ export type DropdownMenuItemProps = {
    * Slot children for text, leading/trailing icons.
    */
   children?: React.ReactNode;
-};
+}
 
 type NativeDropdownMenuItemProps = Omit<DropdownMenuItemProps, 'onClick' | 'children'> &
   ViewEvent<'onItemPressed', void> & { children?: React.ReactNode };

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

@@ -19,7 +19,7 @@ const SlotNativeView: React.ComponentType<{
 /**
  * Props of the `DropdownMenu` component.
  */
-export type DropdownMenuProps = {
+export interface DropdownMenuProps {
   /**
    * The contents of the submenu are used as an anchor for the dropdown menu.
    * The children will be wrapped in a pressable element, which triggers opening of the dropdown menu.
@@ -51,7 +51,7 @@ export type DropdownMenuProps = {
    * Modifiers for the component.
    */
   modifiers?: ModifierConfig[];
-};
+}
 
 type NativeMenuProps = {
   expanded?: boolean;

package/src/jetpack-compose/ExposedDropdownMenuBox/ExposedDropdownMenu.tsx

@@ -13,7 +13,7 @@ const NativeView: React.ComponentType<ExposedDropdownMenuProps> = requireNativeV
 /**
  * Props for the `ExposedDropdownMenu` component.
  */
-export type ExposedDropdownMenuProps = {
+export interface ExposedDropdownMenuProps {
   /**
    * Whether the dropdown menu is expanded (visible).
    */
@@ -34,7 +34,7 @@ export type ExposedDropdownMenuProps = {
    * Children should be `DropdownMenuItem` components.
    */
   children?: ReactNode;
-};
+}
 
 /**
  * A Material 3 `ExposedDropdownMenu` that displays menu items in a dropdown.

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

@@ -10,7 +10,7 @@ const NativeView: React.ComponentType<NativeExposedDropdownMenuBoxProps> = requi
   'ExposedDropdownMenuBoxView'
 );
 
-export type ExposedDropdownMenuBoxProps = {
+export interface ExposedDropdownMenuBoxProps {
   /**
    * Whether the dropdown menu is expanded (visible).
    */
@@ -28,7 +28,7 @@ export type ExposedDropdownMenuBoxProps = {
    * and an `ExposedDropdownMenu` with `DropdownMenuItem` children.
    */
   children?: ReactNode;
-};
+}
 
 type NativeExposedDropdownMenuBoxProps = Omit<
   ExposedDropdownMenuBoxProps,

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

@@ -16,7 +16,7 @@ type NativeSlotViewProps = {
 /**
  * Props shared by all `FloatingActionButton` variants.
  */
-export type FloatingActionButtonProps = {
+export interface FloatingActionButtonProps {
   /**
    * Slot-based children (use `.Icon` sub-component).
    */
@@ -37,24 +37,24 @@ export type FloatingActionButtonProps = {
    * Modifiers for the component.
    */
   modifiers?: ModifierConfig[];
-};
+}
 
 /**
  * Props for the `SmallFloatingActionButton` component.
  * Same as {@link FloatingActionButtonProps}.
  */
-export type SmallFloatingActionButtonProps = FloatingActionButtonProps;
+export interface SmallFloatingActionButtonProps extends FloatingActionButtonProps {}
 
 /**
  * Props for the `LargeFloatingActionButton` component.
  * Same as {@link FloatingActionButtonProps}.
  */
-export type LargeFloatingActionButtonProps = FloatingActionButtonProps;
+export interface LargeFloatingActionButtonProps extends FloatingActionButtonProps {}
 
 /**
  * Props for the `ExtendedFloatingActionButton` component.
  */
-export type ExtendedFloatingActionButtonProps = FloatingActionButtonProps & {
+export interface ExtendedFloatingActionButtonProps extends FloatingActionButtonProps {
   /**
    * Slot-based children (use `.Icon` and `.Text` sub-components).
    */
@@ -65,7 +65,7 @@ export type ExtendedFloatingActionButtonProps = FloatingActionButtonProps & {
    * @default true
    */
   expanded?: boolean;
-};
+}
 
 /**
  * @hidden

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

@@ -7,7 +7,7 @@ import {
   transformProps,
 } from '../layout-types';
 
-export type FlowRowProps = {
+export interface FlowRowProps extends PrimitiveBaseProps {
   children?: React.ReactNode;
   /**
    * Horizontal arrangement of children.
@@ -17,7 +17,7 @@ export type FlowRowProps = {
    * Vertical arrangement of children.
    */
   verticalArrangement?: VerticalArrangement;
-} & PrimitiveBaseProps;
+}
 
 const FlowRowNativeView: React.ComponentType<FlowRowProps> = requireNativeView(
   'ExpoUI',

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

@@ -26,7 +26,7 @@ export type HorizontalFloatingToolbarColors = {
   fabContentColor?: ColorValue;
 };
 
-export type HorizontalFloatingToolbarProps = {
+export interface HorizontalFloatingToolbarProps {
   /**
    * The variant of the horizontal floating toolbar.
    * @default 'standard'
@@ -48,9 +48,9 @@ export type HorizontalFloatingToolbarProps = {
    * Modifiers for the component.
    */
   modifiers?: ExpoModifier[];
-};
+}
 
-export type HorizontalFloatingToolbarFloatingActionButtonProps = {
+export interface HorizontalFloatingToolbarFloatingActionButtonProps {
   /**
    * A callback that is called when the button is pressed.
    */
@@ -60,7 +60,7 @@ export type HorizontalFloatingToolbarFloatingActionButtonProps = {
    * The children of the component.
    */
   children: React.ReactNode;
-};
+}
 
 type NativeHorizontalFloatingToolbarProps = HorizontalFloatingToolbarProps & {};
 

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

@@ -26,7 +26,7 @@ export type HorizontalPagerHandle = {
  */
 export type HorizontalPagerDragInteraction = 'start' | 'stop' | 'cancel';
 
-export type HorizontalPagerProps = {
+export interface HorizontalPagerProps {
   /**
    * Imperative handle for programmatic navigation. Mirrors the methods on
    * Compose's `PagerState`.
@@ -104,7 +104,7 @@ export type HorizontalPagerProps = {
    * Children to render as pages.
    */
   children: React.ReactNode;
-};
+}
 
 type NativeHorizontalPagerProps = Omit<
   HorizontalPagerProps,

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

@@ -12,7 +12,7 @@ import {
 import { getMaterialColors, HostPaletteContext } from '../colors';
 import { type PrimitiveBaseProps } from '../layout';
 
-export type HostProps = {
+export interface HostProps extends PrimitiveBaseProps {
   /**
    * When true, the host view will update its size in the React Native view tree to match the content's layout from Jetpack Compose.
    * Can be only set once on mount.
@@ -65,7 +65,7 @@ export type HostProps = {
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
   pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto';
-} & PrimitiveBaseProps;
+}
 
 type NativeHostProps = Omit<HostProps, 'colorScheme'> & {
   matchContentsVertical?: boolean;

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

@@ -9,7 +9,7 @@ import {
 import type { ModifierConfig } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
-export type IconProps = {
+export interface IconProps {
   /**
    * The source of the icon. Can be a URI string or the result of `require()`.
    * On Android, supports XML vector drawables loaded via Metro bundler.
@@ -81,7 +81,7 @@ export type IconProps = {
    * ```
    */
   modifiers?: ModifierConfig[];
-};
+}
 
 /**
  * @hidden

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

@@ -15,7 +15,7 @@ export type IconButtonColors = {
   disabledContentColor?: ColorValue;
 };
 
-export type IconButtonProps = {
+export interface IconButtonProps {
   /**
    * Callback that is called when the icon button is clicked.
    */
@@ -42,7 +42,7 @@ export type IconButtonProps = {
    * Content to display inside the icon button.
    */
   children: React.ReactNode;
-};
+}
 
 type NativeIconButtonProps = Omit<IconButtonProps, 'onClick' | 'shape' | 'children'> & {
   shape?: ShapeRecordProps;

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

@@ -25,7 +25,7 @@ export type ContentPadding = {
   bottom?: number;
 };
 
-export type LazyColumnProps = {
+export interface LazyColumnProps {
   /**
    * The content to display inside the lazy column.
    */
@@ -54,7 +54,7 @@ export type LazyColumnProps = {
    * Modifiers for the component.
    */
   modifiers?: ExpoModifier[];
-};
+}
 
 type NativeLazyColumnProps = LazyColumnProps;
 const LazyColumnNativeView: React.ComponentType<NativeLazyColumnProps> = requireNativeView(

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

@@ -4,7 +4,7 @@ import type { ExpoModifier } from '../../types';
 import { type ContentPadding } from '../LazyColumn';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
-export type LazyRowProps = {
+export interface LazyRowProps {
   /**
    * The content to display inside the lazy row.
    */
@@ -33,7 +33,7 @@ export type LazyRowProps = {
    * Modifiers for the component.
    */
   modifiers?: ExpoModifier[];
-};
+}
 
 type NativeLazyRowProps = LazyRowProps;
 const LazyRowNativeView: React.ComponentType<NativeLazyRowProps> = requireNativeView(

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

@@ -16,7 +16,7 @@ export type ListItemColors = {
   overlineContentColor?: ColorValue;
 };
 
-export type ListItemProps = {
+export interface ListItemProps {
   /**
    * Colors for list item elements.
    */
@@ -39,7 +39,7 @@ export type ListItemProps = {
    * Children containing slot sub-components.
    */
   children?: React.ReactNode;
-};
+}
 
 type SlotProps = {
   slotName: string;

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

@@ -71,12 +71,12 @@ export const LoadingIndicator = createLoadingIndicatorComponent('LoadingIndicato
 
 // region ContainedLoadingIndicator
 
-export type ContainedLoadingIndicatorProps = LoadingIndicatorCommonConfig & {
+export interface ContainedLoadingIndicatorProps extends LoadingIndicatorCommonConfig {
   /**
    * Loading indicator's container color
    */
   containerColor?: ColorValue;
-};
+}
 
 /**
  * A loading indicator that displays loading using morphing shapes inside a container.

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

@@ -42,7 +42,7 @@ export type ModalBottomSheetProperties = {
   shouldDismissOnClickOutside?: boolean;
 };
 
-export type ModalBottomSheetProps = {
+export interface ModalBottomSheetProps {
   /**
    * The children of the `ModalBottomSheet` component.
    * Can include a `ModalBottomSheet.DragHandle` slot for a custom drag handle.
@@ -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.
    */
@@ -93,7 +99,7 @@ export type ModalBottomSheetProps = {
    * Modifiers for the component.
    */
   modifiers?: ModifierConfig[];
-};
+}
 
 type NativeModalBottomSheetProps = Omit<ModalBottomSheetProps, 'onDismissRequest'> & {
   onDismissRequest: () => void;
@@ -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/MultiChoiceSegmentedButtonRow/index.tsx

@@ -3,7 +3,7 @@ import { requireNativeView } from 'expo';
 import { type ModifierConfig } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
-export type MultiChoiceSegmentedButtonRowProps = {
+export interface MultiChoiceSegmentedButtonRowProps {
   /**
    * SegmentedButton children.
    */
@@ -12,7 +12,7 @@ export type MultiChoiceSegmentedButtonRowProps = {
    * Modifiers for the component.
    */
   modifiers?: ModifierConfig[];
-};
+}
 
 const MultiChoiceSegmentedButtonRowNativeView: React.ComponentType<MultiChoiceSegmentedButtonRowProps> =
   requireNativeView('ExpoUI', 'MultiChoiceSegmentedButtonRowView');

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

@@ -26,7 +26,7 @@ export type NavigationBarItemColors = {
   disabledTextColor?: ColorValue;
 };
 
-export type NavigationBarProps = {
+export interface NavigationBarProps {
   /**
    * Background color of the navigation bar.
    * @default NavigationBarDefaults.containerColor
@@ -50,9 +50,9 @@ export type NavigationBarProps = {
    * Navigation bar items.
    */
   children?: React.ReactNode;
-};
+}
 
-export type NavigationBarItemProps = {
+export interface NavigationBarItemProps {
   /**
    * Whether this item is currently selected.
    */
@@ -83,7 +83,7 @@ export type NavigationBarItemProps = {
    * Children containing `Icon`, `SelectedIcon`, and `Label` slots.
    */
   children?: React.ReactNode;
-};
+}
 
 type NativeNavigationBarItemProps = Omit<NavigationBarItemProps, 'onClick'> &
   ViewEvent<'onButtonPressed', void>;

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

@@ -72,7 +72,7 @@ export type DrawStopIndicatorConfig = {
   stopSize?: number;
 };
 
-export type LinearProgressIndicatorProps = ProgressCommonConfig & {
+export interface LinearProgressIndicatorProps extends ProgressCommonConfig {
   /**
    * Stroke cap style for the indicator ends.
    * @default 'round'
@@ -86,7 +86,7 @@ export type LinearProgressIndicatorProps = ProgressCommonConfig & {
    * Configuration for the stop indicator dot at the end of the determinate progress track.
    */
   drawStopIndicator?: DrawStopIndicatorConfig;
-};
+}
 
 /**
  * A linear progress indicator that displays progress in a horizontal bar.
@@ -101,7 +101,7 @@ export const LinearProgressIndicator = createProgressComponent<LinearProgressInd
 
 // region CircularProgressIndicator
 
-export type CircularProgressIndicatorProps = ProgressCommonConfig & {
+export interface CircularProgressIndicatorProps extends ProgressCommonConfig {
   /**
    * Width of the circular stroke in dp.
    */
@@ -115,7 +115,7 @@ export type CircularProgressIndicatorProps = ProgressCommonConfig & {
    * Gap size between the indicator and track in dp.
    */
   gapSize?: number;
-};
+}
 
 /**
  * A circular progress indicator that displays progress in a circular format.
@@ -130,12 +130,12 @@ export const CircularProgressIndicator = createProgressComponent<CircularProgres
 
 // region LinearWavyProgressIndicator
 
-export type LinearWavyProgressIndicatorProps = ProgressCommonConfig & {
+export interface LinearWavyProgressIndicatorProps extends ProgressCommonConfig {
   /**
    * Size of the stop indicator in dp at the end of the determinate progress track.
    */
   stopSize?: number;
-};
+}
 
 /**
  * A linear progress indicator with wavy animation style.
@@ -149,7 +149,7 @@ export const LinearWavyProgressIndicator =
 
 // region CircularWavyProgressIndicator
 
-export type CircularWavyProgressIndicatorProps = ProgressCommonConfig;
+export interface CircularWavyProgressIndicatorProps extends ProgressCommonConfig {}
 
 /**
  * A circular progress indicator with wavy animation style.

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

@@ -8,7 +8,7 @@ import { createViewModifierEventListener } from '../modifiers/utils';
 /**
  * Configuration for the loading indicator shown during pull-to-refresh.
  */
-export type PullToRefreshIndicatorProps = {
+export interface PullToRefreshIndicatorProps {
   /**
    * Color of the loading indicator spinner.
    * @default MaterialTheme.colorScheme.primary
@@ -23,9 +23,9 @@ export type PullToRefreshIndicatorProps = {
    * Modifiers for the loading indicator.
    */
   modifiers?: ModifierConfig[];
-};
+}
 
-export type PullToRefreshBoxProps = {
+export interface PullToRefreshBoxProps {
   /**
    * Whether the content is refreshing.
    * @default false
@@ -52,7 +52,7 @@ export type PullToRefreshBoxProps = {
    * The content to refresh.
    */
   children: React.ReactNode;
-};
+}
 
 type NativePullToRefreshBoxProps = Omit<PullToRefreshBoxProps, 'onRefresh'> &
   ViewEvent<'onRefresh', void>;

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

@@ -3,7 +3,7 @@ import { requireNativeView } from 'expo';
 import { type ModifierConfig, type ViewEvent } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
-export type RadioButtonProps = {
+export interface RadioButtonProps {
   /**
    * Whether the radio button is selected.
    */
@@ -16,7 +16,7 @@ export type RadioButtonProps = {
    * Modifiers for the component.
    */
   modifiers?: ModifierConfig[];
-};
+}
 
 type NativeRadioButtonProps = Omit<RadioButtonProps, 'onClick'> &
   ViewEvent<'onButtonPressed', void> & {

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

@@ -9,7 +9,7 @@ import {
   transformProps,
 } from '../layout-types';
 
-export type RowProps = {
+export interface RowProps extends PrimitiveBaseProps {
   children?: React.ReactNode;
   /**
    * Horizontal arrangement of children.
@@ -27,7 +27,7 @@ export type RowProps = {
    * Vertical alignment of children.
    */
   verticalAlignment?: VerticalAlignment;
-} & PrimitiveBaseProps;
+}
 
 const RowNativeView: React.ComponentType<RowProps> = requireNativeView('ExpoUI', 'RowView');
 

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

@@ -3,7 +3,7 @@ import { requireNativeView } from 'expo';
 import { type ExpoModifier, type ViewEvent } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
-export type SearchBarProps = {
+export interface SearchBarProps {
   /**
    * Callback function that is called when the search text is submitted.
    */
@@ -18,7 +18,7 @@ export type SearchBarProps = {
    * The children of the component.
    */
   children?: React.ReactNode;
-};
+}
 
 type PlaceholderProps = {
   /**

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

@@ -22,7 +22,7 @@ export type SegmentedButtonColors = {
   disabledInactiveContainerColor?: ColorValue;
 };
 
-export type SegmentedButtonProps = {
+export interface SegmentedButtonProps {
   /**
    * Whether the button is currently selected (used inside `SingleChoiceSegmentedButtonRow`).
    */
@@ -56,7 +56,7 @@ export type SegmentedButtonProps = {
    * Children containing a `Label` slot.
    */
   children?: React.ReactNode;
-};
+}
 
 type NativeSlotViewProps = {
   slotName: string;