@expo/ui 56.0.18 → 56.0.19

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.
@@ -99,7 +99,7 @@ export type ModalBottomSheetProps = {
    * Modifiers for the component.
    */
   modifiers?: ModifierConfig[];
-};
+}
 
 type NativeModalBottomSheetProps = Omit<ModalBottomSheetProps, 'onDismissRequest'> & {
   onDismissRequest: () => void;

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/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;

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

@@ -35,7 +35,7 @@ export type CornerRadii = {
   bottomEnd?: number;
 };
 
-export type ShapeProps = {
+export interface ShapeProps {
   /**
    * Corner rounding percentage. Multiplied by the shorter dimension of the view to produce pixel values.
    * @default 0.0
@@ -71,7 +71,7 @@ export type ShapeProps = {
    * Modifiers for the component.
    */
   modifiers?: ExpoModifier[];
-};
+}
 
 type NativeShapeProps = Omit<ShapeProps, 'modifiers'> & {
   type: ShapeType;

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

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

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

@@ -26,7 +26,7 @@ export type SliderColors = {
   inactiveTickColor?: ColorValue;
 };
 
-export type SliderProps = {
+export interface SliderProps {
   /**
    * The current value of the slider.
    * @default 0
@@ -84,7 +84,7 @@ export type SliderProps = {
    * Slot children for custom thumb and track.
    */
   children?: React.ReactNode;
-};
+}
 
 type NativeSliderProps = Omit<SliderProps, 'onValueChange' | 'onValueChangeFinished' | 'children'> &
   ViewEvent<'onValueChange', { value: number }> &

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

@@ -5,7 +5,7 @@ import { type ColorValue } from 'react-native';
 import { type ModifierConfig } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
-export type SnackbarProps = {
+export interface SnackbarProps {
   /**
    * The background color of the snackbar container.
    */
@@ -32,7 +32,7 @@ export type SnackbarProps = {
    * Modifiers for the component.
    */
   modifiers?: ModifierConfig[];
-};
+}
 
 const SnackbarNativeView: React.ComponentType<SnackbarProps> = requireNativeView(
   'ExpoUI',
@@ -97,7 +97,7 @@ export type SnackbarHostRef = {
   showSnackbar: (options: SnackbarShowOptions) => Promise<SnackbarResult>;
 };
 
-export type SnackbarHostProps = {
+export interface SnackbarHostProps {
   /**
    * Ref exposing the imperative `showSnackbar` method.
    */
@@ -111,7 +111,7 @@ export type SnackbarHostProps = {
    * Compose's `SnackbarHost(hostState) { data -> Snackbar(data, ...) }` lambda.
    */
   children?: React.ReactNode;
-};
+}
 
 const SnackbarHostNativeView: React.ComponentType<SnackbarHostProps> = requireNativeView(
   'ExpoUI',

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

@@ -3,12 +3,12 @@ import { requireNativeView } from 'expo';
 import type { ExpoModifier } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
-export type SpacerProps = {
+export interface SpacerProps {
   /**
    * Modifiers for the component. Use `weight()` modifier to make the spacer flexible.
    */
   modifiers?: ExpoModifier[];
-};
+}
 
 type NativeSpacerProps = SpacerProps;
 const SpacerNativeView: React.ComponentType<SpacerProps> = requireNativeView(

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

@@ -22,7 +22,7 @@ export type SurfaceBorder = {
   color?: ColorValue;
 };
 
-export type SurfaceProps = {
+export interface SurfaceProps {
   /**
    * The content to display inside the surface.
    */
@@ -94,7 +94,7 @@ export type SurfaceProps = {
    * Modifiers for the component.
    */
   modifiers?: ModifierConfig[];
-};
+}
 
 type NativeSurfaceProps = Omit<SurfaceProps, 'onClick' | 'onCheckedChange' | 'shape'> &
   ViewEvent<'onSurfaceClick', void> &

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

@@ -27,7 +27,7 @@ export type SwitchColors = {
   disabledUncheckedIconColor?: ColorValue;
 };
 
-export type SwitchProps = {
+export interface SwitchProps {
   /**
    * Indicates whether the switch is checked.
    */
@@ -54,7 +54,7 @@ export type SwitchProps = {
    * @platform android
    */
   children?: React.ReactNode;
-};
+}
 
 type NativeSwitchProps = Omit<SwitchProps, 'onCheckedChange' | 'children'> & {
   children?: React.ReactNode;

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

@@ -4,7 +4,7 @@ import { getStateId, type ObservableState, useWorkletProp } from '../../State';
 import { type ModifierConfig } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
-export type SyncSwitchProps = {
+export interface SyncSwitchProps {
   /**
    * An observable state that drives the switch.
    * Create one with `useNativeState(false)`.
@@ -24,7 +24,7 @@ export type SyncSwitchProps = {
    * Modifiers for the component.
    */
   modifiers?: ModifierConfig[];
-};
+}
 
 type NativeSyncSwitchProps = Omit<SyncSwitchProps, 'isOn' | 'onCheckedChangeSync'> & {
   isOn?: number | null;

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

@@ -194,7 +194,7 @@ type TextSpanRecord = TextSpanStyleBase & {
   children?: TextSpanRecord[];
 };
 
-export type TextProps = {
+export interface TextProps {
   /**
    * The text content to display. Can be a string, number, or nested `Text` components
    * for inline styled spans.
@@ -238,7 +238,7 @@ export type TextProps = {
    * Modifiers for the component.
    */
   modifiers?: ModifierConfig[];
-};
+}
 
 type NativeTextProps = Omit<TextProps, 'children' | 'style'> &
   TextSpanStyleBase & {

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

@@ -23,14 +23,14 @@ export type BasicTextFieldRef = TextFieldRef;
  * `OutlinedTextField`; use `BasicTextField.DecorationBox` to add your own
  * decoration.
  */
-export type BasicTextFieldProps = CommonTextFieldProperties & {
+export interface BasicTextFieldProps extends 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
 

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

@@ -62,7 +62,7 @@ export type TextFieldColors = {
 };
 
 // Material props inlined per variant (not a shared named base) so docs render them directly.
-export type TextFieldProps = CommonTextFieldProperties & {
+export interface TextFieldProps extends CommonTextFieldProperties {
   /** @default false */
   isError?: boolean;
   /**
@@ -72,9 +72,9 @@ export type TextFieldProps = CommonTextFieldProperties & {
    */
   shape?: ShapeJSXElement;
   colors?: TextFieldColors;
-};
+}
 
-export type OutlinedTextFieldProps = CommonTextFieldProperties & {
+export interface OutlinedTextFieldProps extends CommonTextFieldProperties {
   /** @default false */
   isError?: boolean;
   /**
@@ -84,7 +84,7 @@ export type OutlinedTextFieldProps = CommonTextFieldProperties & {
    */
   shape?: ShapeJSXElement;
   colors?: TextFieldColors;
-};
+}
 
 // endregion Types
 

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

@@ -17,7 +17,7 @@ export type ToggleButtonColors = {
   disabledContentColor?: ColorValue;
 };
 
-export type ToggleButtonProps = {
+export interface ToggleButtonProps {
   /**
    * Whether the toggle button is checked.
    */
@@ -43,7 +43,7 @@ export type ToggleButtonProps = {
    * Content to display inside the toggle button.
    */
   children: React.ReactNode;
-};
+}
 
 type NativeToggleButtonProps = Omit<ToggleButtonProps, 'onCheckedChange' | 'children'> & {
   children?: React.ReactNode;

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

@@ -16,7 +16,7 @@ export type TooltipBoxRef = {
   dismiss: () => Promise<void>;
 };
 
-export type TooltipBoxProps = {
+export interface TooltipBoxProps {
   /**
    * Ref to imperatively show/dismiss the tooltip.
    */
@@ -50,7 +50,7 @@ export type TooltipBoxProps = {
    * The anchor content triggers the tooltip on long-press.
    */
   children: React.ReactNode;
-};
+}
 
 const TooltipBoxNativeView: React.ComponentType<TooltipBoxProps> = requireNativeView(
   'ExpoUI',
@@ -76,12 +76,12 @@ function transformProps(
 
 // --- PlainTooltip (compound component of TooltipBox) ---
 
-export type PlainTooltipProps = {
+export interface PlainTooltipProps {
   containerColor?: ColorValue;
   contentColor?: ColorValue;
   modifiers?: ModifierConfig[];
   children: React.ReactNode;
-};
+}
 
 const PlainTooltipNativeView: React.ComponentType<PlainTooltipProps> = requireNativeView(
   'ExpoUI',
@@ -108,14 +108,14 @@ function PlainTooltipComponent(props: PlainTooltipProps) {
 
 // --- RichTooltip (compound component of TooltipBox) ---
 
-export type RichTooltipProps = {
+export interface RichTooltipProps {
   containerColor?: ColorValue;
   contentColor?: ColorValue;
   titleContentColor?: ColorValue;
   actionContentColor?: ColorValue;
   modifiers?: ModifierConfig[];
   children: React.ReactNode;
-};
+}
 
 const RichTooltipNativeView: React.ComponentType<RichTooltipProps> = requireNativeView(
   'ExpoUI',

package/src/swift-ui/AccessoryWidgetBackground/index.tsx

@@ -2,7 +2,7 @@ import { requireNativeView } from 'expo';
 
 import { type CommonViewModifierProps } from '../types';
 
-export type AccessoryWidgetBackgroundProps = CommonViewModifierProps;
+export interface AccessoryWidgetBackgroundProps extends CommonViewModifierProps {}
 
 const AccessoryWidgetBackgroundNativeView: React.ComponentType<AccessoryWidgetBackgroundProps> =
   requireNativeView('ExpoUI', 'AccessoryWidgetBackgroundView');

package/src/swift-ui/Alert/index.tsx

@@ -8,7 +8,7 @@ import { type CommonViewModifierProps } from '../types';
 /**
  * Props of the `Alert` component.
  */
-export type AlertProps = {
+export interface AlertProps extends CommonViewModifierProps {
   /**
    * The contents of the alert.
    * Should include `Alert.Trigger`, `Alert.Actions`, and optionally `Alert.Message`.
@@ -26,7 +26,7 @@ export type AlertProps = {
    * A callback that is called when the `isPresented` state changes.
    */
   onIsPresentedChange?: (isPresented: boolean) => void;
-} & CommonViewModifierProps;
+}
 
 type NativeAlertProps = Omit<AlertProps, 'onIsPresentedChange'> & {
   onIsPresentedChange?: (event: NativeSyntheticEvent<{ isPresented: boolean }>) => void;

package/src/swift-ui/BottomSheet/index.tsx

@@ -5,7 +5,7 @@ import { type NativeSyntheticEvent } from 'react-native';
 import { createViewModifierEventListener } from '../modifiers/utils';
 import { type CommonViewModifierProps } from '../types';
 
-export type BottomSheetProps = {
+export interface BottomSheetProps extends CommonViewModifierProps {
   /**
    * The children of the `BottomSheet` component.
    * Use `Group` to wrap your content and apply presentation modifiers
@@ -31,7 +31,7 @@ export type BottomSheetProps = {
    * @default false
    */
   fitToContents?: boolean;
-} & CommonViewModifierProps;
+}
 
 type NativeBottomSheetProps = Omit<BottomSheetProps, 'onIsPresentedChange' | 'onDismiss'> & {
   onIsPresentedChange: (event: NativeSyntheticEvent<{ isPresented: boolean }>) => void;

package/src/swift-ui/Button/index.tsx

@@ -13,7 +13,7 @@ import { type CommonViewModifierProps } from '../types';
  */
 export type ButtonRole = 'default' | 'cancel' | 'destructive';
 
-export type ButtonProps = {
+export interface ButtonProps extends CommonViewModifierProps {
   /**
    * A callback that is called when the button is pressed.
    */
@@ -40,7 +40,7 @@ export type ButtonProps = {
    * Target identifier for the button, used for identifying which button was pressed in widgets and live activities.
    */
   target?: string;
-} & CommonViewModifierProps;
+}
 
 type NativeButtonProps = Omit<ButtonProps, 'onPress'> & ViewEvent<'onButtonPress', void>;