@expo/ui 56.0.2 → 56.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expo/ui",
-  "version": "56.0.2",
+  "version": "56.0.4",
   "description": "A collection of UI components",
   "sideEffects": [
     "*.fx.js"
@@ -43,6 +43,10 @@
       "types": "./build/community/picker/index.d.ts",
       "default": "./src/community/picker/index.tsx"
     },
+    "./community/masked-view": {
+      "types": "./build/community/masked-view/index.d.ts",
+      "default": "./src/community/masked-view/index.tsx"
+    },
     "./babel-plugin": {
       "types": "./plugin/babel-plugin.d.ts",
       "default": "./plugin/babel-plugin.js"
@@ -79,8 +83,8 @@
     "@types/react": "~19.2.0",
     "react-native-reanimated": "4.3.0",
     "react-native-worklets": "0.8.3",
-    "expo": "56.0.0-preview.3",
-    "expo-module-scripts": "56.0.1"
+    "expo": "56.0.0-preview.7",
+    "expo-module-scripts": "56.0.2"
   },
   "jest": {
     "preset": "expo-module-scripts"
@@ -108,7 +112,7 @@
       "optional": true
     }
   },
-  "gitHead": "71ec800b2fa6133d22d69b70945132e22f1b7ae8",
+  "gitHead": "a30353e69ca0d72b9fac5830abc631feda1ba3ae",
   "scripts": {
     "build": "expo-module build",
     "clean": "expo-module clean",

package/src/community/masked-view/MaskedView.android.tsx

@@ -0,0 +1,40 @@
+import { requireNativeView } from 'expo';
+import { StyleSheet, View } from 'react-native';
+
+import type { MaskedViewProps } from './types';
+import { Host } from '../../jetpack-compose/Host';
+import { RNHostView } from '../../jetpack-compose/RNHostView';
+import { Slot } from '../../jetpack-compose/SlotView';
+import { fillMaxSize } from '../../jetpack-compose/modifiers';
+
+const MaskNativeView: React.ComponentType<{
+  alignment?: 'topStart';
+  modifiers?: ReturnType<typeof fillMaxSize>[];
+  children?: React.ReactNode;
+}> = requireNativeView('ExpoUI', 'MaskView');
+
+/**
+ * Android implementation of `MaskedView`. Bridges arbitrary React Native children
+ * (and `maskElement`) into the Compose `MaskView` primitive via `RNHostView`.
+ */
+export function MaskedView(props: MaskedViewProps) {
+  const { maskElement, children, style, ...viewProps } = props;
+  return (
+    <View {...viewProps} style={style}>
+      <Host style={StyleSheet.absoluteFill}>
+        <MaskNativeView alignment="topStart" modifiers={[fillMaxSize()]}>
+          <RNHostView modifiers={[fillMaxSize()]}>
+            <View style={[StyleSheet.absoluteFill, style]}>{children}</View>
+          </RNHostView>
+          <Slot slotName="content">
+            <RNHostView modifiers={[fillMaxSize()]}>
+              <View style={[StyleSheet.absoluteFill, style]}>{maskElement}</View>
+            </RNHostView>
+          </Slot>
+        </MaskNativeView>
+      </Host>
+    </View>
+  );
+}
+
+export default MaskedView;

package/src/community/masked-view/MaskedView.ios.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet, View } from 'react-native';
+
+import type { MaskedViewProps } from './types';
+import { Host } from '../../swift-ui/Host';
+import { Mask } from '../../swift-ui/Mask';
+import { RNHostView } from '../../swift-ui/RNHostView';
+
+/**
+ * iOS implementation of `MaskedView`. Bridges arbitrary React Native children
+ * (and `maskElement`) into the SwiftUI `Mask` primitive via `RNHostView`.
+ */
+export function MaskedView(props: MaskedViewProps) {
+  const { maskElement, children, style, ...viewProps } = props;
+  return (
+    <View {...viewProps} style={style}>
+      <Host style={StyleSheet.absoluteFill}>
+        <Mask alignment="topLeading">
+          <RNHostView>
+            <View style={[StyleSheet.absoluteFill, style]}>{children}</View>
+          </RNHostView>
+          <Mask.Content>
+            <RNHostView>
+              <View style={[StyleSheet.absoluteFill, style]}>{maskElement}</View>
+            </RNHostView>
+          </Mask.Content>
+        </Mask>
+      </Host>
+    </View>
+  );
+}
+
+export default MaskedView;

package/src/community/masked-view/MaskedView.tsx

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import { View } from 'react-native';
+
+import type { MaskedViewProps } from './types';
+
+let warned = false;
+
+/**
+ * Renders `children` with the alpha channel of `maskElement` applied as a mask:
+ * opaque pixels of `maskElement` reveal `children`, transparent pixels hide them.
+ *
+ * API-compatible with `@react-native-masked-view/masked-view`.
+ */
+// This default file is used on platforms without a `.<platform>.tsx` override
+// (notably web). It renders children unmasked and warns once.
+export function MaskedView(props: MaskedViewProps) {
+  const { maskElement: _maskElement, children, style, ...rest } = props;
+  useEffect(() => {
+    if (!warned) {
+      warned = true;
+      console.warn(
+        '[@expo/ui/community/masked-view] MaskedView is not implemented on this platform. ' +
+          'Children will render without a mask.'
+      );
+    }
+  }, []);
+  return (
+    <View {...rest} style={style}>
+      {children}
+    </View>
+  );
+}
+
+export default MaskedView;

package/src/community/masked-view/index.tsx

@@ -0,0 +1,3 @@
+export { MaskedView } from './MaskedView';
+export { MaskedView as default } from './MaskedView';
+export type { MaskedViewProps } from './types';

package/src/community/masked-view/types.ts

@@ -0,0 +1,19 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+
+/**
+ * Drop-in props for `@react-native-masked-view/masked-view`'s `MaskedView`.
+ *
+ * @see https://github.com/callstack/masked-view
+ */
+export interface MaskedViewProps extends ViewProps {
+  /**
+   * The element used as the mask. Only opaque pixels of `maskElement` make the
+   * masked content visible — transparent pixels hide it.
+   */
+  maskElement: ReactElement;
+  /**
+   * Content rendered behind the mask.
+   */
+  children?: ReactNode;
+}

package/src/community/picker/Picker.android.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import {
   extractPickerItems,
   PickerItem,
-  type PickerWithItems,
+  type PickerItemProps,
   type PickerItemValue,
   type PickerProps,
 } from './types';
@@ -22,7 +22,7 @@ import { menuAnchor } from '../../jetpack-compose/modifiers';
  * A drop-in replacement for `@react-native-picker/picker` on Android.
  * Renders a Material 3 `ExposedDropdownMenuBox` wrapped in a Host.
  */
-function PickerImpl<T extends PickerItemValue>(props: PickerProps<T>) {
+export function Picker<T extends PickerItemValue>(props: PickerProps<T>) {
   const { selectedValue, onValueChange, enabled, style, children, ref } = props;
   const items = extractPickerItems<T>(children);
   const [expanded, setExpanded] = React.useState(false);
@@ -52,7 +52,15 @@ function PickerImpl<T extends PickerItemValue>(props: PickerProps<T>) {
                 setExpanded(false);
               }}>
               <DropdownMenuItem.Text>
-                <Text>{item.label}</Text>
+                <Text
+                  color={item.color}
+                  style={{
+                    fontFamily: item.fontFamily,
+                    fontSize: item.fontSize,
+                    background: item.backgroundColor,
+                  }}>
+                  {item.label}
+                </Text>
               </DropdownMenuItem.Text>
             </DropdownMenuItem>
           ))}
@@ -62,5 +70,4 @@ function PickerImpl<T extends PickerItemValue>(props: PickerProps<T>) {
   );
 }
 
-PickerImpl.displayName = 'Picker';
-export const Picker: PickerWithItems = Object.assign(PickerImpl, { Item: PickerItem });
+Picker.Item = PickerItem as React.ComponentType<PickerItemProps>;

package/src/community/picker/Picker.ios.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import {
   extractPickerItems,
   PickerItem,
-  type PickerWithItems,
+  type PickerItemProps,
   type PickerItemValue,
   type PickerProps,
 } from './types';
@@ -11,6 +11,7 @@ import { Host } from '../../swift-ui/Host';
 import { Picker as SwiftUIPicker } from '../../swift-ui/Picker';
 import { Text } from '../../swift-ui/Text';
 import {
+  backgroundOverlay,
   disabled as disabledModifier,
   fixedSize,
   foregroundStyle,
@@ -24,7 +25,7 @@ import { type ModifierConfig } from '../../types';
  * A drop-in replacement for `@react-native-picker/picker` on iOS.
  * Renders a SwiftUI wheel picker wrapped in a Host.
  */
-function PickerImpl<T extends PickerItemValue>(props: PickerProps<T>) {
+export function Picker<T extends PickerItemValue>(props: PickerProps<T>) {
   const { selectedValue, onValueChange, enabled, style, children, ref } = props;
   const items = extractPickerItems<T>(children);
   const modifiers = [
@@ -55,8 +56,11 @@ function PickerImpl<T extends PickerItemValue>(props: PickerProps<T>) {
           if (item.color) {
             itemModifiers.push(foregroundStyle(item.color));
           }
-          if (item.fontFamily) {
-            itemModifiers.push(font({ family: item.fontFamily }));
+          if (item.fontFamily || item.fontSize != null) {
+            itemModifiers.push(font({ family: item.fontFamily, size: item.fontSize }));
+          }
+          if (item.backgroundColor) {
+            itemModifiers.push(backgroundOverlay({ color: item.backgroundColor }));
           }
           return (
             <Text key={String(item.value ?? index)} modifiers={itemModifiers}>
@@ -69,5 +73,4 @@ function PickerImpl<T extends PickerItemValue>(props: PickerProps<T>) {
   );
 }
 
-PickerImpl.displayName = 'Picker';
-export const Picker: PickerWithItems = Object.assign(PickerImpl, { Item: PickerItem });
+Picker.Item = PickerItem as React.ComponentType<PickerItemProps>;

package/src/community/picker/Picker.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import {
   extractPickerItems,
   PickerItem,
-  type PickerWithItems,
+  type PickerItemProps,
   type PickerItemValue,
   type PickerProps,
 } from './types';
@@ -12,7 +12,7 @@ import {
  * A drop-in replacement for `@react-native-picker/picker` on web.
  * Renders a native `<select>` element.
  */
-function PickerImpl<T extends PickerItemValue>(props: PickerProps<T>) {
+export function Picker<T extends PickerItemValue>(props: PickerProps<T>) {
   const { selectedValue, onValueChange, enabled, style, children, ref } = props;
   const items = extractPickerItems<T>(children);
   const selectRef = React.useRef<HTMLSelectElement>(null);
@@ -47,5 +47,4 @@ function PickerImpl<T extends PickerItemValue>(props: PickerProps<T>) {
   );
 }
 
-PickerImpl.displayName = 'Picker';
-export const Picker: PickerWithItems = Object.assign(PickerImpl, { Item: PickerItem });
+Picker.Item = PickerItem as React.ComponentType<PickerItemProps>;

package/src/community/picker/types.tsx

@@ -1,5 +1,5 @@
 import { Children, isValidElement, type Ref, type ReactNode, type ReactElement } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
 
 export type PickerItemValue = string | number | null;
 
@@ -7,7 +7,7 @@ export type PickerItemValue = string | number | null;
  * Props for the `Picker.Item` component.
  * Compatible with `@react-native-picker/picker`.
  */
-export type PickerItemProps<T extends PickerItemValue> = {
+export type PickerItemProps<T extends PickerItemValue = PickerItemValue> = {
   /**
    * Display text for the item.
    */
@@ -17,15 +17,19 @@ export type PickerItemProps<T extends PickerItemValue> = {
    */
   value?: T;
   /**
-   * Text color for the item.
-   * @platform ios
+   * Text color for the item. Equivalent to setting `color` in the `style` prop.
    */
   color?: string;
   /**
-   * Custom font family for the item.
-   * @platform ios
+   * Custom font family for the item. Equivalent to setting `fontFamily` in the `style` prop.
    */
   fontFamily?: string;
+  /**
+   * Style applied to the item label. Only the following values take effect:
+   * `color`, `backgroundColor`, `fontFamily`, and `fontSize`. When also set
+   * via the top-level `color` or `fontFamily` props, values from `style` win.
+   */
+  style?: StyleProp<TextStyle>;
   /**
    * Whether the item is enabled.
    * @platform android
@@ -99,16 +103,13 @@ export type PickerRef = {
   blur: () => void;
 };
 
-export type PickerWithItems = {
-  <T extends PickerItemValue>(props: PickerProps<T>): ReactElement | null;
-  Item: typeof PickerItem;
-};
-
 export type ExtractedPickerItem<T extends PickerItemValue = PickerItemValue> = {
   label: string;
   value: T;
   color?: string;
+  backgroundColor?: string;
   fontFamily?: string;
+  fontSize?: number;
   enabled?: boolean;
 };
 
@@ -123,11 +124,16 @@ export function extractPickerItems<T extends PickerItemValue>(
       (child): child is ReactElement<PickerItemProps<T>> =>
         isValidElement(child) && child.type === PickerItem
     )
-    .map(({ props: { label = '', value, color, fontFamily, enabled } }) => ({
-      label,
-      value: value as T,
-      color,
-      fontFamily,
-      enabled,
-    }));
+    .map(({ props: { label = '', value, color, fontFamily, style, enabled } }) => {
+      const flat = StyleSheet.flatten(style);
+      return {
+        label,
+        value: value as T,
+        color: (flat?.color as string | undefined) ?? color,
+        backgroundColor: flat?.backgroundColor as string | undefined,
+        fontFamily: flat?.fontFamily ?? fontFamily,
+        fontSize: flat?.fontSize,
+        enabled,
+      };
+    });
 }

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

@@ -142,7 +142,7 @@ export const offset = (x: number, y: number) => createModifier('offset', { x, y
 
 /**
  * Sets the background color.
- * @param color - Color string (hex, e.g., '#FF0000').
+ * @param color - A color string (hex, e.g., `'#FF0000'`).
  */
 export const background = (color: ColorValue) => createModifier('background', { color });
 

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

@@ -0,0 +1,112 @@
+import * as ReactNative from 'react-native';
+
+declare module 'react-native' {
+  export const unstable_createElement: <P>(
+    type: React.ElementType,
+    props?: P
+  ) => React.ReactElement<P>;
+
+  type DisplayValue = ReactNative.FlexStyle['display'] | 'inline-flex';
+
+  type WebRole =
+    | ReactNative.Role
+    /**
+     * Accessibility roles mapped to components
+     * @see https://github.com/necolas/react-native-web/blob/0.19.1/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js
+     */
+    | 'article' // <article />
+    | 'banner' // <header />
+    | 'blockquote' // <blockquote />
+    | 'button' // <button />
+    | 'code' // <code />
+    | 'complementary' // <aside />
+    | 'contentinfo' // <footer />
+    | 'deletion' // <del />
+    | 'emphasis' // <em />
+    | 'figure' // <figure />
+    | 'form' // <form />
+    | 'heading' // <h{1,6} />
+    | 'insertion' // <ins />
+    | 'label' // <label />
+    | 'list' // <ul />
+    | 'listitem' // <li />
+    | 'main' // <main />
+    | 'navigation' // <nav />
+    | 'paragraph' // <p />
+    | 'region' // <section />
+    | 'strong'; // <strong />
+
+  interface WebAccessibilityProps {
+    /**
+     * Additional accessibility props
+     */
+    tabIndex?: 0 | -1;
+
+    /**
+     * Aria props (additional, minus existants)
+     * @see https://necolas.github.io/react-native-web/docs/accessibility
+     * @see https://reactnative.dev/docs/accessibility#aria-valuemax
+     */
+    'aria-activedescendant'?: string;
+    'aria-atomic'?: boolean;
+    'aria-autocomplete'?: string;
+    'aria-colcount'?: number;
+    'aria-colindex'?: number;
+    'aria-colspan'?: number;
+    'aria-controls'?: string;
+    'aria-current'?: boolean | 'page' | 'step' | 'location' | 'date' | 'time';
+    'aria-describedby'?: string;
+    'aria-details'?: string;
+    'aria-errormessage'?: string;
+    'aria-flowto'?: string;
+    'aria-haspopup'?: string;
+    'aria-invalid'?: boolean;
+    'aria-keyshortcuts'?: string;
+    'aria-level'?: number;
+    'aria-multiline'?: boolean;
+    'aria-multiselectable'?: boolean;
+    'aria-orientation'?: 'horizontal' | 'vertical';
+    'aria-owns'?: string;
+    'aria-placeholder'?: string;
+    'aria-posinset'?: number;
+    'aria-pressed'?: boolean;
+    'aria-readonly'?: boolean;
+    'aria-required'?: boolean;
+    'aria-roledescription'?: string;
+    'aria-rowcount'?: number;
+    'aria-rowindex'?: number;
+    'aria-rowspan'?: number;
+    'aria-setsize'?: number;
+    'aria-sort'?: 'ascending' | 'descending' | 'none' | 'other';
+  }
+
+  export interface PressableStateCallbackType {
+    readonly focused: boolean;
+    readonly hovered: boolean;
+    readonly pressed: boolean;
+  }
+
+  export interface ImageProps extends WebAccessibilityProps {
+    role?: WebRole;
+  }
+
+  export interface TextProps extends WebAccessibilityProps {
+    role?: WebRole;
+  }
+
+  export interface ViewProps extends WebAccessibilityProps {
+    role?: WebRole;
+  }
+
+  export interface ImageStyle {
+    display?: DisplayValue;
+  }
+
+  export interface TextStyle {
+    display?: DisplayValue;
+  }
+
+  export interface ViewStyle {
+    display?: DisplayValue;
+  }
+}

package/src/universal/Button/index.tsx

@@ -1,48 +1,40 @@
-import { useState } from 'react';
-import { Pressable, Text, type ViewStyle } from 'react-native';
+import { Pressable, StyleSheet, Text, type TextStyle, type ViewStyle } from 'react-native';
 
 import type { ButtonProps, ButtonVariant } from './types';
 import { useUniversalLifecycle } from '../hooks';
 
-const variantStyles: Record<ButtonVariant, ViewStyle> = {
-  filled: {
-    backgroundColor: '#007AFF',
+const styles = StyleSheet.create({
+  button: {
     paddingHorizontal: 16,
     paddingVertical: 10,
     borderRadius: 8,
+    userSelect: 'none',
   },
+  disabled: { opacity: 0.5 },
+  hidden: { display: 'none' },
+  label: { textAlign: 'center' },
+});
+
+const variantStyles = StyleSheet.create({
+  filled: { backgroundColor: '#007AFF' },
   outlined: {
-    backgroundColor: 'transparent',
-    paddingHorizontal: 16,
-    paddingVertical: 10,
-    borderRadius: 8,
-    borderWidth: 1,
     borderColor: '#007AFF',
+    borderWidth: 1,
   },
-  text: {
-    backgroundColor: 'transparent',
-    paddingHorizontal: 16,
-    paddingVertical: 10,
-  },
-};
+  text: {},
+} satisfies Record<ButtonVariant, ViewStyle>);
 
-const variantHoverStyles: Record<ButtonVariant, ViewStyle> = {
-  filled: {
-    backgroundColor: '#0066DB',
-  },
-  outlined: {
-    backgroundColor: 'rgba(0, 122, 255, 0.08)',
-  },
-  text: {
-    backgroundColor: 'rgba(0, 122, 255, 0.08)',
-  },
-};
+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 variantTextColors: Record<ButtonVariant, string> = {
-  filled: '#FFFFFF',
-  outlined: '#007AFF',
-  text: '#007AFF',
-};
+const variantLabelStyles = StyleSheet.create({
+  filled: { color: '#FFFFFF' },
+  outlined: { color: '#007AFF' },
+  text: { color: '#007AFF' },
+} satisfies Record<ButtonVariant, TextStyle>);
 
 /**
  * A pressable button that supports multiple visual variants.
@@ -55,32 +47,27 @@ export function Button({
   style,
   onAppear,
   onDisappear,
-  disabled,
-  hidden,
+  disabled = false,
+  hidden = false,
   testID,
 }: ButtonProps) {
   useUniversalLifecycle(onAppear, onDisappear);
-  const [hovered, setHovered] = useState(false);
-
-  const pressableStyle: ViewStyle = {
-    ...variantStyles[variant],
-    ...style,
-    ...(hovered && !disabled ? variantHoverStyles[variant] : undefined),
-    ...(hidden ? { display: 'none' } : undefined),
-    ...(disabled ? { opacity: 0.5 } : undefined),
-  };
 
   return (
     <Pressable
-      style={pressableStyle}
+      role="button"
       onPress={onPress}
-      onHoverIn={() => setHovered(true)}
-      onHoverOut={() => setHovered(false)}
       disabled={disabled}
-      testID={testID}>
-      {children ?? (
-        <Text style={{ color: variantTextColors[variant], textAlign: 'center' }}>{label}</Text>
-      )}
+      testID={testID}
+      style={({ hovered }) => [
+        styles.button,
+        variantStyles[variant],
+        style,
+        hovered && !disabled && variantHoverStyles[variant],
+        hidden && styles.hidden,
+        disabled && styles.disabled,
+      ]}>
+      {children ?? <Text style={[styles.label, variantLabelStyles[variant]]}>{label}</Text>}
     </Pressable>
   );
 }

package/src/universal/Checkbox/index.tsx

@@ -1,33 +1,46 @@
+import type { ComponentProps } from 'react';
+import { StyleSheet, Text, unstable_createElement, View, type ViewProps } from 'react-native';
+
 import type { CheckboxProps } from './types';
 
+const styles = StyleSheet.create({
+  label: {
+    flexDirection: 'row',
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 8,
+    cursor: 'pointer',
+  },
+  disabled: {
+    opacity: 0.5,
+    cursor: 'auto',
+  },
+  cursorInherit: {
+    // @ts-expect-error
+    cursor: 'inherit',
+  },
+});
+
+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, testID }: CheckboxProps) {
+export function Checkbox({ value, onValueChange, label, disabled = false, testID }: CheckboxProps) {
   return (
-    <label style={{ ...labelStyle, ...(disabled ? disabledStyle : undefined) }}>
-      <input
-        type="checkbox"
+    <View role="label" aria-disabled={disabled} style={[styles.label, disabled && styles.disabled]}>
+      <NativeCheckbox
         checked={value}
         onChange={(e) => onValueChange(e.target.checked)}
         disabled={disabled}
         data-testid={testID}
+        style={styles.cursorInherit}
       />
-      {label != null && <span>{label}</span>}
-    </label>
+      {label != null && <Text>{label}</Text>}
+    </View>
   );
 }
 
-const labelStyle: React.CSSProperties = {
-  display: 'inline-flex',
-  alignItems: 'center',
-  gap: 8,
-  cursor: 'pointer',
-};
-
-const disabledStyle: React.CSSProperties = {
-  opacity: 0.5,
-  cursor: 'default',
-};
-
 export * from './types';