@expo/ui 56.0.1 → 56.0.3

package/src/community/bottom-sheet/BottomSheet.ios.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { View } from 'react-native';
+import { useWindowDimensions, View } from 'react-native';
 
 import { BottomSheetContext, BottomSheetInternalContext } from './context';
 import type { BottomSheetMethods, BottomSheetProps } from './types';
@@ -82,6 +82,7 @@ export function BottomSheet(props: BottomSheetProps) {
     handleComponent,
     children,
   } = props;
+  const { width } = useWindowDimensions();
 
   // Two-state pattern for animated close:
   // - isMounted: whether the native sheet tree exists in the React tree
@@ -234,7 +235,7 @@ export function BottomSheet(props: BottomSheetProps) {
   return (
     <BottomSheetInternalContext.Provider value={internalContextValue}>
       <BottomSheetContext.Provider value={methods}>
-        <Host matchContents>
+        <Host style={{ position: 'absolute', width }}>
           <NativeBottomSheet
             isPresented={isPresented}
             onIsPresentedChange={handlePresentedChange}

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/DropdownMenu/DropdownMenuItem.tsx

@@ -22,12 +22,10 @@ export type DropdownMenuItemElementColors = {
   textColor?: ColorValue;
   /** Color of the text when the menu item is disabled. */
   disabledTextColor?: ColorValue;
-  // TODO: At the moment IconView's tint color defaults to Color.Unspecified instead of LocalContentColor.current.
-  // Thus the color override will not work for icons. At the moment icon color can only be set directly in IconView.
-  // leadingIconColor?: ColorValue;
-  // trailingIconColor?: ColorValue;
-  // disabledLeadingIconColor?: ColorValue;
-  // disabledTrailingIconColor?: ColorValue;
+  leadingIconColor?: ColorValue;
+  trailingIconColor?: ColorValue;
+  disabledLeadingIconColor?: ColorValue;
+  disabledTrailingIconColor?: ColorValue;
 };
 
 /**

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

@@ -10,20 +10,20 @@ export type HorizontalFloatingToolbarColors = {
    */
   toolbarContainerColor?: ColorValue;
 
-  // Color of the toolbar content (icons/text).
-  // TODO: At the moment IconView's tint color defaults to Color.Unspecified instead of LocalContentColor.current.
-  // Thus the color override will not work.
-  // toolbarContentColor?: ColorValue;
+  /**
+   *  Color of the toolbar content (icons/text).
+   */
+  toolbarContentColor?: ColorValue;
 
   /**
    * Color of the floating action button container (background).
    */
   fabContainerColor?: ColorValue;
 
-  // Color of the floating action button content (icon).
-  // TODO: At the moment IconView's tint color defaults to Color.Unspecified instead of LocalContentColor.current.
-  // Thus the color override will not work.
-  // fabContentColor?: ColorValue;
+  /**
+   *  Color of the floating action button content (icon).
+   */
+  fabContentColor?: ColorValue;
 };
 
 export type HorizontalFloatingToolbarProps = {

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

@@ -2,9 +2,11 @@ import { requireNativeView } from 'expo';
 import type { Ref } from 'react';
 
 import { type ModifierConfig, type ViewEvent } from '../../types';
-import type { PaddingValuesRecord } from '../Carousel';
+import { type PaddingValuesRecord } from '../Carousel';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
+export type { PaddingValuesRecord };
+
 export type HorizontalPagerHandle = {
   /**
    * Mirrors Compose's `PagerState.animateScrollToPage`. Resolves when the

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

@@ -23,16 +23,22 @@ export type IconProps = {
   source: ImageSourcePropType;
 
   /**
-   * The tint color to apply to the icon.
-   * Accepts hex strings, named colors, or RGB arrays.
+   * The tint color to apply to the icon. Accepts hex strings, named colors,
+   * or RGB arrays.
+   *
+   * - When omitted, the icon inherits the color from the surrounding
+   *   `LocalContentColor` (e.g. the toolbar/FAB content color).
+   * - When set to `null`, no tint is applied — the icon is drawn with its
+   *   original colors (`Color.Unspecified`). Use this for multicolored icons.
    *
    * @example
    * ```tsx
    * <Icon source={require('./assets/star.xml')} tint="#007AFF" />
    * <Icon source={require('./assets/star.xml')} tint="blue" />
+   * <Icon source={require('./assets/multicolor.xml')} tint={null} />
    * ```
    */
-  tint?: ColorValue;
+  tint?: ColorValue | null;
 
   /**
    * The size of the icon in density-independent pixels (dp).
@@ -80,8 +86,10 @@ export type IconProps = {
 /**
  * @hidden
  */
-export type NativeIconProps = Omit<IconProps, 'source'> & {
+export type NativeIconProps = Omit<IconProps, 'source' | 'tint'> & {
   source: ImageResolvedAssetSource;
+  tint?: ColorValue;
+  inheritTint: boolean;
 };
 
 const IconNativeView: React.ComponentType<NativeIconProps> = requireNativeView(
@@ -90,12 +98,17 @@ const IconNativeView: React.ComponentType<NativeIconProps> = requireNativeView(
 );
 
 function transformIconProps(props: IconProps): NativeIconProps {
-  const { source, modifiers, ...restProps } = props;
+  const { source, modifiers, tint, ...restProps } = props;
+  // Differentiate "tint not provided" (inherit `LocalContentColor`) from
+  // "tint explicitly null" (no tint, draw original colors).
+  const tintIsExplicitlyNull = 'tint' in props && tint === null;
 
   return {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
+    tint: tint ?? undefined,
+    inheritTint: !tintIsExplicitlyNull,
     source: Image.resolveAssetSource(source),
   };
 }

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

@@ -126,23 +126,15 @@ export type TextFieldColors = {
   errorSuffixColor?: ColorValue;
 };
 
-export type TextFieldValue = {
-  text: string;
-  selection: { start: number; end: number };
-};
-
-export type TextFieldValueLike = string | TextFieldValue;
-
 /** Shared props between `TextField` and `OutlinedTextField`. */
-type BaseTextFieldProps<T extends TextFieldValueLike = string> = {
+type BaseTextFieldProps = {
   ref?: Ref<TextFieldRef>;
   /**
-   * An observable state that holds the current value. Create one with either:
-   * - `useNativeState('initial text')`.
-   * - `useNativeState<TextFieldValue>({ text: '', selection: { start: 0, end: 0 } })`
-   * If omitted, the field manages its own internal state.
+   * An observable state that holds the current text value. Create one with
+   * `useNativeState('initial text')`. If omitted, the field manages its own
+   * internal state.
    */
-  value?: ObservableState<T>;
+  value?: ObservableState<string>;
   /** If true, the text field will be focused automatically when mounted. @default false */
   autoFocus?: boolean;
   /** @default true */
@@ -173,20 +165,18 @@ type BaseTextFieldProps<T extends TextFieldValueLike = string> = {
   };
 
   /**
-   * Observable state the field writes the current selection to.
-   * Create with `useNativeState({ start: 0, end: 0 })`.
-   * Use `ref.setSelection(start, end)` to set programmatically.
-   * @internal
+   * Observable state holding the current selection range. Create with
+   * `useNativeState({ start: 0, end: 0 })`. The field writes user-driven
+   * changes back to it, and writes from JS (or a worklet) update the
+   * cursor/selection in the field. Use `ref.setSelection(start, end)` for
+   * imperative one-shot updates.
    */
   selection?: ObservableState<{ start: number; end: number }>;
 
   /** Maximum number of characters allowed. Truncates natively as the user types. */
   maxLength?: number;
 
-  /**
-   * Called when the selection range changes.
-   * @internal
-   */
+  /** Called when the selection range changes. */
   onSelectionChange?: (selection: { start: number; end: number }) => void;
 
   /**
@@ -215,15 +205,12 @@ type BaseTextFieldProps<T extends TextFieldValueLike = string> = {
   keyboardOptions?: TextFieldKeyboardOptions;
   keyboardActions?: TextFieldKeyboardActions;
   /**
-   * Fires whenever the value changes. The callback receives the same shape as `value`:
-   * - `string` when `value` is a string observable (typing events only).
-   * - `TextFieldValue` when `value` is a TextFieldValue observable (every gesture:
-   *   typing, tap-to-place, drag, select-all, arrow keys).
-   *
-   * If marked with the `'worklet'` directive, runs synchronously on the UI thread;
-   * otherwise delivered asynchronously as a regular JS event.
+   * Fires whenever the text value changes. If marked with the `'worklet'`
+   * directive, runs synchronously on the UI thread; otherwise delivered
+   * asynchronously as a regular JS event. Use `onSelectionChange` (or read
+   * the `selection` observable) to react to selection-only changes.
    */
-  onValueChange?: (value: T) => void;
+  onValueChange?: (value: string) => void;
   /** A callback triggered when the field gains or loses focus. */
   onFocusChanged?: (focused: boolean) => void;
   shape?: object;
@@ -232,14 +219,13 @@ type BaseTextFieldProps<T extends TextFieldValueLike = string> = {
   children?: React.ReactNode;
 };
 
-export type TextFieldProps<T extends TextFieldValueLike = string> = BaseTextFieldProps<T> & {
+export type TextFieldProps = BaseTextFieldProps & {
   colors?: TextFieldColors;
 };
 
-export type OutlinedTextFieldProps<T extends TextFieldValueLike = string> =
-  BaseTextFieldProps<T> & {
-    colors?: TextFieldColors;
-  };
+export type OutlinedTextFieldProps = BaseTextFieldProps & {
+  colors?: TextFieldColors;
+};
 
 // endregion Types
 
@@ -263,7 +249,7 @@ type NativeTextFieldProps = Omit<
   value?: number | null;
   selection?: number | null;
   onValueChangeSync?: number | null;
-} & ViewEvent<'onValueChange', TextFieldValue> &
+} & ViewEvent<'onValueChange', { text: string; selection: { start: number; end: number } }> &
   ViewEvent<'onFocusChanged', { value: boolean }> &
   ViewEvent<'onSelectionChange', { start: number; end: number }> &
   ViewEvent<'onKeyboardAction', { action: string; value: string }>;
@@ -273,8 +259,8 @@ const TextFieldNativeView: React.ComponentType<NativeTextFieldProps> = requireNa
   'TextFieldView'
 );
 
-function useTransformedProps<T extends TextFieldValueLike>(
-  props: TextFieldProps<T> | OutlinedTextFieldProps<T>,
+function useTransformedProps(
+  props: TextFieldProps | OutlinedTextFieldProps,
   variant: 'filled' | 'outlined'
 ): NativeTextFieldProps {
   const {
@@ -289,8 +275,6 @@ function useTransformedProps<T extends TextFieldValueLike>(
     ...restProps
   } = props;
 
-  const isStringMode = !value || typeof value.value === 'string';
-
   const isWorklet = !!onValueChange && !!worklets?.isWorkletFunction?.(onValueChange);
   const workletCallback = useWorkletProp(isWorklet ? onValueChange : undefined, 'onValueChange');
 
@@ -300,16 +284,11 @@ function useTransformedProps<T extends TextFieldValueLike>(
     ...restProps,
     variant,
     children,
-    value: getStateId(value as ObservableState<TextFieldValueLike>),
+    value: getStateId(value),
     selection: getStateId(selection),
     onValueChangeSync: getStateId(workletCallback),
     onValueChange:
-      !isWorklet && onValueChange
-        ? (event) => {
-            const payload = event.nativeEvent;
-            onValueChange((isStringMode ? payload.text : payload) as T);
-          }
-        : undefined,
+      !isWorklet && onValueChange ? (event) => onValueChange(event.nativeEvent.text) : undefined,
     onFocusChanged: onFocusChanged ? (event) => onFocusChanged(event.nativeEvent.value) : undefined,
     onSelectionChange: onSelectionChange
       ? (event) => onSelectionChange({ start: event.nativeEvent.start, end: event.nativeEvent.end })
@@ -370,7 +349,7 @@ function SupportingText(props: { children: React.ReactNode }) {
 /**
  * A Material3 `TextField`.
  */
-function TextFieldComponent<T extends TextFieldValueLike = string>(props: TextFieldProps<T>) {
+function TextFieldComponent(props: TextFieldProps) {
   return <TextFieldNativeView {...useTransformedProps(props, 'filled')} />;
 }
 
@@ -385,9 +364,7 @@ TextFieldComponent.SupportingText = SupportingText;
 /**
  * A Material3 `OutlinedTextField` with a transparent background and border outline.
  */
-function OutlinedTextFieldComponent<T extends TextFieldValueLike = string>(
-  props: OutlinedTextFieldProps<T>
-) {
+function OutlinedTextFieldComponent(props: OutlinedTextFieldProps) {
   return <TextFieldNativeView {...useTransformedProps(props, 'outlined')} />;
 }
 
@@ -402,3 +379,6 @@ OutlinedTextFieldComponent.SupportingText = SupportingText;
 // endregion Components
 
 export { TextFieldComponent as TextField, OutlinedTextFieldComponent as OutlinedTextField };
+
+// Exported for docs api data
+export { type ObservableState };