@expo/ui 57.0.14 → 57.0.16

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

@@ -0,0 +1 @@
+36bbbdb98934c3b0ecf275049cb2012dcb65ad2d329fee1f7e42428dcb49da04

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

@@ -0,0 +1 @@
+99fa1b7ecf29945c1331833c23ab82c3717bea6a43f8056dacf7179a8eb86b18b7d1511838585debdaa6df79b9ea528e8af0babce933a03bd606838ef8747b7a

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

@@ -0,0 +1 @@
+e2ee254493f7d171d19e6e659e95a4b5

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

@@ -0,0 +1 @@
+a14f54eee92691240a7cd6a83f944b0ba11733a0

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

@@ -0,0 +1 @@
+478029e9cf52a0e86909c248a99329f7e3488a65fc3ac06bce0fbf614f5553f1

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

@@ -0,0 +1 @@
+5e177e8e0e7abb84c61422d42bd006f13589886297c6835028fd8df1be8a86bac8415dff355cd4d29abe28b209eca4171c32b5ef5552f46d71c2fc39a8f2a9fd

package/local-maven-repo/expo/modules/ui/expo.modules.ui/{57.0.14/expo.modules.ui-57.0.14.module → 57.0.16/expo.modules.ui-57.0.16.module}

@@ -3,7 +3,7 @@
   "component": {
     "group": "expo.modules.ui",
     "module": "expo.modules.ui",
-    "version": "57.0.14",
+    "version": "57.0.16",
     "attributes": {
       "org.gradle.status": "release"
     }
@@ -24,13 +24,13 @@
       },
       "files": [
         {
-          "name": "expo.modules.ui-57.0.14.aar",
-          "url": "expo.modules.ui-57.0.14.aar",
-          "size": 1995898,
-          "sha512": "3e051539308c1cadbcf965de44aabe9360dbdce57508d9ee0da9b2c465e08dbd5eb65f936deabea9dbd47964e7e445347fbdb601962e13379338b1222937aeb8",
-          "sha256": "319460f26a7e44bc448ec15b0a2a60c28518cc6f3b38eaabc793d5edd69d4895",
-          "sha1": "6aaf95d2f756b71ada1992a1a74bdfb36146fb94",
-          "md5": "1540b06db518474f334df39b0fc8398d"
+          "name": "expo.modules.ui-57.0.16.aar",
+          "url": "expo.modules.ui-57.0.16.aar",
+          "size": 2023859,
+          "sha512": "5e177e8e0e7abb84c61422d42bd006f13589886297c6835028fd8df1be8a86bac8415dff355cd4d29abe28b209eca4171c32b5ef5552f46d71c2fc39a8f2a9fd",
+          "sha256": "478029e9cf52a0e86909c248a99329f7e3488a65fc3ac06bce0fbf614f5553f1",
+          "sha1": "a14f54eee92691240a7cd6a83f944b0ba11733a0",
+          "md5": "e2ee254493f7d171d19e6e659e95a4b5"
         }
       ]
     },
@@ -141,13 +141,13 @@
       ],
       "files": [
         {
-          "name": "expo.modules.ui-57.0.14.aar",
-          "url": "expo.modules.ui-57.0.14.aar",
-          "size": 1995898,
-          "sha512": "3e051539308c1cadbcf965de44aabe9360dbdce57508d9ee0da9b2c465e08dbd5eb65f936deabea9dbd47964e7e445347fbdb601962e13379338b1222937aeb8",
-          "sha256": "319460f26a7e44bc448ec15b0a2a60c28518cc6f3b38eaabc793d5edd69d4895",
-          "sha1": "6aaf95d2f756b71ada1992a1a74bdfb36146fb94",
-          "md5": "1540b06db518474f334df39b0fc8398d"
+          "name": "expo.modules.ui-57.0.16.aar",
+          "url": "expo.modules.ui-57.0.16.aar",
+          "size": 2023859,
+          "sha512": "5e177e8e0e7abb84c61422d42bd006f13589886297c6835028fd8df1be8a86bac8415dff355cd4d29abe28b209eca4171c32b5ef5552f46d71c2fc39a8f2a9fd",
+          "sha256": "478029e9cf52a0e86909c248a99329f7e3488a65fc3ac06bce0fbf614f5553f1",
+          "sha1": "a14f54eee92691240a7cd6a83f944b0ba11733a0",
+          "md5": "e2ee254493f7d171d19e6e659e95a4b5"
         }
       ]
     },
@@ -161,13 +161,13 @@
       },
       "files": [
         {
-          "name": "expo.modules.ui-57.0.14-sources.jar",
-          "url": "expo.modules.ui-57.0.14-sources.jar",
-          "size": 101264,
-          "sha512": "7f85f310231cb704750cc75032268dda0fffff171528345c140fed39eb134be565c867ef329d092c1a128a88d6657576fb6e53b4009d40b8c465724ede556d08",
-          "sha256": "b873eba373a618838203ac4021d4694eaf842a0114c10a5925cd0b68c69df887",
-          "sha1": "52d4523918d2d1e36704df643a721bc42831a30d",
-          "md5": "f7d54b0ae1f14df62dfcecff0d9bbbfc"
+          "name": "expo.modules.ui-57.0.16-sources.jar",
+          "url": "expo.modules.ui-57.0.16-sources.jar",
+          "size": 103145,
+          "sha512": "99fa1b7ecf29945c1331833c23ab82c3717bea6a43f8056dacf7179a8eb86b18b7d1511838585debdaa6df79b9ea528e8af0babce933a03bd606838ef8747b7a",
+          "sha256": "36bbbdb98934c3b0ecf275049cb2012dcb65ad2d329fee1f7e42428dcb49da04",
+          "sha1": "6b28263e7e0227478fe261eeffb9f640dced8ca0",
+          "md5": "56549744b9307aa46758e19db9dabf90"
         }
       ]
     }

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

@@ -0,0 +1 @@
+dd8aaf57dde82e067e3b01e533d18c81

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

@@ -0,0 +1 @@
+e8be172ae1de0c69a4721b510ad4b2a57f38d0d7

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

@@ -0,0 +1 @@
+606fea92fbb5bee94b622a8c8c181f4c7a092d8b495fbc69a5b78efe602667fd

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

@@ -0,0 +1 @@
+29813d4039bcdd201463695c4dc7c25cd2a542a3e3b18d8a5dc483cd9ee8e654edcf8e87f896a44c31548e845e3f0b562440200ec50c23dcba4faf29e7918436

package/local-maven-repo/expo/modules/ui/expo.modules.ui/{57.0.14/expo.modules.ui-57.0.14.pom → 57.0.16/expo.modules.ui-57.0.16.pom}

@@ -9,7 +9,7 @@
   <modelVersion>4.0.0</modelVersion>
   <groupId>expo.modules.ui</groupId>
   <artifactId>expo.modules.ui</artifactId>
-  <version>57.0.14</version>
+  <version>57.0.16</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/57.0.16/expo.modules.ui-57.0.16.pom.md5

@@ -0,0 +1 @@
+94c56cd4cc07d1314adeb432470b7e18

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

@@ -0,0 +1 @@
+ba7bbd6ac7336e57e6f2bff3bbf73cb50e280e27

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

@@ -0,0 +1 @@
+7a5ff13f5a7f7b543453f3ca4d75fc04c726c75bd6ab837043af8100f6154adb

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

@@ -0,0 +1 @@
+63a8a73c453fe98411f22786180631b84d8299418a6eded64c4a4b9df88017f60e8812a4d658d050ac0e9f4e79434cbb486799d5840b7a552978e24692160173

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>57.0.14</latest>
-    <release>57.0.14</release>
+    <latest>57.0.16</latest>
+    <release>57.0.16</release>
     <versions>
-      <version>57.0.14</version>
+      <version>57.0.16</version>
     </versions>
-    <lastUpdated>20260826195105</lastUpdated>
+    <lastUpdated>20260904074016</lastUpdated>
   </versioning>
 </metadata>

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

@@ -1 +1 @@
-4dfe61c00978e656bb86f7a4aba692dd
+06b4eb4f73252997f0c748122269fced

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

@@ -1 +1 @@
-b9406185faafd8465b9a6d8c48ab5f7f70546764
+05ac7add69ca0a63ef04e38e0856a243b893ea2d

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

@@ -1 +1 @@
-39b0c675409d452116a0df7c42ac801510989b59056cbac7611145c7e2548593
+ba5674dc8956e32170e50ea50d568498b400b971904ccb74191e0a5b5fe1756c

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

@@ -1 +1 @@
-de8e79434bbdd397d0eba8e9679e265eb3f2b388de06555138c1a2c9e1f337b9ef0240ba566686cba658d7a7b501523141df379c83d1b35a44f0b6b94210046a
+2f30a796d34d631e97171fcd04ae67683c47d0bfcbafe4f4d2aec81201f4048079e549130446e2dd5345084f6d193a0481f2f2ccc691bc843648fedc2e71a07d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expo/ui",
-  "version": "57.0.14",
+  "version": "57.0.16",
   "description": "A collection of UI components",
   "sideEffects": [
     "*.fx.js",
@@ -96,8 +96,8 @@
     "@types/react": "~19.2.0",
     "react-native-reanimated": "4.5.1",
     "react-native-worklets": "0.10.1",
-    "expo-module-scripts": "56.0.3",
-    "expo": "57.0.17"
+    "expo": "57.0.20",
+    "expo-module-scripts": "56.0.3"
   },
   "jest": {
     "preset": "expo-module-scripts"
@@ -121,7 +121,7 @@
       "optional": true
     }
   },
-  "gitHead": "c300d2cc60c9e684e64f48d9bc90ea18a571d01d",
+  "gitHead": "d36f125067e9c6e67689f2b75cf4fb19254c3c59",
   "scripts": {
     "build": "expo-module build",
     "clean": "expo-module clean",

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

@@ -1,5 +1,6 @@
 import { requireNativeView } from 'expo';
 import type { ReactElement, ComponentType } from 'react';
+import type { LayoutChangeEvent } from 'react-native';
 
 import { PresentedContentContext, useIsPresentedInOwnWindow } from '../../PresentedContentContext';
 import type { ModifierConfig } from '../../types';
@@ -14,6 +15,11 @@ export interface RNHostProps extends PrimitiveBaseProps {
    * @default false
    */
   matchContents?: boolean;
+  /**
+   * Called on mount and whenever this view's layout in the React Native view tree changes.
+   * With `matchContents`, the reported size is the one measured from the hosted view.
+   */
+  onLayout?: (event: LayoutChangeEvent) => void;
   /**
    * The RN View to be hosted.
    */
@@ -26,6 +32,11 @@ export interface RNHostProps extends PrimitiveBaseProps {
 
 type NativeRNHostProps = RNHostProps & {
   layoutRoot: boolean;
+  /**
+   * Internal. Drives the shadow node's content measurement, see
+   * `ExpoViewShadowNode::sizesToContent`.
+   */
+  expoInternalSizeFromChildren?: boolean;
 };
 const NativeRNHostView: ComponentType<NativeRNHostProps> = requireNativeView(
   'ExpoUI',
@@ -39,6 +50,7 @@ function transformProps(props: RNHostProps, layoutRoot: boolean): NativeRNHostPr
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
     layoutRoot,
+    expoInternalSizeFromChildren: props.matchContents,
   };
 }
 

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

@@ -86,6 +86,14 @@ export interface SliderProps {
   children?: React.ReactNode;
 }
 
+export interface VerticalSliderProps extends SliderProps {
+  /**
+   * Whether the direction of the slider is reversed. By default, values increase from top to bottom.
+   * @default false
+   */
+  reverseDirection?: boolean;
+}
+
 type NativeSliderProps = Omit<SliderProps, 'onValueChange' | 'onValueChangeFinished' | 'children'> &
   ViewEvent<'onValueChange', { value: number }> &
   ViewEvent<'onValueChangeFinished', void> & { children?: React.ReactNode };
@@ -95,6 +103,10 @@ const SliderNativeView: React.ComponentType<NativeSliderProps> = requireNativeVi
   'SliderView'
 );
 
+const VerticalSliderNativeView: React.ComponentType<
+  NativeSliderProps & Pick<VerticalSliderProps, 'reverseDirection'>
+> = requireNativeView('ExpoUI', 'VerticalSliderView');
+
 function transformSliderProps(
   props: Omit<SliderProps, 'children'>
 ): Omit<NativeSliderProps, 'children'> {
@@ -118,7 +130,7 @@ function transformSliderProps(
 }
 
 /**
- * A custom thumb slot for `Slider`.
+ * A custom thumb slot for `Slider` and `VerticalSlider`.
  * Wrap any content to use as the slider's thumb indicator.
  *
  * @platform android
@@ -128,7 +140,7 @@ function Thumb(props: { children: React.ReactNode }) {
 }
 
 /**
- * A custom track slot for `Slider`.
+ * A custom track slot for `Slider` and `VerticalSlider`.
  * Wrap any content to use as the slider's track.
  *
  * @platform android
@@ -150,4 +162,23 @@ function SliderComponent(props: SliderProps) {
 SliderComponent.Thumb = Thumb;
 SliderComponent.Track = Track;
 
+/**
+ * A vertical slider component that wraps Material3's `VerticalSlider`.
+ *
+ * @platform android
+ */
+export function VerticalSlider(props: VerticalSliderProps) {
+  const { children, reverseDirection, ...sliderProps } = props;
+  return (
+    <VerticalSliderNativeView
+      {...transformSliderProps(sliderProps)}
+      reverseDirection={reverseDirection}>
+      {children}
+    </VerticalSliderNativeView>
+  );
+}
+
+VerticalSlider.Thumb = Thumb;
+VerticalSlider.Track = Track;
+
 export { SliderComponent as Slider };

package/src/swift-ui/RNHostView.tsx

@@ -1,4 +1,5 @@
 import { requireNativeView } from 'expo';
+import type { LayoutChangeEvent } from 'react-native';
 
 import { PresentedContentContext, useIsPresentedInOwnWindow } from '../PresentedContentContext';
 
@@ -13,6 +14,7 @@ export interface RNHostViewProps {
    * @default false
    */
   matchContents?: boolean;
+  onLayout?: (event: LayoutChangeEvent) => void;
   /**
    * The RN View to be hosted.
    */
@@ -30,6 +32,7 @@ export function RNHostView(props: RNHostViewProps) {
     <RNHostNativeView
       {...props}
       layoutRoot={layoutRoot}
+      expoInternalSizeFromChildren={props.matchContents}
       // `matchContents` can only be used once on mount
       // So we force unmount when it changes to prevent unexpected layout
       key={props.matchContents ? 'matchContents' : 'noMatchContents'}>

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

@@ -1,12 +1,54 @@
-import { createModifier } from './createModifier';
+import { createModifier, type ModifierConfig } from './createModifier';
+import { resolveShapeStyle, type ShapeStyle } from './shapeStyle';
 import type { Shape } from './shapes/index';
-import type { Color } from './types';
+
+export type BackgroundOptions = {
+  /**
+   * The safe area edges the background extends into.
+   * @default 'all'
+   */
+  ignoresSafeAreaEdges?:
+    | 'all'
+    | 'top'
+    | 'bottom'
+    | 'leading'
+    | 'trailing'
+    | 'horizontal'
+    | 'vertical';
+};
 
 /**
  * Sets the background of a view.
- * @param color - The background color (hex string). For example, `#FF0000`.
- * @param shape - Optional shape to clip the background. If not provided, the background will fill the entire view.
- * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/SwiftUI/View/background(_:alignment:)).
+ *
+ * Two variants matching SwiftUI:
+ * - `background(style)` — paints the whole view, expanding into the safe area unless
+ *   `ignoresSafeAreaEdges` narrows it down
+ * - `background(style, shapes.capsule())` — paints the given shape
+ *
+ * To draw an arbitrary view behind another one, use the `Background` component instead.
+ *
+ * @example
+ * ```tsx
+ * <Text modifiers={[background('#FF0000')]}>Solid color</Text>
+ * <Text modifiers={[background({ type: 'material', material: 'thin' })]}>Blurred backdrop</Text>
+ * <Text modifiers={[background('#FF0000', shapes.roundedRectangle({ cornerRadius: 12 }))]}>
+ *   Rounded
+ * </Text>
+ * ```
+ *
+ * @param style - Any [`ShapeStyle`](#shapestyle): a color, a hierarchical style, a material, or a gradient.
+ * @param shape - The shape the style is painted in. Omit it to paint the whole view.
+ * @param options - Options of the variant without a shape, such as the safe area edges the background extends into.
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/background(_:ignoressafeareaedges:)).
  */
-export const background = (color: Color, shape?: Shape) =>
-  createModifier('background', { color, ...shape });
+export function background(style: ShapeStyle, options?: BackgroundOptions): ModifierConfig;
+export function background(style: ShapeStyle, shape?: Shape): ModifierConfig;
+export function background(
+  style: ShapeStyle,
+  shapeOrOptions?: Shape | BackgroundOptions
+): ModifierConfig {
+  return createModifier('background', {
+    style: resolveShapeStyle(style),
+    ...shapeOrOptions,
+  });
+}

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

@@ -21,6 +21,7 @@ import { gaugeStyle } from './gaugeStyle';
 import { progressViewStyle } from './progressViewStyle';
 import { onScrollPhaseChange, useScrollGeometryChange } from './scrollObservation';
 import { id, scrollPosition } from './scrollPosition';
+import { resolveShapeStyle, type ShapeStyle } from './shapeStyle';
 import { symbolEffect } from './symbolEffect';
 import type { Color } from './types';
 import { activityBackgroundTint, widgetAccentedRenderingMode, widgetURL } from './widgets';
@@ -457,51 +458,20 @@ export const foregroundColor = (color: Color) => createModifier('foregroundColor
  * })]}>
  *   Gradient Text
  * </Text>
+ *
+ * // Material
+ * <Text modifiers={[foregroundStyle({ type: 'material', material: 'regular' })]}>
+ *   Text painted with a material
+ * </Text>
  * ```
  *
+ * @param style - Any [`ShapeStyle`](#shapestyle): a color, a hierarchical style, a material or a gradient.
  * @returns A view modifier that applies the specified foreground style
  * @since iOS 15.0+ (hierarchical quinary requires iOS 16.0+)
  * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/foregroundstyle(_:)).
  */
-export const foregroundStyle = (
-  style:
-    | Color // Simple color (hex string, color name, or React Native ColorValue)
-    | { type: 'color'; color: Color }
-    | {
-        type: 'hierarchical';
-        style: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
-      }
-    | {
-        type: 'linearGradient';
-        colors: Color[];
-        startPoint: { x: number; y: number };
-        endPoint: { x: number; y: number };
-      }
-    | {
-        type: 'radialGradient';
-        colors: Color[];
-        center: { x: number; y: number };
-        startRadius: number;
-        endRadius: number;
-      }
-    | {
-        type: 'angularGradient';
-        colors: Color[];
-        center: { x: number; y: number };
-      }
-) => {
-  if (style == null || typeof style !== 'object' || !('type' in style)) {
-    return createModifier('foregroundStyle', { styleType: 'color', color: style });
-  }
-  if (style.type === 'hierarchical') {
-    return createModifier('foregroundStyle', {
-      styleType: 'hierarchical',
-      hierarchicalStyle: style.style,
-    });
-  }
-  const { type, ...rest } = style;
-  return createModifier('foregroundStyle', { styleType: type, ...rest });
-};
+export const foregroundStyle = (style: ShapeStyle) =>
+  createModifier('foregroundStyle', { style: resolveShapeStyle(style) });
 
 /**
  * Makes text bold.
@@ -1032,6 +1002,10 @@ export const overlay = (params: {
 /**
  * Adds a background behind the view.
  * @param params - Background color and alignment.
+ * @deprecated Wraps `background(_:alignment:)`, which SwiftUI deprecated in favor of
+ * `background(alignment:content:)`, available since iOS 15. Use the `background` modifier for a
+ * plain fill, or the `Background` component when the background has to be a view or needs an
+ * alignment.
  */
 export const backgroundOverlay = (params: {
   color?: Color;
@@ -1854,6 +1828,7 @@ export * from './progressViewStyle';
 export * from './gaugeStyle';
 export * from './presentationModifiers';
 export * from './environment';
+export type { ShapeStyle } from './shapeStyle';
 export * from './scrollPosition';
 export * from './symbolEffect';
 export * from './scrollObservation';

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

@@ -3,6 +3,7 @@ import {
   createModifierWithEventListener,
   type ModifierConfig,
 } from './createModifier';
+import type { Color } from './types';
 
 /**
  * Presentation detent type for controlling sheet heights.
@@ -88,12 +89,12 @@ export const presentationBackgroundInteraction = (
  * Sets the background of a sheet presentation. Paints the entire sheet chrome
  * including the drag-indicator zone and home-indicator safe-area inset, which
  * a regular `background()` modifier cannot reach.
- * @param color - The background color (hex string). For example, `#FF0000`.
+ * @param color - The background color.
  * @platform ios 16.4+
  * @see Official [SwiftUI
 documentation](https://developer.apple.com/documentation/swiftui/view/presentationbackground(_:)).
  */
-export const presentationBackground = (color: string) =>
+export const presentationBackground = (color: Color) =>
   createModifier('presentationBackground', { color });
 
 /**

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

@@ -0,0 +1,55 @@
+import type { Color } from './types';
+
+/**
+ * A style that paints an area, mirroring SwiftUI's `ShapeStyle`.
+ * A bare color is a shorthand for `{ type: 'color', color }`.
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/shapestyle).
+ */
+export type ShapeStyle =
+  | Color // Simple color (hex string, color name, or React Native ColorValue)
+  | { type: 'color'; color: Color }
+  | {
+      type: 'hierarchical';
+      style: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
+    }
+  | {
+      /**
+       * A blurred backdrop that samples the content behind the view and adapts to the current
+       * color scheme. `'bar'` has no tvOS counterpart and is ignored there.
+       */
+      type: 'material';
+      material: 'ultraThin' | 'thin' | 'regular' | 'thick' | 'ultraThick' | 'bar';
+    }
+  | {
+      type: 'linearGradient';
+      colors: Color[];
+      startPoint: { x: number; y: number };
+      endPoint: { x: number; y: number };
+    }
+  | {
+      type: 'radialGradient';
+      colors: Color[];
+      center: { x: number; y: number };
+      startRadius: number;
+      endRadius: number;
+    }
+  | {
+      type: 'angularGradient';
+      colors: Color[];
+      center: { x: number; y: number };
+    };
+
+/**
+ * Normalizes a style into the shape the native side reads. A `Color` may itself be an object
+ * (for example the one returned by `PlatformColor`), so a style is only treated as a tagged
+ * variant when it carries a `type` field.
+ */
+export function resolveShapeStyle(style: ShapeStyle): Record<string, any> {
+  if (style == null || typeof style !== 'object' || !('type' in style)) {
+    return { type: 'color', color: style };
+  }
+  if (style.type === 'hierarchical') {
+    return { type: 'hierarchical', hierarchical: style.style };
+  }
+  return { ...style };
+}

package/src/universal/BottomSheet/index.android.tsx

@@ -43,6 +43,8 @@ export function BottomSheet({
   shouldDismissOnClickOutside = true,
   scrimColor,
   contentPadding,
+  containerColor,
+  contentColor,
 }: BottomSheetProps) {
   const sheetRef = useRef<ModalBottomSheetRef>(null);
   const [mount, setMount] = useState(isPresented);
@@ -86,6 +88,8 @@ export function BottomSheet({
         skipPartiallyExpanded={shouldSkipPartiallyExpanded(snapPoints)}
         properties={{ shouldDismissOnBackPress, shouldDismissOnClickOutside }}
         scrimColor={scrimColor}
+        containerColor={containerColor}
+        contentColor={contentColor}
         modifiers={modifiers}>
         <Column modifiers={contentModifiers}>{children}</Column>
       </ModalBottomSheet>

package/src/universal/BottomSheet/index.ios.tsx

@@ -2,6 +2,7 @@ import { BottomSheet as SwiftUIBottomSheet, Group, Host } from '@expo/ui/swift-u
 import {
   frame,
   padding,
+  presentationBackground,
   presentationDetents,
   presentationDragIndicator,
   type ModifierConfig,
@@ -26,6 +27,7 @@ export function BottomSheet({
   testID,
   modifiers,
   contentPadding,
+  containerColor,
 }: BottomSheetProps) {
   const { top, bottom, left, right } = resolveContentPadding(contentPadding, {
     top: 16,
@@ -41,6 +43,9 @@ export function BottomSheet({
   if (snapPoints && snapPoints.length > 0) {
     presentationModifiers.push(presentationDetents(snapPoints.map(snapPointToDetent)));
   }
+  if (containerColor) {
+    presentationModifiers.push(presentationBackground(containerColor));
+  }
   if (modifiers?.length) {
     presentationModifiers.push(...modifiers);
   }

package/src/universal/BottomSheet/index.tsx

@@ -35,6 +35,7 @@ export function BottomSheet({
   snapPoints,
   testID,
   contentPadding,
+  containerColor,
 }: BottomSheetProps) {
   const isDark = useColorScheme() === 'dark';
   const { top, bottom, left, right } = resolveContentPadding(contentPadding, {
@@ -63,6 +64,9 @@ export function BottomSheet({
             // The drawer has to fill the viewport or it gets pushed off-screen.
             ...(hasSnapPoints ? snapPointContentStyle : noSnapPointContentStyle),
             ...(showDragIndicator && dragIndicatorSpacing),
+            // An explicit containerColor overrides both the 'white' default
+            // above and the bare isDark fallback.
+            ...(typeof containerColor === 'string' && { backgroundColor: containerColor }),
           }}
           aria-describedby={undefined}>
           {/* Radix Dialog requires a title for a11y; render visually-hidden. */}

package/src/universal/BottomSheet/types.ts

@@ -110,4 +110,26 @@ export interface BottomSheetProps {
    * from `@expo/ui/swift-ui/modifiers` or `@expo/ui/jetpack-compose/modifiers`.
    */
   modifiers?: ModifierConfig[];
+
+  /**
+   * The sheet's own background color, painting its full chrome (including the
+   * drag-indicator zone and, on iOS, the home-indicator safe-area inset).
+   * When omitted, each platform keeps its own default.
+   *
+   * This only paints the background. `children` are React Native views on
+   * every platform, so they don't pick up a contrasting text color
+   * automatically -- set one explicitly if you use a dark `containerColor`.
+   * @platform android
+   * @platform ios 16.4+
+   * @platform web
+   */
+  containerColor?: ColorValue;
+
+  /**
+   * The preferred color for native Compose content that doesn't set its own
+   * color. Doesn't reach a `BottomSheet`'s (React Native) `children` -- see
+   * `containerColor`'s doc.
+   * @platform android
+   */
+  contentColor?: ColorValue;
 }