@expo/ui 55.0.0-preview.6 → 55.0.0

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

@@ -12,6 +12,8 @@ import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.asComposePath
 import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.LayoutDirection
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.ui.unit.dp
 import androidx.graphics.shapes.CornerRounding
 import androidx.graphics.shapes.RoundedPolygon
 import androidx.graphics.shapes.circle
@@ -33,15 +35,24 @@ enum class ShapeType(val value: String) : Enumerable {
   PILL("pill"),
   CIRCLE("circle"),
   RECTANGLE("rectangle"),
-  POLYGON("polygon")
+  POLYGON("polygon"),
+  ROUNDED_CORNER("roundedCorner")
 }
 
+data class CornerRadii(
+  @Field val topStart: Float = 0f,
+  @Field val topEnd: Float = 0f,
+  @Field val bottomStart: Float = 0f,
+  @Field val bottomEnd: Float = 0f
+) : Record
+
 data class ShapeProps(
   val cornerRounding: Float = 0.0f,
   val smoothing: Float = 0.0f,
   val verticesCount: Int = 6,
   val innerRadius: Float = 0.0f,
   val radius: Float = 0.0f,
+  val cornerRadii: CornerRadii? = null,
   val type: ShapeType = ShapeType.CIRCLE,
   val color: GraphicsColor? = null,
   val modifiers: ModifierList = emptyList()
@@ -116,6 +127,21 @@ private fun createRectanglePath(size: Size, cornerRounding: Float, smoothing: Fl
   ).toPath().asComposePath()
 }
 
+private fun createRoundedCornerPath(size: Size, cornerRadii: CornerRadii?, density: Density): Path {
+  val radii = cornerRadii ?: CornerRadii()
+  val shape = RoundedCornerShape(
+    topStart = radii.topStart.dp,
+    topEnd = radii.topEnd.dp,
+    bottomStart = radii.bottomStart.dp,
+    bottomEnd = radii.bottomEnd.dp
+  )
+  return when (val outline = shape.createOutline(size, LayoutDirection.Ltr, density)) {
+    is Outline.Rectangle -> Path().apply { addRect(outline.rect) }
+    is Outline.Rounded -> Path().apply { addRoundRect(outline.roundRect) }
+    is Outline.Generic -> outline.path
+  }
+}
+
 data class ShapeRecord(
   @Field
   val cornerRounding: Float = 0.0f,
@@ -128,10 +154,12 @@ data class ShapeRecord(
   @Field
   val radius: Float = 0.0f,
   @Field
+  val cornerRadii: CornerRadii? = null,
+  @Field
   val type: ShapeType = ShapeType.CIRCLE
 ) : Record
 
-fun pathFromShapeRecord(record: ShapeRecord, size: Size): Path {
+fun pathFromShapeRecord(record: ShapeRecord, size: Size, density: Density): Path {
   return runCatching {
     when (record.type) {
       ShapeType.STAR -> createStarPath(size = size, cornerRounding = record.cornerRounding, smoothing = record.smoothing, innerRadius = record.innerRadius, radius = record.radius, verticesCount = record.verticesCount)
@@ -140,6 +168,7 @@ fun pathFromShapeRecord(record: ShapeRecord, size: Size): Path {
       ShapeType.CIRCLE -> createCirclePath(size = size, radius = record.radius, verticesCount = record.verticesCount)
       ShapeType.RECTANGLE -> createRectanglePath(size = size, cornerRounding = record.cornerRounding, smoothing = record.smoothing)
       ShapeType.POLYGON -> createPolygonPath(size = size, cornerRounding = record.cornerRounding, smoothing = record.smoothing, verticesCount = record.verticesCount)
+      ShapeType.ROUNDED_CORNER -> createRoundedCornerPath(size = size, cornerRadii = record.cornerRadii, density = density)
     }
   }.getOrNull() ?: Path()
 }
@@ -148,7 +177,7 @@ fun shapeFromShapeRecord(shapeRecord: ShapeRecord?): Shape? {
   if (shapeRecord == null) return null
   return object : Shape {
     override fun createOutline(size: Size, layoutDirection: LayoutDirection, density: Density): Outline {
-      val path = pathFromShapeRecord(shapeRecord, size)
+      val path = pathFromShapeRecord(shapeRecord, size, density)
       return Outline.Generic(path)
     }
   }
@@ -157,7 +186,7 @@ fun shapeFromShapeRecord(shapeRecord: ShapeRecord?): Shape? {
 @Composable
 fun FunctionalComposableScope.ShapeContent(props: ShapeProps) {
   Box(
-    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope)
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
       .drawWithCache {
         val path = pathFromShapeRecord(
           ShapeRecord(
@@ -165,10 +194,12 @@ fun FunctionalComposableScope.ShapeContent(props: ShapeProps) {
             smoothing = props.smoothing,
             innerRadius = props.innerRadius,
             radius = props.radius,
+            cornerRadii = props.cornerRadii,
             type = props.type,
             verticesCount = props.verticesCount
           ),
-          size
+          size,
+          this
         )
 
         onDrawBehind {

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

@@ -59,6 +59,6 @@ fun FunctionalComposableScope.SliderContent(props: SliderProps) {
       activeTickColor = colors.activeTickColor.compose,
       inactiveTickColor = colors.inactiveTickColor.compose
     ),
-    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope)
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
   )
 }

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

@@ -0,0 +1,53 @@
+package expo.modules.ui
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.view.ViewGroup
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+import androidx.core.view.size
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ComposableScope
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.ExpoComposeView
+
+data class SlotProps(
+  val slotName: MutableState<String> = mutableStateOf("")
+) : ComposeProps
+
+/**
+ * A generic slot marker view that can be used to mark children for specific slots.
+ * This view is not rendered directly but used as a marker to identify which children
+ * should be placed in which composable slots.
+ */
+@SuppressLint("ViewConstructor")
+class SlotView(context: Context, appContext: AppContext) :
+  ExpoComposeView<SlotProps>(context, appContext) {
+  override val props = SlotProps()
+  internal val onSlotEvent by EventDispatcher<Unit>()
+
+  @Composable
+  override fun ComposableScope.Content() {
+    Children(this)
+  }
+}
+
+fun isSlotWithName(view: ExpoComposeView<*>, slotName: String): Boolean {
+  return view is SlotView && view.props.slotName.value == slotName
+}
+
+fun isSlotView(view: ExpoComposeView<*>): Boolean {
+  return view is SlotView
+}
+
+fun findChildSlotView(viewGroup: ViewGroup, slotName: String): SlotView? {
+  for (index in 0..<viewGroup.size) {
+    val child = viewGroup.getChildAt(index) as? SlotView
+    if (child != null && child.props.slotName.value == slotName) {
+      return child
+    }
+  }
+  return null
+}

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

@@ -0,0 +1,15 @@
+package expo.modules.ui
+
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.runtime.Composable
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+
+data class SpacerProps(
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.SpacerContent(props: SpacerProps) {
+  Spacer(modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher))
+}

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

@@ -0,0 +1,36 @@
+package expo.modules.ui
+
+import android.graphics.Color
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.contentColorFor
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.unit.dp
+import expo.modules.kotlin.views.ComposableScope
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+
+data class SurfaceProps(
+  val color: Color? = null,
+  val contentColor: Color? = null,
+  val tonalElevation: Float = 0f,
+  val shadowElevation: Float = 0f,
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.SurfaceContent(props: SurfaceProps) {
+  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  val color = props.color?.compose ?: MaterialTheme.colorScheme.surface
+  val contentColor = props.contentColor?.compose ?: contentColorFor(color)
+
+  Surface(
+    modifier = modifier,
+    color = color,
+    contentColor = contentColor,
+    tonalElevation = props.tonalElevation.dp,
+    shadowElevation = props.shadowElevation.dp
+  ) {
+    Children(ComposableScope())
+  }
+}

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

@@ -9,6 +9,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import expo.modules.kotlin.records.Field
 import expo.modules.kotlin.records.Record
+import expo.modules.kotlin.views.ComposableScope
 import expo.modules.kotlin.views.ComposeProps
 import expo.modules.kotlin.views.FunctionalComposableScope
 import java.io.Serializable
@@ -57,11 +58,18 @@ data class SwitchProps(
 ) : ComposeProps
 
 @Composable
-fun SwitchComposable(checked: Boolean, onCheckedChange: ((Boolean) -> Unit)?, colors: SwitchColors, modifier: Modifier = Modifier) {
+fun SwitchComposable(
+  checked: Boolean,
+  onCheckedChange: ((Boolean) -> Unit)?,
+  colors: SwitchColors,
+  modifier: Modifier = Modifier,
+  thumbContent: (@Composable () -> Unit)? = null
+) {
   Switch(
     checked = checked,
     onCheckedChange = onCheckedChange,
     modifier = modifier,
+    thumbContent = thumbContent,
     colors = SwitchDefaults.colors(
       // For some reason the default way of passing colors using `compose` results in a transparent view
       checkedThumbColor = colors.checkedThumbColor.composeOrNull
@@ -99,10 +107,11 @@ fun ThemedHybridSwitch(
   checked: Boolean,
   onCheckedChange: ((Boolean) -> Unit)?,
   colors: SwitchColors,
-  modifier: Modifier = Modifier
+  modifier: Modifier = Modifier,
+  thumbContent: (@Composable () -> Unit)? = null
 ) {
   when (variant) {
-    "switch" -> SwitchComposable(checked, onCheckedChange, colors, modifier)
+    "switch" -> SwitchComposable(checked, onCheckedChange, colors, modifier, thumbContent)
     else -> CheckboxComposable(checked, onCheckedChange, colors, modifier)
   }
 }
@@ -112,11 +121,22 @@ fun FunctionalComposableScope.SwitchContent(
   props: SwitchProps,
   onValueChange: (ValueChangeEvent) -> Unit
 ) {
+  val thumbContentSlotView = findChildSlotView(view, "thumbContent")
+
   ThemedHybridSwitch(
     props.variant,
     props.value,
     { newChecked -> onValueChange(ValueChangeEvent(newChecked)) },
     props.elementColors,
-    ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope)
+    ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher),
+    thumbContent = thumbContentSlotView?.let {
+      {
+        with(ComposableScope()) {
+          with(it) {
+            Content()
+          }
+        }
+      }
+    }
   )
 }

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

@@ -0,0 +1,33 @@
+package expo.modules.ui
+
+import android.graphics.Color
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.runtime.Composable
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+import expo.modules.ui.button.ButtonPressedEvent
+
+data class TextButtonProps(
+  val text: String = "",
+  val color: Color? = null,
+  val disabled: Boolean = false,
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.TextButtonContent(
+  props: TextButtonProps,
+  onButtonPressed: (ButtonPressedEvent) -> Unit
+) {
+  TextButton(
+    onClick = { onButtonPressed(ButtonPressedEvent()) },
+    enabled = !props.disabled,
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  ) {
+    Text(
+      text = props.text,
+      color = props.color.composeOrNull ?: androidx.compose.ui.graphics.Color.Unspecified
+    )
+  }
+}

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

@@ -7,7 +7,6 @@ import androidx.compose.material3.TextField
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.mutableStateOf
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.input.KeyboardCapitalization
 import androidx.compose.ui.text.input.KeyboardType
 import expo.modules.kotlin.AppContext
@@ -83,7 +82,7 @@ class TextInputView(context: Context, appContext: AppContext) :
         autoCorrectEnabled = props.autocorrection.value,
         capitalization = props.autoCapitalize.value.autoCapitalize()
       ),
-      modifier = ModifierRegistry.applyModifiers(props.modifiers.value, appContext, this@Content)
+      modifier = ModifierRegistry.applyModifiers(props.modifiers.value, appContext, this@Content, globalEventDispatcher)
     )
   }
 }

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

@@ -0,0 +1,194 @@
+package expo.modules.ui
+
+import android.graphics.Color
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.sp
+import expo.modules.kotlin.types.Enumerable
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+
+enum class TextFontWeight(val value: String) : Enumerable {
+  NORMAL("normal"),
+  BOLD("bold"),
+  W100("100"),
+  W200("200"),
+  W300("300"),
+  W400("400"),
+  W500("500"),
+  W600("600"),
+  W700("700"),
+  W800("800"),
+  W900("900");
+
+  fun toComposeFontWeight(): FontWeight {
+    return when (this) {
+      NORMAL -> FontWeight.Normal
+      BOLD -> FontWeight.Bold
+      W100 -> FontWeight.W100
+      W200 -> FontWeight.W200
+      W300 -> FontWeight.W300
+      W400 -> FontWeight.W400
+      W500 -> FontWeight.W500
+      W600 -> FontWeight.W600
+      W700 -> FontWeight.W700
+      W800 -> FontWeight.W800
+      W900 -> FontWeight.W900
+    }
+  }
+}
+
+enum class TextFontStyle(val value: String) : Enumerable {
+  NORMAL("normal"),
+  ITALIC("italic");
+
+  fun toComposeFontStyle(): FontStyle {
+    return when (this) {
+      NORMAL -> FontStyle.Normal
+      ITALIC -> FontStyle.Italic
+    }
+  }
+}
+
+enum class TextAlignType(val value: String) : Enumerable {
+  LEFT("left"),
+  RIGHT("right"),
+  CENTER("center"),
+  JUSTIFY("justify"),
+  START("start"),
+  END("end");
+
+  fun toComposeTextAlign(): TextAlign {
+    return when (this) {
+      LEFT -> TextAlign.Left
+      RIGHT -> TextAlign.Right
+      CENTER -> TextAlign.Center
+      JUSTIFY -> TextAlign.Justify
+      START -> TextAlign.Start
+      END -> TextAlign.End
+    }
+  }
+}
+
+enum class TextDecorationType(val value: String) : Enumerable {
+  NONE("none"),
+  UNDERLINE("underline"),
+  LINE_THROUGH("lineThrough");
+
+  fun toComposeTextDecoration(): TextDecoration {
+    return when (this) {
+      NONE -> TextDecoration.None
+      UNDERLINE -> TextDecoration.Underline
+      LINE_THROUGH -> TextDecoration.LineThrough
+    }
+  }
+}
+
+enum class TextOverflowType(val value: String) : Enumerable {
+  CLIP("clip"),
+  ELLIPSIS("ellipsis"),
+  VISIBLE("visible");
+
+  fun toComposeTextOverflow(): TextOverflow {
+    return when (this) {
+      CLIP -> TextOverflow.Clip
+      ELLIPSIS -> TextOverflow.Ellipsis
+      VISIBLE -> TextOverflow.Visible
+    }
+  }
+}
+
+enum class TypographyStyle(val value: String) : Enumerable {
+  DISPLAY_LARGE("displayLarge"),
+  DISPLAY_MEDIUM("displayMedium"),
+  DISPLAY_SMALL("displaySmall"),
+  HEADLINE_LARGE("headlineLarge"),
+  HEADLINE_MEDIUM("headlineMedium"),
+  HEADLINE_SMALL("headlineSmall"),
+  TITLE_LARGE("titleLarge"),
+  TITLE_MEDIUM("titleMedium"),
+  TITLE_SMALL("titleSmall"),
+  BODY_LARGE("bodyLarge"),
+  BODY_MEDIUM("bodyMedium"),
+  BODY_SMALL("bodySmall"),
+  LABEL_LARGE("labelLarge"),
+  LABEL_MEDIUM("labelMedium"),
+  LABEL_SMALL("labelSmall");
+
+  @Composable
+  fun toTextStyle(): TextStyle {
+    val typography = MaterialTheme.typography
+    return when (this) {
+      DISPLAY_LARGE -> typography.displayLarge
+      DISPLAY_MEDIUM -> typography.displayMedium
+      DISPLAY_SMALL -> typography.displaySmall
+      HEADLINE_LARGE -> typography.headlineLarge
+      HEADLINE_MEDIUM -> typography.headlineMedium
+      HEADLINE_SMALL -> typography.headlineSmall
+      TITLE_LARGE -> typography.titleLarge
+      TITLE_MEDIUM -> typography.titleMedium
+      TITLE_SMALL -> typography.titleSmall
+      BODY_LARGE -> typography.bodyLarge
+      BODY_MEDIUM -> typography.bodyMedium
+      BODY_SMALL -> typography.bodySmall
+      LABEL_LARGE -> typography.labelLarge
+      LABEL_MEDIUM -> typography.labelMedium
+      LABEL_SMALL -> typography.labelSmall
+    }
+  }
+}
+
+data class TextProps(
+  val text: String = "",
+  val color: Color? = null,
+  val typography: TypographyStyle? = null,
+  val fontSize: Float? = null,
+  val fontWeight: TextFontWeight? = null,
+  val fontStyle: TextFontStyle? = null,
+  val textAlign: TextAlignType? = null,
+  val textDecoration: TextDecorationType? = null,
+  val letterSpacing: Float? = null,
+  val lineHeight: Float? = null,
+  val overflow: TextOverflowType? = null,
+  val softWrap: Boolean? = null,
+  val maxLines: Int? = null,
+  val minLines: Int? = null,
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.TextContent(props: TextProps) {
+  // Start with typography style if provided, otherwise use default
+  val baseStyle = props.typography?.toTextStyle() ?: TextStyle.Default
+
+  // Merge base style with custom properties
+  val mergedStyle = baseStyle.merge(
+    TextStyle(
+      fontSize = props.fontSize?.sp ?: androidx.compose.ui.unit.TextUnit.Unspecified,
+      fontWeight = props.fontWeight?.toComposeFontWeight(),
+      fontStyle = props.fontStyle?.toComposeFontStyle(),
+      textDecoration = props.textDecoration?.toComposeTextDecoration(),
+      letterSpacing = props.letterSpacing?.sp ?: androidx.compose.ui.unit.TextUnit.Unspecified,
+      lineHeight = props.lineHeight?.sp ?: androidx.compose.ui.unit.TextUnit.Unspecified
+    )
+  )
+
+  Text(
+    text = props.text,
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher),
+    color = colorToComposeColor(props.color),
+    textAlign = props.textAlign?.toComposeTextAlign(),
+    overflow = props.overflow?.toComposeTextOverflow() ?: TextOverflow.Clip,
+    softWrap = props.softWrap ?: true,
+    maxLines = props.maxLines ?: Int.MAX_VALUE,
+    minLines = props.minLines ?: 1,
+    style = mergedStyle
+  )
+}

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

@@ -0,0 +1,96 @@
+@file:OptIn(ExperimentalMaterial3ExpressiveApi::class)
+
+package expo.modules.ui
+
+import android.graphics.Color
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.material3.FilledIconToggleButton
+import androidx.compose.material3.IconToggleButton
+import androidx.compose.material3.OutlinedIconToggleButton
+import androidx.compose.material3.Text
+import androidx.compose.material3.ToggleButton
+import androidx.compose.material3.ToggleButtonDefaults
+import androidx.compose.runtime.Composable
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+
+data class ToggleButtonProps(
+  val checked: Boolean = false,
+  val text: String? = null,
+  val variant: String = "default",
+  val color: Color? = null,
+  val disabled: Boolean = false,
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+data class ToggleButtonValueChangeEvent(
+  @Field val checked: Boolean = false
+) : Record
+
+@Composable
+fun FunctionalComposableScope.ToggleButtonContent(
+  props: ToggleButtonProps,
+  onCheckedChange: (ToggleButtonValueChangeEvent) -> Unit
+) {
+  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+
+  val scope = this
+
+  val content: @Composable () -> Unit = {
+    when {
+      props.text != null -> Text(text = props.text)
+      else -> scope.Children(composableScope)
+    }
+  }
+
+  // RowScope content for ToggleButton
+  val rowContent: @Composable RowScope.() -> Unit = {
+    when {
+      props.text != null -> Text(text = props.text)
+      else -> scope.Children(composableScope)
+    }
+  }
+
+  when (props.variant) {
+    "icon" -> {
+      IconToggleButton(
+        checked = props.checked,
+        onCheckedChange = { onCheckedChange(ToggleButtonValueChangeEvent(it)) },
+        enabled = !props.disabled,
+        modifier = modifier,
+        content = content
+      )
+    }
+    "filledIcon" -> {
+      FilledIconToggleButton(
+        checked = props.checked,
+        onCheckedChange = { onCheckedChange(ToggleButtonValueChangeEvent(it)) },
+        enabled = !props.disabled,
+        modifier = modifier,
+        content = content
+      )
+    }
+    "outlinedIcon" -> {
+      OutlinedIconToggleButton(
+        checked = props.checked,
+        onCheckedChange = { onCheckedChange(ToggleButtonValueChangeEvent(it)) },
+        enabled = !props.disabled,
+        modifier = modifier,
+        content = content
+      )
+    }
+    else -> {
+      ToggleButton(
+        checked = props.checked,
+        onCheckedChange = { onCheckedChange(ToggleButtonValueChangeEvent(it)) },
+        enabled = !props.disabled,
+        modifier = modifier,
+        colors = ToggleButtonDefaults.toggleButtonColors(),
+        content = rowContent
+      )
+    }
+  }
+}

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

@@ -4,6 +4,8 @@ import android.graphics.Color
 import android.os.Build
 import android.util.Log
 import androidx.compose.ui.graphics.vector.ImageVector
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
 
 fun colorToComposeColorOrNull(color: Color?): androidx.compose.ui.graphics.Color? {
   return color?.let {
@@ -39,3 +41,7 @@ fun getImageVector(icon: String?): ImageVector? {
     return null
   }
 }
+
+data class GenericEventPayload1<T>(
+  @Field val value: T
+) : Record

package/android/src/main/java/expo/modules/ui/button/Button.kt

@@ -174,7 +174,7 @@ fun FunctionalComposableScope.ButtonContent(
       // Also fire the button pressed event
       onButtonPressed(ButtonPressedEvent())
     },
-    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope),
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher),
     shape = shapeFromShapeRecord(props.shape)
   ) {
     Row(verticalAlignment = Alignment.CenterVertically) {

package/android/src/main/java/expo/modules/ui/button/IconButton.kt

@@ -1,7 +1,5 @@
 package expo.modules.ui.button
 
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.FilledTonalIconButton
 import androidx.compose.material3.IconButton
@@ -102,11 +100,9 @@ fun FunctionalComposableScope.IconButtonContent(
     colors,
     disabled ?: false,
     onPress = { onButtonPressed(ButtonPressedEvent()) },
-    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope),
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher),
     shape = shapeFromShapeRecord(props.shape)
   ) {
-    Box(modifier = Modifier.fillMaxSize()) {
-      Children(ComposableScope())
-    }
+    Children(ComposableScope())
   }
 }