@expo/ui 0.1.1-alpha.7 → 0.1.1-alpha.9

package/CHANGELOG.md

@@ -10,6 +10,22 @@
 
 ### 💡 Others
 
+## 0.1.1-alpha.9 — 2025-06-08
+
+### 🎉 New features
+
+- Allowed custom children in SwiftUI Button. ([#37136](https://github.com/expo/expo/pull/37136) by [@kudo](https://github.com/kudo))
+
+## 0.1.1-alpha.8 — 2025-06-04
+
+### 🎉 New features
+
+- [android] Add shape component. ([#36964](https://github.com/expo/expo/pull/36964) by [@aleqsio](https://github.com/aleqsio))
+
+### 💡 Others
+
+- Improved `@expo/ui/swift-ui-primitives` integrations. ([#36937](https://github.com/expo/expo/pull/36937), [#36938](https://github.com/expo/expo/pull/36938) by [@kudo](https://github.com/kudo))
+
 ## 0.1.1-alpha.7 — 2025-04-30
 
 _This version does not introduce any user-facing changes._

package/android/build.gradle

@@ -12,13 +12,13 @@ apply plugin: 'expo-module-gradle-plugin'
 apply plugin: 'org.jetbrains.kotlin.plugin.compose'
 
 group = 'expo.modules.ui'
-version = '0.1.1-alpha.7'
+version = '0.1.1-alpha.9'
 
 android {
   namespace "expo.modules.ui"
   defaultConfig {
     versionCode 1
-    versionName "0.1.1-alpha.7"
+    versionName "0.1.1-alpha.9"
   }
   buildFeatures {
     compose true
@@ -35,4 +35,5 @@ dependencies {
   implementation 'androidx.lifecycle:lifecycle-runtime:2.8.7'
   implementation 'androidx.fragment:fragment-ktx:1.8.5'
   implementation 'androidx.compose.material3:material3-android:1.3.1'
+  implementation "androidx.graphics:graphics-shapes:1.0.1"
 }

package/android/src/main/java/expo/modules/ui/ExpoUIModule.kt

@@ -26,6 +26,8 @@ class ExpoUIModule : Module() {
       Events("onValueChanged")
     }
 
+    View(ShapeView::class)
+
     View(DateTimePickerView::class) {
       Events("onDateSelected")
     }

package/android/src/main/java/expo/modules/ui/ShapeView.kt

@@ -0,0 +1,149 @@
+package expo.modules.ui
+
+import android.content.Context
+import expo.modules.kotlin.views.ExpoComposeView
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.ui.graphics.Color
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.views.ComposeProps
+import androidx.compose.foundation.layout.Box
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawWithCache
+import androidx.graphics.shapes.RoundedPolygon
+import androidx.graphics.shapes.toPath
+import androidx.compose.ui.graphics.asComposePath
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Path
+import androidx.graphics.shapes.CornerRounding
+import androidx.graphics.shapes.circle
+import androidx.graphics.shapes.pill
+import androidx.graphics.shapes.pillStar
+import androidx.graphics.shapes.rectangle
+import androidx.graphics.shapes.star
+import expo.modules.kotlin.types.Enumerable
+import android.graphics.Color as GraphicsColor
+
+enum class ShapeType(val value: String) : Enumerable {
+  STAR("star"),
+  PILL_STAR("pillStar"),
+  PILL("pill"),
+  CIRCLE("circle"),
+  RECTANGLE("rectangle"),
+  POLYGON("polygon")
+}
+
+data class ShapeProps(
+  val cornerRounding: MutableState<Float> = mutableFloatStateOf(0.0f),
+  val smoothing: MutableState<Float> = mutableFloatStateOf(0.0f),
+  val verticesCount: MutableState<Int> = mutableIntStateOf(6),
+  val innerRadius: MutableState<Float> = mutableFloatStateOf(0.0f),
+  val radius: MutableState<Float> = mutableFloatStateOf(0.0f),
+  val type: MutableState<ShapeType> = mutableStateOf(ShapeType.CIRCLE),
+  val color: MutableState<GraphicsColor?> = mutableStateOf(null),
+) : ComposeProps
+
+private fun Size.centerX() = this.width / 2
+private fun Size.centerY() = this.height / 2
+
+private fun createStarPath(size: Size, cornerRounding: Float, smoothing: Float, innerRadius: Float, radius: Float, verticesCount: Int): Path {
+  val rounding = CornerRounding(size.minDimension * cornerRounding, smoothing = smoothing)
+  return RoundedPolygon.star(
+    numVerticesPerRadius = verticesCount,
+    innerRadius = size.minDimension * 0.5f * innerRadius.coerceAtMost(radius - 0.001f).coerceAtLeast(0.001f),
+    radius = size.minDimension * 0.5f * radius.coerceAtLeast(0.002f),
+    centerX = size.centerX(),
+    centerY = size.centerY(),
+    rounding = rounding
+  ).toPath().asComposePath()
+}
+
+private fun createPillStarPath(size: Size, cornerRounding: Float, smoothing: Float, innerRadius: Float, verticesCount: Int): Path {
+  val rounding = CornerRounding(size.minDimension * cornerRounding, smoothing = smoothing)
+  return RoundedPolygon.pillStar(
+    numVerticesPerRadius = verticesCount,
+    width = size.width / 2,
+    height = size.height / 2,
+    innerRadiusRatio = innerRadius.coerceAtMost(1f - 0.001f).coerceAtLeast(0.001f),
+    centerX = size.centerX(),
+    centerY = size.centerY(),
+    rounding = rounding
+  ).toPath().asComposePath()
+}
+
+private fun createPillPath(size: Size, smoothing: Float): Path {
+  return RoundedPolygon.pill(
+    centerX = size.centerX(),
+    centerY = size.centerY(),
+    width = size.width,
+    height = size.height,
+    smoothing = smoothing
+  ).toPath().asComposePath()
+}
+
+private fun createPolygonPath(size: Size, cornerRounding: Float, smoothing: Float, verticesCount: Int): Path {
+  val rounding = CornerRounding(size.minDimension * cornerRounding, smoothing = smoothing)
+  return RoundedPolygon(
+    numVertices = verticesCount.coerceAtLeast(3),
+    radius = size.minDimension / 2,
+    centerX = size.centerX(),
+    centerY = size.centerY(),
+    rounding = rounding,
+  ).toPath().asComposePath()
+}
+
+private fun createCirclePath(size: Size, radius: Float, verticesCount: Int): Path {
+  return RoundedPolygon.circle(
+    centerX = size.centerX(),
+    centerY = size.centerY(),
+    radius = size.minDimension * 0.5f * radius.coerceAtLeast(0.002f),
+    numVertices = verticesCount.coerceAtLeast(3),
+  ).toPath().asComposePath()
+}
+
+private fun createRectanglePath(size: Size, cornerRounding: Float, smoothing: Float): Path {
+  val rounding = CornerRounding(size.minDimension * cornerRounding, smoothing = smoothing)
+  return RoundedPolygon.rectangle(
+    centerX = size.centerX(),
+    centerY = size.centerY(),
+    rounding = rounding,
+    width = size.width,
+    height = size.height,
+  ).toPath().asComposePath()
+}
+
+class ShapeView(context: Context, appContext: AppContext) : ExpoComposeView<ShapeProps>(context, appContext) {
+  override val props = ShapeProps()
+  init {
+    setContent {
+      val (smoothing) = props.smoothing
+      val (cornerRounding) = props.cornerRounding
+      val (innerRadius) = props.innerRadius
+      val (radius) = props.radius
+      val (shapeType) = props.type
+      val (verticesCount) = props.verticesCount
+      val (color) = props.color
+      Box(
+        modifier = Modifier
+          .drawWithCache {
+            val path = when (shapeType) {
+              ShapeType.STAR -> createStarPath(size = size, cornerRounding = cornerRounding, smoothing = smoothing, innerRadius = innerRadius, radius = radius, verticesCount = verticesCount)
+              ShapeType.PILL_STAR -> createPillStarPath(size = size, cornerRounding = cornerRounding, smoothing = smoothing, innerRadius = innerRadius, verticesCount = verticesCount)
+              ShapeType.PILL -> createPillPath(size = size, smoothing = smoothing)
+              ShapeType.CIRCLE -> createCirclePath(size = size, radius = radius, verticesCount = verticesCount)
+              ShapeType.RECTANGLE -> createRectanglePath(size = size, cornerRounding = cornerRounding, smoothing = smoothing)
+              ShapeType.POLYGON -> createPolygonPath(size = size, cornerRounding = cornerRounding, smoothing = smoothing, verticesCount = verticesCount)
+            }
+
+            onDrawBehind {
+              drawPath(path, color = color.composeOrNull ?: Color.Transparent)
+            }
+          }
+          .fillMaxSize()
+      )
+    }
+  }
+}

package/build/jetpack-compose/Shape/index.d.ts

@@ -0,0 +1,48 @@
+import { ViewStyle } from 'react-native';
+export type ShapeProps = {
+    /**
+     * Corner rounding percentage. Multiplied by the shorter dimension of the view to produce pixel values.
+     * @default 0.0
+     */
+    cornerRounding?: number;
+    /**
+     * Number between `0.0` and `1.0` that determines how much each line between vertices is "smoothed".
+     * @default 0.0
+     */
+    smoothing?: number;
+    /**
+     * Number of vertices. For `'POLYGON'` it must be at least `3.0`. For `'STAR'` and `'PILL_STAR'` it is a number of vertices for each of two radii (A 5-pointed star has 10 vertices.)
+     * @default 6.0
+     */
+    verticesCount?: number;
+    /**
+     * Inner radius of star-related shapes (`'STAR'` and `'PILL_STAR'`). Multiplied by the shorter dimension of the view to produce pixel values.
+     * @default 1.0
+     */
+    innerRadius?: number;
+    /**
+     * Radius of the circular shape. Multiplied by the shorter dimension of the view to produce pixel values.
+     * @default 1.0
+     */
+    radius?: number;
+    /** Style of the component */
+    style?: ViewStyle;
+    /** Color of the shape */
+    color?: string;
+};
+declare function Star(props: ShapeProps): import("react").JSX.Element;
+declare function PillStar(props: ShapeProps): import("react").JSX.Element;
+declare function Pill(props: Pick<ShapeProps, 'smoothing' | 'style' | 'color'>): import("react").JSX.Element;
+declare function Circle(props: Pick<ShapeProps, 'radius' | 'verticesCount' | 'style' | 'color'>): import("react").JSX.Element;
+declare function Rectangle(props: Pick<ShapeProps, 'smoothing' | 'cornerRounding' | 'style' | 'color'>): import("react").JSX.Element;
+declare function Polygon(props: Pick<ShapeProps, 'smoothing' | 'cornerRounding' | 'verticesCount' | 'style' | 'color'>): import("react").JSX.Element;
+export declare const Shape: {
+    Star: typeof Star;
+    PillStar: typeof PillStar;
+    Pill: typeof Pill;
+    Circle: typeof Circle;
+    Rectangle: typeof Rectangle;
+    Polygon: typeof Polygon;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/build/jetpack-compose/Shape/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/jetpack-compose/Shape/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,MAAM,MAAM,UAAU,GAAG;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAIF,iBAAS,IAAI,CAAC,KAAK,EAAE,UAAU,+BAE9B;AAED,iBAAS,QAAQ,CAAC,KAAK,EAAE,UAAU,+BAElC;AAED,iBAAS,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC,+BAErE;AAED,iBAAS,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,eAAe,GAAG,OAAO,GAAG,OAAO,CAAC,+BAEtF;AAED,iBAAS,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,gBAAgB,GAAG,OAAO,GAAG,OAAO,CAAC,+BAE7F;AAED,iBAAS,OAAO,CACd,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,gBAAgB,GAAG,eAAe,GAAG,OAAO,GAAG,OAAO,CAAC,+BAG9F;AAED,eAAO,MAAM,KAAK;;;;;;;CAOjB,CAAC"}

package/build/jetpack-compose/Shape/index.js

@@ -0,0 +1,29 @@
+import { requireNativeView } from 'expo';
+const ShapeNativeView = requireNativeView('ExpoUI', 'ShapeView');
+function Star(props) {
+    return <ShapeNativeView {...props} style={props.style} type="star"/>;
+}
+function PillStar(props) {
+    return <ShapeNativeView {...props} style={props.style} type="pillStar"/>;
+}
+function Pill(props) {
+    return <ShapeNativeView {...props} style={props.style} type="pill"/>;
+}
+function Circle(props) {
+    return <ShapeNativeView {...props} style={props.style} type="circle"/>;
+}
+function Rectangle(props) {
+    return <ShapeNativeView {...props} style={props.style} type="rectangle"/>;
+}
+function Polygon(props) {
+    return <ShapeNativeView {...props} style={props.style} type="polygon"/>;
+}
+export const Shape = {
+    Star,
+    PillStar,
+    Pill,
+    Circle,
+    Rectangle,
+    Polygon,
+};
+//# sourceMappingURL=index.js.map

package/build/jetpack-compose/Shape/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/jetpack-compose/Shape/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAmCzC,MAAM,eAAe,GAA6B,iBAAiB,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;AAE3F,SAAS,IAAI,CAAC,KAAiB;IAC7B,OAAO,CAAC,eAAe,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,MAAM,EAAG,CAAC;AACxE,CAAC;AAED,SAAS,QAAQ,CAAC,KAAiB;IACjC,OAAO,CAAC,eAAe,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,UAAU,EAAG,CAAC;AAC5E,CAAC;AAED,SAAS,IAAI,CAAC,KAAwD;IACpE,OAAO,CAAC,eAAe,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,MAAM,EAAG,CAAC;AACxE,CAAC;AAED,SAAS,MAAM,CAAC,KAAuE;IACrF,OAAO,CAAC,eAAe,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAG,CAAC;AAC1E,CAAC;AAED,SAAS,SAAS,CAAC,KAA2E;IAC5F,OAAO,CAAC,eAAe,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,WAAW,EAAG,CAAC;AAC7E,CAAC;AAED,SAAS,OAAO,CACd,KAA6F;IAE7F,OAAO,CAAC,eAAe,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,SAAS,EAAG,CAAC;AAC3E,CAAC;AAED,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,IAAI;IACJ,QAAQ;IACR,IAAI;IACJ,MAAM;IACN,SAAS;IACT,OAAO;CACR,CAAC","sourcesContent":["import { requireNativeView } from 'expo';\nimport { ViewStyle } from 'react-native';\n\nexport type ShapeProps = {\n  /**\n   * Corner rounding percentage. Multiplied by the shorter dimension of the view to produce pixel values.\n   * @default 0.0\n   */\n  cornerRounding?: number;\n  /**\n   * Number between `0.0` and `1.0` that determines how much each line between vertices is \"smoothed\".\n   * @default 0.0\n   */\n  smoothing?: number;\n  /**\n   * Number of vertices. For `'POLYGON'` it must be at least `3.0`. For `'STAR'` and `'PILL_STAR'` it is a number of vertices for each of two radii (A 5-pointed star has 10 vertices.)\n   * @default 6.0\n   */\n  verticesCount?: number;\n  /**\n   * Inner radius of star-related shapes (`'STAR'` and `'PILL_STAR'`). Multiplied by the shorter dimension of the view to produce pixel values.\n   * @default 1.0\n   */\n  innerRadius?: number;\n  /**\n   * Radius of the circular shape. Multiplied by the shorter dimension of the view to produce pixel values.\n   * @default 1.0\n   */\n  radius?: number;\n  /** Style of the component */\n  style?: ViewStyle;\n  /** Color of the shape */\n  color?: string;\n};\n\nconst ShapeNativeView: React.ComponentType<any> = requireNativeView('ExpoUI', 'ShapeView');\n\nfunction Star(props: ShapeProps) {\n  return <ShapeNativeView {...props} style={props.style} type=\"star\" />;\n}\n\nfunction PillStar(props: ShapeProps) {\n  return <ShapeNativeView {...props} style={props.style} type=\"pillStar\" />;\n}\n\nfunction Pill(props: Pick<ShapeProps, 'smoothing' | 'style' | 'color'>) {\n  return <ShapeNativeView {...props} style={props.style} type=\"pill\" />;\n}\n\nfunction Circle(props: Pick<ShapeProps, 'radius' | 'verticesCount' | 'style' | 'color'>) {\n  return <ShapeNativeView {...props} style={props.style} type=\"circle\" />;\n}\n\nfunction Rectangle(props: Pick<ShapeProps, 'smoothing' | 'cornerRounding' | 'style' | 'color'>) {\n  return <ShapeNativeView {...props} style={props.style} type=\"rectangle\" />;\n}\n\nfunction Polygon(\n  props: Pick<ShapeProps, 'smoothing' | 'cornerRounding' | 'verticesCount' | 'style' | 'color'>\n) {\n  return <ShapeNativeView {...props} style={props.style} type=\"polygon\" />;\n}\n\nexport const Shape = {\n  Star,\n  PillStar,\n  Pill,\n  Circle,\n  Rectangle,\n  Polygon,\n};\n"]}

package/build/jetpack-compose/index.d.ts

@@ -6,4 +6,5 @@ export * from './Progress';
 export * from './Slider';
 export * from './Switch';
 export * from './TextInput';
+export * from './Shape';
 //# sourceMappingURL=index.d.ts.map

package/build/jetpack-compose/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/jetpack-compose/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/jetpack-compose/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC"}

package/build/jetpack-compose/index.js

@@ -6,4 +6,5 @@ export * from './Progress';
 export * from './Slider';
 export * from './Switch';
 export * from './TextInput';
+export * from './Shape';
 //# sourceMappingURL=index.js.map

package/build/jetpack-compose/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/jetpack-compose/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC","sourcesContent":["export * from './Button';\nexport * from './ContextMenu';\nexport * from './DatePicker';\nexport * from './Picker';\nexport * from './Progress';\nexport * from './Slider';\nexport * from './Switch';\nexport * from './TextInput';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/jetpack-compose/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC","sourcesContent":["export * from './Button';\nexport * from './ContextMenu';\nexport * from './DatePicker';\nexport * from './Picker';\nexport * from './Progress';\nexport * from './Slider';\nexport * from './Switch';\nexport * from './TextInput';\nexport * from './Shape';\n"]}

package/build/swift-ui/Button/index.d.ts

@@ -30,6 +30,7 @@ export type ButtonProps = {
     onPress?: () => void;
     /**
      * A string describing the system image to display in the button.
+     * This is only used if `children` is a string.
      * Uses Material Icons on Android and SF Symbols on iOS.
      */
     systemImage?: string;
@@ -43,9 +44,9 @@ export type ButtonProps = {
      */
     variant?: ButtonVariant;
     /**
-     * The text to display inside the button.
+     * The text or React node to display inside the button.
      */
-    children: string;
+    children: string | React.ReactNode;
     /**
      * Button color.
      */
@@ -60,13 +61,13 @@ export type ButtonProps = {
  */
 export type NativeButtonProps = Omit<ButtonProps, 'role' | 'onPress' | 'children' | 'systemImage'> & {
     buttonRole?: ButtonRole;
-    text: string;
+    text: string | undefined;
     systemImage?: string;
 } & ViewEvent<'onButtonPressed', void>;
 /**
  * @hidden
  */
-export declare function transformButtonProps(props: ButtonProps): NativeButtonProps;
+export declare function transformButtonProps(props: Omit<ButtonProps, 'children'>, text: string | undefined): NativeButtonProps;
 /**
  * `<Button>` component without a host view.
  * You should use this with a `Host` component in ancestor.

package/build/swift-ui/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/swift-ui/Button/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;AAE9D;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,aAAa,GAErB,SAAS,GACT,UAAU,GACV,OAAO,GAEP,mBAAmB,GACnB,YAAY,GAEZ,cAAc,GACd,oBAAoB,GACpB,MAAM,GACN,MAAM,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,WAAW,EACX,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,aAAa,CAChD,GAAG;IACF,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,SAAS,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC;AAQvC;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,WAAW,GAAG,iBAAiB,CAS1E;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,+BAEjD;AAED;;GAEG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG;IAAE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,+BAO3E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/swift-ui/Button/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;AAE9D;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,aAAa,GAErB,SAAS,GACT,UAAU,GACV,OAAO,GAEP,mBAAmB,GACnB,YAAY,GAEZ,cAAc,GACd,oBAAoB,GACpB,MAAM,GACN,MAAM,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;OAEG;IACH,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,WAAW,EACX,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,aAAa,CAChD,GAAG;IACF,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,SAAS,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC;AAQvC;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,EACpC,IAAI,EAAE,MAAM,GAAG,SAAS,GACvB,iBAAiB,CASnB;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,+BAOjD;AAED;;GAEG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG;IAAE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,+BAO3E"}

package/build/swift-ui/Button/index.js

@@ -5,13 +5,13 @@ const ButtonNativeView = requireNativeView('ExpoUI', 'Button');
 /**
  * @hidden
  */
-export function transformButtonProps(props) {
-    const { role, children, onPress, systemImage, ...restProps } = props;
+export function transformButtonProps(props, text) {
+    const { role, onPress, systemImage, ...restProps } = props;
     return {
         ...restProps,
-        text: children ?? '',
-        buttonRole: role,
+        text,
         systemImage,
+        buttonRole: role,
         onButtonPressed: onPress,
     };
 }
@@ -20,7 +20,12 @@ export function transformButtonProps(props) {
  * You should use this with a `Host` component in ancestor.
  */
 export function ButtonPrimitive(props) {
-    return <ButtonNativeView {...transformButtonProps(props)}/>;
+    const { children, ...restProps } = props;
+    const text = typeof children === 'string' ? children : undefined;
+    if (text !== undefined) {
+        return <ButtonNativeView {...transformButtonProps(restProps, text)}/>;
+    }
+    return <ButtonNativeView {...transformButtonProps(restProps, text)}>{children}</ButtonNativeView>;
 }
 /**
  * Displays a native button component.

package/build/swift-ui/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/swift-ui/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAIzC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAoF/B,wFAAwF;AACxF,MAAM,gBAAgB,GAA2C,iBAAiB,CAChF,QAAQ,EACR,QAAQ,CACT,CAAC;AAEF;;GAEG;AACH,MAAM,UAAU,oBAAoB,CAAC,KAAkB;IACrD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACrE,OAAO;QACL,GAAG,SAAS;QACZ,IAAI,EAAE,QAAQ,IAAI,EAAE;QACpB,UAAU,EAAE,IAAI;QAChB,WAAW;QACX,eAAe,EAAE,OAAO;KACzB,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,eAAe,CAAC,KAAkB;IAChD,OAAO,CAAC,gBAAgB,CAAC,IAAI,oBAAoB,CAAC,KAAK,CAAC,CAAC,EAAG,CAAC;AAC/D,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,MAAM,CAAC,KAAqD;IAC1E,MAAM,0BAA0B,GAAG,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC;IACvD,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC,0BAA0B,CAAC,CAC7F;MAAA,CAAC,eAAe,CAAC,IAAI,KAAK,CAAC,EAC7B;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC","sourcesContent":["import { requireNativeView } from 'expo';\nimport { StyleProp, ViewStyle } from 'react-native';\n\nimport { ViewEvent } from '../../types';\nimport { Host } from '../Host';\n\n/**\n * The role of the button.\n * - `default` - The default button role.\n * - `cancel` - A button that cancels the current operation.\n * - `destructive` - A button that deletes data or performs a destructive action.\n */\nexport type ButtonRole = 'default' | 'cancel' | 'destructive';\n\n/**\n * The built-in button styles available on iOS.\n *\n * Common styles:\n * - `default` - The default system button style.\n * - `bordered` - A button with a light fill. On Android, equivalent to `FilledTonalButton`.\n * - `borderless` - A button with no background or border. On Android, equivalent to `TextButton`.\n * - `borderedProminent` - A bordered button with a prominent appearance.\n * - `plain` - A button with no border or background and a less prominent text.\n * macOS-only styles:\n * - `accessoryBar` - A button style for accessory bars.\n * - `accessoryBarAction` - A button style for accessory bar actions.\n * - `card` - A button style for cards.\n * - `link` - A button style for links.\n */\nexport type ButtonVariant =\n  // Common\n  | 'default'\n  | 'bordered'\n  | 'plain'\n  // Apple-only\n  | 'borderedProminent'\n  | 'borderless'\n  // MacOS-only;\n  | 'accessoryBar'\n  | 'accessoryBarAction'\n  | 'card'\n  | 'link';\n\nexport type ButtonProps = {\n  /**\n   * A callback that is called when the button is pressed.\n   */\n  onPress?: () => void;\n  /**\n   * A string describing the system image to display in the button.\n   * Uses Material Icons on Android and SF Symbols on iOS.\n   */\n  systemImage?: string;\n  /**\n   * Indicated the role of the button.\n   * @platform ios\n   */\n  role?: ButtonRole;\n  /**\n   * The button variant.\n   */\n  variant?: ButtonVariant;\n  /**\n   * The text to display inside the button.\n   */\n  children: string;\n  /**\n   * Button color.\n   */\n  color?: string;\n  /**\n   * Disabled state of the button.\n   */\n  disabled?: boolean;\n};\n\n/**\n * @hidden\n */\nexport type NativeButtonProps = Omit<\n  ButtonProps,\n  'role' | 'onPress' | 'children' | 'systemImage'\n> & {\n  buttonRole?: ButtonRole;\n  text: string;\n  systemImage?: string;\n} & ViewEvent<'onButtonPressed', void>;\n\n// We have to work around the `role` and `onPress` props being reserved by React Native.\nconst ButtonNativeView: React.ComponentType<NativeButtonProps> = requireNativeView(\n  'ExpoUI',\n  'Button'\n);\n\n/**\n * @hidden\n */\nexport function transformButtonProps(props: ButtonProps): NativeButtonProps {\n  const { role, children, onPress, systemImage, ...restProps } = props;\n  return {\n    ...restProps,\n    text: children ?? '',\n    buttonRole: role,\n    systemImage,\n    onButtonPressed: onPress,\n  };\n}\n\n/**\n * `<Button>` component without a host view.\n * You should use this with a `Host` component in ancestor.\n */\nexport function ButtonPrimitive(props: ButtonProps) {\n  return <ButtonNativeView {...transformButtonProps(props)} />;\n}\n\n/**\n * Displays a native button component.\n */\nexport function Button(props: ButtonProps & { style?: StyleProp<ViewStyle> }) {\n  const useViewportSizeMeasurement = props.style == null;\n  return (\n    <Host style={props.style} matchContents useViewportSizeMeasurement={useViewportSizeMeasurement}>\n      <ButtonPrimitive {...props} />\n    </Host>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/swift-ui/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAIzC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAqF/B,wFAAwF;AACxF,MAAM,gBAAgB,GAA2C,iBAAiB,CAChF,QAAQ,EACR,QAAQ,CACT,CAAC;AAEF;;GAEG;AACH,MAAM,UAAU,oBAAoB,CAClC,KAAoC,EACpC,IAAwB;IAExB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC3D,OAAO;QACL,GAAG,SAAS;QACZ,IAAI;QACJ,WAAW;QACX,UAAU,EAAE,IAAI;QAChB,eAAe,EAAE,OAAO;KACzB,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,eAAe,CAAC,KAAkB;IAChD,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACzC,MAAM,IAAI,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IACjE,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QACvB,OAAO,CAAC,gBAAgB,CAAC,IAAI,oBAAoB,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,EAAG,CAAC;IACzE,CAAC;IACD,OAAO,CAAC,gBAAgB,CAAC,IAAI,oBAAoB,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,CAAC;AACpG,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,MAAM,CAAC,KAAqD;IAC1E,MAAM,0BAA0B,GAAG,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC;IACvD,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC,0BAA0B,CAAC,CAC7F;MAAA,CAAC,eAAe,CAAC,IAAI,KAAK,CAAC,EAC7B;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC","sourcesContent":["import { requireNativeView } from 'expo';\nimport { StyleProp, ViewStyle } from 'react-native';\n\nimport { ViewEvent } from '../../types';\nimport { Host } from '../Host';\n\n/**\n * The role of the button.\n * - `default` - The default button role.\n * - `cancel` - A button that cancels the current operation.\n * - `destructive` - A button that deletes data or performs a destructive action.\n */\nexport type ButtonRole = 'default' | 'cancel' | 'destructive';\n\n/**\n * The built-in button styles available on iOS.\n *\n * Common styles:\n * - `default` - The default system button style.\n * - `bordered` - A button with a light fill. On Android, equivalent to `FilledTonalButton`.\n * - `borderless` - A button with no background or border. On Android, equivalent to `TextButton`.\n * - `borderedProminent` - A bordered button with a prominent appearance.\n * - `plain` - A button with no border or background and a less prominent text.\n * macOS-only styles:\n * - `accessoryBar` - A button style for accessory bars.\n * - `accessoryBarAction` - A button style for accessory bar actions.\n * - `card` - A button style for cards.\n * - `link` - A button style for links.\n */\nexport type ButtonVariant =\n  // Common\n  | 'default'\n  | 'bordered'\n  | 'plain'\n  // Apple-only\n  | 'borderedProminent'\n  | 'borderless'\n  // MacOS-only;\n  | 'accessoryBar'\n  | 'accessoryBarAction'\n  | 'card'\n  | 'link';\n\nexport type ButtonProps = {\n  /**\n   * A callback that is called when the button is pressed.\n   */\n  onPress?: () => void;\n  /**\n   * A string describing the system image to display in the button.\n   * This is only used if `children` is a string.\n   * Uses Material Icons on Android and SF Symbols on iOS.\n   */\n  systemImage?: string;\n  /**\n   * Indicated the role of the button.\n   * @platform ios\n   */\n  role?: ButtonRole;\n  /**\n   * The button variant.\n   */\n  variant?: ButtonVariant;\n  /**\n   * The text or React node to display inside the button.\n   */\n  children: string | React.ReactNode;\n  /**\n   * Button color.\n   */\n  color?: string;\n  /**\n   * Disabled state of the button.\n   */\n  disabled?: boolean;\n};\n\n/**\n * @hidden\n */\nexport type NativeButtonProps = Omit<\n  ButtonProps,\n  'role' | 'onPress' | 'children' | 'systemImage'\n> & {\n  buttonRole?: ButtonRole;\n  text: string | undefined;\n  systemImage?: string;\n} & ViewEvent<'onButtonPressed', void>;\n\n// We have to work around the `role` and `onPress` props being reserved by React Native.\nconst ButtonNativeView: React.ComponentType<NativeButtonProps> = requireNativeView(\n  'ExpoUI',\n  'Button'\n);\n\n/**\n * @hidden\n */\nexport function transformButtonProps(\n  props: Omit<ButtonProps, 'children'>,\n  text: string | undefined\n): NativeButtonProps {\n  const { role, onPress, systemImage, ...restProps } = props;\n  return {\n    ...restProps,\n    text,\n    systemImage,\n    buttonRole: role,\n    onButtonPressed: onPress,\n  };\n}\n\n/**\n * `<Button>` component without a host view.\n * You should use this with a `Host` component in ancestor.\n */\nexport function ButtonPrimitive(props: ButtonProps) {\n  const { children, ...restProps } = props;\n  const text = typeof children === 'string' ? children : undefined;\n  if (text !== undefined) {\n    return <ButtonNativeView {...transformButtonProps(restProps, text)} />;\n  }\n  return <ButtonNativeView {...transformButtonProps(restProps, text)}>{children}</ButtonNativeView>;\n}\n\n/**\n * Displays a native button component.\n */\nexport function Button(props: ButtonProps & { style?: StyleProp<ViewStyle> }) {\n  const useViewportSizeMeasurement = props.style == null;\n  return (\n    <Host style={props.style} matchContents useViewportSizeMeasurement={useViewportSizeMeasurement}>\n      <ButtonPrimitive {...props} />\n    </Host>\n  );\n}\n"]}

package/build/swift-ui/ContextMenu/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/swift-ui/ContextMenu/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0C,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1E,OAAO,EAAE,sBAAsB,EAAE,aAAa,EAAyB,MAAM,SAAS,CAAC;AACvF,OAAO,EAAuB,iBAAiB,EAAwB,MAAM,WAAW,CAAC;AACzF,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAGhD,KAAK,iBAAiB,GAAG;IACvB,MAAM,EAAE,iBAAiB,CAAC;CAC3B,GAAG,sBAAsB,CAAC;AAE3B,KAAK,iBAAiB,GAAG;IACvB,MAAM,EAAE,WAAW,CAAC;CACrB,GAAG,sBAAsB,CAAC;AAE3B,KAAK,iBAAiB,GAAG;IACvB,MAAM,EAAE,WAAW,CAAC;CACrB,GAAG,sBAAsB,CAAC;AAE3B,KAAK,cAAc,GAAG;IACpB,OAAO,EAAE;QACP,QAAQ,EAAE,WAAW,EAAE,CAAC;QACxB,MAAM,EAAE,iBAAiB,CAAC;KAC3B,CAAC;CACH,GAAG,sBAAsB,CAAC;AAE3B,MAAM,MAAM,WAAW,GACnB,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,cAAc,CAAC;AAInB,wBAAgB,+BAA+B,CAC7C,QAAQ,EAAE,SAAS,EACnB,gBAAgB,EAAE,aAAa,GAC9B,WAAW,EAAE,CAIf"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/swift-ui/ContextMenu/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0C,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1E,OAAO,EAAE,sBAAsB,EAAE,aAAa,EAAyB,MAAM,SAAS,CAAC;AACvF,OAAO,EAIL,iBAAiB,EAElB,MAAM,WAAW,CAAC;AACnB,OAAO,EAA2B,WAAW,EAAE,MAAM,WAAW,CAAC;AACjE,OAAO,EAA2B,WAAW,EAAE,MAAM,WAAW,CAAC;AAGjE,KAAK,iBAAiB,GAAG;IACvB,MAAM,EAAE,iBAAiB,CAAC;CAC3B,GAAG,sBAAsB,CAAC;AAE3B,KAAK,iBAAiB,GAAG;IACvB,MAAM,EAAE,WAAW,CAAC;CACrB,GAAG,sBAAsB,CAAC;AAE3B,KAAK,iBAAiB,GAAG;IACvB,MAAM,EAAE,WAAW,CAAC;CACrB,GAAG,sBAAsB,CAAC;AAE3B,KAAK,cAAc,GAAG;IACpB,OAAO,EAAE;QACP,QAAQ,EAAE,WAAW,EAAE,CAAC;QACxB,MAAM,EAAE,iBAAiB,CAAC;KAC3B,CAAC;CACH,GAAG,sBAAsB,CAAC;AAE3B,MAAM,MAAM,WAAW,GACnB,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,cAAc,CAAC;AAInB,wBAAgB,+BAA+B,CAC7C,QAAQ,EAAE,SAAS,EACnB,gBAAgB,EAAE,aAAa,GAC9B,WAAW,EAAE,CAIf"}

package/build/swift-ui/ContextMenu/utils.js

@@ -1,8 +1,8 @@
 import { Children, isValidElement } from 'react';
 import { Submenu } from './index';
-import { Button, transformButtonProps } from '../Button';
-import { Picker } from '../Picker';
-import { Switch } from '../Switch';
+import { Button, ButtonPrimitive, transformButtonProps, } from '../Button';
+import { Picker, PickerPrimitive } from '../Picker';
+import { Switch, SwitchPrimitive } from '../Switch';
 // Maps the react children to NativeMenuElement[] which is used to render out the native menu
 // TODO: Ideally we want to pass the children directly to the native side without having to do this
 export function transformChildrenToElementArray(children, eventHandlersMap) {
@@ -14,15 +14,15 @@ function processChildElement(child, eventHandlersMap) {
     if (!isValidElement(child))
         return null;
     const uuid = expo.uuidv4();
-    if (child.type === Button) {
+    if (child.type === Button || child.type === ButtonPrimitive) {
         // @ts-expect-error TODO TS2345: Argument of type unknown is not assignable to parameter of type SubmenuProps
         return createButtonElement(uuid, child.props, eventHandlersMap);
     }
-    if (child.type === Switch) {
+    if (child.type === Switch || child.type === SwitchPrimitive) {
         // @ts-expect-error TODO TS2345: Argument of type unknown is not assignable to parameter of type SubmenuProps
         return createSwitchElement(uuid, child.props, eventHandlersMap);
     }
-    if (child.type === Picker) {
+    if (child.type === Picker || child.type === PickerPrimitive) {
         // @ts-expect-error TODO TS2345: Argument of type unknown is not assignable to parameter of type SubmenuProps
         return createPickerElement(uuid, child.props, eventHandlersMap);
     }
@@ -37,9 +37,12 @@ function createButtonElement(uuid, props, handlers) {
     if (props.onPress) {
         handlers[uuid] = { onPress: props.onPress };
     }
+    if (typeof props.children !== 'string') {
+        throw new Error('ContextMenu Button only supports string children');
+    }
     return {
         contextMenuElementID: uuid,
-        button: transformButtonProps(props),
+        button: transformButtonProps(props, props.children),
     };
 }
 function createSwitchElement(uuid, props, handlers) {
@@ -65,10 +68,13 @@ function createPickerElement(uuid, props, handlers) {
     };
 }
 function createSubmenuElement(uuid, props, handlers) {
+    if (typeof props.button.props.children !== 'string') {
+        throw new Error('ContextMenu Submenu Button only supports string children');
+    }
     return {
         contextMenuElementID: uuid,
         submenu: {
-            button: transformButtonProps(props.button.props),
+            button: transformButtonProps(props.button.props, props.button.props.children),
             elements: transformChildrenToElementArray(props.children, handlers),
         },
     };

package/build/swift-ui/ContextMenu/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/swift-ui/ContextMenu/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { Children, isValidElement, ReactElement, ReactNode } from 'react';\nimport { NativeSyntheticEvent } from 'react-native';\n\nimport { ContextMenuElementBase, EventHandlers, Submenu, SubmenuProps } from './index';\nimport { Button, ButtonProps, NativeButtonProps, transformButtonProps } from '../Button';\nimport { Picker, PickerProps } from '../Picker';\nimport { Switch, SwitchProps } from '../Switch';\n\n// We use this slightly odd typing for the elements to make unpacking the elements easier on the native side\ntype ButtonMenuElement = {\n  button: NativeButtonProps;\n} & ContextMenuElementBase;\n\ntype SwitchMenuElement = {\n  switch: SwitchProps;\n} & ContextMenuElementBase;\n\ntype PickerMenuElement = {\n  picker: PickerProps;\n} & ContextMenuElementBase;\n\ntype SubmenuElement = {\n  submenu: {\n    elements: MenuElement[];\n    button: NativeButtonProps;\n  };\n} & ContextMenuElementBase;\n\nexport type MenuElement =\n  | ButtonMenuElement\n  | SwitchMenuElement\n  | PickerMenuElement\n  | SubmenuElement;\n\n// Maps the react children to NativeMenuElement[] which is used to render out the native menu\n// TODO: Ideally we want to pass the children directly to the native side without having to do this\nexport function transformChildrenToElementArray(\n  children: ReactNode,\n  eventHandlersMap: EventHandlers\n): MenuElement[] {\n  return Children.toArray(children)\n    .map((child) => processChildElement(child, eventHandlersMap))\n    .filter((el): el is MenuElement => el !== null);\n}\n\nfunction processChildElement(\n  child: ReactNode,\n  eventHandlersMap: EventHandlers\n): MenuElement | null {\n  if (!isValidElement(child)) return null;\n\n  const uuid = expo.uuidv4();\n\n  if (child.type === Button) {\n    // @ts-expect-error TODO TS2345: Argument of type unknown is not assignable to parameter of type SubmenuProps\n    return createButtonElement(uuid, child.props, eventHandlersMap);\n  }\n\n  if (child.type === Switch) {\n    // @ts-expect-error TODO TS2345: Argument of type unknown is not assignable to parameter of type SubmenuProps\n    return createSwitchElement(uuid, child.props, eventHandlersMap);\n  }\n\n  if (child.type === Picker) {\n    // @ts-expect-error TODO TS2345: Argument of type unknown is not assignable to parameter of type SubmenuProps\n    return createPickerElement(uuid, child.props, eventHandlersMap);\n  }\n\n  if (isSubmenuComponent(child)) {\n    // @ts-expect-error TODO TS2345: Argument of type unknown is not assignable to parameter of type SubmenuProps\n    return createSubmenuElement(uuid, child.props, eventHandlersMap);\n  }\n\n  console.warn('Unsupported child type in Menu: ', child.type);\n  return null;\n}\n\nfunction createButtonElement(\n  uuid: string,\n  props: ButtonProps,\n  handlers: EventHandlers\n): MenuElement {\n  if (props.onPress) {\n    handlers[uuid] = { onPress: props.onPress };\n  }\n\n  return {\n    contextMenuElementID: uuid,\n    button: transformButtonProps(props),\n  };\n}\n\nfunction createSwitchElement(\n  uuid: string,\n  props: SwitchProps,\n  handlers: EventHandlers\n): MenuElement {\n  if (props.onValueChange) {\n    handlers[uuid] = {\n      onValueChange: ({ nativeEvent: { value } }: NativeSyntheticEvent<{ value: boolean }>) => {\n        props.onValueChange?.(value);\n      },\n    };\n  }\n\n  return {\n    contextMenuElementID: uuid,\n    switch: props,\n  };\n}\n\nfunction createPickerElement(\n  uuid: string,\n  props: PickerProps,\n  handlers: EventHandlers\n): MenuElement {\n  if (props.onOptionSelected) {\n    handlers[uuid] = { onOptionSelected: props.onOptionSelected };\n  }\n\n  return {\n    contextMenuElementID: uuid,\n    picker: props,\n  };\n}\n\nfunction createSubmenuElement(\n  uuid: string,\n  props: SubmenuProps,\n  handlers: EventHandlers\n): MenuElement {\n  return {\n    contextMenuElementID: uuid,\n    submenu: {\n      button: transformButtonProps(props.button.props),\n      elements: transformChildrenToElementArray(props.children, handlers),\n    },\n  };\n}\n\nfunction isSubmenuComponent(child: ReactElement): boolean {\n  return child.type.toString() === Submenu.toString();\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/swift-ui/ContextMenu/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { Children, isValidElement, ReactElement, ReactNode } from 'react';\nimport { NativeSyntheticEvent } from 'react-native';\n\nimport { ContextMenuElementBase, EventHandlers, Submenu, SubmenuProps } from './index';\nimport {\n  Button,\n  ButtonPrimitive,\n  ButtonProps,\n  NativeButtonProps,\n  transformButtonProps,\n} from '../Button';\nimport { Picker, PickerPrimitive, PickerProps } from '../Picker';\nimport { Switch, SwitchPrimitive, SwitchProps } from '../Switch';\n\n// We use this slightly odd typing for the elements to make unpacking the elements easier on the native side\ntype ButtonMenuElement = {\n  button: NativeButtonProps;\n} & ContextMenuElementBase;\n\ntype SwitchMenuElement = {\n  switch: SwitchProps;\n} & ContextMenuElementBase;\n\ntype PickerMenuElement = {\n  picker: PickerProps;\n} & ContextMenuElementBase;\n\ntype SubmenuElement = {\n  submenu: {\n    elements: MenuElement[];\n    button: NativeButtonProps;\n  };\n} & ContextMenuElementBase;\n\nexport type MenuElement =\n  | ButtonMenuElement\n  | SwitchMenuElement\n  | PickerMenuElement\n  | SubmenuElement;\n\n// Maps the react children to NativeMenuElement[] which is used to render out the native menu\n// TODO: Ideally we want to pass the children directly to the native side without having to do this\nexport function transformChildrenToElementArray(\n  children: ReactNode,\n  eventHandlersMap: EventHandlers\n): MenuElement[] {\n  return Children.toArray(children)\n    .map((child) => processChildElement(child, eventHandlersMap))\n    .filter((el): el is MenuElement => el !== null);\n}\n\nfunction processChildElement(\n  child: ReactNode,\n  eventHandlersMap: EventHandlers\n): MenuElement | null {\n  if (!isValidElement(child)) return null;\n\n  const uuid = expo.uuidv4();\n\n  if (child.type === Button || child.type === ButtonPrimitive) {\n    // @ts-expect-error TODO TS2345: Argument of type unknown is not assignable to parameter of type SubmenuProps\n    return createButtonElement(uuid, child.props, eventHandlersMap);\n  }\n\n  if (child.type === Switch || child.type === SwitchPrimitive) {\n    // @ts-expect-error TODO TS2345: Argument of type unknown is not assignable to parameter of type SubmenuProps\n    return createSwitchElement(uuid, child.props, eventHandlersMap);\n  }\n\n  if (child.type === Picker || child.type === PickerPrimitive) {\n    // @ts-expect-error TODO TS2345: Argument of type unknown is not assignable to parameter of type SubmenuProps\n    return createPickerElement(uuid, child.props, eventHandlersMap);\n  }\n\n  if (isSubmenuComponent(child)) {\n    // @ts-expect-error TODO TS2345: Argument of type unknown is not assignable to parameter of type SubmenuProps\n    return createSubmenuElement(uuid, child.props, eventHandlersMap);\n  }\n\n  console.warn('Unsupported child type in Menu: ', child.type);\n  return null;\n}\n\nfunction createButtonElement(\n  uuid: string,\n  props: ButtonProps,\n  handlers: EventHandlers\n): MenuElement {\n  if (props.onPress) {\n    handlers[uuid] = { onPress: props.onPress };\n  }\n  if (typeof props.children !== 'string') {\n    throw new Error('ContextMenu Button only supports string children');\n  }\n  return {\n    contextMenuElementID: uuid,\n    button: transformButtonProps(props, props.children),\n  };\n}\n\nfunction createSwitchElement(\n  uuid: string,\n  props: SwitchProps,\n  handlers: EventHandlers\n): MenuElement {\n  if (props.onValueChange) {\n    handlers[uuid] = {\n      onValueChange: ({ nativeEvent: { value } }: NativeSyntheticEvent<{ value: boolean }>) => {\n        props.onValueChange?.(value);\n      },\n    };\n  }\n\n  return {\n    contextMenuElementID: uuid,\n    switch: props,\n  };\n}\n\nfunction createPickerElement(\n  uuid: string,\n  props: PickerProps,\n  handlers: EventHandlers\n): MenuElement {\n  if (props.onOptionSelected) {\n    handlers[uuid] = { onOptionSelected: props.onOptionSelected };\n  }\n\n  return {\n    contextMenuElementID: uuid,\n    picker: props,\n  };\n}\n\nfunction createSubmenuElement(\n  uuid: string,\n  props: SubmenuProps,\n  handlers: EventHandlers\n): MenuElement {\n  if (typeof props.button.props.children !== 'string') {\n    throw new Error('ContextMenu Submenu Button only supports string children');\n  }\n  return {\n    contextMenuElementID: uuid,\n    submenu: {\n      button: transformButtonProps(props.button.props, props.button.props.children),\n      elements: transformChildrenToElementArray(props.children, handlers),\n    },\n  };\n}\n\nfunction isSubmenuComponent(child: ReactElement): boolean {\n  return child.type.toString() === Submenu.toString();\n}\n"]}

package/build/swift-ui/Host/index.d.ts

@@ -1,10 +1,13 @@
-import { StyleProp, ViewStyle } from 'react-native';
+import { StyleProp, ViewStyle, type ColorSchemeName } from 'react-native';
 export type HostProps = {
     /**
      * When true, the host view will update its size in the React Native view tree to match the content's layout from SwiftUI.
      * @default false
      */
-    matchContents?: boolean;
+    matchContents?: boolean | {
+        vertical?: boolean;
+        horizontal?: boolean;
+    };
     /**
      * When true and no explicit size is provided, the host will use the viewport size as the proposed size for SwiftUI layout.
      * This is particularly useful for SwiftUI views that need to fill their available space, such as `Form`.
@@ -21,6 +24,10 @@ export type HostProps = {
             height: number;
         };
     }) => void;
+    /**
+     * The color scheme of the host view.
+     */
+    colorScheme?: ColorSchemeName;
     children: React.ReactNode;
     style?: StyleProp<ViewStyle>;
 };

package/build/swift-ui/Host/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/swift-ui/Host/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,MAAM,SAAS,GAAG;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,0BAA0B,CAAC,EAAE,OAAO,CAAC;IAErC;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAEtF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAIF;;GAEG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,+BAoBpC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/swift-ui/Host/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAE1E,MAAM,MAAM,SAAS,GAAG;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;QAAC,UAAU,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAEvE;;;;OAIG;IACH,0BAA0B,CAAC,EAAE,OAAO,CAAC;IAErC;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAEtF;;OAEG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC;IAE9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAIF;;GAEG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,+BA0BpC"}

package/build/swift-ui/Host/index.js

@@ -5,16 +5,22 @@ const HostNativeView = requireNativeView('ExpoUI', 'HostView');
  * A hosting component for SwiftUI views.
  */
 export function Host(props) {
-    const { matchContents, useViewportSizeMeasurement, onLayoutContent, style, ...restProps } = props;
+    const { matchContents, onLayoutContent, style, ...restProps } = props;
     const [containerStyle, setContainerStyle] = useState(null);
-    return (<HostNativeView onLayoutContent={(e) => {
+    return (<HostNativeView style={[style, containerStyle]} onLayoutContent={(e) => {
             onLayoutContent?.(e);
             if (matchContents) {
-                setContainerStyle({
-                    width: e.nativeEvent.width,
-                    height: e.nativeEvent.height,
-                });
+                const matchVertical = typeof matchContents === 'object' ? matchContents.vertical : matchContents;
+                const matchHorizontal = typeof matchContents === 'object' ? matchContents.horizontal : matchContents;
+                const newContainerStyle = {};
+                if (matchVertical) {
+                    newContainerStyle.height = e.nativeEvent.height;
+                }
+                if (matchHorizontal) {
+                    newContainerStyle.width = e.nativeEvent.width;
+                }
+                setContainerStyle(newContainerStyle);
             }
-        }} style={[style, containerStyle]} matchContents={matchContents} useViewportSizeMeasurement={useViewportSizeMeasurement} {...restProps}/>);
+        }} {...restProps}/>);
 }
 //# sourceMappingURL=index.js.map

package/build/swift-ui/Host/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/swift-ui/Host/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AA2BjC,MAAM,cAAc,GAAmC,iBAAiB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAE/F;;GAEG;AACH,MAAM,UAAU,IAAI,CAAC,KAAgB;IACnC,MAAM,EAAE,aAAa,EAAE,0BAA0B,EAAE,eAAe,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAClG,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAmB,IAAI,CAAC,CAAC;IAC7E,OAAO,CACL,CAAC,cAAc,CACb,eAAe,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;YACrB,eAAe,EAAE,CAAC,CAAC,CAAC,CAAC;YACrB,IAAI,aAAa,EAAE,CAAC;gBAClB,iBAAiB,CAAC;oBAChB,KAAK,EAAE,CAAC,CAAC,WAAW,CAAC,KAAK;oBAC1B,MAAM,EAAE,CAAC,CAAC,WAAW,CAAC,MAAM;iBAC7B,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC,CACF,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAC/B,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,0BAA0B,CAAC,CAAC,0BAA0B,CAAC,CACvD,IAAI,SAAS,CAAC,EACd,CACH,CAAC;AACJ,CAAC","sourcesContent":["import { requireNativeView } from 'expo';\nimport { useState } from 'react';\nimport { StyleProp, ViewStyle } from 'react-native';\n\nexport type HostProps = {\n  /**\n   * When true, the host view will update its size in the React Native view tree to match the content's layout from SwiftUI.\n   * @default false\n   */\n  matchContents?: boolean;\n\n  /**\n   * When true and no explicit size is provided, the host will use the viewport size as the proposed size for SwiftUI layout.\n   * This is particularly useful for SwiftUI views that need to fill their available space, such as `Form`.\n   * @default false\n   */\n  useViewportSizeMeasurement?: boolean;\n\n  /**\n   * Callback function that is triggered when the SwiftUI content completes its layout.\n   * Provides the current dimensions of the content, which may change as the content updates.\n   */\n  onLayoutContent?: (event: { nativeEvent: { width: number; height: number } }) => void;\n\n  children: React.ReactNode;\n  style?: StyleProp<ViewStyle>;\n};\n\nconst HostNativeView: React.ComponentType<HostProps> = requireNativeView('ExpoUI', 'HostView');\n\n/**\n * A hosting component for SwiftUI views.\n */\nexport function Host(props: HostProps) {\n  const { matchContents, useViewportSizeMeasurement, onLayoutContent, style, ...restProps } = props;\n  const [containerStyle, setContainerStyle] = useState<ViewStyle | null>(null);\n  return (\n    <HostNativeView\n      onLayoutContent={(e) => {\n        onLayoutContent?.(e);\n        if (matchContents) {\n          setContainerStyle({\n            width: e.nativeEvent.width,\n            height: e.nativeEvent.height,\n          });\n        }\n      }}\n      style={[style, containerStyle]}\n      matchContents={matchContents}\n      useViewportSizeMeasurement={useViewportSizeMeasurement}\n      {...restProps}\n    />\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/swift-ui/Host/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAgCjC,MAAM,cAAc,GAAmC,iBAAiB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAE/F;;GAEG;AACH,MAAM,UAAU,IAAI,CAAC,KAAgB;IACnC,MAAM,EAAE,aAAa,EAAE,eAAe,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACtE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAmB,IAAI,CAAC,CAAC;IAC7E,OAAO,CACL,CAAC,cAAc,CACb,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAC/B,eAAe,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;YACrB,eAAe,EAAE,CAAC,CAAC,CAAC,CAAC;YACrB,IAAI,aAAa,EAAE,CAAC;gBAClB,MAAM,aAAa,GACjB,OAAO,aAAa,KAAK,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC;gBAC7E,MAAM,eAAe,GACnB,OAAO,aAAa,KAAK,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC;gBAC/E,MAAM,iBAAiB,GAAc,EAAE,CAAC;gBACxC,IAAI,aAAa,EAAE,CAAC;oBAClB,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC;gBAClD,CAAC;gBACD,IAAI,eAAe,EAAE,CAAC;oBACpB,iBAAiB,CAAC,KAAK,GAAG,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC;gBAChD,CAAC;gBACD,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;YACvC,CAAC;QACH,CAAC,CAAC,CACF,IAAI,SAAS,CAAC,EACd,CACH,CAAC;AACJ,CAAC","sourcesContent":["import { requireNativeView } from 'expo';\nimport { useState } from 'react';\nimport { StyleProp, ViewStyle, type ColorSchemeName } from 'react-native';\n\nexport type HostProps = {\n  /**\n   * When true, the host view will update its size in the React Native view tree to match the content's layout from SwiftUI.\n   * @default false\n   */\n  matchContents?: boolean | { vertical?: boolean; horizontal?: boolean };\n\n  /**\n   * When true and no explicit size is provided, the host will use the viewport size as the proposed size for SwiftUI layout.\n   * This is particularly useful for SwiftUI views that need to fill their available space, such as `Form`.\n   * @default false\n   */\n  useViewportSizeMeasurement?: boolean;\n\n  /**\n   * Callback function that is triggered when the SwiftUI content completes its layout.\n   * Provides the current dimensions of the content, which may change as the content updates.\n   */\n  onLayoutContent?: (event: { nativeEvent: { width: number; height: number } }) => void;\n\n  /**\n   * The color scheme of the host view.\n   */\n  colorScheme?: ColorSchemeName;\n\n  children: React.ReactNode;\n  style?: StyleProp<ViewStyle>;\n};\n\nconst HostNativeView: React.ComponentType<HostProps> = requireNativeView('ExpoUI', 'HostView');\n\n/**\n * A hosting component for SwiftUI views.\n */\nexport function Host(props: HostProps) {\n  const { matchContents, onLayoutContent, style, ...restProps } = props;\n  const [containerStyle, setContainerStyle] = useState<ViewStyle | null>(null);\n  return (\n    <HostNativeView\n      style={[style, containerStyle]}\n      onLayoutContent={(e) => {\n        onLayoutContent?.(e);\n        if (matchContents) {\n          const matchVertical =\n            typeof matchContents === 'object' ? matchContents.vertical : matchContents;\n          const matchHorizontal =\n            typeof matchContents === 'object' ? matchContents.horizontal : matchContents;\n          const newContainerStyle: ViewStyle = {};\n          if (matchVertical) {\n            newContainerStyle.height = e.nativeEvent.height;\n          }\n          if (matchHorizontal) {\n            newContainerStyle.width = e.nativeEvent.width;\n          }\n          setContainerStyle(newContainerStyle);\n        }\n      }}\n      {...restProps}\n    />\n  );\n}\n"]}

package/build/swift-ui-primitives/DisclosureGroup.d.ts

@@ -0,0 +1,7 @@
+import { type CommonViewModifierProps } from './types';
+export interface DisclosureGroupProps extends CommonViewModifierProps {
+    label: string;
+    children: React.ReactNode;
+}
+export declare function DisclosureGroup(props: DisclosureGroupProps): import("react").JSX.Element;
+//# sourceMappingURL=DisclosureGroup.d.ts.map