@expo/ui 57.0.14 → 57.0.15

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.
@@ -1854,6 +1824,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;
 }

package/src/universal/ListItem/ListItem.android.tsx

@@ -26,6 +26,7 @@ export function ListItem(props: ListItemProps) {
     trailing: trailingProp,
     supportingText,
     modifiers,
+    colors,
   } = props;
   const slots = extractListItemSlots(children);
   const leading = slots.leading ?? leadingProp;
@@ -34,7 +35,7 @@ export function ListItem(props: ListItemProps) {
   const itemModifiers = [...(onPress ? [clickable(onPress)] : []), ...(modifiers ?? [])];
 
   return (
-    <ComposeListItem modifiers={itemModifiers.length ? itemModifiers : undefined}>
+    <ComposeListItem colors={colors} modifiers={itemModifiers.length ? itemModifiers : undefined}>
       <ComposeListItem.HeadlineContent>
         <>{wrapStrings(slots.headline)}</>
       </ComposeListItem.HeadlineContent>

package/src/universal/ListItem/types.ts

@@ -1,7 +1,22 @@
 import type { ReactNode } from 'react';
+import type { ColorValue } from 'react-native';
 
 import type { ModifierConfig } from '../../types';
 
+/**
+ * Colors for a `ListItem`'s row elements, matching Jetpack Compose's
+ * `ListItemDefaults.colors()` on Android.
+ * @platform android
+ */
+export interface ListItemColors {
+  containerColor?: ColorValue;
+  contentColor?: ColorValue;
+  leadingContentColor?: ColorValue;
+  trailingContentColor?: ColorValue;
+  supportingContentColor?: ColorValue;
+  overlineContentColor?: ColorValue;
+}
+
 /**
  * Props for the [`ListItem.Leading`](#listitemleading) slot marker.
  */
@@ -74,4 +89,10 @@ export interface ListItemProps {
    * its default `buttonStyle(.plain)`.
    */
   modifiers?: ModifierConfig[];
+
+  /**
+   * Row colors. Applied on Android via Compose's `ListItem.colors`.
+   * @platform android
+   */
+  colors?: ListItemColors;
 }

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

@@ -15,6 +15,7 @@ export function RNHostView({
   disabled,
   hidden,
   testID,
+  onLayout,
   modifiers: extraModifiers,
 }: RNHostViewProps) {
   const modifiers = transformToModifiers(
@@ -24,7 +25,7 @@ export function RNHostView({
   );
 
   return (
-    <ComposeRNHostView matchContents={matchContents} modifiers={modifiers}>
+    <ComposeRNHostView matchContents={matchContents} modifiers={modifiers} onLayout={onLayout}>
       {children}
     </ComposeRNHostView>
   );

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

@@ -5,8 +5,12 @@ import type { RNHostViewProps } from './types';
 /**
  * Hosts React Native views inside SwiftUI views.
  */
-export function RNHostView({ children, matchContents }: RNHostViewProps) {
-  return <SwiftUIRNHostView matchContents={matchContents}>{children}</SwiftUIRNHostView>;
+export function RNHostView({ children, matchContents, onLayout }: RNHostViewProps) {
+  return (
+    <SwiftUIRNHostView matchContents={matchContents} onLayout={onLayout}>
+      {children}
+    </SwiftUIRNHostView>
+  );
 }
 
 export * from './types';

package/src/universal/RNHostView/index.tsx

@@ -20,12 +20,14 @@ export function RNHostView({
   hidden = false,
   testID,
   matchContents = false,
+  onLayout,
 }: RNHostViewProps) {
   useUniversalLifecycle(onAppear, onDisappear);
 
   return (
     <View
       testID={testID}
+      onLayout={onLayout}
       style={[
         matchContents ? styles.matchContents : styles.fillParent,
         style,

package/src/universal/RNHostView/types.ts

@@ -1,4 +1,5 @@
 import type { ReactElement } from 'react';
+import type { LayoutChangeEvent } from 'react-native';
 
 import type { UniversalBaseProps } from '../types';
 
@@ -18,6 +19,8 @@ export interface RNHostViewProps extends UniversalBaseProps {
    */
   matchContents?: boolean;
 
+  onLayout?: (event: LayoutChangeEvent) => void;
+
   /**
    * The React Native view to host.
    */

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.14/expo.modules.ui-57.0.14-sources.jar.md5

@@ -1 +0,0 @@
-f7d54b0ae1f14df62dfcecff0d9bbbfc

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.14/expo.modules.ui-57.0.14-sources.jar.sha1

@@ -1 +0,0 @@
-52d4523918d2d1e36704df643a721bc42831a30d

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

@@ -1 +0,0 @@
-b873eba373a618838203ac4021d4694eaf842a0114c10a5925cd0b68c69df887

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

@@ -1 +0,0 @@
-7f85f310231cb704750cc75032268dda0fffff171528345c140fed39eb134be565c867ef329d092c1a128a88d6657576fb6e53b4009d40b8c465724ede556d08

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

@@ -1 +0,0 @@
-1540b06db518474f334df39b0fc8398d

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

@@ -1 +0,0 @@
-6aaf95d2f756b71ada1992a1a74bdfb36146fb94

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

@@ -1 +0,0 @@
-319460f26a7e44bc448ec15b0a2a60c28518cc6f3b38eaabc793d5edd69d4895

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

@@ -1 +0,0 @@
-3e051539308c1cadbcf965de44aabe9360dbdce57508d9ee0da9b2c465e08dbd5eb65f936deabea9dbd47964e7e445347fbdb601962e13379338b1222937aeb8

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

@@ -1 +0,0 @@
-b3528f20a731815854be34a3c83cb636

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

@@ -1 +0,0 @@
-4b12fa7cf2eafec047ae0bb4290fa9ea36c6a1a9

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

@@ -1 +0,0 @@
-4c860ed7fc9f4b1492ee6bd299f9c0881ae8286f3eb0bcb95790c7285c19cd58

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

@@ -1 +0,0 @@
-ce1a1bea00c876f9666307b662e48a36d58f7dc4f26f5364c8039e542786d305d965855ef2b1832342fceca0c6e12bb87e906fb25a4ea41fe1da8d4b1585c459

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

@@ -1 +0,0 @@
-aa0d4725e4cc3aa39b4f2a815c980cce

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

@@ -1 +0,0 @@
-834f927d24513892b48b4a45afe0d0e0322d274c

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

@@ -1 +0,0 @@
-3f5e966c190b0b4a771b1e7498fd8d2d6227639ffdaa1ea746a8aad505469a8c

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

@@ -1 +0,0 @@
-3e6f229eb05b6c860730c16d6e3d5ca9c47eac8569f2d84bf8f925c547857fce65361e69ed56153b55527a5df3785243987d27b934cc46c50200974e62a7c28c