@expo/ui 55.0.0-preview.6 → 55.0.0

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

@@ -1,3 +1,5 @@
+@file:OptIn(ExperimentalMaterial3ExpressiveApi::class)
+
 package expo.modules.ui
 
 import android.graphics.Color
@@ -11,26 +13,41 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.foundation.selection.selectable
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.CutCornerShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.material3.toShape
+import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.blur
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
 import expo.modules.kotlin.AppContext
 import expo.modules.kotlin.records.Field
 import expo.modules.kotlin.records.Record
 import expo.modules.kotlin.records.recordFromMap
+import expo.modules.kotlin.types.Enumerable
 import expo.modules.kotlin.views.ComposableScope
+import expo.modules.ui.convertibles.AlignmentType
 
 typealias ModifierType = Map<String, Any?>
 typealias ModifierList = List<ModifierType>
-typealias ModifierFactory = (ModifierType, ComposableScope?, AppContext?) -> Modifier
+typealias ModifierEventDispatcher = (String, Map<String, Any?>) -> Unit
+typealias ModifierFactory = @Composable (ModifierType, ComposableScope?, AppContext?, ModifierEventDispatcher) -> Modifier
 
 // region Modifier Params
 
@@ -62,6 +79,22 @@ internal data class FillMaxHeightParams(
   @Field val fraction: Float = 1.0f
 ) : Record
 
+internal data class WidthParams(
+  @Field val width: Int = 0
+) : Record
+
+internal data class HeightParams(
+  @Field val height: Int = 0
+) : Record
+
+internal data class WrapContentWidthParams(
+  @Field val alignment: AlignmentType? = null
+) : Record
+
+internal data class WrapContentHeightParams(
+  @Field val alignment: AlignmentType? = null
+) : Record
+
 internal data class OffsetParams(
   @Field val x: Int = 0,
   @Field val y: Int = 0
@@ -105,12 +138,38 @@ internal data class WeightParams(
   @Field val weight: Float = 1f
 ) : Record
 
+internal data class AlignParams(
+  @Field val alignment: AlignmentType? = null
+) : Record
+
 internal data class TestIDParams(
   @Field val testID: String? = null
 ) : Record
 
+internal enum class BuiltinShapeType(val value: String) : Enumerable {
+  RECTANGLE("rectangle"),
+  CIRCLE("circle"),
+  ROUNDED_CORNER("roundedCorner"),
+  CUT_CORNER("cutCorner"),
+  MATERIAL("material")
+}
+
+internal data class BuiltinShapeRecord(
+  @Field val type: BuiltinShapeType = BuiltinShapeType.RECTANGLE,
+  @Field val radius: Float? = null,
+  @Field val topStart: Float? = null,
+  @Field val topEnd: Float? = null,
+  @Field val bottomStart: Float? = null,
+  @Field val bottomEnd: Float? = null,
+  @Field val name: MaterialShapeType? = null
+) : Record
+
 internal data class ClipParams(
-  @Field val shape: ShapeRecord? = null
+  @Field val shape: BuiltinShapeRecord? = null
+) : Record
+
+internal data class SelectableParams(
+  @Field val selected: Boolean = false
 ) : Record
 
 // endregion
@@ -124,7 +183,7 @@ internal data class ClipParams(
  *
  * Usage in Native:
  * ```kotlin
- * modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope)
+ * modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
  * ```
  * ```
  */
@@ -150,15 +209,17 @@ object ModifierRegistry {
   /**
    * Applies an array of modifier configs to build a Compose Modifier chain.
    */
+  @Composable
   fun applyModifiers(
     modifiers: List<ModifierType>?,
     appContext: AppContext,
-    scope: ComposableScope
+    scope: ComposableScope,
+    eventDispatcher: ModifierEventDispatcher
   ): Modifier {
     if (modifiers.isNullOrEmpty()) return Modifier
     return modifiers.fold(Modifier as Modifier) { acc, config ->
       val type = config["\$type"] as? String ?: return@fold acc
-      val modifier = modifierFactories[type]?.invoke(config, scope, appContext) ?: Modifier
+      val modifier = modifierFactories[type]?.invoke(config, scope, appContext, eventDispatcher) ?: Modifier
       acc.then(modifier)
     }
   }
@@ -179,12 +240,12 @@ object ModifierRegistry {
 
   private fun registerBuiltInModifiers() {
     // Padding modifiers
-    register("paddingAll") { map, _, _ ->
+    register("paddingAll") { map, _, _, _ ->
       val params = recordFromMap<PaddingAllParams>(map)
       Modifier.padding(params.all.dp)
     }
 
-    register("padding") { map, _, _ ->
+    register("padding") { map, _, _, _ ->
       val params = recordFromMap<PaddingParams>(map)
       Modifier.padding(
         params.start.dp,
@@ -195,75 +256,99 @@ object ModifierRegistry {
     }
 
     // Size modifiers
-    register("size") { map, _, _ ->
+    register("size") { map, _, _, _ ->
       val params = recordFromMap<SizeParams>(map)
       Modifier.size(params.width.dp, params.height.dp)
     }
 
-    register("fillMaxSize") { map, _, _ ->
+    register("fillMaxSize") { map, _, _, _ ->
       val params = recordFromMap<FillMaxSizeParams>(map)
       Modifier.fillMaxSize(fraction = params.fraction)
     }
 
-    register("fillMaxWidth") { map, _, _ ->
+    register("fillMaxWidth") { map, _, _, _ ->
       val params = recordFromMap<FillMaxWidthParams>(map)
       Modifier.fillMaxWidth(fraction = params.fraction)
     }
 
-    register("fillMaxHeight") { map, _, _ ->
+    register("fillMaxHeight") { map, _, _, _ ->
       val params = recordFromMap<FillMaxHeightParams>(map)
       Modifier.fillMaxHeight(fraction = params.fraction)
     }
 
+    register("width") { map, _, _, _ ->
+      val params = recordFromMap<WidthParams>(map)
+      Modifier.width(params.width.dp)
+    }
+
+    register("height") { map, _, _, _ ->
+      val params = recordFromMap<HeightParams>(map)
+      Modifier.height(params.height.dp)
+    }
+
+    register("wrapContentWidth") { map, _, _, _ ->
+      val params = recordFromMap<WrapContentWidthParams>(map)
+      params.alignment?.toHorizontalAlignment()?.let { alignment ->
+        Modifier.wrapContentWidth(align = alignment)
+      } ?: Modifier.wrapContentWidth()
+    }
+
+    register("wrapContentHeight") { map, _, _, _ ->
+      val params = recordFromMap<WrapContentHeightParams>(map)
+      params.alignment?.toVerticalAlignment()?.let { alignment ->
+        Modifier.wrapContentHeight(align = alignment)
+      } ?: Modifier.wrapContentHeight()
+    }
+
     // Position modifiers
-    register("offset") { map, _, _ ->
+    register("offset") { map, _, _, _ ->
       val params = recordFromMap<OffsetParams>(map)
       Modifier.offset(params.x.dp, params.y.dp)
     }
 
     // Appearance modifiers
-    register("background") { map, _, _ ->
+    register("background") { map, _, _, _ ->
       val params = recordFromMap<BackgroundParams>(map)
       params.color?.let { color ->
         Modifier.background(color.compose)
       } ?: Modifier
     }
 
-    register("border") { map, _, _ ->
+    register("border") { map, _, _, _ ->
       val params = recordFromMap<BorderParams>(map)
       params.borderColor?.let { borderColor ->
         Modifier.border(BorderStroke(params.borderWidth.dp, borderColor.compose))
       } ?: Modifier
     }
 
-    register("shadow") { map, _, _ ->
+    register("shadow") { map, _, _, _ ->
       val params = recordFromMap<ShadowParams>(map)
       Modifier.shadow(params.elevation.dp)
     }
 
-    register("alpha") { map, _, _ ->
+    register("alpha") { map, _, _, _ ->
       val params = recordFromMap<AlphaParams>(map)
       Modifier.alpha(params.alpha)
     }
 
-    register("blur") { map, _, _ ->
+    register("blur") { map, _, _, _ ->
       val params = recordFromMap<BlurParams>(map)
       Modifier.blur(params.radius.dp)
     }
 
     // Transform modifiers
-    register("rotate") { map, _, _ ->
+    register("rotate") { map, _, _, _ ->
       val params = recordFromMap<RotateParams>(map)
       Modifier.rotate(params.degrees)
     }
 
-    register("zIndex") { map, _, _ ->
+    register("zIndex") { map, _, _, _ ->
       val params = recordFromMap<ZIndexParams>(map)
       Modifier.zIndex(params.index)
     }
 
     // Animation modifiers
-    register("animateContentSize") { map, _, _ ->
+    register("animateContentSize") { map, _, _, _ ->
       val params = recordFromMap<AnimateContentSizeParams>(map)
       Modifier.animateContentSize(
         spring(dampingRatio = params.dampingRatio, stiffness = params.stiffness)
@@ -271,7 +356,7 @@ object ModifierRegistry {
     }
 
     // Scope-dependent modifiers
-    register("weight") { map, scope, _ ->
+    register("weight") { map, scope, _, _ ->
       val params = recordFromMap<WeightParams>(map)
       scope?.rowScope?.run {
         Modifier.weight(params.weight)
@@ -280,32 +365,85 @@ object ModifierRegistry {
       } ?: Modifier
     }
 
-    register("matchParentSize") { _, scope, _ ->
+    register("align") { map, scope, _, _ ->
+      val params = recordFromMap<AlignParams>(map)
+      scope?.boxScope?.run {
+        params.alignment?.toAlignment()?.let { alignment -> Modifier.align(alignment) }
+      } ?: scope?.rowScope?.run {
+        params.alignment?.toVerticalAlignment()?.let { alignment -> Modifier.align(alignment) }
+      } ?: scope?.columnScope?.run {
+        params.alignment?.toHorizontalAlignment()?.let { alignment -> Modifier.align(alignment) }
+      } ?: Modifier
+    }
+
+    register("matchParentSize") { _, scope, _, _ ->
       scope?.boxScope?.run {
         Modifier.matchParentSize()
       } ?: Modifier
     }
 
     // Utility modifiers
-    register("testID") { map, _, _ ->
+    register("testID") { map, _, _, _ ->
       val params = recordFromMap<TestIDParams>(map)
       params.testID?.let { testID ->
         Modifier.applyTestTag(testID)
       } ?: Modifier
     }
 
-    register("clip") { map, _, _ ->
+    register("clip") { map, _, _, _ ->
       val params = recordFromMap<ClipParams>(map)
-      params.shape?.let { shapeRecord ->
-        shapeFromShapeRecord(shapeRecord)?.let { shape ->
-          Modifier.clip(shape)
+      params.shape?.let { shape ->
+        val composeShape = when (shape.type) {
+          BuiltinShapeType.RECTANGLE -> RectangleShape
+          BuiltinShapeType.CIRCLE -> CircleShape
+          BuiltinShapeType.ROUNDED_CORNER -> {
+            val hasPerCorner = shape.topStart != null || shape.topEnd != null || shape.bottomStart != null || shape.bottomEnd != null
+            if (hasPerCorner) {
+              RoundedCornerShape(
+                topStart = (shape.topStart ?: 0f).dp,
+                topEnd = (shape.topEnd ?: 0f).dp,
+                bottomStart = (shape.bottomStart ?: 0f).dp,
+                bottomEnd = (shape.bottomEnd ?: 0f).dp
+              )
+            } else {
+              RoundedCornerShape((shape.radius ?: 0f).dp)
+            }
+          }
+          BuiltinShapeType.CUT_CORNER -> {
+            val hasPerCorner = shape.topStart != null || shape.topEnd != null || shape.bottomStart != null || shape.bottomEnd != null
+            if (hasPerCorner) {
+              CutCornerShape(
+                topStart = (shape.topStart ?: 0f).dp,
+                topEnd = (shape.topEnd ?: 0f).dp,
+                bottomStart = (shape.bottomStart ?: 0f).dp,
+                bottomEnd = (shape.bottomEnd ?: 0f).dp
+              )
+            } else {
+              CutCornerShape((shape.radius ?: 0f).dp)
+            }
+          }
+          BuiltinShapeType.MATERIAL -> {
+            shape.name?.toRoundedPolygon()?.toShape()
+          }
+        }
+        composeShape?.let {
+          Modifier.clip(it)
         }
       } ?: Modifier
     }
 
-    // Callback modifiers
-    register("clickable") { _, _, _ ->
-      Modifier.clickable { }
+    register("clickable") { _, _, _, eventDispatcher ->
+      Modifier.clickable {
+        eventDispatcher("clickable", emptyMap())
+      }
+    }
+
+    register("selectable") { map, _, _, eventDispatcher ->
+      val params = recordFromMap<SelectableParams>(map)
+      Modifier.selectable(
+        selected = params.selected,
+        onClick = { eventDispatcher("selectable", emptyMap()) }
+      )
     }
   }
 }

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

@@ -88,7 +88,7 @@ fun FunctionalComposableScope.PickerContent(
   @Composable
   fun SegmentedComposable() {
     SingleChoiceSegmentedButtonRow(
-      modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope)
+      modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
     ) {
       options.forEachIndexed { index, label ->
         SegmentedButton(
@@ -99,7 +99,7 @@ fun FunctionalComposableScope.PickerContent(
           onClick = {
             onOptionSelected(PickerOptionSelectedEvent(index, label))
           },
-          modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope),
+          modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher),
           selected = index == selectedIndex,
           label = { Text(label) },
           colors = SegmentedButtonDefaults.colors(

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

@@ -41,7 +41,7 @@ fun FunctionalComposableScope.ProgressContent(props: ProgressProps) {
   val progress = props.progress
   val color = props.color
   val colors = props.elementColors
-  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope)
+  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
 
   when (props.variant) {
     ProgressVariant.LINEAR -> {

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

@@ -0,0 +1,40 @@
+@file:OptIn(ExperimentalMaterial3ExpressiveApi::class)
+
+package expo.modules.ui
+
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.material3.pulltorefresh.PullToRefreshBox
+import androidx.compose.material3.pulltorefresh.PullToRefreshDefaults
+import androidx.compose.material3.pulltorefresh.rememberPullToRefreshState
+import androidx.compose.runtime.Composable
+import expo.modules.kotlin.views.ComposableScope
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+
+data class PullToRefreshBoxProps(
+  val isRefreshing: Boolean = false,
+  val modifiers: ModifierList = emptyList(),
+  val loadingIndicatorModifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.PullToRefreshBoxContent(props: PullToRefreshBoxProps, onRefresh: () -> Unit) {
+  val isRefreshing = props.isRefreshing
+  val pullToRefreshState = rememberPullToRefreshState()
+
+  PullToRefreshBox(
+    isRefreshing = isRefreshing,
+    onRefresh = { onRefresh() },
+    state = pullToRefreshState,
+    indicator = {
+      PullToRefreshDefaults.LoadingIndicator(
+        isRefreshing = isRefreshing,
+        state = pullToRefreshState,
+        modifier = ModifierRegistry.applyModifiers(props.loadingIndicatorModifiers, appContext, composableScope, globalEventDispatcher)
+      )
+    },
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  ) {
+    Children(ComposableScope())
+  }
+}

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

@@ -0,0 +1,87 @@
+package expo.modules.ui
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.view.View
+import android.view.ViewGroup
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.viewinterop.AndroidView
+import com.facebook.react.ReactRootView
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.views.ComposableScope
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.ExpoComposeView
+import expo.modules.kotlin.views.RNHostViewInterface
+import expo.modules.kotlin.views.ShadowNodeProxy
+import java.lang.ref.WeakReference
+
+internal data class RNHostProps(
+  val matchContents: MutableState<Boolean?> = mutableStateOf(null),
+  val verticalScrollEnabled: MutableState<Boolean?> = mutableStateOf(null),
+  val modifiers: MutableState<ModifierList> = mutableStateOf(emptyList())
+) : ComposeProps
+
+@SuppressLint("ViewConstructor")
+internal class RNHostView(context: Context, appContext: AppContext) :
+  ExpoComposeView<RNHostProps>(context, appContext), RNHostViewInterface {
+  override val props = RNHostProps()
+  override var matchContents: Boolean = false
+    get() = props.matchContents.value ?: false
+
+  private val container = RNHostContainerView(context, WeakReference(shadowNodeProxy))
+
+  @Composable
+  override fun ComposableScope.Content() {
+    val (verticalScrollEnabled) = props.verticalScrollEnabled
+    val (modifiers) = props.modifiers
+
+    AndroidView(
+      factory = {
+        container
+      },
+      modifier = ModifierRegistry.applyModifiers(modifiers, appContext, this@Content, globalEventDispatcher)
+        .then(if (verticalScrollEnabled == true) Modifier.verticalScroll(rememberScrollState()) else Modifier)
+    )
+  }
+
+  override fun addView(child: View, index: Int, params: ViewGroup.LayoutParams) {
+    container.addView(child, index, params)
+  }
+
+  override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+    super.onMeasure(widthMeasureSpec, heightMeasureSpec)
+    container.measure(widthMeasureSpec, heightMeasureSpec)
+  }
+
+  override fun onLayout(
+    changed: Boolean,
+    left: Int,
+    top: Int,
+    right: Int,
+    bottom: Int
+  ) {
+    super.onLayout(changed, left, top, right, bottom)
+    val offsetX = paddingLeft
+    val offsetY = paddingRight
+    container.layout(offsetX, offsetY, offsetX + width, offsetY + height)
+  }
+}
+
+internal class RNHostContainerView(context: Context, private val shadowNodeProxy: WeakReference<ShadowNodeProxy>) : ReactRootView(context) {
+  var matchContents = false
+
+  override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+    super.onLayout(changed, left, top, right, bottom)
+    if (matchContents && childCount > 1) {
+      val subview = getChildAt(0)
+      shadowNodeProxy.get()?.setViewSize(subview.width.toDouble(), subview.height.toDouble())
+    } else {
+      shadowNodeProxy.get()?.setViewSize(width.toDouble(), height.toDouble())
+    }
+  }
+}

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

@@ -0,0 +1,28 @@
+package expo.modules.ui
+
+import androidx.compose.material3.RadioButton
+import androidx.compose.runtime.Composable
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+
+data class RadioButtonProps(
+  val selected: Boolean = false,
+  val nativeClickable: Boolean = true,
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.RadioButtonContent(
+  props: RadioButtonProps,
+  onNativeClick: () -> Unit
+) {
+  RadioButton(
+    selected = props.selected,
+    onClick = if (props.nativeClickable) {
+      { onNativeClick() }
+    } else {
+      null
+    },
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  )
+}

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

@@ -0,0 +1,60 @@
+@file:OptIn(ExperimentalMaterial3Api::class)
+
+package expo.modules.ui
+
+import androidx.compose.foundation.text.input.rememberTextFieldState
+import androidx.compose.material3.ExpandedFullScreenSearchBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.SearchBar
+import androidx.compose.material3.SearchBarDefaults
+import androidx.compose.material3.rememberSearchBarState
+import androidx.compose.runtime.Composable
+import expo.modules.kotlin.views.ComposableScope
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+
+data class SearchBarProps(
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.SearchBarContent(props: SearchBarProps, onSearch: (GenericEventPayload1<String>) -> Unit) {
+  val searchBarState = rememberSearchBarState()
+  val textFieldState = rememberTextFieldState()
+
+  val inputField =
+    @Composable {
+      SearchBarDefaults.InputField(
+        searchBarState = searchBarState,
+        textFieldState = textFieldState,
+        onSearch = { value -> onSearch.invoke(GenericEventPayload1(value)) },
+        placeholder = {
+          Children(ComposableScope(), filter = { isSlotWithName(it, "placeholder") })
+        }
+      )
+    }
+  SearchBar(
+    state = searchBarState,
+    inputField = inputField,
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  )
+
+  val expandedFullScreenSearchBarView = findChildSlotView(view, "expandedFullScreenSearchBar")
+  expandedFullScreenSearchBarView?.let { slotView ->
+    ExpandedFullScreenSearchBar(
+      state = searchBarState,
+      inputField = inputField
+    ) {
+      ExpandedFullScreenSearchBarView(ComposableScope(), slotView)
+    }
+  }
+}
+
+@Composable
+private fun ExpandedFullScreenSearchBarView(composableScope: ComposableScope, view: SlotView) {
+  with(composableScope) {
+    with(view) {
+      Content()
+    }
+  }
+}