@expo/ui 56.0.7 → 56.0.8

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

@@ -0,0 +1,87 @@
+import { requireNativeView } from 'expo';
+import type { NativeSyntheticEvent } from 'react-native';
+
+import { Slot } from '../SlotView';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
+
+/**
+ * Props of the `Alert` component.
+ */
+export type AlertProps = {
+  /**
+   * The contents of the alert.
+   * Should include `Alert.Trigger`, `Alert.Actions`, and optionally `Alert.Message`.
+   */
+  children: React.ReactNode;
+  /**
+   * The title of the alert.
+   */
+  title: string;
+  /**
+   * Whether the alert is presented.
+   */
+  isPresented?: boolean;
+  /**
+   * 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;
+};
+
+const AlertNativeView: React.ComponentType<NativeAlertProps> = requireNativeView(
+  'ExpoUI',
+  'AlertView'
+);
+
+/**
+ * The component visible all the time that triggers the alert presentation.
+ */
+function Trigger(props: { children: React.ReactNode }) {
+  return <Slot name="trigger">{props.children}</Slot>;
+}
+
+/**
+ * The action buttons displayed in the alert. Use `Button` components from `@expo/ui/swift-ui` as children.
+ */
+function Actions(props: { children: React.ReactNode }) {
+  return <Slot name="actions">{props.children}</Slot>;
+}
+
+/**
+ * An optional message displayed below the title in the alert.
+ */
+function Message(props: { children: React.ReactNode }) {
+  return <Slot name="message">{props.children}</Slot>;
+}
+
+/**
+ * `Alert` presents a SwiftUI alert with a title, optional message, and action buttons.
+ *
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/alert(_:ispresented:actions:message:)).
+ */
+function Alert(props: AlertProps) {
+  const { onIsPresentedChange, modifiers, children, ...restProps } = props;
+
+  const handleIsPresentedChange = (event: NativeSyntheticEvent<{ isPresented: boolean }>) => {
+    onIsPresentedChange?.(event.nativeEvent.isPresented);
+  };
+
+  return (
+    <AlertNativeView
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}
+      onIsPresentedChange={handleIsPresentedChange}>
+      {children}
+    </AlertNativeView>
+  );
+}
+
+Alert.Trigger = Trigger;
+Alert.Actions = Actions;
+Alert.Message = Message;
+
+export { Alert };

package/src/swift-ui/SlotView.tsx

@@ -1,8 +1,21 @@
 import { requireNativeView } from 'expo';
 
-const SlotNativeView: React.ComponentType<{ name: string; children?: React.ReactNode }> =
-  requireNativeView('ExpoUI', 'SlotView');
+type SlotProps<ExtraProps extends Record<string, unknown> = Record<string, unknown>> = {
+  name: string;
+  extraProps?: ExtraProps;
+  children?: React.ReactNode;
+};
 
-export function Slot({ name, children }: { name: string; children?: React.ReactNode }) {
-  return <SlotNativeView name={name}>{children}</SlotNativeView>;
+const SlotNativeView: React.ComponentType<SlotProps> = requireNativeView('ExpoUI', 'SlotView');
+
+export function Slot<ExtraProps extends Record<string, unknown> = Record<string, unknown>>({
+  name,
+  extraProps,
+  children,
+}: SlotProps<ExtraProps>) {
+  return (
+    <SlotNativeView name={name} extraProps={extraProps}>
+      {children}
+    </SlotNativeView>
+  );
 }

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

@@ -0,0 +1,73 @@
+import { requireNativeView } from 'expo';
+
+import { Slot } from '../SlotView';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
+
+export type SwipeActionsEdge = 'leading' | 'trailing';
+
+export type SwipeActionsProps = {
+  /**
+   * The regular content and `SwipeActions.Actions` action groups.
+   */
+  children: React.ReactNode;
+} & CommonViewModifierProps;
+
+export type SwipeActionsGroupProps = {
+  /**
+   * The edge where these swipe actions are revealed.
+   * @default 'trailing'
+   */
+  edge?: SwipeActionsEdge;
+  /**
+   * Whether a full swipe automatically performs the first action in this group.
+   * @default true
+   */
+  allowsFullSwipe?: boolean;
+  /**
+   * The buttons revealed when the user swipes from this edge.
+   */
+  children: React.ReactNode;
+};
+
+type SwipeActionsNativeProps = SwipeActionsProps;
+
+const SwipeActionsNativeView: React.ComponentType<SwipeActionsNativeProps> = requireNativeView(
+  'ExpoUI',
+  'SwipeActionsView'
+);
+
+/**
+ * The buttons revealed when the user swipes the regular content from an edge.
+ */
+export function Actions({
+  edge = 'trailing',
+  allowsFullSwipe = true,
+  children,
+}: SwipeActionsGroupProps) {
+  return (
+    <Slot name="actions" extraProps={{ edge, allowsFullSwipe }}>
+      {children}
+    </Slot>
+  );
+}
+
+/**
+ * Applies native SwiftUI swipe actions to its non-slot children.
+ * @platform ios
+ */
+function SwipeActionsComponent(props: SwipeActionsProps) {
+  const { modifiers, ...restProps } = props;
+
+  return (
+    <SwipeActionsNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}
+    />
+  );
+}
+
+const SwipeActions = Object.assign(SwipeActionsComponent, { Actions });
+
+export { SwipeActions };

package/src/swift-ui/index.tsx

@@ -1,6 +1,7 @@
 import '../State/index.fx';
 
 export * from './AccessoryWidgetBackground';
+export * from './Alert';
 export * from './BottomSheet';
 export * from './Button';
 export * from './Chart';
@@ -33,6 +34,7 @@ export * from './ShareLink';
 export * from './Slider';
 export * from './Spacer';
 export * from './Stepper';
+export * from './SwipeActions';
 export * from './Text';
 export { useNativeState } from '../State/useNativeState';
 export * from './SyncToggle';

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

@@ -20,6 +20,7 @@ import { environment } from './environment';
 import { gaugeStyle } from './gaugeStyle';
 import { progressViewStyle } from './progressViewStyle';
 import { id, scrollPosition } from './scrollPosition';
+import { symbolEffect } from './symbolEffect';
 import type { Color } from './types';
 import { widgetAccentedRenderingMode, widgetURL } from './widgets';
 
@@ -1376,6 +1377,7 @@ export type BuiltInModifier =
   | ReturnType<typeof listStyle>
   | ReturnType<typeof contentTransition>
   | ReturnType<typeof resizable>
+  | ReturnType<typeof symbolEffect>
   | ReturnType<typeof widgetAccentedRenderingMode>
   | ReturnType<typeof widgetURL>
   | ReturnType<typeof containerBackground>;
@@ -1426,6 +1428,7 @@ export * from './gaugeStyle';
 export * from './presentationModifiers';
 export * from './environment';
 export * from './scrollPosition';
+export * from './symbolEffect';
 export * from './widgets';
 export type {
   TimingAnimationParams,

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

@@ -0,0 +1,181 @@
+import { createModifier } from './createModifier';
+import { type ObservableState } from '../../State/useNativeState';
+import { getStateId } from '../../State/utils';
+
+// https://developer.apple.com/documentation/symbols/appearsymboleffect
+type AppearSymbolEffect = {
+  effect: 'appear';
+  scale?: 'down' | 'up';
+  scope?: 'byLayer' | 'wholeSymbol';
+};
+
+// https://developer.apple.com/documentation/symbols/bouncesymboleffect
+type BounceSymbolEffect = {
+  effect: 'bounce';
+  direction?: 'down' | 'up';
+  scope?: 'byLayer' | 'wholeSymbol';
+};
+
+// https://developer.apple.com/documentation/symbols/breathesymboleffect
+type BreatheSymbolEffect = {
+  effect: 'breathe';
+  style?: 'plain' | 'pulse';
+  scope?: 'byLayer' | 'wholeSymbol';
+};
+
+// https://developer.apple.com/documentation/symbols/disappearsymboleffect
+type DisappearSymbolEffect = {
+  effect: 'disappear';
+  scale?: 'down' | 'up';
+  scope?: 'byLayer' | 'wholeSymbol';
+};
+
+// https://developer.apple.com/documentation/symbols/drawoffsymboleffect
+type DrawOffSymbolEffect = {
+  effect: 'drawOff';
+  playbackStyle?: 'nonReversed' | 'reversed';
+  scope?: 'byLayer' | 'individually' | 'wholeSymbol';
+};
+
+// https://developer.apple.com/documentation/symbols/drawonsymboleffect
+type DrawOnSymbolEffect = {
+  effect: 'drawOn';
+  scope?: 'byLayer' | 'individually' | 'wholeSymbol';
+};
+
+// https://developer.apple.com/documentation/symbols/pulsesymboleffect
+type PulseSymbolEffect = {
+  effect: 'pulse';
+  scope?: 'byLayer' | 'wholeSymbol';
+};
+
+// https://developer.apple.com/documentation/symbols/rotatesymboleffect
+type RotateSymbolEffect = {
+  effect: 'rotate';
+  direction?: 'clockwise' | 'counterClockwise';
+  scope?: 'byLayer' | 'wholeSymbol';
+};
+
+// https://developer.apple.com/documentation/symbols/scalesymboleffect
+type ScaleSymbolEffect = {
+  effect: 'scale';
+  scale?: 'down' | 'up';
+  scope?: 'byLayer' | 'wholeSymbol';
+};
+
+// https://developer.apple.com/documentation/symbols/variablecolorsymboleffect
+type VariableColorSymbolEffect = {
+  effect: 'variableColor';
+  fillStyle?: 'cumulative' | 'iterative';
+  playbackStyle?: 'nonReversing' | 'reversing';
+  inactiveLayers?: 'dim' | 'hide';
+};
+
+// https://developer.apple.com/documentation/symbols/wigglesymboleffect
+type WiggleSymbolEffect = {
+  effect: 'wiggle';
+  direction?:
+    | 'backward'
+    | 'clockwise'
+    | 'counterClockwise'
+    | 'down'
+    | 'forward'
+    | 'left'
+    | 'right'
+    | 'up';
+  // Custom wiggle angle in degrees. Takes precedence over `direction` when set.
+  customAngle?: number;
+  scope?: 'byLayer' | 'wholeSymbol';
+};
+
+export type SymbolEffect =
+  | AppearSymbolEffect
+  | BounceSymbolEffect
+  | BreatheSymbolEffect
+  | DisappearSymbolEffect
+  | DrawOffSymbolEffect
+  | DrawOnSymbolEffect
+  | PulseSymbolEffect
+  | RotateSymbolEffect
+  | ScaleSymbolEffect
+  | VariableColorSymbolEffect
+  | WiggleSymbolEffect;
+
+/**
+ * Animation options for a symbol effect.
+ *
+ * @see Official [Apple documentation](https://developer.apple.com/documentation/symbols/symboleffectoptions).
+ */
+export type SymbolEffectOptions = {
+  /**
+   * How the effect repeats. Omit for the effect's natural cadence.
+   * - `'nonRepeating'` — play exactly once.
+   * - `'continuous'` — smooth, indefinite repetition (iOS 18+).
+   * - `{ count?, delay? }` — periodic repetition with optional count and delay in seconds (iOS 18+).
+   */
+  repeat?: 'continuous' | 'nonRepeating' | { count?: number; delay?: number };
+  /** Animation speed multiplier (1.0 = default). */
+  speed?: number;
+};
+
+/** Equatable primitive accepted as a discrete effect trigger. */
+export type DiscreteSymbolEffectValue = number | string | boolean;
+
+/**
+ * Applies an SF Symbol effect to a view.
+ *
+ * @platform ios 17.0+
+ * @platform tvos 17.0+
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/SwiftUI/View/symbolEffect(_:options:value:)).
+ *
+ * @example
+ * ```tsx
+ * const trigger = useNativeState(0);
+ * <Image
+ *   systemName="bell.fill"
+ *   modifiers={[symbolEffect({ effect: 'bounce', direction: 'up' }, { value: trigger })]}
+ * />
+ * ```
+ */
+export const symbolEffect = (
+  effect: SymbolEffect,
+  args: {
+    options?: SymbolEffectOptions;
+    /** Indefinite effects: runs while `state.value === true`. Default active when omitted. */
+    isActive?: ObservableState<boolean>;
+    /** Discrete effects: the effect fires once each time this value changes. */
+    value?: ObservableState<DiscreteSymbolEffectValue>;
+  } = {}
+) => {
+  const { options, isActive, value } = args;
+  return createModifier('symbolEffect', {
+    effect,
+    options: flattenOptions(options),
+    isActive: isActive ? getStateId(isActive) : undefined,
+    value: value ? getStateId(value) : undefined,
+  });
+};
+
+function flattenOptions(options?: SymbolEffectOptions) {
+  if (!options) return undefined;
+  const { speed } = options;
+  const repeatField = options.repeat;
+  if (repeatField === undefined) {
+    return { speed };
+  }
+  if (repeatField === 'nonRepeating') {
+    return { repeatKind: 'nonRepeating' as const, speed };
+  }
+  if (repeatField === 'continuous') {
+    return { repeatKind: 'continuous' as const, speed };
+  }
+  return {
+    repeatKind: 'periodic' as const,
+    repeatCount: repeatField.count,
+    repeatDelay: repeatField.delay,
+    speed,
+  };
+}
+
+// exported for docs api data
+export { type ObservableState };

package/src/ts-declarations/react-native-web.d.ts

@@ -7,6 +7,7 @@ declare module 'react-native' {
   ) => React.ReactElement<P>;
 
   type DisplayValue = ReactNative.FlexStyle['display'] | 'inline-flex';
+  type WebDimensionValue = ReactNative.DimensionValue | string;
 
   type WebRole =
     | ReactNative.Role
@@ -95,18 +96,37 @@ declare module 'react-native' {
   }
 
   export interface ViewProps extends WebAccessibilityProps {
+    dir?: string;
     role?: WebRole;
   }
 
   export interface ImageStyle {
     display?: DisplayValue;
+    height?: WebDimensionValue;
+    width?: WebDimensionValue;
+    paddingLeft?: WebDimensionValue;
+    paddingRight?: WebDimensionValue;
+    paddingTop?: WebDimensionValue;
+    paddingBottom?: WebDimensionValue;
   }
 
   export interface TextStyle {
     display?: DisplayValue;
+    height?: WebDimensionValue;
+    width?: WebDimensionValue;
+    paddingLeft?: WebDimensionValue;
+    paddingRight?: WebDimensionValue;
+    paddingTop?: WebDimensionValue;
+    paddingBottom?: WebDimensionValue;
   }
 
   export interface ViewStyle {
     display?: DisplayValue;
+    height?: WebDimensionValue;
+    width?: WebDimensionValue;
+    paddingLeft?: WebDimensionValue;
+    paddingRight?: WebDimensionValue;
+    paddingTop?: WebDimensionValue;
+    paddingBottom?: WebDimensionValue;
   }
 }

package/src/universal/Host/index.tsx

@@ -1,17 +1,82 @@
-import { View, type ViewProps } from 'react-native';
+import { StyleSheet, View, type LayoutChangeEvent, type ViewProps } from 'react-native';
+
+const styles = StyleSheet.create({
+  matchContents: {
+    alignSelf: 'flex-start',
+  },
+  matchViewport: {
+    height: '100dvh',
+    width: '100dvw',
+  },
+  safeArea: {
+    paddingLeft: 'max(env(safe-area-inset-left, 0px), env(keyboard-inset-left, 0px))',
+    paddingRight: 'max(env(safe-area-inset-right, 0px), env(keyboard-inset-right, 0px))',
+    paddingTop: 'max(env(safe-area-inset-top, 0px), env(keyboard-inset-top, 0px))',
+    paddingBottom: 'max(env(safe-area-inset-bottom, 0px), env(keyboard-inset-bottom, 0px))',
+  },
+  safeAreaWithoutKeyboard: {
+    paddingLeft: 'env(safe-area-inset-left, 0px)',
+    paddingRight: 'env(safe-area-inset-right, 0px)',
+    paddingTop: 'env(safe-area-inset-top, 0px)',
+    paddingBottom: 'env(safe-area-inset-bottom, 0px)',
+  },
+});
+
+type HostProps = {
+  ignoreSafeArea?: 'all' | 'keyboard';
+  layoutDirection?: 'leftToRight' | 'rightToLeft';
+  matchContents?: boolean | { horizontal?: boolean; vertical?: boolean };
+  onLayoutContent?: (event: { nativeEvent: { width: number; height: number } }) => void;
+  useViewportSizeMeasurement?: boolean;
+};
 
 /**
  * A bridging container that hosts SwiftUI views on iOS and Jetpack Compose views on Android.
  */
 export function Host({
   children,
+  ignoreSafeArea,
+  layoutDirection,
+  matchContents = false,
+  onLayout,
+  onLayoutContent,
   style,
+  useViewportSizeMeasurement = false,
   ...rest
-}: ViewProps & {
-  matchContents?: boolean | { vertical?: boolean; horizontal?: boolean };
-}) {
+}: ViewProps & HostProps) {
+  const shouldMatchContents =
+    typeof matchContents === 'object'
+      ? matchContents.horizontal || matchContents.vertical
+      : matchContents;
+
   return (
-    <View style={style} {...rest}>
+    <View
+      dir={
+        layoutDirection === 'leftToRight'
+          ? 'ltr'
+          : layoutDirection === 'rightToLeft'
+            ? 'rtl'
+            : undefined
+      }
+      onLayout={(event: LayoutChangeEvent) => {
+        onLayout?.(event);
+
+        onLayoutContent?.({
+          nativeEvent: {
+            width: event.nativeEvent.layout.width,
+            height: event.nativeEvent.layout.height,
+          },
+        });
+      }}
+      style={[
+        ignoreSafeArea !== 'all' &&
+          (ignoreSafeArea === 'keyboard' ? styles.safeAreaWithoutKeyboard : styles.safeArea),
+        shouldMatchContents
+          ? styles.matchContents
+          : useViewportSizeMeasurement && styles.matchViewport,
+        style,
+      ]}
+      {...rest}>
       {children}
     </View>
   );

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

@@ -1 +0,0 @@
-f6beb7095321eea7da6845fa478235b0

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

@@ -1 +0,0 @@
-a534f795e8ea46629011b2f8939608619b954ff1

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

@@ -1 +0,0 @@
-213a1693673392a710d27fef37d99ef030c8a8783b4ccaa971ea914588dc5241

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

@@ -1 +0,0 @@
-26e067865e2bbdd9f770d670f8212c2a309bee05009f722931b339ca9f76c235bbed2286a876d9c7a7b0ddb0e4b152617031f487c047ae78d0672ecc2649c6be

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

@@ -1 +0,0 @@
-ea2684e30595f6e153476b3bd38b40f7

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

@@ -1 +0,0 @@
-63505c031167b651fcd2b3ed1cddbcb5a014bfa8

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

@@ -1 +0,0 @@
-05e8833b0c8b22442fa1d70cd203ec9f986fd4e9d8541393c843779bca1bed6a

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

@@ -1 +0,0 @@
-2214ac6df49634ec222a3563eb91161f0ba5977ea600f354473f9dd5d166dd79b5230c634d59c15fe027d77f9010fd3d984718d4c392adf444acf687e40e076e

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

@@ -1 +0,0 @@
-49f48db31d79536bc276e0e18fffffc4

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

@@ -1 +0,0 @@
-aa1f1c7ec449e0d76d64fc008bf3af9d9928e0da

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

@@ -1 +0,0 @@
-e15fb389c9d21d25522483c1e58b1cc0a57ec2b0ee710c49bd79528c3faa467a

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

@@ -1 +0,0 @@
-dec030fd37a92340a477da17d8da83a39d8b2f1cdfbf66754d56f9c6b7152d125aeaa8438f0b7247d945acc9723dcceaa74a22e059ded7bd2dc784cad21732d0

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

@@ -1 +0,0 @@
-08e2d6fe28ff36a46db43b08826921cb

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

@@ -1 +0,0 @@
-e27605954788d0a858a8a8c98d859cb19fb284cb

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

@@ -1 +0,0 @@
-b634c2eaed8ad38f4446b1b0d1131dd73a5a596c3e94a4a8d104ffb19cb32308

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

@@ -1 +0,0 @@
-0ab0a808565b2c2ee6a962b8ede40b90325253d03b617d4cc0c8954283946e82dca663d89c15a7fcaed0c8457fb43de6f5fbc743a4286ee4016dcb7dfc94c196