@expo/ui 55.0.0-preview.6 → 55.0.0

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

@@ -1,5 +1,10 @@
+@file:OptIn(ExperimentalMaterial3ExpressiveApi::class)
+
 package expo.modules.ui
 
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.material3.SwitchDefaults
+import androidx.compose.material3.ToggleButtonDefaults
 import androidx.compose.runtime.remember
 import expo.modules.kotlin.modules.Module
 import expo.modules.kotlin.modules.ModuleDefinition
@@ -9,16 +14,32 @@ import expo.modules.ui.button.ButtonPressedEvent
 import expo.modules.ui.button.ButtonProps
 import expo.modules.ui.button.IconButtonContent
 import expo.modules.ui.button.IconButtonProps
+import expo.modules.ui.icon.IconView
 import expo.modules.ui.menu.ContextMenuButtonPressedEvent
 import expo.modules.ui.menu.ContextMenuContent
 import expo.modules.ui.menu.ContextMenuProps
 import expo.modules.ui.menu.ContextMenuSwitchValueChangeEvent
 import expo.modules.ui.menu.ExpandedChangedEvent
+import okhttp3.OkHttpClient
 
 class ExpoUIModule : Module() {
+  var okHttpClient: OkHttpClient? = null
+    private set
+
   override fun definition() = ModuleDefinition {
     Name("ExpoUI")
 
+    OnCreate {
+      okHttpClient = OkHttpClient.Builder().build()
+    }
+
+    OnDestroy {
+      okHttpClient?.dispatcher?.executorService?.shutdown()
+      okHttpClient?.connectionPool?.evictAll()
+      okHttpClient?.cache?.close()
+      okHttpClient = null
+    }
+
     //region Views use expo-modules-core DSL for uncommon features
 
     View(HostView::class) {
@@ -29,15 +50,45 @@ class ExpoUIModule : Module() {
       }
     }
 
+    Constant("SwitchDefaultIconSize") {
+      return@Constant SwitchDefaults.IconSize.value
+    }
+    Constant("ToggleButtonIconSpacing") {
+      return@Constant ToggleButtonDefaults.IconSpacing.value
+    }
+    Constant("ToggleButtonIconSize") {
+      return@Constant ToggleButtonDefaults.IconSize.value
+    }
+
+    View(RNHostView::class)
+
+    View(TextInputView::class) {
+      Events("onValueChanged")
+      Prop("defaultValue", "") { view: TextInputView, text: String ->
+        if (view.text == null) {
+          view.text = text
+        }
+      }
+      AsyncFunction("setText") { view: TextInputView, text: String ->
+        view.text = text
+      }
+    }
+
+    View(SlotView::class) {
+      Events("onSlotEvent")
+    }
+    View(IconView::class)
+    View(LazyColumnView::class)
+
     //endregion Views use expo-modules-core DSL for uncommon features
 
     //region Expo UI views
 
-    ExpoUIView("BottomSheetView", events = {
-      Events("onIsOpenedChange")
-    }) { props: BottomSheetProps ->
-      val onIsOpenedChange by remember { EventDispatcher<IsOpenedChangeEvent>() }
-      BottomSheetContent(props) { onIsOpenedChange(it) }
+    ExpoUIView("ModalBottomSheetView", events = {
+      Events("onDismissRequest")
+    }) { props: ModalBottomSheetProps ->
+      val onDismissRequest by remember { EventDispatcher<Unit>() }
+      ModalBottomSheetContent(props) { onDismissRequest(Unit) }
     }
 
     // Defines a single view for now – a single choice segmented control
@@ -112,18 +163,6 @@ class ExpoUIModule : Module() {
       ProgressContent(props)
     }
 
-    View(TextInputView::class) {
-      Events("onValueChanged")
-      Prop("defaultValue", "") { view: TextInputView, text: String ->
-        if (view.text == null) {
-          view.text = text
-        }
-      }
-      AsyncFunction("setText") { view: TextInputView, text: String ->
-        view.text = text
-      }
-    }
-
     ExpoUIView("BoxView") { props: LayoutProps ->
       BoxContent(props)
     }
@@ -132,6 +171,10 @@ class ExpoUIModule : Module() {
       RowContent(props)
     }
 
+    ExpoUIView("FlowRowView") { props: LayoutProps ->
+      FlowRowContent(props)
+    }
+
     ExpoUIView("ColumnView") { props: LayoutProps ->
       ColumnContent(props)
     }
@@ -140,6 +183,31 @@ class ExpoUIModule : Module() {
       TextContent(props)
     }
 
+    ExpoUIView("SearchBarView", events = {
+      Events("onSearch")
+    }) { props: SearchBarProps ->
+      val onSearch by remember { EventDispatcher<GenericEventPayload1<String>>() }
+      SearchBarContent(props) { onSearch(it) }
+    }
+
+    ExpoUIView("DockedSearchBarView", events = {
+      Events("onQueryChange")
+    }) { props: DockedSearchBarProps ->
+      val onQueryChange by remember { EventDispatcher<GenericEventPayload1<String>>() }
+      DockedSearchBarContent(props) { onQueryChange(it) }
+    }
+
+    ExpoUIView("HorizontalFloatingToolbarView") { props: HorizontalFloatingToolbarProps ->
+      HorizontalFloatingToolbarContent(props)
+    }
+
+    ExpoUIView("PullToRefreshBoxView", events = {
+      Events("onRefresh")
+    }) { props: PullToRefreshBoxProps ->
+      val onRefresh by remember { EventDispatcher<Unit>() }
+      PullToRefreshBoxContent(props) { onRefresh(Unit) }
+    }
+
     ExpoUIView("CarouselView") { props: CarouselProps ->
       CarouselContent(props)
     }
@@ -170,6 +238,57 @@ class ExpoUIModule : Module() {
       ChipContent(props, { onPress(it) }, { onDismiss(it) })
     }
 
+    ExpoUIView("FilterChipView", events = {
+      Events("onPress")
+    }) { props: FilterChipProps ->
+      val onPress by remember { EventDispatcher<FilterChipPressedEvent>() }
+      FilterChipContent(props) { onPress(it) }
+    }
+
+    ExpoUIView("TextButtonView", events = {
+      Events("onButtonPressed")
+    }) { props: TextButtonProps ->
+      val onButtonPressed by remember { EventDispatcher<expo.modules.ui.button.ButtonPressedEvent>() }
+      TextButtonContent(props) { onButtonPressed(it) }
+    }
+
+    ExpoUIView("ToggleButtonView", events = {
+      Events("onCheckedChange")
+    }) { props: ToggleButtonProps ->
+      val onCheckedChange by remember { EventDispatcher<ToggleButtonValueChangeEvent>() }
+      ToggleButtonContent(props) { onCheckedChange(it) }
+    }
+
+    ExpoUIView("CardView") { props: CardProps ->
+      CardContent(props)
+    }
+
+    ExpoUIView("ListItemView") { props: ListItemProps ->
+      ListItemContent(props)
+    }
+
+    ExpoUIView("SpacerView") { props: SpacerProps ->
+      SpacerContent(props)
+    }
+
+    ExpoUIView("BasicAlertDialogView", events = {
+      Events("onDismissRequest")
+    }) { props: BasicAlertDialogProps ->
+      val onDismissRequest by remember { EventDispatcher<Unit>() }
+      BasicAlertDialogContent(props) { onDismissRequest(Unit) }
+    }
+
+    ExpoUIView("SurfaceView") { props: SurfaceProps ->
+      SurfaceContent(props)
+    }
+
+    ExpoUIView("RadioButtonView", events = {
+      Events("onNativeClick")
+    }) { props: RadioButtonProps ->
+      val onNativeClick by remember { EventDispatcher<Unit>() }
+      RadioButtonContent(props) { onNativeClick(Unit) }
+    }
+
     //endregion Expo UI views
   }
 }

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

@@ -0,0 +1,59 @@
+package expo.modules.ui
+
+import androidx.compose.material3.FilterChip
+import androidx.compose.material3.FilterChipDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+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
+
+open class FilterChipPressedEvent : Record, Serializable
+
+data class FilterChipProps(
+  val selected: Boolean = false,
+  val label: String = "",
+  val enabled: Boolean = true,
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.FilterChipContent(
+  props: FilterChipProps,
+  onPress: (FilterChipPressedEvent) -> Unit
+) {
+  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+
+  val leadingIconSlotView = findChildSlotView(view, "leadingIcon")
+  val trailingIconSlotView = findChildSlotView(view, "trailingIcon")
+
+  FilterChip(
+    selected = props.selected,
+    onClick = { onPress(FilterChipPressedEvent()) },
+    label = { Text(props.label) },
+    enabled = props.enabled,
+    leadingIcon = leadingIconSlotView?.let {
+      {
+        with(ComposableScope()) {
+          with(it) {
+            Content()
+          }
+        }
+      }
+    },
+    trailingIcon = trailingIconSlotView?.let {
+      {
+        with(ComposableScope()) {
+          with(it) {
+            Content()
+          }
+        }
+      }
+    },
+    colors = FilterChipDefaults.filterChipColors(),
+    border = FilterChipDefaults.filterChipBorder(enabled = props.enabled, selected = props.selected),
+    modifier = modifier
+  )
+}

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

@@ -0,0 +1,63 @@
+@file:OptIn(ExperimentalMaterial3ExpressiveApi::class)
+
+package expo.modules.ui
+
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.material3.FloatingToolbarDefaults
+import androidx.compose.material3.FloatingToolbarScrollBehavior
+import androidx.compose.material3.HorizontalFloatingToolbar
+import androidx.compose.runtime.Composable
+import expo.modules.kotlin.types.Enumerable
+import expo.modules.kotlin.views.ComposableScope
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+
+enum class HorizontalFloatingToolbarVariant(val value: String) : Enumerable {
+  STANDARD("standard"),
+  VIBRANT("vibrant")
+}
+
+data class HorizontalFloatingToolbarProps(
+  val variant: HorizontalFloatingToolbarVariant? =
+    HorizontalFloatingToolbarVariant.STANDARD,
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.HorizontalFloatingToolbarContent(props: HorizontalFloatingToolbarProps) {
+  val colors = when (props.variant) {
+    HorizontalFloatingToolbarVariant.VIBRANT -> FloatingToolbarDefaults.vibrantFloatingToolbarColors()
+    else -> FloatingToolbarDefaults.standardFloatingToolbarColors()
+  }
+
+  // Find the FAB slot and extract its onClick handler
+  val fabSlotView = findChildSlotView(view, "floatingActionButton")
+  val fabOnClick: () -> Unit = {
+    fabSlotView?.onSlotEvent?.invoke(Unit)
+  }
+
+  val floatingActionButton = @Composable {
+    when (props.variant) {
+      HorizontalFloatingToolbarVariant.VIBRANT -> FloatingToolbarDefaults.VibrantFloatingActionButton(
+        onClick = fabOnClick
+      ) {
+        Children(ComposableScope(), filter = { isSlotWithName(it, "floatingActionButton") })
+      }
+
+      else -> FloatingToolbarDefaults.StandardFloatingActionButton(onClick = fabOnClick) {
+        Children(ComposableScope(), filter = { isSlotWithName(it, "floatingActionButton") })
+      }
+    }
+  }
+
+  val scrollBehavior = composableScope.nestedScrollConnection as? FloatingToolbarScrollBehavior
+  HorizontalFloatingToolbar(
+    expanded = true,
+    colors = colors,
+    scrollBehavior = scrollBehavior,
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher),
+    floatingActionButton = floatingActionButton
+  ) {
+    Children(ComposableScope(), filter = { !isSlotView(it) })
+  }
+}

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

@@ -0,0 +1,95 @@
+package expo.modules.ui
+
+import android.annotation.SuppressLint
+import android.content.Context
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.lazy.LazyColumn
+import android.view.View
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableIntState
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.currentRecomposeScope
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.unit.dp
+import expo.modules.kotlin.AppContext
+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.ExpoComposeView
+import expo.modules.ui.convertibles.VerticalArrangement
+import expo.modules.ui.convertibles.toComposeArrangement
+
+data class ContentPadding(
+  @Field val start: Int = 0,
+  @Field val top: Int = 0,
+  @Field val end: Int = 0,
+  @Field val bottom: Int = 0
+) : Record
+
+data class LazyColumnProps(
+  val verticalArrangement: MutableState<VerticalArrangement?> = mutableStateOf(null),
+  val horizontalAlignment: MutableState<String?> = mutableStateOf(null),
+  val contentPadding: MutableState<ContentPadding?> = mutableStateOf(null),
+  val modifiers: MutableState<ModifierList> = mutableStateOf(emptyList())
+) : ComposeProps
+
+@SuppressLint("ViewConstructor")
+class LazyColumnView(context: Context, appContext: AppContext) :
+  ExpoComposeView<LazyColumnProps>(context, appContext) {
+  override val props = LazyColumnProps()
+
+  private val composableChildCount: MutableIntState = mutableIntStateOf(0)
+
+  override fun onViewAdded(child: View?) {
+    super.onViewAdded(child)
+    composableChildCount.intValue = childCount
+  }
+
+  override fun onViewRemoved(child: View?) {
+    super.onViewRemoved(child)
+    composableChildCount.intValue = childCount
+  }
+
+  @Composable
+  override fun ComposableScope.Content() {
+    recomposeScope = currentRecomposeScope
+    val verticalArrangement = props.verticalArrangement.value?.toComposeArrangement() ?: Arrangement.Top
+
+    val horizontalAlignment = when (props.horizontalAlignment.value) {
+      "start" -> Alignment.Start
+      "end" -> Alignment.End
+      "center" -> Alignment.CenterHorizontally
+      else -> Alignment.Start
+    }
+
+    val padding = props.contentPadding.value
+
+    LazyColumn(
+      modifier = ModifierRegistry.applyModifiers(props.modifiers.value, appContext, this@Content, globalEventDispatcher),
+      verticalArrangement = verticalArrangement,
+      horizontalAlignment = horizontalAlignment,
+      contentPadding = PaddingValues(
+        start = (padding?.start ?: 0).dp,
+        top = (padding?.top ?: 0).dp,
+        end = (padding?.end ?: 0).dp,
+        bottom = (padding?.bottom ?: 0).dp
+      )
+    ) {
+      val count = composableChildCount.intValue
+      for (index in 0..<count) {
+        val child = getChildAt(index) as? ExpoComposeView<*> ?: continue
+        item {
+          with(this@Content) {
+            with(child) {
+              Content()
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,89 @@
+package expo.modules.ui
+
+import android.graphics.Color
+import androidx.compose.material3.ListItem
+import androidx.compose.material3.ListItemDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+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
+
+data class ListItemColors(
+  @Field val containerColor: Color? = null,
+  @Field val headlineColor: Color? = null,
+  @Field val leadingIconColor: Color? = null,
+  @Field val trailingIconColor: Color? = null,
+  @Field val supportingColor: Color? = null,
+  @Field val overlineColor: Color? = null
+) : Record
+
+data class ListItemProps(
+  val headline: String = "",
+  val supportingText: String? = null,
+  val overlineText: String? = null,
+  val color: Color? = null,
+  val colors: ListItemColors? = null,
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.ListItemContent(props: ListItemProps) {
+  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+
+  val defaultColors = ListItemDefaults.colors()
+  val colors = ListItemDefaults.colors(
+    containerColor = props.colors?.containerColor.composeOrNull
+      ?: defaultColors.containerColor,
+    contentColor = props.colors?.headlineColor.composeOrNull
+      ?: defaultColors.contentColor,
+    leadingContentColor = props.colors?.leadingIconColor.composeOrNull
+      ?: defaultColors.leadingContentColor,
+    trailingContentColor = props.colors?.trailingIconColor.composeOrNull
+      ?: defaultColors.trailingContentColor,
+    supportingContentColor = props.colors?.supportingColor.composeOrNull
+      ?: defaultColors.supportingContentColor,
+    overlineContentColor = props.colors?.overlineColor.composeOrNull
+      ?: defaultColors.overlineContentColor
+  )
+
+  val leadingSlotView = findChildSlotView(view, "leading")
+  val trailingSlotView = findChildSlotView(view, "trailing")
+  val supportingContentSlotView = findChildSlotView(view, "supportingContent")
+
+  ListItem(
+    headlineContent = { Text(text = props.headline) },
+    modifier = modifier,
+    overlineContent = props.overlineText?.let { { Text(text = it) } },
+    supportingContent = supportingContentSlotView?.let {
+      {
+        with(ComposableScope()) {
+          with(it) {
+            Content()
+          }
+        }
+      }
+    } ?: props.supportingText?.let { { Text(text = it) } },
+    leadingContent = leadingSlotView?.let {
+      {
+        with(ComposableScope()) {
+          with(it) {
+            Content()
+          }
+        }
+      }
+    },
+    trailingContent = trailingSlotView?.let {
+      {
+        with(ComposableScope()) {
+          with(it) {
+            Content()
+          }
+        }
+      }
+    },
+    colors = colors
+  )
+}

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

@@ -0,0 +1,77 @@
+@file:OptIn(ExperimentalMaterial3ExpressiveApi::class)
+
+package expo.modules.ui
+
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.material3.MaterialShapes
+import androidx.graphics.shapes.RoundedPolygon
+import expo.modules.kotlin.types.Enumerable
+
+enum class MaterialShapeType(val value: String) : Enumerable {
+  COOKIE_4_SIDED("cookie4Sided"),
+  COOKIE_6_SIDED("cookie6Sided"),
+  COOKIE_7_SIDED("cookie7Sided"),
+  COOKIE_9_SIDED("cookie9Sided"),
+  COOKIE_12_SIDED("cookie12Sided"),
+
+  CLOVER_4_LEAF("clover4Leaf"),
+  CLOVER_8_LEAF("clover8Leaf"),
+
+  SOFT_BURST("softBurst"),
+  BOOM("boom"),
+
+  OVAL("oval"),
+  PILL("pill"),
+  TRIANGLE("triangle"),
+  DIAMOND("diamond"),
+  PENTAGON("pentagon"),
+  SUNNY("sunny"),
+  VERY_SUNNY("verySunny"),
+
+  FAN("fan"),
+
+  PIXEL_CIRCLE("pixelCircle"),
+  PIXEL_TRIANGLE("pixelTriangle"),
+
+  GHOSTISH("ghostish"),
+
+  BUN("bun"),
+
+  HEART("heart"),
+
+  ARCH("arch"),
+
+  SLANTED("slanted"),
+
+  PUFFY("puffy"),
+  PUFFY_DIAMOND("puffyDiamond");
+
+  fun toRoundedPolygon(): RoundedPolygon = when (this) {
+    COOKIE_4_SIDED -> MaterialShapes.Cookie4Sided
+    COOKIE_6_SIDED -> MaterialShapes.Cookie6Sided
+    COOKIE_7_SIDED -> MaterialShapes.Cookie7Sided
+    COOKIE_9_SIDED -> MaterialShapes.Cookie9Sided
+    COOKIE_12_SIDED -> MaterialShapes.Cookie12Sided
+    CLOVER_4_LEAF -> MaterialShapes.Clover4Leaf
+    CLOVER_8_LEAF -> MaterialShapes.Clover8Leaf
+    SOFT_BURST -> MaterialShapes.SoftBurst
+    BOOM -> MaterialShapes.Boom
+    OVAL -> MaterialShapes.Oval
+    PILL -> MaterialShapes.Pill
+    TRIANGLE -> MaterialShapes.Triangle
+    DIAMOND -> MaterialShapes.Diamond
+    PENTAGON -> MaterialShapes.Pentagon
+    SUNNY -> MaterialShapes.Sunny
+    VERY_SUNNY -> MaterialShapes.VerySunny
+    FAN -> MaterialShapes.Fan
+    PIXEL_CIRCLE -> MaterialShapes.PixelCircle
+    PIXEL_TRIANGLE -> MaterialShapes.PixelTriangle
+    GHOSTISH -> MaterialShapes.Ghostish
+    BUN -> MaterialShapes.Bun
+    HEART -> MaterialShapes.Heart
+    ARCH -> MaterialShapes.Arch
+    SLANTED -> MaterialShapes.Slanted
+    PUFFY -> MaterialShapes.Puffy
+    PUFFY_DIAMOND -> MaterialShapes.PuffyDiamond
+  }
+}