@expo/ui 56.0.8 → 56.0.9

package/local-maven-repo/expo/modules/ui/expo.modules.ui/{56.0.8/expo.modules.ui-56.0.8.module → 56.0.9/expo.modules.ui-56.0.9.module}

@@ -3,7 +3,7 @@
   "component": {
     "group": "expo.modules.ui",
     "module": "expo.modules.ui",
-    "version": "56.0.8",
+    "version": "56.0.9",
     "attributes": {
       "org.gradle.status": "release"
     }
@@ -24,13 +24,13 @@
       },
       "files": [
         {
-          "name": "expo.modules.ui-56.0.8.aar",
-          "url": "expo.modules.ui-56.0.8.aar",
-          "size": 1742873,
-          "sha512": "8111a057a0454d1b10993b2fa75487a3c81d9a991aea915c827f4be17e240bac8114a7e3f7d4403302f97f68e255a52d3348f1cc83529dcba5bcb31b67295542",
-          "sha256": "16d55d07ff8c3287a906b606ab76bf0e2757895d0cf7777a97588daed1804943",
-          "sha1": "2d7e475d6bf490db454783e814b6d7bdf3a3656a",
-          "md5": "7d65df12a162b1158d8d3b62582b8ce9"
+          "name": "expo.modules.ui-56.0.9.aar",
+          "url": "expo.modules.ui-56.0.9.aar",
+          "size": 1805504,
+          "sha512": "ba0dfa2c02b2ad1f248bfe43a5a922a95dbb83c493eb23cd8d3b98f3e790d9be19133002ac2ab408f3a9268af3c5718072f0646c2e13b0ce2d01b8198ae8ccc6",
+          "sha256": "7f2175675f65b6caaf5ce6580cdd24a10f208ae6d80b894e4460796fe2f0dc05",
+          "sha1": "4631f8e63a9536ef63c03c7666fbaa0e5a4f60a1",
+          "md5": "1375a9ac8dc803a405dd2fa39159a0bc"
         }
       ]
     },
@@ -141,13 +141,13 @@
       ],
       "files": [
         {
-          "name": "expo.modules.ui-56.0.8.aar",
-          "url": "expo.modules.ui-56.0.8.aar",
-          "size": 1742873,
-          "sha512": "8111a057a0454d1b10993b2fa75487a3c81d9a991aea915c827f4be17e240bac8114a7e3f7d4403302f97f68e255a52d3348f1cc83529dcba5bcb31b67295542",
-          "sha256": "16d55d07ff8c3287a906b606ab76bf0e2757895d0cf7777a97588daed1804943",
-          "sha1": "2d7e475d6bf490db454783e814b6d7bdf3a3656a",
-          "md5": "7d65df12a162b1158d8d3b62582b8ce9"
+          "name": "expo.modules.ui-56.0.9.aar",
+          "url": "expo.modules.ui-56.0.9.aar",
+          "size": 1805504,
+          "sha512": "ba0dfa2c02b2ad1f248bfe43a5a922a95dbb83c493eb23cd8d3b98f3e790d9be19133002ac2ab408f3a9268af3c5718072f0646c2e13b0ce2d01b8198ae8ccc6",
+          "sha256": "7f2175675f65b6caaf5ce6580cdd24a10f208ae6d80b894e4460796fe2f0dc05",
+          "sha1": "4631f8e63a9536ef63c03c7666fbaa0e5a4f60a1",
+          "md5": "1375a9ac8dc803a405dd2fa39159a0bc"
         }
       ]
     },
@@ -161,13 +161,13 @@
       },
       "files": [
         {
-          "name": "expo.modules.ui-56.0.8-sources.jar",
-          "url": "expo.modules.ui-56.0.8-sources.jar",
-          "size": 83317,
-          "sha512": "8e7857cfe9376c2a4fdda8902bdaa2c516b53b38366623f8b474f2dc518b39d7988490e8ef011302ec9443d0e60823ba61dadc4b2a2a836e0c576ee81ab817c8",
-          "sha256": "23ba3e9f955c4fbbc30d2d18e007b303692c56ab229f64092e2a21417c7b6fb3",
-          "sha1": "fed75afc6bc0231fa3cf65ec40bfbbbec4ee7203",
-          "md5": "7f944d9b9a5ef111622ffba70c2e3dce"
+          "name": "expo.modules.ui-56.0.9-sources.jar",
+          "url": "expo.modules.ui-56.0.9-sources.jar",
+          "size": 86330,
+          "sha512": "408e70adeb3b30e509e418a2a6edbd5afb888a27f8fcd5c04032a1089ef32c4483e542854cd1621a74aa2763094cd2e6ba98b30e99e213dd06734167e6d4083c",
+          "sha256": "e068f417d7a302f7d37e1d8648b7f61d2da46d215aede6ad991e35f780e794ea",
+          "sha1": "b68d51962848180ac90fcb20a9766fabd72327ad",
+          "md5": "792086c87c80e11e11b3e96d4b0a27d5"
         }
       ]
     }

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

@@ -0,0 +1 @@
+485b997d6738de54d6dc1a04d29b4c9a

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

@@ -0,0 +1 @@
+9fc748a23b388982628ba7ea8fb7beb7ce8673b9

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

@@ -0,0 +1 @@
+824aeb287c84a0ae7a903bbcd2ed28e02606bb63ff7b752f67f12469461f5b75

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

@@ -0,0 +1 @@
+7a87a1877c5555ab2b67f662d16481ef097240be1ac1ffaf3866ce167bf086cd272977ed945aafaf0143ee82c0fba1af5a5edc9fd6dd3715976708eea8beb901

package/local-maven-repo/expo/modules/ui/expo.modules.ui/{56.0.8/expo.modules.ui-56.0.8.pom → 56.0.9/expo.modules.ui-56.0.9.pom}

@@ -9,7 +9,7 @@
   <modelVersion>4.0.0</modelVersion>
   <groupId>expo.modules.ui</groupId>
   <artifactId>expo.modules.ui</artifactId>
-  <version>56.0.8</version>
+  <version>56.0.9</version>
   <packaging>aar</packaging>
   <name>expo.modules.ui</name>
   <url>https://github.com/expo/expo</url>

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

@@ -0,0 +1 @@
+f2d9d3bd7c4ea14a224a23d28ed45f95

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

@@ -0,0 +1 @@
+5f7de9f68a75a8180e441e1d8f88d38db511ea4d

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

@@ -0,0 +1 @@
+d8cabffaed7874f9cdaa99bdb3148847466647b3d8e38175a0d6129f42fc54ea

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

@@ -0,0 +1 @@
+d1b858cfe33845e3584fe8fe75da774a06c2d6ddef4c44e59671a832d9c5df04dad92780c7aa6f1a0183e337e4998d89598f6c08e91fda083ae0cd5c4a7cfb37

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>56.0.8</latest>
-    <release>56.0.8</release>
+    <latest>56.0.9</latest>
+    <release>56.0.9</release>
     <versions>
-      <version>56.0.8</version>
+      <version>56.0.9</version>
     </versions>
-    <lastUpdated>20260515152508</lastUpdated>
+    <lastUpdated>20260519105316</lastUpdated>
   </versioning>
 </metadata>

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

@@ -1 +1 @@
-07f7ee65741318dec532e697349df568
+8beb24b746da04389648d65442b3fb27

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

@@ -1 +1 @@
-0812a12fc3cc429e4a46d7001a5db9fa11faa5fa
+8f014cd5ad5596a8660865918f34d57e96318181

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

@@ -1 +1 @@
-4611d64d0e92ad43d8a487a107ee0422cff861f119287ec7e62fd006bf77ad3e
+00837d4c8ed40055be180e9910d9ed846227ab6602aef92f5f397e03348985db

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

@@ -1 +1 @@
-4dff8d7ddda323e9df5ee3545288bede281b6a8d89687d580cfdc3502bf3a101ee1fcd95913fb8a5d761f109c74f00354f2e9b8b9d87177bc6f898777fb8b6a9
+400a09733b7b0b618213ee16be214463bc22a236e1073bd075d8e75a3ca278987524685812324ef7b2b52a0ec4be6a0ccd056dfc9e1f059080ba8c4594aa811f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expo/ui",
-  "version": "56.0.8",
+  "version": "56.0.9",
   "description": "A collection of UI components",
   "sideEffects": [
     "*.fx.js"
@@ -91,7 +91,7 @@
     "@types/react": "~19.2.0",
     "react-native-reanimated": "4.3.1",
     "react-native-worklets": "0.8.3",
-    "expo": "56.0.0-preview.12",
+    "expo": "56.0.0-preview.13",
     "expo-module-scripts": "56.0.2"
   },
   "jest": {
@@ -120,7 +120,7 @@
       "optional": true
     }
   },
-  "gitHead": "f26be3dd9396bf7c399a1d607865d0fabdbc0d64",
+  "gitHead": "290368bc41026449a05a4ebf991b85c3a2fb0e3a",
   "scripts": {
     "build": "expo-module build",
     "clean": "expo-module clean",

package/src/State/useNativeState.ts

@@ -12,11 +12,39 @@ const ExpoUI = requireNativeModule('ExpoUI');
  */
 export type ObservableState<T> = SharedObject & {
   /**
-   * The current value. Reads are safe from any thread; prefer writing from a worklet
-   * so the update runs on the native UI thread. Updating state from the JS thread
-   * might show a development warning.
+   * The current value.
+   *
+   * Writes from a UI worklet are synchronous and immediately readable. Writes
+   * from the JS thread are scheduled to the UI thread asynchronously, the new value is not readable until the update has been
+   * applied. Prefer writing from a worklet when you need synchronous updates
    */
   value: T;
+
+  /**
+   * A single listener invoked on the native UI runtime whenever the value changes
+   * (after iOS `didSet` and Android's setter). Assigning replaces the previous
+   * listener; assign `null` to clear. The initial value does not fire `onChange`.
+   *
+   * The callback must be a worklet so it can run synchronously on the UI thread.
+   * Attach it inside `useEffect` and clear it in the cleanup so the listener
+   * lifecycle matches the component lifecycle.
+   *
+   * @example
+   * ```tsx
+   * const state = useNativeState(0);
+   *
+   * useEffect(() => {
+   *   state.onChange = (value) => {
+   *     'worklet';
+   *     console.log('changed to', value);
+   *   };
+   *   return () => {
+   *     state.onChange = null;
+   *   };
+   * }, []);
+   * ```
+   */
+  onChange: { listener(value: T): void }['listener'] | null;
 };
 
 /**
@@ -28,6 +56,7 @@ export function useNativeState<T>(initialValue: T): ObservableState<T> {
   return useReleasingSharedObject(() => {
     const state = new ExpoUI.ObservableState({ value: initialValueRef.current });
     defineValueProperty(state);
+    defineOnChangeProperty(state);
     return state;
   }, []) as ObservableState<T>;
 }
@@ -35,26 +64,57 @@ export function useNativeState<T>(initialValue: T): ObservableState<T> {
 type NativeObservableState = {
   getValue(): unknown;
   setValue(v: { value: unknown }): void;
+  setOnChange(callback: object | null): void;
 };
 
 /**
  * Adds a `value` property that delegates to the native `getValue`/`setValue` functions.
  */
 function defineValueProperty(state: NativeObservableState): void {
-  let warnedOnJSWrite = false;
   Object.defineProperty(state, 'value', {
     get() {
       return state.getValue();
     },
     set(v: unknown) {
-      if (__DEV__ && !warnedOnJSWrite && worklets && !worklets.isUIRuntime()) {
-        warnedOnJSWrite = true;
-        console.warn(
-          'ObservableState.value was set from the JS thread, the result may be unexpected. ' +
-            'Use a worklet to update the state.'
+      state.setValue({ value: v });
+    },
+  });
+}
+
+/**
+ * Adds an `onChange` property that wraps the user's worklet function as a
+ * `WorkletCallback` SharedObject before handing it to native. The cached
+ * function (not the SharedObject) is what the getter returns, so reading
+ * `state.onChange` gives back what the user assigned.
+ */
+function defineOnChangeProperty(state: NativeObservableState): void {
+  let currentFn: ((value: unknown) => void) | null = null;
+  Object.defineProperty(state, 'onChange', {
+    get() {
+      return currentFn;
+    },
+    set(fn: ((value: unknown) => void) | null | undefined) {
+      if (!fn) {
+        currentFn = null;
+        state.setOnChange(null);
+        return;
+      }
+      if (!worklets) {
+        throw new Error(
+          "ObservableState.onChange requires the 'react-native-worklets' package, which couldn't be loaded. " +
+            'Install react-native-worklets and rebuild the native app, then assign onChange again.'
         );
       }
-      state.setValue({ value: v });
+      if (!worklets.isWorkletFunction(fn)) {
+        throw new Error(
+          'ObservableState.onChange must be a worklet so it can run on the UI runtime when the native value changes. ' +
+            "Add the 'worklet' directive as the first statement in your callback: " +
+            "state.onChange = (value) => { 'worklet'; ... };"
+        );
+      }
+      currentFn = fn;
+      const callback = new ExpoUI.WorkletCallback(worklets.createSerializable(fn));
+      state.setOnChange(callback);
     },
   });
 }

package/src/community/bottom-sheet/BottomSheet.ios.tsx

@@ -84,12 +84,6 @@ export function BottomSheet(props: BottomSheetProps) {
   } = props;
   const { width } = useWindowDimensions();
 
-  // Two-state pattern for animated close:
-  // - isMounted: whether the native sheet tree exists in the React tree
-  // - isPresented: passed to native isPresented prop (controls SwiftUI animation)
-  // On close: isPresented→false (native animates out) → onIsPresentedChange fires → isMounted→false (unmount)
-  // On open: isMounted→true + isPresented→true (mount + native animates in)
-  const [isMounted, setIsMounted] = useState(indexProp >= 0);
   const [isPresented, setIsPresented] = useState(indexProp >= 0);
   const [currentIndex, setCurrentIndex] = useState(Math.max(indexProp, 0));
   // Ref mirrors currentIndex for use in handleDetentChange without adding it as a useCallback dep
@@ -129,7 +123,6 @@ export function BottomSheet(props: BottomSheetProps) {
       fireCloseCallbacks();
     } else if (indexProp >= 0) {
       closedRef.current = false;
-      setIsMounted(true);
       setIsPresented(true);
       const clampedIndex = Math.min(indexProp, detents.length - 1);
       setCurrentIndex(clampedIndex);
@@ -141,7 +134,6 @@ export function BottomSheet(props: BottomSheetProps) {
     (presented: boolean) => {
       if (!presented) {
         setIsPresented(false);
-        setIsMounted(false);
         fireCloseCallbacks();
       }
     },
@@ -169,7 +161,6 @@ export function BottomSheet(props: BottomSheetProps) {
       }
       const clampedIndex = Math.min(Math.max(index, 0), detents.length - 1);
       closedRef.current = false;
-      setIsMounted(true);
       setIsPresented(true);
       currentIndexRef.current = clampedIndex;
       setCurrentIndex(clampedIndex);
@@ -224,14 +215,6 @@ export function BottomSheet(props: BottomSheetProps) {
     ]
   );
 
-  if (!isMounted) {
-    return (
-      <BottomSheetInternalContext.Provider value={internalContextValue}>
-        <BottomSheetContext.Provider value={methods}>{null}</BottomSheetContext.Provider>
-      </BottomSheetInternalContext.Provider>
-    );
-  }
-
   return (
     <BottomSheetInternalContext.Provider value={internalContextValue}>
       <BottomSheetContext.Provider value={methods}>

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

@@ -0,0 +1,92 @@
+import { requireNativeView } from 'expo';
+import { type ColorValue } from 'react-native';
+
+import type { ObservableState } from '../../State/useNativeState';
+import { getStateId } from '../../State/utils';
+import { type ModifierConfig } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+/**
+ * Common props shared by loading indicator variants.
+ */
+export type LoadingIndicatorCommonConfig = {
+  /**
+   * An observable state that holds the current progress value.
+   * Create one with `useNativeState(0)`. Omit for indeterminate loading.
+   */
+  progress?: ObservableState<number | null>;
+  /**
+   * Loading indicator color.
+   */
+  color?: ColorValue;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+};
+
+type NativeLoadingIndicatorCommonConfig = Omit<
+  LoadingIndicatorCommonConfig,
+  'progress' | 'modifiers'
+> & {
+  progress?: number;
+  modifiers?: unknown;
+};
+
+function transformProps<T extends LoadingIndicatorCommonConfig>(
+  props: T
+): NativeLoadingIndicatorCommonConfig {
+  const { modifiers, progress, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+    progress: getStateId(progress),
+  };
+}
+
+function createLoadingIndicatorComponent<P extends LoadingIndicatorCommonConfig>(
+  viewName: string
+): React.ComponentType<P> {
+  const NativeView: React.ComponentType<NativeLoadingIndicatorCommonConfig> = requireNativeView(
+    'ExpoUI',
+    viewName
+  );
+  function Component(props: P) {
+    return <NativeView {...transformProps(props)} />;
+  }
+  Component.displayName = viewName;
+  return Component;
+}
+
+// region LoadingIndicator
+
+/**
+ * A loading indicator that displays loading using morphing shapes.
+ *
+ * Matches the Jetpack Compose `LoadingIndicator`.
+ */
+export const LoadingIndicator = createLoadingIndicatorComponent('LoadingIndicatorView');
+
+// endregion
+
+// region ContainedLoadingIndicator
+
+export type ContainedLoadingIndicatorProps = LoadingIndicatorCommonConfig & {
+  /**
+   * Loading indicator's container color
+   */
+  containerColor?: ColorValue;
+};
+
+/**
+ * A loading indicator that displays loading using morphing shapes inside a container.
+ *
+ * Matches the Jetpack Compose `ContainedLoadingIndicator`.
+ */
+export const ContainedLoadingIndicator =
+  createLoadingIndicatorComponent<ContainedLoadingIndicatorProps>('ContainedLoadingIndicatorView');
+// endregion
+
+// Exported for docs api data
+export { type ObservableState };

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

@@ -0,0 +1,135 @@
+import { requireNativeView } from 'expo';
+import { type Ref } from 'react';
+import { type ColorValue } from 'react-native';
+
+import { type ModifierConfig } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+export type SnackbarProps = {
+  /**
+   * The background color of the snackbar container.
+   */
+  containerColor?: ColorValue;
+  /**
+   * The preferred content color used for the message text.
+   */
+  contentColor?: ColorValue;
+  /**
+   * The content color used for the action button.
+   */
+  actionContentColor?: ColorValue;
+  /**
+   * The content color used for the dismiss-action icon button.
+   */
+  dismissActionContentColor?: ColorValue;
+  /**
+   * Whether the action should be placed on a new line below the message.
+   * Useful for long action labels.
+   * @default false
+   */
+  actionOnNewLine?: boolean;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+};
+
+const SnackbarNativeView: React.ComponentType<SnackbarProps> = requireNativeView(
+  'ExpoUI',
+  'SnackbarView'
+);
+
+/**
+ * Styling configuration for the snackbar shown by `SnackbarHost`. Pass as a
+ * child to override colors or place the action on a new line.
+ */
+export function Snackbar(props: SnackbarProps) {
+  const { modifiers, ...rest } = props;
+  return (
+    <SnackbarNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...rest}
+    />
+  );
+}
+
+// --- SnackbarHost ---
+
+/**
+ * How long the snackbar is shown. Mirrors Compose's `SnackbarDuration` enum.
+ */
+export type SnackbarDuration = 'short' | 'long' | 'indefinite';
+
+/**
+ * Reason a snackbar invocation resolved. Mirrors Compose's `SnackbarResult` enum.
+ */
+export type SnackbarResult = 'actionPerformed' | 'dismissed';
+
+export type SnackbarShowOptions = {
+  /**
+   * The message body of the snackbar.
+   */
+  message: string;
+  /**
+   * Label for the optional action button. When omitted, no action button is shown.
+   */
+  actionLabel?: string;
+  /**
+   * Whether to show a trailing close (X) icon button to dismiss the snackbar.
+   * @default false
+   */
+  withDismissAction?: boolean;
+  /**
+   * How long to show the snackbar. Defaults to `'short'` when an `actionLabel`
+   * is not provided, and `'indefinite'` when it is, matching Compose.
+   */
+  duration?: SnackbarDuration;
+};
+
+export type SnackbarHostRef = {
+  /**
+   * Shows a snackbar and resolves with `'actionPerformed'` when the user taps
+   * the action, or `'dismissed'` when it times out or the dismiss-action
+   * button is tapped. Subsequent calls queue and show after the current
+   * snackbar is dismissed.
+   */
+  showSnackbar: (options: SnackbarShowOptions) => Promise<SnackbarResult>;
+};
+
+export type SnackbarHostProps = {
+  /**
+   * Ref exposing the imperative `showSnackbar` method.
+   */
+  ref?: Ref<SnackbarHostRef>;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+  /**
+   * Optional `Snackbar` child supplying styling for shown snackbars. Mirrors
+   * Compose's `SnackbarHost(hostState) { data -> Snackbar(data, ...) }` lambda.
+   */
+  children?: React.ReactNode;
+};
+
+const SnackbarHostNativeView: React.ComponentType<SnackbarHostProps> = requireNativeView(
+  'ExpoUI',
+  'SnackbarHostView'
+);
+
+/**
+ * A Material 3 [SnackbarHost](https://developer.android.com/develop/ui/compose/components/snackbar)
+ * that displays snackbars triggered via its ref's `showSnackbar` method.
+ */
+export function SnackbarHost(props: SnackbarHostProps) {
+  const { modifiers, children, ...rest } = props;
+  return (
+    <SnackbarHostNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...rest}>
+      {children}
+    </SnackbarHostNativeView>
+  );
+}

package/src/jetpack-compose/index.ts

@@ -49,6 +49,7 @@ export {
   type HorizontalPagerProps,
 } from './HorizontalPager';
 export * from './SearchBar';
+export * from './Snackbar';
 export * from './DockedSearchBar';
 export * from './HorizontalFloatingToolbar';
 export * from './FloatingActionButton';
@@ -57,6 +58,7 @@ export * from './RadioButton';
 export * from './Surface';
 export { type TextProps, Text } from './Text';
 export * from './Tooltip';
+export * from './LoadingIndicator';
 
 export * from './AnimatedVisibility';
 export * from './Box';

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

@@ -1,6 +1,6 @@
 import { type ColorValue } from 'react-native';
 
-import { type AnimatedValue } from './animation';
+import { type AnimatedValue, type AnimationSpec } from './animation';
 import { createModifier, createModifierWithEventListener } from './createModifier';
 export { type ExpoModifier, type ModifierConfig } from '../../types';
 export {
@@ -142,9 +142,12 @@ export const offset = (x: number, y: number) => createModifier('offset', { x, y
 
 /**
  * Sets the background color.
+ * Pass an `animationSpec` to smoothly animate between colors when the prop changes (backed by `animateColorAsState`).
  * @param color - A color string (hex, e.g., `'#FF0000'`).
+ * @param options.animationSpec - Optional spec — animate between color changes.
  */
-export const background = (color: ColorValue) => createModifier('background', { color });
+export const background = (color: ColorValue, options?: { animationSpec?: AnimationSpec }) =>
+  createModifier('background', { color, animationSpec: options?.animationSpec });
 
 /**
  * Adds a border around the view.