@expo/ui 56.0.18 → 56.0.19

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

@@ -5,7 +5,7 @@ import { type ViewEvent } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 import { type CommonViewModifierProps } from '../types';
 
-export type TabViewProps = {
+export interface TabViewProps extends CommonViewModifierProps {
   /**
    * The selected tab (controlled mode). Pair with `onSelectionChange`.
    * Pass `defaultSelection` instead to let the native view manage state.
@@ -24,7 +24,7 @@ export type TabViewProps = {
    * `<TabView.Tab>` elements defining the pages.
    */
   children: React.ReactElement | React.ReactElement[];
-} & CommonViewModifierProps;
+}
 
 type NativeTabViewProps = Omit<TabViewProps, 'onSelectionChange'> &
   ViewEvent<'onSelectionChange', { selection: string }>;

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

@@ -28,7 +28,7 @@ export type TextFieldRef = {
  */
 export type TextFieldSelection = { start: number; end: number };
 
-export type TextFieldProps = {
+export interface TextFieldProps extends CommonViewModifierProps {
   ref?: Ref<TextFieldRef>;
   /**
    * An observable state that holds the current text.
@@ -80,7 +80,7 @@ export type TextFieldProps = {
    * placeholder's styling).
    */
   children?: React.ReactNode;
-} & CommonViewModifierProps;
+}
 
 export type NativeTextFieldProps = Omit<
   TextFieldProps,

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

@@ -5,7 +5,7 @@ import type { SFSymbol } from 'sf-symbols-typescript';
 import { createViewModifierEventListener } from '../modifiers/utils';
 import { type CommonViewModifierProps } from '../types';
 
-export type ToggleProps = {
+export interface ToggleProps extends CommonViewModifierProps {
   /**
    * A Boolean value that determines the on/off state of the toggle.
    */
@@ -28,7 +28,7 @@ export type ToggleProps = {
    * the first represents the title and the second represents the subtitle.
    */
   children?: React.ReactNode;
-} & CommonViewModifierProps;
+}
 
 type NativeToggleProps = Omit<ToggleProps, 'onIsOnChange'> & {
   onIsOnChange: (event: NativeSyntheticEvent<{ isOn: boolean }>) => void;

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

@@ -3,7 +3,7 @@ import { requireNativeView } from 'expo';
 import { createViewModifierEventListener } from '../modifiers/utils';
 import { type CommonViewModifierProps } from '../types';
 
-export type VStackProps = {
+export interface VStackProps extends CommonViewModifierProps {
   children: React.ReactNode;
   /**
    * The horizontal alignment of children within the stack.
@@ -13,7 +13,7 @@ export type VStackProps = {
    * The spacing between children.
    */
   spacing?: number;
-} & CommonViewModifierProps;
+}
 
 const VStackNativeView: React.ComponentType<VStackProps> = requireNativeView(
   'ExpoUI',

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

@@ -3,13 +3,13 @@ import { requireNativeView } from 'expo';
 import { createViewModifierEventListener } from '../modifiers/utils';
 import { type Alignment, type CommonViewModifierProps } from '../types';
 
-export type ZStackProps = {
+export interface ZStackProps extends CommonViewModifierProps {
   children: React.ReactNode;
   /**
    * The alignment of children within the stack.
    */
   alignment?: Alignment;
-} & CommonViewModifierProps;
+}
 
 const ZStackNativeView: React.ComponentType<ZStackProps> = requireNativeView(
   'ExpoUI',

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

@@ -465,6 +465,65 @@ export const hidden = (hidden: boolean = true) => createModifier('hidden', { hid
  */
 export const disabled = (disabled: boolean = true) => createModifier('disabled', { disabled });
 
+/**
+ * Adds a redaction reason to this view hierarchy, replacing rendered content
+ * with placeholders. Useful for skeleton loading states. Maps to SwiftUI's
+ * `redacted(reason:)`.
+ *
+ * `placeholder` redacts the whole subtree; `privacy` and `invalidated` redact
+ * only descendants marked `privacySensitive()` or `invalidatableContent()`.
+ * Reasons are additive and can be combined in an array; use `unredacted()` to
+ * exempt a subtree. The `invalidated` reason requires iOS 17+.
+ *
+ * @param reasons - The redaction reason or reasons to apply (an empty array applies none). Defaults to `'placeholder'`.
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/redacted(reason:)).
+ */
+export const redacted = (
+  reasons:
+    | 'placeholder'
+    | 'privacy'
+    | 'invalidated'
+    | ('placeholder' | 'privacy' | 'invalidated')[] = 'placeholder'
+) =>
+  createModifier('redacted', {
+    reasons: Array.isArray(reasons) ? reasons : [reasons],
+  });
+
+/**
+ * Removes any redaction reason inherited from an ancestor `redacted(...)` for
+ * this subtree. The counterpart to `redacted`; use it to exempt specific content
+ * from a redacted parent. Maps to SwiftUI's `unredacted()`.
+ *
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/unredacted()).
+ */
+export const unredacted = () => createModifier('unredacted', {});
+
+/**
+ * Marks the view as containing sensitive, private data, redacted only when the
+ * `privacy` redaction reason is applied to an ancestor (for example `redacted('privacy')`).
+ * It has no effect on its own and does not auto-redact screenshots. Maps to
+ * SwiftUI's `privacySensitive(_:)`.
+ *
+ * @param sensitive - Whether the view contains sensitive content. Defaults to `true`.
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/privacysensitive(_:)).
+ */
+export const privacySensitive = (sensitive: boolean = true) =>
+  createModifier('privacySensitive', { sensitive });
+
+/**
+ * Marks the view's content as invalidatable. It is restyled with the "pending
+ * update" appearance only when the `invalidated` redaction reason is applied to
+ * an ancestor (for example `redacted('invalidated')`). Maps to SwiftUI's
+ * `invalidatableContent(_:)`.
+ *
+ * @param invalidatable - Whether the content can be invalidated. Defaults to `true`.
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/invalidatablecontent(_:)).
+ * @platform ios 17.0+
+ * @platform tvos 17.0+
+ */
+export const invalidatableContent = (invalidatable: boolean = true) =>
+  createModifier('invalidatableContent', { invalidatable });
+
 /**
  * Sets the z-index (display order) of a view.
  * @param index - The z-index value.
@@ -776,6 +835,22 @@ export const accessibilityIdentifier = (identifier: string) =>
 export const accessibilityHidden = (hidden: boolean = true) =>
   createModifier('accessibilityHidden', { hidden });
 
+/**
+ * Controls how a view's child accessibility elements are exposed, mirroring SwiftUI's
+ * `accessibilityElement(children:)`. It creates a new accessibility element (or modifies
+ * the existing one) and applies the chosen behavior to the subtree.
+ *
+ * Complements `accessibilityHidden`, which hides a single leaf, by acting on the whole subtree.
+ *
+ * @param children - How the child accessibility elements are treated:
+ * - `ignore` - hide the children; the new element starts with no properties, so pair it with `accessibilityLabel` (default).
+ * - `combine` - merge the children's accessibility properties into the new element.
+ * - `contain` - keep the children as accessible elements, grouped in the new element as a container (navigated in order).
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/accessibilityelement(children:)).
+ */
+export const accessibilityElement = (children: 'ignore' | 'combine' | 'contain' = 'ignore') =>
+  createModifier('accessibilityElement', { children });
+
 /**
  * Sets layout priority for the view.
  * @param priority - Layout priority value.
@@ -1451,6 +1526,10 @@ export type BuiltInModifier =
   | ReturnType<typeof tint>
   | ReturnType<typeof hidden>
   | ReturnType<typeof disabled>
+  | ReturnType<typeof redacted>
+  | ReturnType<typeof unredacted>
+  | ReturnType<typeof privacySensitive>
+  | ReturnType<typeof invalidatableContent>
   | ReturnType<typeof zIndex>
   | ReturnType<typeof blur>
   | ReturnType<typeof brightness>
@@ -1474,6 +1553,7 @@ export type BuiltInModifier =
   | ReturnType<typeof accessibilityInputLabels>
   | ReturnType<typeof accessibilityIdentifier>
   | ReturnType<typeof accessibilityHidden>
+  | ReturnType<typeof accessibilityElement>
   | ReturnType<typeof layoutPriority>
   | ReturnType<typeof mask>
   | ReturnType<typeof overlay>

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

@@ -103,3 +103,25 @@ export const presentationBackground = (color: string) =>
  */
 export const interactiveDismissDisabled = (isDisabled: boolean = true) =>
   createModifier('interactiveDismissDisabled', { isDisabled });
+
+/**
+ * Sizing behavior for a sheet presentation.
+ * - `'automatic'`: The system default sizing.
+ * - `'fitted'`: Sizes the sheet to fit its content.
+ * - `'form'`: A compact, centered form sheet.
+ * - `'page'`: A larger page sheet.
+ *
+ * @remarks Sizing mainly affects the regular size class (iPad); in a compact size class (iPhone)
+ * sheets remain edge-attached and detents drive the height.
+ */
+export type PresentationSizingType = 'automatic' | 'fitted' | 'form' | 'page';
+
+/**
+ * Sets the sizing of a sheet presentation.
+ * @param sizing - The sizing behavior to apply.
+ * @platform ios 18.0+
+ * @platform tvos 18.0+
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/presentationsizing(_:)).
+ */
+export const presentationSizing = (sizing: PresentationSizingType) =>
+  createModifier('presentationSizing', { sizing });

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

@@ -97,11 +97,37 @@ declare module 'react-native' {
   }
 
   export interface ViewProps extends WebAccessibilityProps {
+    dataSet?: Record<string, string | undefined>;
     dir?: string;
     role?: WebRole;
   }
 
-  export interface ImageStyle {
+  /**
+   * Animations and transitions
+   */
+
+  type AnimationDirection = 'alternate' | 'alternate-reverse' | 'normal' | 'reverse';
+  type AnimationFillMode = 'none' | 'forwards' | 'backwards' | 'both';
+  type AnimationIterationCount = number | 'infinite';
+  type AnimationKeyframes = Record<string, ImageStyle | TextStyle | ViewStyle>;
+  type AnimationPlayState = 'paused' | 'running';
+
+  export interface AnimationStyles {
+    animationDelay?: string;
+    animationDirection?: AnimationDirection;
+    animationDuration?: string;
+    animationFillMode?: AnimationFillMode;
+    animationIterationCount?: AnimationIterationCount;
+    animationKeyframes?: AnimationKeyframes | AnimationKeyframes[];
+    animationPlayState?: AnimationPlayState;
+    animationTimingFunction?: string;
+    transitionDelay?: string;
+    transitionDuration?: string;
+    transitionProperty?: string;
+    transitionTimingFunction?: string;
+  }
+
+  export interface ImageStyle extends AnimationStyles {
     display?: DisplayValue;
     height?: WebDimensionValue;
     width?: WebDimensionValue;
@@ -113,7 +139,7 @@ declare module 'react-native' {
     paddingBottom?: WebDimensionValue;
   }
 
-  export interface TextStyle {
+  export interface TextStyle extends AnimationStyles {
     display?: DisplayValue;
     height?: WebDimensionValue;
     width?: WebDimensionValue;
@@ -123,9 +149,11 @@ declare module 'react-native' {
     paddingRight?: WebDimensionValue;
     paddingTop?: WebDimensionValue;
     paddingBottom?: WebDimensionValue;
+    whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap';
   }
 
-  export interface ViewStyle {
+  export interface ViewStyle extends AnimationStyles {
+    appearance?: 'none' | 'auto';
     display?: DisplayValue;
     height?: WebDimensionValue;
     width?: WebDimensionValue;

package/src/universal/Button/index.tsx

@@ -1,40 +1,60 @@
-import { Pressable, StyleSheet, Text, type TextStyle, type ViewStyle } from 'react-native';
+import { Pressable, StyleSheet, Text } from 'react-native';
 
-import type { ButtonProps, ButtonVariant } from './types';
-import { useUniversalLifecycle } from '../hooks';
+import type { ButtonProps } from './types';
+import { useFocusVisible, useUniversalLifecycle } from '../hooks';
+import { colors, durations, easings, shadows } from '../webUtils';
 
-const styles = StyleSheet.create({
-  button: {
-    paddingHorizontal: 16,
-    paddingVertical: 10,
+const buttonStyles = StyleSheet.create({
+  base: {
+    alignItems: 'center',
+    backgroundColor: colors.primary[500],
     borderRadius: 8,
-    userSelect: 'none',
+    boxShadow: shadows.button,
+    display: 'inline-flex',
+    height: 40,
+    justifyContent: 'center',
+    outlineStyle: 'solid',
+    outlineWidth: 0,
+    paddingHorizontal: 16,
+    transitionDuration: durations.fast,
+    transitionProperty: 'background-color, color, box-shadow, transform',
+    transitionTimingFunction: easings.standard,
+    whiteSpace: 'nowrap',
+  },
+  outlined: {
+    backgroundColor: 'transparent',
+    boxShadow: `inset 0 0 0 1px ${colors.gray[300]}`,
   },
+  text: {
+    backgroundColor: 'transparent',
+    boxShadow: 'none',
+  },
+  focused: { boxShadow: shadows.focus },
   disabled: { opacity: 0.5 },
   hidden: { display: 'none' },
-  label: { textAlign: 'center' },
+  hovered: { backgroundColor: colors.primary[600] },
+  hoveredOutlined: { backgroundColor: colors.gray[50] },
+  hoveredText: { backgroundColor: colors.gray[50] },
+  pressed: {
+    backgroundColor: colors.primary[700],
+    transform: 'translateY(0.5px)',
+  },
+  pressedOutlined: { backgroundColor: colors.gray[100] },
+  pressedText: { backgroundColor: colors.gray[100] },
 });
 
-const variantStyles = StyleSheet.create({
-  filled: { backgroundColor: '#007AFF' },
-  outlined: {
-    borderColor: '#007AFF',
-    borderWidth: 1,
+const textStyles = StyleSheet.create({
+  base: {
+    color: colors.primary.foreground,
+    fontSize: 14,
+    fontWeight: '500',
+    lineHeight: 14,
+    textAlign: 'center',
+    userSelect: 'none',
   },
-  text: {},
-} satisfies Record<ButtonVariant, ViewStyle>);
-
-const variantHoverStyles = StyleSheet.create({
-  filled: { backgroundColor: '#0066DB' },
-  outlined: { backgroundColor: 'rgba(0, 122, 255, 0.08)' },
-  text: { backgroundColor: 'rgba(0, 122, 255, 0.08)' },
-} satisfies Record<ButtonVariant, ViewStyle>);
-
-const variantLabelStyles = StyleSheet.create({
-  filled: { color: '#FFFFFF' },
-  outlined: { color: '#007AFF' },
-  text: { color: '#007AFF' },
-} satisfies Record<ButtonVariant, TextStyle>);
+  outlined: { color: colors.gray[900] },
+  text: { color: colors.primary[600] },
+});
 
 /**
  * A pressable button that supports multiple visual variants.
@@ -53,21 +73,49 @@ export function Button({
 }: ButtonProps) {
   useUniversalLifecycle(onAppear, onDisappear);
 
+  const { focusVisible, onFocus, onBlur } = useFocusVisible();
+
   return (
     <Pressable
       role="button"
+      onFocus={onFocus}
+      onBlur={onBlur}
       onPress={onPress}
       disabled={disabled}
       testID={testID}
-      style={({ hovered }) => [
-        styles.button,
-        variantStyles[variant],
+      style={({ hovered, pressed }) => [
+        buttonStyles.base,
+        variant === 'outlined' && buttonStyles.outlined,
+        variant === 'text' && buttonStyles.text,
+
+        hovered && [
+          buttonStyles.hovered,
+          variant === 'outlined' && buttonStyles.hoveredOutlined,
+          variant === 'text' && buttonStyles.hoveredText,
+        ],
+
+        pressed && [
+          buttonStyles.pressed,
+          variant === 'outlined' && buttonStyles.pressedOutlined,
+          variant === 'text' && buttonStyles.pressedText,
+        ],
+
         style,
-        hovered && !disabled && variantHoverStyles[variant],
-        hidden && styles.hidden,
-        disabled && styles.disabled,
+
+        focusVisible && buttonStyles.focused,
+        hidden && buttonStyles.hidden,
+        disabled && buttonStyles.disabled,
       ]}>
-      {children ?? <Text style={[styles.label, variantLabelStyles[variant]]}>{label}</Text>}
+      {children ?? (
+        <Text
+          style={[
+            textStyles.base,
+            variant === 'outlined' && textStyles.outlined,
+            variant === 'text' && textStyles.text,
+          ]}>
+          {label}
+        </Text>
+      )}
     </Pressable>
   );
 }

package/src/universal/Checkbox/index.tsx

@@ -1,56 +1,111 @@
-import type { ComponentProps } from 'react';
-import {
-  StyleSheet,
-  Text,
-  unstable_createElement,
-  useColorScheme,
-  View,
-  type ViewProps,
-} from 'react-native';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import type { CheckboxProps } from './types';
+import { useFocusVisible } from '../hooks';
+import { colors, createWebComponent, durations, easings, shadows } from '../webUtils';
+
+const Input = createWebComponent('input');
 
 const styles = StyleSheet.create({
-  label: {
-    flexDirection: 'row',
-    display: 'inline-flex',
+  view: {
     alignItems: 'center',
-    gap: 8,
     cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'row',
+    gap: 10,
   },
-  disabled: {
-    opacity: 0.5,
+  viewDisabled: {
     cursor: 'auto',
   },
-  cursorInherit: {
-    // @ts-expect-error
-    cursor: 'inherit',
+  input: {
+    position: 'absolute',
+    opacity: 0,
+    pointerEvents: 'none',
+    margin: 0,
+    width: 0,
+    height: 0,
+  },
+  pressable: {
+    backgroundColor: colors.background,
+    borderColor: colors.gray[300],
+    borderRadius: 6,
+    borderStyle: 'solid',
+    borderWidth: 1.5,
+    height: 18,
+    outlineStyle: 'solid',
+    outlineWidth: 0,
+    transitionDuration: durations.fast,
+    transitionProperty: 'all',
+    transitionTimingFunction: easings.standard,
+    width: 18,
+  },
+  hovered: {
+    borderColor: colors.primary[500],
   },
-  darkText: {
-    color: '#fff',
+  focused: {
+    boxShadow: shadows.focus,
+  },
+  checked: {
+    backgroundColor: colors.primary[500],
+    borderColor: colors.primary[500],
+  },
+  disabled: {
+    cursor: 'auto',
+    opacity: 0.5,
+  },
+  text: {
+    color: colors.foreground,
+    lineHeight: 20,
+    userSelect: 'none',
   },
 });
 
-const NativeCheckbox = (
-  props: Omit<ComponentProps<'input'>, 'style' | 'type'> & { style?: ViewProps['style'] }
-) => unstable_createElement('input', { ...props, type: 'checkbox' });
-
 /**
  * A toggle control that represents a checked or unchecked state.
  */
 export function Checkbox({ value, onValueChange, label, disabled = false, testID }: CheckboxProps) {
-  const isDark = useColorScheme() === 'dark';
+  const { focusVisible, onFocus, onBlur } = useFocusVisible();
 
   return (
-    <View role="label" aria-disabled={disabled} style={[styles.label, disabled && styles.disabled]}>
-      <NativeCheckbox
+    <View
+      aria-disabled={disabled}
+      role="label"
+      style={[styles.view, disabled && styles.viewDisabled]}>
+      <Input
+        type="checkbox"
+        focusable
+        onFocus={onFocus}
+        onBlur={onBlur}
         checked={value}
-        onChange={(e) => onValueChange(e.target.checked)}
+        onChange={({ target: { checked } }) => onValueChange(checked)}
         disabled={disabled}
         data-testid={testID}
-        style={styles.cursorInherit}
+        style={styles.input}
       />
-      {label != null && <Text style={isDark && styles.darkText}>{label}</Text>}
+
+      <Pressable
+        tabIndex={-1}
+        style={({ hovered }) => [
+          styles.pressable,
+          hovered && !disabled && styles.hovered,
+          value && styles.checked,
+          focusVisible && styles.focused,
+          disabled && styles.disabled,
+        ]}>
+        {value && (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="white"
+            strokeWidth="1.75"
+            strokeLinecap="round"
+            strokeLinejoin="round">
+            <polyline points="3 8.5 6.5 12 13 4.5" />
+          </svg>
+        )}
+      </Pressable>
+      {label != null && <Text style={styles.text}>{label}</Text>}
     </View>
   );
 }

package/src/universal/Collapsible/index.tsx

@@ -1,23 +1,11 @@
-import type { ComponentProps, SyntheticEvent } from 'react';
-import {
-  StyleSheet,
-  Text,
-  unstable_createElement,
-  useColorScheme,
-  View,
-  type TextProps,
-  type ViewProps,
-} from 'react-native';
+import type { SyntheticEvent } from 'react';
+import { StyleSheet, Text, useColorScheme, View } from 'react-native';
 
 import type { CollapsibleProps } from './types';
+import { createWebComponent } from '../webUtils';
 
-const Details = (
-  props: Omit<ComponentProps<'details'>, 'style'> & { style?: TextProps['style'] }
-) => unstable_createElement('details', props);
-
-const Summary = (
-  props: Omit<ComponentProps<'summary'>, 'style'> & { style?: ViewProps['style'] }
-) => unstable_createElement('summary', props);
+const Details = createWebComponent('details');
+const Summary = createWebComponent('summary');
 
 /**
  * A primitive that toggles visibility of its content via a labelled tappable

package/src/universal/FieldGroup/FieldGroup.tsx

@@ -1,24 +1,21 @@
-import { ScrollView, StyleSheet, useColorScheme } from 'react-native';
+import { ScrollView, StyleSheet } from 'react-native';
 
 import { groupFieldGroupChildren } from './groupChildren';
 import type { FieldGroupProps } from './types';
 import { useUniversalLifecycle } from '../hooks';
+import { colors } from '../webUtils';
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: '#f2f2f7',
+    backgroundColor: colors.gray[50],
     flex: 1,
   },
-  containerDark: {
-    backgroundColor: '#000000',
-  },
   hidden: {
     display: 'none',
   },
   contentContainer: {
-    paddingHorizontal: 16,
-    paddingVertical: 16,
     gap: 24,
+    padding: 16,
   },
 });
 
@@ -39,16 +36,9 @@ export function FieldGroup({
 }: FieldGroupProps) {
   useUniversalLifecycle(onAppear, onDisappear);
 
-  const isDarkScheme = useColorScheme() === 'dark';
-
   return (
     <ScrollView
-      style={[
-        styles.container,
-        isDarkScheme && styles.containerDark,
-        style,
-        hidden && styles.hidden,
-      ]}
+      style={[styles.container, style, hidden && styles.hidden]}
       contentContainerStyle={styles.contentContainer}
       testID={testID}>
       {groupFieldGroupChildren(children)}