expo-widgets 58.0.0 → 58.0.2

package/.npmignore

@@ -17,3 +17,8 @@ __rsc_tests__
 /android/src/androidTest/
 /android/src/test/
 /ios/Tests
+
+# Exclude native build output (pnpm pack ignores nested .gitignore files)
+.cxx/
+.gradle/
+/android/build/

package/CHANGELOG.md

@@ -10,6 +10,27 @@
 
 ### 💡 Others
 
+## 58.0.2 — 2026-09-15
+
+### 🎉 New features
+
+- [Android] Add support for the `Image` component. ([#50116](https://github.com/expo/expo/pull/50116) by [@jakex7](https://github.com/jakex7))
+
+## 58.0.1 — 2026-09-14
+
+### 🎉 New features
+
+- [iOS] Add support for `Overlay`, `Background`, and `Mask` in widgets and Live Activities. ([#49810](https://github.com/expo/expo/pull/49810) by [@jakex7](https://github.com/jakex7))
+
+### 🐛 Bug fixes
+
+- [iOS] Preserve SwiftUI view identity across widget and Live Activity updates so system update animations can run. ([#49810](https://github.com/expo/expo/pull/49810) by [@jakex7](https://github.com/jakex7))
+- [Android] Fix Gradle build failure when no Android widget is configured. ([#50038](https://github.com/expo/expo/pull/50038) by [@keith-kurak](https://github.com/keith-kurak))
+
+### 💡 Others
+
+- Upgrade React Native to 0.88.0-rc.0 ([#49910](https://github.com/expo/expo/pull/49910) by [@gabrieldonadel](https://github.com/gabrieldonadel))
+
 ## 58.0.0 — 2026-09-10
 
 ### 🛠 Breaking changes

package/android/build.gradle

@@ -6,7 +6,7 @@ plugins {
 }
 
 group = 'expo.modules.widgets'
-version = '58.0.0'
+version = '58.0.2'
 
 def expoWidgetsPackageDirFile = project.projectDir.parentFile
 def expoWidgetsPackageDir = expoWidgetsPackageDirFile.absolutePath
@@ -39,7 +39,7 @@ android {
   namespace "expo.modules.widgets"
   defaultConfig {
     versionCode 1
-    versionName '58.0.0'
+    versionName '58.0.2'
 
     externalNativeBuild {
       cmake {
@@ -108,7 +108,7 @@ def generateExpoWidgetsLayoutRegistry = tasks.register("generateExpoWidgetsLayou
   inputs.file file("$expoWidgetsPackageDir/metro.config.js")
   inputs.file file("$expoWidgetsPackageDir/scripts/build-layout-registry.mjs")
   inputs.file file("$expoWidgetsPackageDir/bundle/layout-registry-entry.js")
-  inputs.file(expoWidgetsLayoutRegistryConfigFile).optional()
+  inputs.files(expoWidgetsLayoutRegistryConfigFile)
   outputs.file(expoWidgetsLayoutRegistryOutput)
 
   def command = [
@@ -143,6 +143,6 @@ dependencies {
   implementation 'com.facebook.react:react-android'
   implementation 'com.facebook.react:hermes-android'
   implementation expoModule.getExpoDependency("expo-ui")
-  api 'io.github.jakex7.peek:peek-emittables:0.2.0'
-  implementation "androidx.glance:glance:1.2.0-rc01"
+  api 'io.github.jakex7.peek:peek-emittables:0.3.0'
+  implementation "androidx.glance:glance:1.2.0"
 }

package/android/src/main/java/expo/modules/widgets/ExpoWidgetEmittableTree.kt

@@ -1,7 +1,11 @@
+@file:SuppressLint("RestrictedApi")
+
 package expo.modules.widgets
 
+import android.annotation.SuppressLint
 import android.content.Context
 import android.graphics.Color as AndroidColor
+import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -22,6 +26,8 @@ import expo.modules.ui.FillMaxHeightParams
 import expo.modules.ui.FillMaxSizeParams
 import expo.modules.ui.FillMaxWidthParams
 import expo.modules.ui.HeightParams
+import expo.modules.ui.graphics.ImageSource
+import expo.modules.ui.image.ImageContentScale
 import expo.modules.ui.LayoutProps
 import expo.modules.ui.LinearProgressIndicatorProps
 import expo.modules.ui.LoadingIndicatorProps
@@ -54,6 +60,9 @@ import expo.modules.ui.convertibles.VerticalArrangementDefault
 import androidx.compose.ui.graphics.Color
 import androidx.glance.Emittable
 import androidx.glance.EmittableButton
+import androidx.glance.EmittableImage
+import androidx.glance.ImageProvider
+import androidx.glance.TintColorFilterParams
 import androidx.glance.GlanceModifier
 import androidx.glance.action.clickable
 import androidx.glance.appwidget.CheckboxDefaults
@@ -67,6 +76,7 @@ import androidx.glance.appwidget.RadioButtonDefaults
 import androidx.glance.appwidget.SwitchDefaults
 import androidx.glance.background
 import androidx.glance.layout.Alignment
+import androidx.glance.layout.ContentScale
 import androidx.glance.layout.EmittableBox
 import androidx.glance.layout.EmittableColumn
 import androidx.glance.layout.EmittableRow
@@ -80,6 +90,8 @@ import androidx.glance.layout.size
 import androidx.glance.layout.width
 import androidx.glance.layout.wrapContentHeight
 import androidx.glance.layout.wrapContentWidth
+import androidx.glance.semantics.contentDescription
+import androidx.glance.semantics.semantics
 import androidx.glance.text.EmittableText
 import androidx.glance.text.FontStyle
 import androidx.glance.text.FontWeight
@@ -92,6 +104,7 @@ import androidx.glance.appwidget.lazy.EmittableLazyColumn
 import androidx.glance.appwidget.lazy.EmittableLazyListItem
 import androidx.glance.appwidget.lazy.ReservedItemIdRangeEnd
 import io.github.jakex7.peek.glance.determinateCircularProgressIndicatorEmittable
+import kotlin.math.roundToInt
 
 private val DefaultCheckedColor = ColorProvider(Color(0xff6750a4))
 private val DefaultUncheckedColor = ColorProvider(Color(0xff79747e))
@@ -99,13 +112,14 @@ private val DefaultCheckedTrackColor = ColorProvider(Color(0xffe8def8))
 private val DefaultUncheckedTrackColor = ColorProvider(Color(0xffe7e0ec))
 
 private class WidgetConverterContext(
-  override val applicationContext: Context
+  override val applicationContext: Context,
+  val widgetSize: DpSize
 ) : ConverterContext {
   override val runtime: Runtime? = null
 }
 
-internal fun ReadableMap.toPeekRoot(context: Context, source: String): Emittable {
-  val converterContext = WidgetConverterContext(context)
+internal fun ReadableMap.toPeekRoot(context: Context, source: String, size: DpSize): Emittable {
+  val converterContext = WidgetConverterContext(context, size)
   return EmittableColumn().also { root ->
     root.children += toPeekNodes(converterContext, source)
   }
@@ -120,12 +134,13 @@ private fun createErrorText(message: String): EmittableText {
   }
 }
 
-private fun ReadableMap.toPeekNodes(converterContext: ConverterContext, source: String): List<Emittable> {
+private fun ReadableMap.toPeekNodes(converterContext: WidgetConverterContext, source: String): List<Emittable> {
   return when (typeName()) {
     "BoxView" -> listOf(toPeekBox(converterContext, source))
     "CheckboxView" -> listOf(toPeekCheckBox(converterContext))
     "CircularProgressIndicatorView" -> listOf(toPeekCircularProgress(converterContext))
     "ColumnView" -> listOf(toPeekColumn(converterContext, source))
+    "ImageView" -> listOf(toPeekImage(converterContext))
     "LazyColumnView" -> listOf(toPeekLazyColumn(converterContext, source))
     "LinearProgressIndicatorView" -> listOf(toPeekLinearProgress(converterContext))
     "LoadingIndicatorView" -> listOf(toPeekLoadingIndicator(converterContext))
@@ -143,7 +158,7 @@ private fun ReadableMap.toPeekNodes(converterContext: ConverterContext, source:
   }
 }
 
-private fun ReadableMap.toPeekBox(converterContext: ConverterContext, source: String): EmittableBox {
+private fun ReadableMap.toPeekBox(converterContext: WidgetConverterContext, source: String): EmittableBox {
   val props = props<LayoutProps>(converterContext)
   return EmittableBox().also {
     it.modifier = props.modifiers.toPeekModifier(converterContext)
@@ -152,7 +167,7 @@ private fun ReadableMap.toPeekBox(converterContext: ConverterContext, source: St
   }
 }
 
-private fun ReadableMap.toPeekRow(converterContext: ConverterContext, source: String): EmittableRow {
+private fun ReadableMap.toPeekRow(converterContext: WidgetConverterContext, source: String): EmittableRow {
   val props = props<LayoutProps>(converterContext)
   return EmittableRow().also {
     it.modifier = props.modifiers.toPeekModifier(converterContext)
@@ -162,7 +177,7 @@ private fun ReadableMap.toPeekRow(converterContext: ConverterContext, source: St
   }
 }
 
-private fun ReadableMap.toPeekColumn(converterContext: ConverterContext, source: String): EmittableColumn {
+private fun ReadableMap.toPeekColumn(converterContext: WidgetConverterContext, source: String): EmittableColumn {
   val props = props<LayoutProps>(converterContext)
   return EmittableColumn().also {
     it.modifier = props.modifiers.toPeekModifier(converterContext)
@@ -172,7 +187,7 @@ private fun ReadableMap.toPeekColumn(converterContext: ConverterContext, source:
   }
 }
 
-private fun ReadableMap.toPeekLazyColumn(converterContext: ConverterContext, source: String): EmittableLazyColumn {
+private fun ReadableMap.toPeekLazyColumn(converterContext: WidgetConverterContext, source: String): EmittableLazyColumn {
   val props = props<LayoutProps>(converterContext)
   val alignment = props.toPeekHorizontalAlignment()
   return EmittableLazyColumn().also { lazyColumn ->
@@ -214,7 +229,68 @@ private fun ReadableMap.toPeekText(converterContext: ConverterContext): Emittabl
   }
 }
 
-private fun ReadableMap.toPeekButton(converterContext: ConverterContext, source: String): Emittable {
+private fun ReadableMap.toPeekImage(converterContext: WidgetConverterContext): Emittable {
+  val props = props<WidgetImageProps>(converterContext)
+  val source = props.source
+    ?: return createErrorText("Image has no source. Pass source={{ uri }} with a drawable resource name or a file URI.")
+  val provider = runCatching {
+    loadWidgetImage(converterContext.applicationContext, source, props.imageTarget(converterContext))
+  }.getOrElse { error ->
+    return createErrorText(error.message ?: "Image '${source.uri}' could not be loaded.")
+  }
+
+  return EmittableImage().also {
+    it.provider = provider
+    it.modifier = props.imageModifier(converterContext)
+    it.contentScale = props.contentScale.toGlanceContentScale()
+    it.colorFilterParams = props.tint.toGlanceColorProvider()?.let(::TintColorFilterParams)
+    it.alpha = props.alpha.coerceIn(0f, 1f)
+  }
+}
+
+private fun WidgetImageProps.imageModifier(converterContext: ConverterContext): GlanceModifier {
+  val modifier = modifiers.toPeekModifier(converterContext)
+  val description = contentDescription ?: return modifier
+  return modifier.semantics { contentDescription = description }
+}
+
+private fun WidgetImageProps.imageTarget(converterContext: WidgetConverterContext): WidgetImageTarget {
+  val metrics = converterContext.applicationContext.resources.displayMetrics
+  var widthDp = converterContext.widgetSize.width.value.takeIf { it.isFinite() && it > 0f }
+    ?: (metrics.widthPixels / metrics.density)
+  var heightDp = converterContext.widgetSize.height.value.takeIf { it.isFinite() && it > 0f }
+    ?: (metrics.heightPixels / metrics.density)
+
+  for (modifier in modifiers) {
+    when (modifier["\$type"]?.asString()) {
+      "size" -> modifier.asRecord<SizeParams>(converterContext)?.let {
+        widthDp = it.width.toFloat()
+        heightDp = it.height.toFloat()
+      }
+
+      "width" -> modifier.asRecord<WidthParams>(converterContext)?.let { widthDp = it.width.toFloat() }
+      "height" -> modifier.asRecord<HeightParams>(converterContext)?.let { heightDp = it.height.toFloat() }
+    }
+  }
+
+  return WidgetImageTarget(
+    widthPx = (widthDp * metrics.density).roundToInt().coerceAtLeast(1),
+    heightPx = (heightDp * metrics.density).roundToInt().coerceAtLeast(1)
+  )
+}
+
+private fun ImageContentScale.toGlanceContentScale(): ContentScale {
+  return when (this) {
+    ImageContentScale.FIT -> ContentScale.Fit
+    ImageContentScale.CROP -> ContentScale.Crop
+    ImageContentScale.FILL_BOUNDS -> ContentScale.FillBounds
+    // RemoteViews only offers fit, crop and stretch, so the remaining scales map to the nearest one.
+    ImageContentScale.INSIDE, ImageContentScale.NONE -> ContentScale.Fit
+    ImageContentScale.FILL_WIDTH, ImageContentScale.FILL_HEIGHT -> ContentScale.Crop
+  }
+}
+
+private fun ReadableMap.toPeekButton(converterContext: WidgetConverterContext, source: String): Emittable {
   val props = props<WidgetButtonProps>(converterContext)
   val children = children()
   val action =
@@ -603,3 +679,13 @@ internal data class WidgetButtonProps(
   val modifiers: ModifierList = emptyList(),
   val target: String? = null
 ) : ComposeProps
+
+@OptimizedComposeProps
+internal data class WidgetImageProps(
+  val source: ImageSource? = null,
+  val contentScale: ImageContentScale = ImageContentScale.FIT,
+  val contentDescription: String? = null,
+  val tint: AndroidColor? = null,
+  val alpha: Float = 1f,
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps

package/android/src/main/java/expo/modules/widgets/ExpoWidgetsPeekWidget.kt

@@ -1,5 +1,7 @@
+@file:SuppressLint("RestrictedApi")
 package expo.modules.widgets
 
+import android.annotation.SuppressLint
 import android.content.Context
 import android.os.Bundle
 import androidx.compose.ui.unit.DpSize
@@ -26,6 +28,6 @@ internal class ExpoWidgetsPeekWidget(
     val environment = getWidgetEnvironment(appContext)
     val node = evaluateLayout(appContext, layout, props, environment)
 
-    return node.toPeekRoot(appContext, widgetName)
+    return node.toPeekRoot(appContext, widgetName, size)
   }
 }

package/android/src/main/java/expo/modules/widgets/WidgetImageLoader.kt

@@ -0,0 +1,159 @@
+@file:SuppressLint("RestrictedApi")
+
+package expo.modules.widgets
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.graphics.Bitmap
+import android.graphics.BitmapFactory
+import android.graphics.ImageDecoder
+import android.graphics.Matrix
+import android.media.ExifInterface
+import android.net.Uri
+import android.os.Build
+import androidx.glance.ImageProvider
+import com.facebook.react.views.imagehelper.ResourceDrawableIdHelper
+import expo.modules.ui.graphics.ImageSource
+import java.io.FileNotFoundException
+import java.io.InputStream
+import kotlin.math.max
+
+internal data class WidgetImageTarget(val widthPx: Int, val heightPx: Int)
+
+// RemoteViews rejects a widget update whose bitmaps exceed its memory budget.
+private const val MAX_WIDGET_IMAGE_PIXELS = 1_048_576L
+private const val MAX_WIDGET_IMAGE_DIMENSION_PX = 2048
+
+internal fun loadWidgetImage(context: Context, source: ImageSource, target: WidgetImageTarget): ImageProvider {
+  val uri = Uri.parse(source.uri)
+  return when (uri.scheme) {
+    null -> ImageProvider(resolveDrawableId(context, source.uri))
+    "file", "content", "android.resource" -> ImageProvider(decodeBitmap(context, uri, target))
+    "http", "https" -> throw IllegalArgumentException(
+      "Remote images are not supported in widgets ('${source.uri}'). Download the image to widgetsDirectory from the app and pass its file URI."
+    )
+
+    else -> throw IllegalArgumentException(
+      "Image URI scheme '${uri.scheme}' is not supported in widgets ('${source.uri}'). Pass a drawable resource name or a file URI."
+    )
+  }
+}
+
+private fun resolveDrawableId(context: Context, name: String): Int {
+  val resourceId = ResourceDrawableIdHelper.getResourceDrawableId(context, name)
+  require(resourceId > 0) {
+    "Image resource '$name' was not found in the app's drawables. Add it to the app's res/drawable directory or pass a file URI."
+  }
+  return resourceId
+}
+
+private fun decodeBitmap(context: Context, uri: Uri, target: WidgetImageTarget): Bitmap {
+  return runCatching {
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+      ImageDecoder.decodeBitmap(ImageDecoder.createSource(context.contentResolver, uri)) { decoder, info, _ ->
+        decoder.allocator = ImageDecoder.ALLOCATOR_SOFTWARE
+        decoder.setTargetSampleSize(calculateInSampleSize(info.size.width, info.size.height, target))
+      }
+    } else {
+      decodeWithBitmapFactory(context, uri, target)
+    }
+  }.getOrElse { error ->
+    throw IllegalArgumentException(
+      if (error is FileNotFoundException) {
+        "Image '$uri' does not exist. Copy the image to widgetsDirectory before updating the widget."
+      } else {
+        "Image '$uri' could not be decoded. Widgets support bitmap formats such as PNG, JPEG and WebP."
+      },
+      error
+    )
+  }
+}
+
+private fun decodeWithBitmapFactory(context: Context, uri: Uri, target: WidgetImageTarget): Bitmap {
+  val open: () -> InputStream = {
+    context.contentResolver.openInputStream(uri) ?: throw FileNotFoundException(uri.toString())
+  }
+  val orientation = open().use { input ->
+    runCatching {
+      ExifInterface(input).getAttributeInt(ExifInterface.TAG_ORIENTATION, ExifInterface.ORIENTATION_NORMAL)
+    }.getOrDefault(ExifInterface.ORIENTATION_NORMAL)
+  }
+  val bounds = BitmapFactory.Options().apply { inJustDecodeBounds = true }
+  open().use { input -> BitmapFactory.decodeStream(input, null, bounds) }
+  require(bounds.outWidth > 0 && bounds.outHeight > 0) { "Image '$uri' has no decodable bounds." }
+
+  val swapsDimensions = orientation.swapsDimensions()
+  val options = BitmapFactory.Options().apply {
+    inSampleSize = calculateInSampleSize(
+      sourceWidth = if (swapsDimensions) {
+        bounds.outHeight
+      } else {
+        bounds.outWidth
+      },
+      sourceHeight = if (swapsDimensions) {
+        bounds.outWidth
+      } else {
+        bounds.outHeight
+      },
+      target = target
+    )
+  }
+  val bitmap = requireNotNull(open().use { input -> BitmapFactory.decodeStream(input, null, options) }) {
+    "Image '$uri' could not be decoded."
+  }
+  return bitmap.applyExifOrientation(orientation)
+}
+
+private fun calculateInSampleSize(sourceWidth: Int, sourceHeight: Int, target: WidgetImageTarget): Int {
+  val targetWidth = target.widthPx.coerceAtLeast(1)
+  val targetHeight = target.heightPx.coerceAtLeast(1)
+  var sampleSize = 1
+  while (sourceWidth / (sampleSize * 2) >= targetWidth && sourceHeight / (sampleSize * 2) >= targetHeight) {
+    sampleSize *= 2
+  }
+  while (
+    (sourceWidth.toLong() / sampleSize) * (sourceHeight.toLong() / sampleSize) > MAX_WIDGET_IMAGE_PIXELS ||
+    max(sourceWidth, sourceHeight) / sampleSize > MAX_WIDGET_IMAGE_DIMENSION_PX
+  ) {
+    sampleSize *= 2
+  }
+  return sampleSize
+}
+
+private fun Bitmap.applyExifOrientation(orientation: Int): Bitmap {
+  val matrix = Matrix()
+  when (orientation) {
+    ExifInterface.ORIENTATION_FLIP_HORIZONTAL -> matrix.setScale(-1f, 1f)
+    ExifInterface.ORIENTATION_ROTATE_180 -> matrix.setRotate(180f)
+    ExifInterface.ORIENTATION_FLIP_VERTICAL -> {
+      matrix.setRotate(180f)
+      matrix.postScale(-1f, 1f)
+    }
+
+    ExifInterface.ORIENTATION_TRANSPOSE -> {
+      matrix.setRotate(90f)
+      matrix.postScale(-1f, 1f)
+    }
+
+    ExifInterface.ORIENTATION_ROTATE_90 -> matrix.setRotate(90f)
+    ExifInterface.ORIENTATION_TRANSVERSE -> {
+      matrix.setRotate(-90f)
+      matrix.postScale(-1f, 1f)
+    }
+
+    ExifInterface.ORIENTATION_ROTATE_270 -> matrix.setRotate(-90f)
+    else -> return this
+  }
+  return Bitmap.createBitmap(this, 0, 0, width, height, matrix, true).also { oriented ->
+    if (oriented !== this) {
+      recycle()
+    }
+  }
+}
+
+private fun Int.swapsDimensions(): Boolean {
+  return this == ExifInterface.ORIENTATION_TRANSPOSE ||
+    this == ExifInterface.ORIENTATION_ROTATE_90 ||
+    this == ExifInterface.ORIENTATION_TRANSVERSE ||
+    this == ExifInterface.ORIENTATION_ROTATE_270
+}

package/bundle/index.ts

@@ -18,6 +18,44 @@ declare global {
   var __expoWidgetEnvironment: Dictionary | undefined;
 }
 
+/**
+ * Resolve components at the render boundary so parents can inspect their JSX children.
+ * Identity is the native type plus the outermost explicit key, or flattened sibling index.
+ * Keys must be unique among flattened siblings; dynamic lists should provide explicit keys.
+ */
+function normalizeWidgetTree(node: unknown, position: string | number = 0): unknown {
+  let key: string | null = null;
+  while (React.isValidElement(node) && typeof node.type === 'function') {
+    key ??= node.key;
+    const rendered = node.type(node.props);
+    node = Array.isArray(rendered)
+      ? jsxRuntime.jsx(React.Fragment, { children: rendered })
+      : rendered;
+  }
+
+  if (Array.isArray(node)) {
+    return node.flat(Infinity).map((child, index) => normalizeWidgetTree(child, index));
+  }
+  if (React.isValidElement(node)) {
+    const props = { ...node.props };
+    if ('children' in props) {
+      props.children = normalizeWidgetTree(props.children);
+    }
+    return {
+      ...node,
+      props,
+      __expoWidgetIdentity: JSON.stringify([node.type, key ?? node.key ?? position]),
+    };
+  }
+  if (node && typeof node === 'object') {
+    // Live Activity layouts return a map of section names to roots.
+    return Object.fromEntries(
+      Object.entries(node).map(([section, child]) => [section, normalizeWidgetTree(child, section)])
+    );
+  }
+  return node;
+}
+
 const __expoWidgetRender = function (props: Dictionary, environment: Dictionary) {
   // `materialColors` backs the native expo-ui module stub and stays out of the layout environment.
   const { timestamp, materialColors, ...rest } = environment;
@@ -27,7 +65,9 @@ const __expoWidgetRender = function (props: Dictionary, environment: Dictionary)
   }
   globalThis.__expoWidgetEnvironment = { ...decoratedEnvironment, materialColors };
 
-  return decorateInteractiveTargets(globalThis.__expoWidgetLayout(props, decoratedEnvironment));
+  return decorateInteractiveTargets(
+    normalizeWidgetTree(globalThis.__expoWidgetLayout(props, decoratedEnvironment))
+  );
 };
 
 const __expoWidgetHandlePress = function (
@@ -62,10 +102,10 @@ const __expoWidgetHandlePress = function (
 };
 
 Object.assign(globalThis, {
-  ...uiGlobals,
-  ...jsxRuntime,
-  ...React,
   ...ReactNative,
+  ...React,
+  ...jsxRuntime,
+  ...uiGlobals,
   React,
   __expoWidgetRender,
   __expoWidgetHandlePress,

package/bundle/jsx-runtime-stub.ts

@@ -4,63 +4,16 @@ export type ReactElementNode = {
   type: unknown;
   key: string | null;
   props: Record<string, any>;
+  __expoWidgetIdentity?: string;
 };
 
-function ReactElement(
-  type: unknown,
-  key: string | null,
-  props: Record<string, any>
-): ReactElementNode {
-  if (typeof type === 'function') {
-    return (type as any)(props);
-  }
-
-  const element = {
-    type,
-    key,
-    props,
-  };
-
-  return element;
-}
-
 function jsxProd(
   type: unknown,
   config: any,
   maybeKey?: string | number | bigint
 ): ReactElementNode {
-  let key = null;
-  if (maybeKey !== undefined) {
-    key = '' + maybeKey;
-  }
-  if (hasValidKey(config)) {
-    key = '' + config.key;
-  }
-
-  let props: Record<string, any>;
-  if (!('key' in config)) {
-    props = config;
-  } else {
-    props = {};
-    for (const propName in config) {
-      if (propName !== 'key') {
-        props[propName] = config[propName];
-      }
-    }
-  }
-
-  // React flattens nested children arrays (e.g. a `.map()` result mixed with sibling
-  // elements) during reconciliation. There is no reconciler here - the element tree is
-  // serialized for the native widget parsers, which expect a flat children list.
-  if (Array.isArray(props.children)) {
-    props.children = props.children.flat(Infinity);
-  }
-
-  return ReactElement(type, key, props);
-}
-
-function hasValidKey(config: any) {
-  return config.key !== undefined;
+  const { key = maybeKey, ...props } = config;
+  return { type, key: key === undefined ? null : String(key), props };
 }
 
 const jsxFileName = 'widget';

package/bundle/react-native-stub.ts

@@ -2,10 +2,30 @@ export const PlatformColor = (...names: string[]) => {
   return { semantic: names };
 };
 
-export const Image = {
-  resolveAssetSource: {},
+type ResolvedImageSource = {
+  uri: string;
+  width?: number;
+  height?: number;
+  scale?: number;
 };
 
+function resolveAssetSource(source: unknown): ResolvedImageSource | null {
+  if (source == null) {
+    return null;
+  }
+  if (typeof source === 'object' && typeof (source as ResolvedImageSource).uri === 'string') {
+    return source as ResolvedImageSource;
+  }
+  if (typeof source === 'number') {
+    throw new Error(
+      'Bundled require() image sources are not supported inside widgets. Copy the image to widgetsDirectory and pass source={{ uri }} instead.'
+    );
+  }
+  throw new Error('Widget Image source must be an object containing a uri string.');
+}
+
+export const Image = { resolveAssetSource };
+
 export const useColorScheme = (): 'light' | 'dark' | null => {
   return (globalThis.__expoWidgetEnvironment?.colorScheme as 'light' | 'dark' | undefined) ?? null;
 };

package/bundle/react-stub.ts

@@ -1,15 +1,17 @@
+import type { ReactElementNode } from './jsx-runtime-stub';
+
 export const Fragment = 'react.fragment';
 
 export const Children = {
   toArray(children: unknown) {
-    if (children === undefined || children === null) {
-      return [];
-    }
-    return Array.isArray(children) ? children : [children];
+    return [children]
+      .flat(Infinity)
+      .filter((child) => child !== undefined && child !== null && typeof child !== 'boolean');
   },
 };
-export const isValidElement = (value: unknown) => {
-  return Boolean(value) && typeof value === 'object' && 'type' in (value as object);
+
+export const isValidElement = (value: unknown): value is ReactElementNode => {
+  return value !== null && typeof value === 'object' && 'type' in value && 'props' in value;
 };
 
 // TODO(@jakex7): Make this a proper React reconciler in the future. For now, we just need a stub to allow the widget bundle to compile with @expo/ui/jetpack-compose.

package/expo-module.config.json

@@ -9,7 +9,7 @@
       {
         "id": "io.github.jakex7.peek.glance-fork",
         "group": "io.github.jakex7.peek",
-        "version": "0.2.0"
+        "version": "0.3.0"
       }
     ]
   }

package/ios/Widgets/ChildView.swift

@@ -0,0 +1,31 @@
+import SwiftUI
+import ExpoModulesCore
+
+private final class FallbackIdentity {}
+
+struct WidgetsChildView<Content: View>: ExpoSwiftUI.StringIdentityChild {
+  let childView: Content
+  let stringIdentity: String?
+  private let fallbackIdentity: FallbackIdentity?
+
+  init(childView: Content, stringIdentity: String?) {
+    self.childView = childView
+    self.stringIdentity = stringIdentity
+    fallbackIdentity = stringIdentity == nil ? FallbackIdentity() : nil
+  }
+
+  var id: ObjectIdentifier {
+    guard let fallbackIdentity else {
+      preconditionFailure("Keyed widget children must use childIdentity")
+    }
+    return ObjectIdentifier(fallbackIdentity)
+  }
+
+  var uiView: UIView? {
+    nil
+  }
+
+  var body: some View {
+    childView
+  }
+}

package/ios/Widgets/DynamicView.swift

@@ -1,183 +1,26 @@
 import SwiftUI
 import ExpoModulesCore
-import ExpoUI
 
-// TODO(@jakex7): Hack to satisfy ExpoSwiftUI.AnyChild with random UUID value
-class NodeIdentityWrapper {
-  let id: UUID
-  init(id: UUID) {
-    self.id = id
-  }
-}
-extension ObjectIdentifier: @retroactive Encodable {
-  public func encode(to encoder: Encoder) throws {
-    var container = encoder.singleValueContainer()
-    try container.encode(String(describing: self))
-  }
-}
-
-public struct WidgetsDynamicView: View, ExpoSwiftUI.AnyChild {
-  let node: [String: Any]
-  let name: String
-  let kind: WidgetsKind
-  let entryIndex: Int?
-  let environmentString: String?
-
-  let uuid = NodeIdentityWrapper(id: UUID())
-  public var id: ObjectIdentifier {
-    ObjectIdentifier(uuid)
-  }
+public struct WidgetsDynamicView: View {
+  private let child: any ExpoSwiftUI.AnyChild
 
   public init(name: String, kind: WidgetsKind, node: [String: Any]) {
-    self.name = name
-    self.kind = kind
-    self.node = node
-    self.entryIndex = nil
-    self.environmentString = nil
+    self.init(name: name, kind: kind, node: node, entryIndex: nil, environmentString: nil)
   }
 
   public init(name: String, kind: WidgetsKind, node: [String: Any], entryIndex: Int?, environmentString: String?) {
-    self.name = name
-    self.kind = kind
-    self.node = node
-    self.entryIndex = entryIndex
-    self.environmentString = environmentString
+    child = WidgetsViewRenderer(
+      name: name,
+      kind: kind,
+      node: node,
+      entryIndex: entryIndex,
+      environmentString: environmentString
+    ).render()
   }
 
-  @ViewBuilder
   public var body: some View {
-    switch node["type"] as? String {
-    case "TextView":
-      // TextView applies common modifiers internally so concatenated text keeps
-      // its SwiftUI.Text representation. Avoid applying those modifiers again.
-      render(TextView.self, TextViewProps.self, updateProps: updateChildren, wrapInUIBaseView: false)
-    case "HStackView":
-      render(HStackView.self, HStackViewProps.self, updateProps: updateChildren)
-    case "VStackView":
-      render(VStackView.self, VStackViewProps.self, updateProps: updateChildren)
-    case "ZStackView":
-      render(ZStackView.self, ZStackViewProps.self, updateProps: updateChildren)
-    case "RectangleView":
-      render(RectangleView.self, RectangleViewProps.self)
-    case "RoundedRectangleView":
-      render(RoundedRectangleView.self, RoundedRectangleViewProps.self)
-    case "CapsuleView":
-      render(CapsuleView.self, CapsuleViewProps.self)
-    case "CircleView":
-      render(CircleView.self, CircleViewProps.self)
-    case "ImageView":
-      render(ImageView.self, ImageViewProps.self)
-    case "AccessoryWidgetBackgroundView":
-      render(AccessoryWidgetBackgroundView.self, AccessoryWidgetBackgroundProps.self)
-    case "DividerView":
-      render(DividerView.self, DividerProps.self)
-    case "EllipseView":
-      render(EllipseView.self, EllipseViewProps.self)
-    case "LabelView":
-      render(LabelView.self, LabelViewProps.self)
-    case "ProgressView":
-      render(ProgressView.self, ProgressViewProps.self)
-    case "SpacerView":
-      render(SpacerView.self, SpacerViewProps.self)
-    case "UnevenRoundedRectangleView":
-      render(UnevenRoundedRectangleView.self, UnevenRoundedRectangleViewProps.self)
-    case "GaugeView":
-      render(GaugeView.self, GaugeProps.self)
-    case "ChartView":
-      render(ChartView.self, ChartProps.self)
-    case "Button":
-      if #available(iOS 17.0, *) {
-        switch kind {
-        case .widget:
-          render(WidgetButtonView.self, ButtonProps.self) { buttonProps in
-            try updateChildren(buttonProps)
-            buttonProps.source = name
-            buttonProps.entryIndex = entryIndex
-            buttonProps.environmentString = environmentString
-          }
-        case .liveActivity:
-          render(LiveActivityButtonView.self, ButtonProps.self) { buttonProps in
-            try updateChildren(buttonProps)
-            buttonProps.source = name
-          }
-        }
-      } else {
-        render(ExpoUI.Button.self, ExpoUI.ButtonProps.self, updateProps: updateChildren)
-      }
-    case "react.fragment":
-      render(FragmentView.self, FragmentProps.self, updateProps: updateChildren)
-    case "LinkView":
-      render(LinkView.self, LinkViewProps.self, updateProps: updateChildren)
-#if DEBUG
-    case "RedBoxView":
-      render(RedBoxView.self, RedBoxViewProps.self) { redBoxProps in
-        redBoxProps.source = name
-        redBoxProps.kind = kind
-      }
-    default:
-      ZStack {
-        Color.red.opacity(0.5)
-        Text("Unable to get the view for: \(node["type"] as? String ?? "undefined")")
-      }
-#else
-    default:
-      EmptyView()
-#endif
-    }
-  }
-
-  // MARK: - Render Method
-
-  @ViewBuilder
-  private func render<P, V>(
-    _ viewType: V.Type,
-    _ propsType: P.Type,
-    updateProps: ((_ initialProps: P) throws -> Void)? = nil,
-    wrapInUIBaseView: Bool = true
-  ) -> some View
-  where P: UIBaseViewProps, V: ExpoSwiftUI.View, V.Props == P {
-    // immediately invoked closure {}() here because we can't use 'do-catch' inside @ViewBuilder
-    {
-      do {
-        if let rawProps = node["props"] as? [String: Any] {
-          let props = try propsType.init(rawProps: rawProps, context: WidgetsContext.shared.context)
-          try updateProps?(props)
-          // TODO(@jakex7): Prevent unwanted transition when view is updated with new props - we want to have the same view instance recreated with new props instead of creating a new view instance and transitioning to it
-          if wrapInUIBaseView {
-            return AnyView(UIBaseView<P, V>(props: props).transition(.identity))
-          }
-          return AnyView(V(props: props).transition(.identity))
-        }
-        return AnyView(EmptyView())
-      } catch {
-        return AnyView(EmptyView())
-      }
-    }()
-  }
-
-  // MARK: - Function that sets children as DynamicView
-
-  private func updateChildren<P>(_ initialProps: P) throws
-  where P: UIBaseViewProps {
-    if let props = node["props"] as? [String: Any] {
-      if let children = props["children"] as? [Any] {
-        let validChildren = flattenChildNodes(children)
-        initialProps.children = validChildren.map { WidgetsDynamicView(name: name, kind: kind, node: $0, entryIndex: entryIndex, environmentString: environmentString) }
-      } else if let child = props["children"] as? [String: Any] {
-        initialProps.children = [WidgetsDynamicView(name: name, kind: kind, node: child, entryIndex: entryIndex, environmentString: environmentString)]
-      }
-    }
-  }
-
-  private func flattenChildNodes(_ children: [Any]) -> [[String: Any]] {
-    return children.flatMap { child -> [[String: Any]] in
-      if let node = child as? [String: Any] {
-        return [node]
-      }
-      if let nested = child as? [Any] {
-        return flattenChildNodes(nested)
-      }
-      return []
-    }
+    // Roots are not inside Children()'s ForEach, so consume their identity here as well.
+    let view: any View = child.childView
+    AnyView(view).id(child.childIdentity)
   }
 }

package/ios/Widgets/ViewRenderer.swift

@@ -0,0 +1,167 @@
+import SwiftUI
+import ExpoModulesCore
+import ExpoUI
+
+@MainActor
+struct WidgetsViewRenderer {
+  let name: String
+  let kind: WidgetsKind
+  let node: [String: Any]
+  let entryIndex: Int?
+  let environmentString: String?
+
+  func render() -> any ExpoSwiftUI.AnyChild {
+    switch node["type"] as? String {
+    case "TextView":
+      // TextView applies common modifiers internally so concatenated text keeps
+      // its SwiftUI.Text representation. Avoid applying those modifiers again.
+      return render(TextView.self, TextViewProps.self, updateProps: updateChildren)
+    case "SlotView":
+      return render(SlotView.self, SlotViewProps.self, updateProps: updateChildren)
+    case "HStackView":
+      return renderWithModifiers(HStackView.self, HStackViewProps.self, updateProps: updateChildren)
+    case "VStackView":
+      return renderWithModifiers(VStackView.self, VStackViewProps.self, updateProps: updateChildren)
+    case "ZStackView":
+      return renderWithModifiers(ZStackView.self, ZStackViewProps.self, updateProps: updateChildren)
+    case "OverlayView":
+      return renderWithModifiers(OverlayView.self, OverlayViewProps.self, updateProps: updateChildren)
+    case "BackgroundView":
+      return renderWithModifiers(BackgroundView.self, BackgroundViewProps.self, updateProps: updateChildren)
+    case "MaskView":
+      return renderWithModifiers(MaskView.self, MaskViewProps.self, updateProps: updateChildren)
+    case "RectangleView":
+      return renderWithModifiers(RectangleView.self, RectangleViewProps.self)
+    case "RoundedRectangleView":
+      return renderWithModifiers(RoundedRectangleView.self, RoundedRectangleViewProps.self)
+    case "CapsuleView":
+      return renderWithModifiers(CapsuleView.self, CapsuleViewProps.self)
+    case "CircleView":
+      return renderWithModifiers(CircleView.self, CircleViewProps.self)
+    case "ImageView":
+      return renderWithModifiers(ImageView.self, ImageViewProps.self)
+    case "AccessoryWidgetBackgroundView":
+      return renderWithModifiers(AccessoryWidgetBackgroundView.self, AccessoryWidgetBackgroundProps.self)
+    case "DividerView":
+      return renderWithModifiers(DividerView.self, DividerProps.self)
+    case "EllipseView":
+      return renderWithModifiers(EllipseView.self, EllipseViewProps.self)
+    case "LabelView":
+      return renderWithModifiers(LabelView.self, LabelViewProps.self)
+    case "ProgressView":
+      return renderWithModifiers(ProgressView.self, ProgressViewProps.self)
+    case "SpacerView":
+      return renderWithModifiers(SpacerView.self, SpacerViewProps.self)
+    case "UnevenRoundedRectangleView":
+      return renderWithModifiers(UnevenRoundedRectangleView.self, UnevenRoundedRectangleViewProps.self)
+    case "GaugeView":
+      return renderWithModifiers(GaugeView.self, GaugeProps.self)
+    case "ChartView":
+      return renderWithModifiers(ChartView.self, ChartProps.self)
+    case "Button":
+      if #available(iOS 17.0, *) {
+        switch kind {
+        case .widget:
+          return renderWithModifiers(WidgetButtonView.self, ButtonProps.self) { buttonProps in
+            try updateChildren(buttonProps)
+            buttonProps.source = name
+            buttonProps.entryIndex = entryIndex
+            buttonProps.environmentString = environmentString
+          }
+        case .liveActivity:
+          return renderWithModifiers(LiveActivityButtonView.self, ButtonProps.self) { buttonProps in
+            try updateChildren(buttonProps)
+            buttonProps.source = name
+          }
+        }
+      } else {
+        return renderWithModifiers(ExpoUI.Button.self, ExpoUI.ButtonProps.self, updateProps: updateChildren)
+      }
+    case "react.fragment":
+      return renderWithModifiers(FragmentView.self, FragmentProps.self, updateProps: updateChildren)
+    case "LinkView":
+      return renderWithModifiers(LinkView.self, LinkViewProps.self, updateProps: updateChildren)
+#if DEBUG
+    case "RedBoxView":
+      return renderWithModifiers(RedBoxView.self, RedBoxViewProps.self) { redBoxProps in
+        redBoxProps.source = name
+        redBoxProps.kind = kind
+      }
+    default:
+      return makeChild(
+        ZStack {
+          Color.red.opacity(0.5)
+          Text("Unable to get the view for: \(node["type"] as? String ?? "undefined")")
+        }
+      )
+#else
+    default:
+      return makeChild(EmptyView())
+#endif
+    }
+  }
+
+  // MARK: - Render Method
+
+  private func renderWithModifiers<P, V>(
+    _ viewType: V.Type,
+    _ propsType: P.Type,
+    updateProps: ((_ initialProps: P) throws -> Void)? = nil
+  ) -> any ExpoSwiftUI.AnyChild
+  where P: UIBaseViewProps, V: ExpoSwiftUI.View, V.Props == P {
+    render(UIBaseView<P, V>.self, propsType, updateProps: updateProps)
+  }
+
+  private func render<P, V>(
+    _ viewType: V.Type,
+    _ propsType: P.Type,
+    updateProps: ((_ initialProps: P) throws -> Void)? = nil
+  ) -> any ExpoSwiftUI.AnyChild
+  where P: ExpoSwiftUI.ViewProps, V: ExpoSwiftUI.View, V.Props == P {
+    do {
+      guard let rawProps = node["props"] as? [String: Any] else {
+        return makeChild(EmptyView())
+      }
+      let props = try propsType.init(rawProps: rawProps, context: WidgetsContext.shared.context)
+      try updateProps?(props)
+      return makeChild(V(props: props))
+    } catch {
+      return makeChild(EmptyView())
+    }
+  }
+
+  // MARK: - Child Views
+
+  private func updateChildren<P>(_ initialProps: P) throws
+  where P: ExpoSwiftUI.ViewProps {
+    if let props = node["props"] as? [String: Any] {
+      if let children = props["children"] as? [Any] {
+        let validChildren = flattenChildNodes(children)
+        initialProps.children = validChildren.map {
+          WidgetsViewRenderer(name: name, kind: kind, node: $0, entryIndex: entryIndex, environmentString: environmentString).render()
+        }
+      } else if let child = props["children"] as? [String: Any] {
+        initialProps.children = [
+          WidgetsViewRenderer(name: name, kind: kind, node: child, entryIndex: entryIndex, environmentString: environmentString).render()
+        ]
+      }
+    }
+  }
+
+  private func makeChild<Content: View>(_ view: Content) -> any ExpoSwiftUI.AnyChild {
+    // Preserve the native view type for ExpoUI's slot and text inspection.
+    WidgetsChildView(childView: view, stringIdentity: node["__expoWidgetIdentity"] as? String)
+  }
+
+  private func flattenChildNodes(_ children: [Any]) -> [[String: Any]] {
+    return children.flatMap { child -> [[String: Any]] in
+      if let node = child as? [String: Any] {
+        return [node]
+      }
+      if let nested = child as? [Any] {
+        return flattenChildNodes(nested)
+      }
+      return []
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-widgets",
-  "version": "58.0.0",
+  "version": "58.0.2",
   "description": "Widgets.",
   "keywords": [
     "expo",
@@ -28,16 +28,16 @@
   },
   "dependencies": {
     "@expo/plist": "^0.9.0",
-    "@expo/ui": "~58.0.0"
+    "@expo/ui": "~58.0.2"
   },
   "devDependencies": {
     "@expo/spawn-async": "^1.8.0",
     "@types/jest": "^29.2.1",
     "@types/node": "^22.14.0",
     "@types/react": "~19.2.0",
-    "expo": "58.0.0-preview.0",
+    "expo": "58.0.0-preview.2",
     "expo-module-scripts": "56.0.3",
-    "react-native": "0.87.1",
+    "react-native": "0.88.0-rc.0",
     "resolve-workspace-root": "^2.0.0"
   },
   "peerDependencies": {
@@ -45,7 +45,7 @@
     "react": "*",
     "react-native": "*"
   },
-  "gitHead": "c543a7181fc32e14f42d89550087b80ac5c490f2",
+  "gitHead": "313e67f5c9dfb16f9deca74a271cd1d4f33a6f82",
   "scripts": {
     "build": "pnpm run build:lib && pnpm run build:plugin",
     "build:lib": "expo-build src",