@expo/ui 55.0.1 → 55.0.3

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

@@ -1,119 +1,219 @@
-@file:OptIn(ExperimentalMaterial3ExpressiveApi::class)
+@file:OptIn(ExperimentalMaterial3ExpressiveApi::class, ExperimentalMaterial3Api::class)
 
 package expo.modules.ui
 
 import android.graphics.Color
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.CircularWavyProgressIndicator
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.LinearProgressIndicator
 import androidx.compose.material3.LinearWavyProgressIndicator
 import androidx.compose.material3.ProgressIndicatorDefaults
+import androidx.compose.material3.WavyProgressIndicatorDefaults
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.unit.dp
 import expo.modules.kotlin.records.Field
 import expo.modules.kotlin.records.Record
-import expo.modules.kotlin.types.Enumerable
 import expo.modules.kotlin.views.ComposeProps
 import expo.modules.kotlin.views.FunctionalComposableScope
 
-enum class ProgressVariant(val value: String) : Enumerable {
-  CIRCULAR("circular"),
-  LINEAR("linear"),
-  CIRCULAR_WAVY("circularWavy"),
-  LINEAR_WAVY("linearWavy")
-}
+// region LinearProgressIndicator
 
-class ProgressColors : Record {
-  @Field
-  val trackColor: Color? = null
+class DrawStopIndicatorConfig : Record {
+  @Field val color: Color? = null
+  @Field val strokeCap: String? = null
+  @Field val stopSize: Float? = null
 }
 
-data class ProgressProps(
-  val variant: ProgressVariant = ProgressVariant.CIRCULAR,
+data class LinearProgressIndicatorProps(
   val progress: Float? = null,
   val color: Color? = null,
-  val elementColors: ProgressColors = ProgressColors(),
+  val trackColor: Color? = null,
+  val strokeCap: String? = null,
+  val gapSize: Float? = null,
+  val drawStopIndicator: DrawStopIndicatorConfig? = null,
   val modifiers: ModifierList = emptyList()
 ) : ComposeProps
 
 @Composable
-fun FunctionalComposableScope.ProgressContent(props: ProgressProps) {
-  val progress = props.progress
-  val color = props.color
-  val colors = props.elementColors
+fun FunctionalComposableScope.LinearProgressIndicatorContent(props: LinearProgressIndicatorProps) {
   val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  val color = props.color.composeOrNull ?: ProgressIndicatorDefaults.linearColor
+  val trackColor = props.trackColor.composeOrNull ?: ProgressIndicatorDefaults.linearTrackColor
+  val strokeCap = props.strokeCap.toStrokeCap() ?: ProgressIndicatorDefaults.LinearStrokeCap
+  val gapSize = props.gapSize?.dp ?: ProgressIndicatorDefaults.LinearIndicatorTrackGapSize
 
-  when (props.variant) {
-    ProgressVariant.LINEAR -> {
-      val composeColor = color.composeOrNull ?: ProgressIndicatorDefaults.linearColor
-      val trackColor = colors.trackColor.composeOrNull ?: ProgressIndicatorDefaults.linearTrackColor
-      if (progress != null) {
-        LinearProgressIndicator(
-          progress = { progress },
-          color = composeColor,
-          trackColor = trackColor,
-          drawStopIndicator = {},
-          modifier = modifier
-        )
-      } else {
-        LinearProgressIndicator(
-          color = composeColor,
-          trackColor = trackColor,
-          modifier = modifier
-        )
-      }
-    }
-    ProgressVariant.CIRCULAR -> {
-      val composeColor = color.composeOrNull ?: ProgressIndicatorDefaults.circularColor
-      if (progress != null) {
-        CircularProgressIndicator(
-          progress = { progress },
-          color = composeColor,
-          trackColor = colors.trackColor.composeOrNull ?: ProgressIndicatorDefaults.circularDeterminateTrackColor,
-          modifier = modifier
-        )
-      } else {
-        CircularProgressIndicator(
-          color = composeColor,
-          trackColor = colors.trackColor.composeOrNull ?: ProgressIndicatorDefaults.circularIndeterminateTrackColor,
-          modifier = modifier
-        )
-      }
-    }
-    ProgressVariant.LINEAR_WAVY -> {
-      val composeColor = color.composeOrNull ?: ProgressIndicatorDefaults.linearColor
-      val trackColor = colors.trackColor.composeOrNull ?: ProgressIndicatorDefaults.linearTrackColor
-      if (progress != null) {
-        LinearWavyProgressIndicator(
-          progress = { progress },
-          color = composeColor,
-          trackColor = trackColor,
-          modifier = modifier
-        )
-      } else {
-        LinearWavyProgressIndicator(
-          color = composeColor,
-          trackColor = trackColor,
-          modifier = modifier
-        )
-      }
-    }
-    ProgressVariant.CIRCULAR_WAVY -> {
-      val composeColor = color.composeOrNull ?: ProgressIndicatorDefaults.circularColor
-      if (progress != null) {
-        CircularWavyProgressIndicator(
-          progress = { progress },
-          color = composeColor,
-          trackColor = colors.trackColor.composeOrNull ?: ProgressIndicatorDefaults.circularDeterminateTrackColor,
-          modifier = modifier
-        )
-      } else {
-        CircularWavyProgressIndicator(
-          color = composeColor,
-          trackColor = colors.trackColor.composeOrNull ?: ProgressIndicatorDefaults.circularDeterminateTrackColor,
-          modifier = modifier
-        )
-      }
+  if (props.progress != null) {
+    val stopIndicatorConfig = props.drawStopIndicator
+    if (stopIndicatorConfig != null) {
+      LinearProgressIndicator(
+        progress = { props.progress },
+        color = color,
+        trackColor = trackColor,
+        strokeCap = strokeCap,
+        gapSize = gapSize,
+        drawStopIndicator = {
+          ProgressIndicatorDefaults.drawStopIndicator(
+            drawScope = this,
+            stopSize = stopIndicatorConfig.stopSize?.dp ?: ProgressIndicatorDefaults.LinearTrackStopIndicatorSize,
+            color = stopIndicatorConfig.color.composeOrNull ?: color,
+            strokeCap = stopIndicatorConfig.strokeCap.toStrokeCap() ?: strokeCap
+          )
+        },
+        modifier = modifier
+      )
+    } else {
+      LinearProgressIndicator(
+        progress = { props.progress },
+        color = color,
+        trackColor = trackColor,
+        strokeCap = strokeCap,
+        gapSize = gapSize,
+        modifier = modifier
+      )
     }
+  } else {
+    LinearProgressIndicator(
+      color = color,
+      trackColor = trackColor,
+      strokeCap = strokeCap,
+      gapSize = gapSize,
+      modifier = modifier
+    )
+  }
+}
+
+// endregion
+
+// region CircularProgressIndicator
+
+data class CircularProgressIndicatorProps(
+  val progress: Float? = null,
+  val color: Color? = null,
+  val trackColor: Color? = null,
+  val strokeWidth: Float? = null,
+  val strokeCap: String? = null,
+  val gapSize: Float? = null,
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.CircularProgressIndicatorContent(props: CircularProgressIndicatorProps) {
+  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  val color = props.color.composeOrNull ?: ProgressIndicatorDefaults.circularColor
+  val strokeWidth = props.strokeWidth?.dp ?: ProgressIndicatorDefaults.CircularStrokeWidth
+
+  if (props.progress != null) {
+    val trackColor = props.trackColor.composeOrNull ?: ProgressIndicatorDefaults.circularDeterminateTrackColor
+    val strokeCap = props.strokeCap.toStrokeCap() ?: ProgressIndicatorDefaults.CircularDeterminateStrokeCap
+    val gapSize = props.gapSize?.dp ?: ProgressIndicatorDefaults.CircularIndicatorTrackGapSize
+
+    CircularProgressIndicator(
+      progress = { props.progress },
+      color = color,
+      trackColor = trackColor,
+      strokeWidth = strokeWidth,
+      strokeCap = strokeCap,
+      gapSize = gapSize,
+      modifier = modifier
+    )
+  } else {
+    val trackColor = props.trackColor.composeOrNull ?: ProgressIndicatorDefaults.circularIndeterminateTrackColor
+    val strokeCap = props.strokeCap.toStrokeCap() ?: ProgressIndicatorDefaults.CircularIndeterminateStrokeCap
+
+    CircularProgressIndicator(
+      color = color,
+      trackColor = trackColor,
+      strokeWidth = strokeWidth,
+      strokeCap = strokeCap,
+      modifier = modifier
+    )
+  }
+}
+
+// endregion
+
+// region LinearWavyProgressIndicator
+
+data class LinearWavyProgressIndicatorProps(
+  val progress: Float? = null,
+  val color: Color? = null,
+  val trackColor: Color? = null,
+  val stopSize: Float? = null,
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.LinearWavyProgressIndicatorContent(props: LinearWavyProgressIndicatorProps) {
+  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  val color = props.color.composeOrNull ?: WavyProgressIndicatorDefaults.indicatorColor
+  val trackColor = props.trackColor.composeOrNull ?: WavyProgressIndicatorDefaults.trackColor
+  val stopSize = props.stopSize?.dp ?: WavyProgressIndicatorDefaults.LinearTrackStopIndicatorSize
+
+  if (props.progress != null) {
+    LinearWavyProgressIndicator(
+      progress = { props.progress },
+      color = color,
+      trackColor = trackColor,
+      stopSize = stopSize,
+      modifier = modifier
+    )
+  } else {
+    LinearWavyProgressIndicator(
+      color = color,
+      trackColor = trackColor,
+      modifier = modifier
+    )
+  }
+}
+
+// endregion
+
+// region CircularWavyProgressIndicator
+
+data class CircularWavyProgressIndicatorProps(
+  val progress: Float? = null,
+  val color: Color? = null,
+  val trackColor: Color? = null,
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.CircularWavyProgressIndicatorContent(props: CircularWavyProgressIndicatorProps) {
+  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  val color = props.color.composeOrNull ?: ProgressIndicatorDefaults.circularColor
+
+  if (props.progress != null) {
+    val trackColor = props.trackColor.composeOrNull ?: ProgressIndicatorDefaults.circularDeterminateTrackColor
+
+    CircularWavyProgressIndicator(
+      progress = { props.progress },
+      color = color,
+      trackColor = trackColor,
+      modifier = modifier
+    )
+  } else {
+    val trackColor = props.trackColor.composeOrNull ?: ProgressIndicatorDefaults.circularIndeterminateTrackColor
+
+    CircularWavyProgressIndicator(
+      color = color,
+      trackColor = trackColor,
+      modifier = modifier
+    )
+  }
+}
+
+// endregion
+
+// Utility
+
+private fun String?.toStrokeCap(): StrokeCap? {
+  return when (this?.lowercase()) {
+    "round" -> StrokeCap.Round
+    "butt" -> StrokeCap.Butt
+    "square" -> StrokeCap.Square
+    else -> null
   }
 }

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

@@ -2,86 +2,240 @@ package expo.modules.ui
 
 import android.annotation.SuppressLint
 import android.content.Context
+import android.util.Log
+import android.view.MotionEvent
 import android.view.View
 import android.view.ViewGroup
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.verticalScroll
+import android.widget.FrameLayout
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.requiredSize
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.onSizeChanged
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.IntSize
 import androidx.compose.ui.viewinterop.AndroidView
-import com.facebook.react.ReactRootView
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.common.annotations.UnstableReactNativeAPI
+import com.facebook.react.config.ReactFeatureFlags
+import com.facebook.react.uimanager.JSPointerDispatcher
+import com.facebook.react.uimanager.JSTouchDispatcher
+import com.facebook.react.uimanager.RootView
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.events.EventDispatcher
 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())
+internal data class RNHostViewProps(
+  val matchContents: MutableState<Boolean?> = mutableStateOf(null)
 ) : 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
+  ExpoComposeView<RNHostViewProps>(context, appContext) {
+  companion object {
+    private const val TAG = "RNHostView"
+  }
+
+  override val props = RNHostViewProps()
+
+  private val childViewState = mutableStateOf<View?>(null)
+  private val wrapperState = mutableStateOf<TouchDispatchingRootViewGroup?>(null)
+
+  override fun addView(child: View, index: Int, params: ViewGroup.LayoutParams) {
+    childViewState.value = child
+    val wrapper = TouchDispatchingRootViewGroup(child.context).apply {
+      val reactContext = child.context as? ReactContext
+      if (reactContext != null) {
+        eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, child.id)
+      } else {
+        Log.e(TAG, "RNHostView: child context is not a ReactContext, touch events will not be dispatched to JS")
+      }
+      addView(child, FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+    }
+    wrapperState.value = wrapper
+  }
 
-  private val container = RNHostContainerView(context, WeakReference(shadowNodeProxy))
+  override fun removeView(view: View) {
+    if (view == childViewState.value) {
+      wrapperState.value?.removeView(view)
+      childViewState.value = null
+      wrapperState.value = null
+    } else {
+      super.removeView(view)
+    }
+  }
+
+  override fun removeViewAt(index: Int) {
+    childViewState.value?.let { child ->
+      wrapperState.value?.removeView(child)
+    }
+    childViewState.value = null
+    wrapperState.value = null
+  }
 
   @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)
-    )
+    val matchContents = props.matchContents.value ?: false
+
+    wrapperState.value?.let { wrapper ->
+      val childView = childViewState.value ?: return@let
+      if (matchContents) {
+        AndroidView(
+          factory = { wrapper },
+          modifier = applySizeFromYogaNodeModifier(childView)
+        )
+      } else {
+        AndroidView(
+          factory = { wrapper },
+          modifier = Modifier
+            .fillMaxSize()
+            .then(reportSizeToYogaNodeModifier())
+        )
+      }
+    }
   }
 
-  override fun addView(child: View, index: Int, params: ViewGroup.LayoutParams) {
-    container.addView(child, index, params)
+  // Sets Compose view size from Yoga node size
+  // Listens yoga node size changes and updates the Compose view size
+  @Composable
+  private fun applySizeFromYogaNodeModifier(childView: View): Modifier {
+    val density = LocalDensity.current
+
+    val childSize = remember {
+      mutableStateOf(
+        if (childView.width > 0 && childView.height > 0) IntSize(childView.width, childView.height)
+        else IntSize.Zero
+      )
+    }
+
+    DisposableEffect(childView) {
+      val listener = View.OnLayoutChangeListener { _, l, t, r, b, _, _, _, _ ->
+        childSize.value = IntSize(r - l, b - t)
+      }
+      childView.addOnLayoutChangeListener(listener)
+      onDispose { childView.removeOnLayoutChangeListener(listener) }
+    }
+
+    return with(density) {
+      if (childSize.value.width > 0 && childSize.value.height > 0) {
+        Modifier.requiredSize(
+          childSize.value.width.toDp(),
+          childSize.value.height.toDp()
+        )
+      } else {
+        Modifier
+      }
+    }
   }
 
-  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)
+  // Sets Yoga node size from Compose view size
+  // Listens Compose view size changes and updates the Yoga node size
+  @Composable
+  private fun reportSizeToYogaNodeModifier(): Modifier {
+    val density = LocalDensity.current
+    return Modifier.onSizeChanged { size ->
+      with(density) {
+        shadowNodeProxy.setViewSize(
+          size.width.toDp().value.toDouble(),
+          size.height.toDp().value.toDouble()
+        )
+      }
+    }
   }
 }
 
-internal class RNHostContainerView(context: Context, private val shadowNodeProxy: WeakReference<ShadowNodeProxy>) : ReactRootView(context) {
-  var matchContents = false
+/**
+ * A thin FrameLayout that intercepts touch events and dispatches them to JS via
+ * JSTouchDispatcher/JSPointerDispatcher, replicating the pattern from React Native's
+ * DialogRootViewGroup in ReactModalHostView.
+ */
+private class TouchDispatchingRootViewGroup(
+  context: Context
+) : FrameLayout(context), RootView {
+  private val jsTouchDispatcher = JSTouchDispatcher(this)
+  private var jsPointerDispatcher: JSPointerDispatcher? = null
+
+  var eventDispatcher: EventDispatcher? = null
+
+  private val reactContext: ThemedReactContext
+    get() = context as ThemedReactContext
+
+  init {
+    if (ReactFeatureFlags.dispatchPointerEvents) {
+      jsPointerDispatcher = JSPointerDispatcher(this)
+    }
+  }
+
+  override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+    // Always gets called with EXACTLY mode
+    // because parent has either fillMaxSize (matchContents = false) or requiredSize (matchContents = true) modifiers
+    setMeasuredDimension(
+      MeasureSpec.getSize(widthMeasureSpec),
+      MeasureSpec.getSize(heightMeasureSpec)
+    )
+  }
 
   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())
+    // No-op: don't re-layout children. Yoga calls child.layout() directly
+    // and we must not override those values.
+  }
+
+  override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
+    eventDispatcher?.let { dispatcher ->
+      jsTouchDispatcher.handleTouchEvent(event, dispatcher, reactContext)
+      jsPointerDispatcher?.handleMotionEvent(event, dispatcher, true)
+    }
+    return super.onInterceptTouchEvent(event)
+  }
+
+  @SuppressLint("ClickableViewAccessibility")
+  override fun onTouchEvent(event: MotionEvent): Boolean {
+    eventDispatcher?.let { dispatcher ->
+      jsTouchDispatcher.handleTouchEvent(event, dispatcher, reactContext)
+      jsPointerDispatcher?.handleMotionEvent(event, dispatcher, false)
     }
+    super.onTouchEvent(event)
+    return true
+  }
+
+  override fun onInterceptHoverEvent(event: MotionEvent): Boolean {
+    eventDispatcher?.let { jsPointerDispatcher?.handleMotionEvent(event, it, true) }
+    return super.onInterceptHoverEvent(event)
+  }
+
+  override fun onHoverEvent(event: MotionEvent): Boolean {
+    eventDispatcher?.let { jsPointerDispatcher?.handleMotionEvent(event, it, false) }
+    return super.onHoverEvent(event)
+  }
+
+  @OptIn(UnstableReactNativeAPI::class)
+  override fun onChildStartedNativeGesture(childView: View?, ev: MotionEvent) {
+    eventDispatcher?.let { dispatcher ->
+      jsTouchDispatcher.onChildStartedNativeGesture(ev, dispatcher, reactContext)
+      jsPointerDispatcher?.onChildStartedNativeGesture(childView, ev, dispatcher)
+    }
+  }
+
+  override fun onChildEndedNativeGesture(childView: View, ev: MotionEvent) {
+    eventDispatcher?.let { jsTouchDispatcher.onChildEndedNativeGesture(ev, it) }
+    jsPointerDispatcher?.onChildEndedNativeGesture()
+  }
+
+  override fun requestDisallowInterceptTouchEvent(disallowIntercept: Boolean) {
+    // No-op - override to still receive events in onInterceptTouchEvent
+    // even when a child view disallows interception
+  }
+
+  override fun handleException(t: Throwable) {
+    reactContext.reactApplicationContext.handleException(RuntimeException(t))
   }
 }

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

@@ -7,22 +7,18 @@ import expo.modules.kotlin.views.FunctionalComposableScope
 
 data class RadioButtonProps(
   val selected: Boolean = false,
-  val nativeClickable: Boolean = true,
+  val clickable: Boolean = true,
   val modifiers: ModifierList = emptyList()
 ) : ComposeProps
 
 @Composable
 fun FunctionalComposableScope.RadioButtonContent(
   props: RadioButtonProps,
-  onNativeClick: () -> Unit
+  onClick: (() -> Unit)?
 ) {
   RadioButton(
     selected = props.selected,
-    onClick = if (props.nativeClickable) {
-      { onNativeClick() }
-    } else {
-      null
-    },
+    onClick = onClick,
     modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
   )
 }