@expo/ui 55.0.2 → 55.0.3

package/local-maven-repo/expo/modules/ui/expo.modules.ui/{55.0.2/expo.modules.ui-55.0.2.module → 55.0.3/expo.modules.ui-55.0.3.module}

@@ -3,7 +3,7 @@
   "component": {
     "group": "expo.modules.ui",
     "module": "expo.modules.ui",
-    "version": "55.0.2",
+    "version": "55.0.3",
     "attributes": {
       "org.gradle.status": "release"
     }
@@ -24,13 +24,13 @@
       },
       "files": [
         {
-          "name": "expo.modules.ui-55.0.2.aar",
-          "url": "expo.modules.ui-55.0.2.aar",
-          "size": 776412,
-          "sha512": "8a56aa5f1a198809e7bd3601605ec9e5ae7414b7834d6d6a44c024991f27de1cd744ed4b575b23b6b537e3e759c39309b220ca9fe57ec76c42b4130326c331fb",
-          "sha256": "9a82f1f77a7ee3f302982361eb41e2bb8b86cbd430061a07cce8c4511b40cbf4",
-          "sha1": "d9837c255bb0284a69d6b234195055a11d9bd98f",
-          "md5": "c2ddc40af222d8ef304b15d13a112399"
+          "name": "expo.modules.ui-55.0.3.aar",
+          "url": "expo.modules.ui-55.0.3.aar",
+          "size": 926327,
+          "sha512": "1cadb83d41093807cf37e093484e7f8206f11e856e6eebb3d77c679800b75b9ad8dbfa074cc2f4ff75c60b9de7cba4099d76c37c11158a7551fb827b4808e615",
+          "sha256": "b28fefc8ae185432f8d8988a2701d0f38bab89a15eebeb60a3e27462ad814be6",
+          "sha1": "cfdba1b98a6054184b39f6b71d33c18f385c26d2",
+          "md5": "e71e2dd13981dbfb7885feb0b0bfe390"
         }
       ]
     },
@@ -120,13 +120,13 @@
       ],
       "files": [
         {
-          "name": "expo.modules.ui-55.0.2.aar",
-          "url": "expo.modules.ui-55.0.2.aar",
-          "size": 776412,
-          "sha512": "8a56aa5f1a198809e7bd3601605ec9e5ae7414b7834d6d6a44c024991f27de1cd744ed4b575b23b6b537e3e759c39309b220ca9fe57ec76c42b4130326c331fb",
-          "sha256": "9a82f1f77a7ee3f302982361eb41e2bb8b86cbd430061a07cce8c4511b40cbf4",
-          "sha1": "d9837c255bb0284a69d6b234195055a11d9bd98f",
-          "md5": "c2ddc40af222d8ef304b15d13a112399"
+          "name": "expo.modules.ui-55.0.3.aar",
+          "url": "expo.modules.ui-55.0.3.aar",
+          "size": 926327,
+          "sha512": "1cadb83d41093807cf37e093484e7f8206f11e856e6eebb3d77c679800b75b9ad8dbfa074cc2f4ff75c60b9de7cba4099d76c37c11158a7551fb827b4808e615",
+          "sha256": "b28fefc8ae185432f8d8988a2701d0f38bab89a15eebeb60a3e27462ad814be6",
+          "sha1": "cfdba1b98a6054184b39f6b71d33c18f385c26d2",
+          "md5": "e71e2dd13981dbfb7885feb0b0bfe390"
         }
       ]
     },
@@ -140,13 +140,13 @@
       },
       "files": [
         {
-          "name": "expo.modules.ui-55.0.2-sources.jar",
-          "url": "expo.modules.ui-55.0.2-sources.jar",
-          "size": 56358,
-          "sha512": "588744d4be57b3e7ed22bcccd40222dcb365367cd3bb72fd0aeb4c0f1925229f986b58712f477a0eebdeb0e8d887b09e0aab21764dc372a5755e622118d88d7b",
-          "sha256": "2b50088dab0279da8a113fe0396237a4525f8a9fb130d4b1cd15b5072f866a53",
-          "sha1": "a34da0ffd5b373d346c39f45a5a61ec09f5c1b7b",
-          "md5": "88aeb5d46abccb005a1f657379a191dd"
+          "name": "expo.modules.ui-55.0.3-sources.jar",
+          "url": "expo.modules.ui-55.0.3-sources.jar",
+          "size": 59533,
+          "sha512": "17c66704e0a4a36020c483c7fa57c36e3a00859c0ec6a021f4c05d265d211fc861c7181e5ae44d2982418c3e463da8b3bec84ecd26da1361513712e77b5ba479",
+          "sha256": "c57afb701286b9952b45654e012a91a385a29294de33d0513f8d198f304e2469",
+          "sha1": "946e37bf3649dc1cd162039cb8a8f09dda746589",
+          "md5": "0a032184d0eac4ef04d3f10fe2ee4bbd"
         }
       ]
     }

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

@@ -0,0 +1 @@
+fc4fc4dd0ecfb0dc5b0541f32d7c4219

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

@@ -0,0 +1 @@
+4d309366193fb9e93dfc2f528d842ef199d9356f

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

@@ -0,0 +1 @@
+8538fc44dce117d85e63175555983fbe9c41be3e21c0c1a38bd8284538348cfb

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

@@ -0,0 +1 @@
+9b945333e9fabb773714dc66ccfd5556156ad6804aa63126a4d8db3351df53287def6a225bda7c5822ed780b7aaddbd36cac41fd31094df091b99b2c4cc75780

package/local-maven-repo/expo/modules/ui/expo.modules.ui/{55.0.2/expo.modules.ui-55.0.2.pom → 55.0.3/expo.modules.ui-55.0.3.pom}

@@ -9,7 +9,7 @@
   <modelVersion>4.0.0</modelVersion>
   <groupId>expo.modules.ui</groupId>
   <artifactId>expo.modules.ui</artifactId>
-  <version>55.0.2</version>
+  <version>55.0.3</version>
   <packaging>aar</packaging>
   <name>expo.modules.ui</name>
   <url>https://github.com/expo/expo</url>

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

@@ -0,0 +1 @@
+a3df23f7e9d010b71fdfe87e96789d6d

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

@@ -0,0 +1 @@
+3296958fe9f35c69d8d5c4b2557dc5a71c45935f

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

@@ -0,0 +1 @@
+7c81267db605b109cc861c92c6c76b415dd5c7387766652b399877e6cd485481

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

@@ -0,0 +1 @@
+20a8aefc780090feeeffd634b020ce55a5288bd2c12ba66ef0c19e81b78633cb13916d8dd5fea9b4cf1b3a07c00dbeb0599c4f283800bfe7bf44c90570841e07

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml

@@ -3,11 +3,11 @@
   <groupId>expo.modules.ui</groupId>
   <artifactId>expo.modules.ui</artifactId>
   <versioning>
-    <latest>55.0.2</latest>
-    <release>55.0.2</release>
+    <latest>55.0.3</latest>
+    <release>55.0.3</release>
     <versions>
-      <version>55.0.2</version>
+      <version>55.0.3</version>
     </versions>
-    <lastUpdated>20260311141702</lastUpdated>
+    <lastUpdated>20260317165330</lastUpdated>
   </versioning>
 </metadata>

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.md5

@@ -1 +1 @@
-3297c0326287d50f819c398744e70f0b
+ba5645a93d7825372e7e0f45563e1cfd

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.sha1

@@ -1 +1 @@
-52a054a9646396b7224594f0d12720d91de3d216
+4f2050a563003a387527564b35508ee311916fae

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.sha256

@@ -1 +1 @@
-0ae7bf34378bccc60cb770b147533c2b4f1d10ede0a368c6ce75ab9763c6f66e
+0ea5ca4c5502f8f61efb4a7c56f5bd0f744abef7ed58d4388d54bab48fc602df

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.sha512

@@ -1 +1 @@
-b3f9f47205d7673ff988ddfc4632e556083ab8f5452376963677b9cc91314ff7363f811f1dfa575e8ead3c870ad237f0e930ee8804bdda308b00487e82bcd112
+f9f75a9f46b1a6ac2ebe41af9e8973f7fb40aa23ed7861b2ffc6a025b80dd888c25d8be8d8748473ec14243a753892d9865db99c8304416d0e63610f50f7d8ff

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expo/ui",
-  "version": "55.0.2",
+  "version": "55.0.3",
   "description": "A collection of UI components",
   "sideEffects": [
     "*.fx.js"
@@ -55,10 +55,13 @@
     "@types/react": "~19.2.0",
     "expo-module-scripts": "^55.0.2"
   },
+  "jest": {
+    "preset": "expo-module-scripts"
+  },
   "peerDependencies": {
     "expo": "*",
     "react": "*",
     "react-native": "*"
   },
-  "gitHead": "bcdd2c239f8a92cdf5140e35cde768352630acd6"
+  "gitHead": "9260ae10a08271027d85792b7128e0d4883dca4d"
 }

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

@@ -0,0 +1,206 @@
+/**
+ * AnimatedVisibility — a React wrapper around Jetpack Compose's AnimatedVisibility.
+ *
+ * Architecture overview:
+ *
+ * 1. **Public API** — `EnterTransition` / `ExitTransition` factory objects produce
+ *    chainable transition descriptors via `.plus()`, mirroring Compose's `+` operator.
+ *
+ * 2. **Internal records** — Each factory call creates an `EnterTransitionRecord` or
+ *    `ExitTransitionRecord`, a plain JSON object with a `type` discriminator and optional
+ *    parameters. These records are the format passed to the native Android view.
+ *
+ * 3. **Symbol-based encapsulation** — The record arrays are stored behind unique Symbols
+ *    (`ENTER_TRANSITION_SYMBOL` / `EXIT_TRANSITION_SYMBOL`). This prevents consumers from
+ *    accessing or constructing raw records directly, ensuring transitions are only built
+ *    through the factory API.
+ *
+ * 4. **Chaining** — `.plus(other)` concatenates the current record array with `other`'s
+ *    records into a new transition object. The result is a flat list, not a tree.
+ *    e.g. `fadeIn().plus(expandIn())` → `[{ type: 'fadeIn' }, { type: 'expandIn' }]`
+ *
+ * 5. **Component** — `<AnimatedVisibility>` extracts the record arrays from the chainable
+ *    types via their Symbols and passes them as plain JSON arrays to the native view.
+ */
+import { requireNativeView } from 'expo';
+
+import { PrimitiveBaseProps, transformProps } from '../layout-types';
+import { ENTER_TRANSITION_SYMBOL, EXIT_TRANSITION_SYMBOL } from './symbols';
+
+type EnterTransitionRecord = {
+  type:
+    | 'fadeIn'
+    | 'slideInHorizontally'
+    | 'slideInVertically'
+    | 'expandIn'
+    | 'expandHorizontally'
+    | 'expandVertically'
+    | 'scaleIn';
+  initialAlpha?: number;
+  /** Fraction of width: -1.0 = full width left, 1.0 = full width right */
+  initialOffsetX?: number;
+  /** Fraction of height: -1.0 = full height top, 1.0 = full height bottom */
+  initialOffsetY?: number;
+  initialScale?: number;
+};
+
+type ExitTransitionRecord = {
+  type:
+    | 'fadeOut'
+    | 'slideOutHorizontally'
+    | 'slideOutVertically'
+    | 'shrinkOut'
+    | 'shrinkHorizontally'
+    | 'shrinkVertically'
+    | 'scaleOut';
+  targetAlpha?: number;
+  /** Fraction of width: -1.0 = full width left, 1.0 = full width right */
+  targetOffsetX?: number;
+  /** Fraction of height: -1.0 = full height top, 1.0 = full height bottom */
+  targetOffsetY?: number;
+  targetScale?: number;
+};
+
+/**
+ * Represents an enter transition that can be combined with other enter transitions using `.plus()`.
+ */
+export type EnterTransitionType = {
+  /** Combines this transition with another enter transition (mirrors Compose's `+` operator). */
+  plus: (other: EnterTransitionType) => EnterTransitionType;
+  [ENTER_TRANSITION_SYMBOL]: () => EnterTransitionRecord[];
+};
+
+/**
+ * Represents an exit transition that can be combined with other exit transitions using `.plus()`.
+ */
+export type ExitTransitionType = {
+  /** Combines this transition with another exit transition (mirrors Compose's `+` operator). */
+  plus: (other: ExitTransitionType) => ExitTransitionType;
+  [EXIT_TRANSITION_SYMBOL]: () => ExitTransitionRecord[];
+};
+
+function createEnterTransition(records: EnterTransitionRecord[]): EnterTransitionType {
+  return {
+    plus: (other) => createEnterTransition([...records, ...other[ENTER_TRANSITION_SYMBOL]()]),
+    [ENTER_TRANSITION_SYMBOL]: () => records,
+  };
+}
+
+function createExitTransition(records: ExitTransitionRecord[]): ExitTransitionType {
+  return {
+    plus: (other) => createExitTransition([...records, ...other[EXIT_TRANSITION_SYMBOL]()]),
+    [EXIT_TRANSITION_SYMBOL]: () => records,
+  };
+}
+
+/**
+ * Factory for enter transitions used with `AnimatedVisibility`.
+ * Transitions can be combined using `.plus()`.
+ *
+ * @example
+ * ```tsx
+ * // Single transition
+ * EnterTransition.fadeIn()
+ *
+ * // Combined transitions
+ * EnterTransition.fadeIn({ initialAlpha: 0.3 })
+ *   .plus(EnterTransition.slideInHorizontally({ initialOffsetX: 1.0 }))
+ * ```
+ */
+export const EnterTransition = {
+  /** Fades the content in. */
+  fadeIn: (params?: { initialAlpha?: number }) =>
+    createEnterTransition([{ type: 'fadeIn', ...params }]),
+  /** Slides the content in horizontally. */
+  slideInHorizontally: (params?: { initialOffsetX?: number }) =>
+    createEnterTransition([{ type: 'slideInHorizontally', ...params }]),
+  /** Slides the content in vertically. */
+  slideInVertically: (params?: { initialOffsetY?: number }) =>
+    createEnterTransition([{ type: 'slideInVertically', ...params }]),
+  /** Expands the content from the center. */
+  expandIn: () => createEnterTransition([{ type: 'expandIn' }]),
+  /** Expands the content horizontally from the center. */
+  expandHorizontally: () => createEnterTransition([{ type: 'expandHorizontally' }]),
+  /** Expands the content vertically from the center. */
+  expandVertically: () => createEnterTransition([{ type: 'expandVertically' }]),
+  /** Scales the content in from a smaller size. */
+  scaleIn: (params?: { initialScale?: number }) =>
+    createEnterTransition([{ type: 'scaleIn', ...params }]),
+};
+
+/**
+ * Factory for exit transitions used with `AnimatedVisibility`.
+ * Transitions can be combined using `.plus()`.
+ *
+ * @example
+ * ```tsx
+ * // Single transition
+ * ExitTransition.fadeOut()
+ *
+ * // Combined transitions
+ * ExitTransition.fadeOut()
+ *   .plus(ExitTransition.slideOutHorizontally({ targetOffsetX: 1.0 }))
+ * ```
+ */
+export const ExitTransition = {
+  /** Fades the content out. */
+  fadeOut: (params?: { targetAlpha?: number }) =>
+    createExitTransition([{ type: 'fadeOut', ...params }]),
+  /** Slides the content out horizontally. */
+  slideOutHorizontally: (params?: { targetOffsetX?: number }) =>
+    createExitTransition([{ type: 'slideOutHorizontally', ...params }]),
+  /** Slides the content out vertically. */
+  slideOutVertically: (params?: { targetOffsetY?: number }) =>
+    createExitTransition([{ type: 'slideOutVertically', ...params }]),
+  /** Shrinks the content towards the center. */
+  shrinkOut: () => createExitTransition([{ type: 'shrinkOut' }]),
+  /** Shrinks the content horizontally towards the center. */
+  shrinkHorizontally: () => createExitTransition([{ type: 'shrinkHorizontally' }]),
+  /** Shrinks the content vertically towards the center. */
+  shrinkVertically: () => createExitTransition([{ type: 'shrinkVertically' }]),
+  /** Scales the content out to a smaller size. */
+  scaleOut: (params?: { targetScale?: number }) =>
+    createExitTransition([{ type: 'scaleOut', ...params }]),
+};
+
+export type AnimatedVisibilityProps = {
+  children?: React.ReactNode;
+  /**
+   * Whether the content is visible. When changed, the content will animate in or out.
+   */
+  visible: boolean;
+  /**
+   * The enter transition to use when `visible` changes to `true`.
+   * Use `EnterTransition` factory methods and combine with `.plus()`.
+   * Defaults to Compose's `fadeIn + expandIn` when not specified.
+   */
+  enterTransition?: EnterTransitionType;
+  /**
+   * The exit transition to use when `visible` changes to `false`.
+   * Use `ExitTransition` factory methods and combine with `.plus()`.
+   * Defaults to Compose's `fadeOut + shrinkOut` when not specified.
+   */
+  exitTransition?: ExitTransitionType;
+} & PrimitiveBaseProps;
+
+type AnimatedVisibilityNativeProps = Omit<
+  AnimatedVisibilityProps,
+  'enterTransition' | 'exitTransition'
+> & {
+  enterTransition?: EnterTransitionRecord[];
+  exitTransition?: ExitTransitionRecord[];
+};
+
+const AnimatedVisibilityNativeView: React.ComponentType<AnimatedVisibilityNativeProps> =
+  requireNativeView('ExpoUI', 'AnimatedVisibilityView');
+
+export function AnimatedVisibility(props: AnimatedVisibilityProps) {
+  const { enterTransition, exitTransition, ...rest } = props;
+  return (
+    <AnimatedVisibilityNativeView
+      {...transformProps(rest)}
+      enterTransition={enterTransition?.[ENTER_TRANSITION_SYMBOL]()}
+      exitTransition={exitTransition?.[EXIT_TRANSITION_SYMBOL]()}
+    />
+  );
+}

package/src/jetpack-compose/AnimatedVisibility/symbols.ts

@@ -0,0 +1,8 @@
+// Unique Symbols used as private keys on transition objects. They act as a sealed accessor:
+// only this module and the component can read the underlying record arrays from an
+// EnterTransitionType or ExitTransitionType, preventing consumers from bypassing the factory API.
+//
+// Exported from this file for internal use (component + tests), but NOT re-exported from
+// the package's public index.
+export const ENTER_TRANSITION_SYMBOL = Symbol('enterTransition');
+export const EXIT_TRANSITION_SYMBOL = Symbol('exitTransition');

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

@@ -1,139 +1,116 @@
 import { requireNativeView } from 'expo';
 import { type ColorValue } from 'react-native';
 
-import { MaterialIcon } from './types';
-import { ExpoModifier, ViewEvent } from '../../types';
-import { getTextFromChildren } from '../../utils';
-import { parseJSXShape, ShapeJSXElement, ShapeRecordProps } from '../Shape';
+import type { ModifierConfig, ViewEvent } from '../../types';
+import { ShapeJSXElement, ShapeRecordProps, parseJSXShape } from '../Shape';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
 /**
- * The built-in button styles available on Android.
- * - `outlined` - A button with an outline.
- * - `elevated` - A filled button with a shadow.
+ * Colors for button elements.
  */
-export type ButtonVariant = 'default' | 'bordered' | 'borderless' | 'outlined' | 'elevated';
-
-/**
- * Colors for button's core elements.
- */
-export type ButtonElementColors = {
+export type ButtonColors = {
   containerColor?: ColorValue;
   contentColor?: ColorValue;
   disabledContainerColor?: ColorValue;
   disabledContentColor?: ColorValue;
 };
 
+/**
+ * Content padding for the button's inner content.
+ * All values are in density-independent pixels (dp).
+ */
+export type ButtonContentPadding = {
+  start?: number;
+  top?: number;
+  end?: number;
+  bottom?: number;
+};
+
 export type ButtonProps = {
   /**
-   * A callback that is called when the button is pressed.
-   */
-  onPress?: () => void;
-  /**
-   * A string describing the leading icon to display in the button.
-   * Uses Material Icons on Android.
-   */
-  leadingIcon?: MaterialIcon;
-  /**
-   * A string describing the trailing icon to display in the button.
-   * Uses Material Icons on Android.
-   */
-  trailingIcon?: MaterialIcon;
-  /**
-   * A string describing the system image to display in the button.
-   * Uses Material Icons on Android.
-   * @deprecated Use `leadingIcon` instead.
+   * Callback that is called when the button is clicked.
    */
-  systemImage?: MaterialIcon;
+  onClick?: () => void;
   /**
-   * The button variant.
+   * Whether the button is enabled for user interaction.
+   * @default true
    */
-  variant?: ButtonVariant;
+  enabled?: boolean;
   /**
-   * The text to display inside the button.
+   * Colors for button elements.
    */
-  children?: string | string[] | React.JSX.Element;
+  colors?: ButtonColors;
   /**
-   * Colors for button's core elements.
-   * @platform android
+   * The padding between the button container and its content.
+   * Use this to adjust internal spacing, for example when adding a leading icon
    */
-  elementColors?: ButtonElementColors;
+  contentPadding?: ButtonContentPadding;
   /**
-   * Button color.
+   * The shape of the button.
    */
-  color?: ColorValue;
   shape?: ShapeJSXElement;
   /**
-   * Disabled state of the button.
+   * Modifiers for the component.
    */
-  disabled?: boolean;
-
+  modifiers?: ModifierConfig[];
   /**
-   * Modifiers for the component.
+   * Content to display inside the button.
    */
-  modifiers?: ExpoModifier[];
+  children: React.ReactNode;
 };
 
-/**
- * @hidden
- */
-export type NativeButtonProps = Omit<
-  ButtonProps,
-  'role' | 'onPress' | 'leadingIcon' | 'trailingIcon' | 'systemImage' | 'shape'
-> & {
-  text: string;
-  leadingIcon?: string;
-  trailingIcon?: string;
+type NativeButtonProps = Omit<ButtonProps, 'onClick' | 'shape' | 'children'> & {
   shape?: ShapeRecordProps;
+  children?: React.ReactNode;
 } & ViewEvent<'onButtonPressed', void>;
 
-// We have to work around the `role` and `onPress` props being reserved by React Native.
-const ButtonNativeView: React.ComponentType<NativeButtonProps> = requireNativeView(
-  'ExpoUI',
-  'Button'
-);
-
 /**
  * @hidden
  */
-export function transformButtonProps(props: ButtonProps): NativeButtonProps {
-  const {
-    children,
-    onPress,
-    leadingIcon,
-    trailingIcon,
-    systemImage,
-    shape,
-    modifiers,
-    ...restProps
-  } = props;
-
-  // Handle backward compatibility: systemImage maps to leadingIcon
-  const finalLeadingIcon = leadingIcon ?? systemImage;
-
+export function transformButtonProps(props: Omit<ButtonProps, 'children'>): NativeButtonProps {
+  const { onClick, shape, modifiers, ...restProps } = props;
   return {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
-    text: getTextFromChildren(children) ?? '',
-    children: getTextFromChildren(children) !== undefined ? undefined : children,
-    leadingIcon: finalLeadingIcon,
+    enabled: props.enabled ?? true,
     shape: parseJSXShape(shape),
-    trailingIcon,
-    onButtonPressed: onPress,
-    elementColors: props.elementColors
-      ? props.elementColors
-      : props.color
-        ? {
-            containerColor: props.color,
-          }
-        : undefined,
+    onButtonPressed: onClick ? () => onClick() : undefined,
   };
 }
 
+function createButtonComponent(name: string) {
+  const NativeView: React.ComponentType<NativeButtonProps> = requireNativeView('ExpoUI', name);
+
+  function Component(props: ButtonProps) {
+    const { children, ...restProps } = props;
+    return <NativeView {...transformButtonProps(restProps)}>{children}</NativeView>;
+  }
+  Component.displayName = name;
+  return Component;
+}
+
 /**
- * Displays a native button component.
+ * A filled button component.
  */
-export function Button(props: ButtonProps) {
-  return <ButtonNativeView {...transformButtonProps(props)} />;
-}
+export const Button = createButtonComponent('Button');
+
+/**
+ * A filled tonal button component.
+ */
+export const FilledTonalButton = createButtonComponent('FilledTonalButton');
+
+/**
+ * An outlined button component.
+ */
+export const OutlinedButton = createButtonComponent('OutlinedButton');
+
+/**
+ * An elevated button component.
+ */
+export const ElevatedButton = createButtonComponent('ElevatedButton');
+
+/**
+ * A text button component.
+ */
+export const TextButton = createButtonComponent('TextButton');