expo-widgets 58.0.1 → 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,12 @@
 
 ### 💡 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

package/android/build.gradle

@@ -6,7 +6,7 @@ plugins {
 }
 
 group = 'expo.modules.widgets'
-version = '58.0.1'
+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.1'
+    versionName '58.0.2'
 
     externalNativeBuild {
       cmake {

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

@@ -102,10 +102,10 @@ const __expoWidgetHandlePress = function (
 };
 
 Object.assign(globalThis, {
-  ...uiGlobals,
-  ...jsxRuntime,
-  ...React,
   ...ReactNative,
+  ...React,
+  ...jsxRuntime,
+  ...uiGlobals,
   React,
   __expoWidgetRender,
   __expoWidgetHandlePress,

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-widgets",
-  "version": "58.0.1",
+  "version": "58.0.2",
   "description": "Widgets.",
   "keywords": [
     "expo",
@@ -28,14 +28,14 @@
   },
   "dependencies": {
     "@expo/plist": "^0.9.0",
-    "@expo/ui": "~58.0.1"
+    "@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.1",
+    "expo": "58.0.0-preview.2",
     "expo-module-scripts": "56.0.3",
     "react-native": "0.88.0-rc.0",
     "resolve-workspace-root": "^2.0.0"
@@ -45,7 +45,7 @@
     "react": "*",
     "react-native": "*"
   },
-  "gitHead": "e4b50c311af4e076b49a532ba2dca72546783e46",
+  "gitHead": "313e67f5c9dfb16f9deca74a271cd1d4f33a6f82",
   "scripts": {
     "build": "pnpm run build:lib && pnpm run build:plugin",
     "build:lib": "expo-build src",