@expo/ui 57.0.10 → 57.0.12

package/CHANGELOG.md

@@ -10,6 +10,34 @@
 
 ### 💡 Others
 
+## 57.0.12 — 2026-08-20
+
+### 🎉 New features
+
+- [iOS] Added `'default'` as a value for every edge of the `padding` modifier, so a single edge can use the system default padding while the other edges use explicit lengths. ([#48903](https://github.com/expo/expo/pull/48903) by [@Den1Marshall](https://github.com/Den1Marshall))
+- [android] Add `shouldDismissOnBackPress` prop to the universal `BottomSheet` component, forwarding it to `ModalBottomSheet` via `properties.shouldDismissOnBackPress`. When false, the back press does not dismiss the sheet (and the press still does not reach BackHandler). ([#48987](https://github.com/expo/expo/pull/48987) by [@webdevsamran](https://github.com/webdevsamran))
+- [universal] Added a `contentPadding` prop to `BottomSheet`, so sheet content can reach the sheet's edges instead of always sitting inside a hardcoded 16-unit inset. ([#48902](https://github.com/expo/expo/issues/48902) by [@kilarsky](https://github.com/kilarsky))
+
+### 🐛 Bug fixes
+
+- [Android] Preserve vector drawable `fillType` values when loading images so even-odd paths render correctly. ([#49049](https://github.com/expo/expo/pull/49049) by [@aonan-brex](https://github.com/aonan-brex))
+- [iOS] Fixed `Overlay`, `Alert`, `ConfirmationDialog` and `Popover` silently ignoring the `modifiers` prop, which never reached the native view. ([#48949](https://github.com/expo/expo/pull/48949) by [@Den1Marshall](https://github.com/Den1Marshall))
+- [iOS] Fix `Slider` ignoring `value` prop updates after the first drag. ([#49075](https://github.com/expo/expo/issues/49075) by [@matinzd](https://github.com/matinzd)) ([#49139](https://github.com/expo/expo/pull/49139) by [@nishan](https://github.com/intergalacticspacehighway))
+- [iOS] Fix `Toggle` rendering local state instead of `isOn`, which left `community/menu` checkmarks out of sync and dropped every second `onPressAction`. `Toggle` is now fully controlled: when `isOn` is set, it only moves once JS updates the prop. ([#48982](https://github.com/expo/expo/issues/48982) by [@JustJoostNL](https://github.com/JustJoostNL)) ([#49021](https://github.com/expo/expo/pull/49021) by [@intergalacticspacehighway](https://github.com/intergalacticspacehighway))
+
+## 57.0.11 — 2026-08-14
+
+### 🎉 New features
+
+- [iOS] Added `menuStyle` and `menuIndicator` SwiftUI modifiers, which together with `buttonStyle('plain')` keep a `Menu`'s custom label as its entire trigger on Mac Catalyst. ([#48447](https://github.com/expo/expo/issues/48447) by [@cvburgess](https://github.com/cvburgess)) ([#48448](https://github.com/expo/expo/pull/48448) by [@cvburgess](https://github.com/cvburgess))
+- [iOS] Added the `listRowSeparatorTint` modifier, so a list row separator can be recolored and not only shown or hidden. ([#48804](https://github.com/expo/expo/issues/48804) by [@marco242424](https://github.com/marco242424)) ([#48810](https://github.com/expo/expo/pull/48810) by [@expo-bot](https://github.com/expo-bot))
+- [iOS] Added the `geometryGroup` modifier, so a view's subviews can resolve their geometry against it instead of an animating ancestor. Without it, a `Button` inside a container with an `animation` modifier can draw its label away from its own background while the animation runs. ([#48838](https://github.com/expo/expo/pull/48838) by [@intergalacticspacehighway](https://github.com/intergalacticspacehighway))
+- [Android] Add a Jetpack Compose `Image` component. ([#48521](https://github.com/expo/expo/pull/48521) by [@jakex7](https://github.com/jakex7))
+
+### 🐛 Bug fixes
+
+- [universal] Fix `Cannot use shared object that was already released` when a worklet callback prop closes over an unstable value. ([#48819](https://github.com/expo/expo/pull/48819) by [@intergalacticspacehighway](https://github.com/intergalacticspacehighway))
+
 ## 57.0.10 — 2026-08-10
 
 ### 🎉 New features

package/android/build.gradle

@@ -12,13 +12,13 @@ apply plugin: 'expo-module-gradle-plugin'
 apply plugin: 'org.jetbrains.kotlin.plugin.compose'
 
 group = 'expo.modules.ui'
-version = '57.0.10'
+version = '57.0.12'
 
 android {
   namespace "expo.modules.ui"
   defaultConfig {
     versionCode 1
-    versionName "57.0.10"
+    versionName "57.0.12"
     testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
   }
   buildFeatures {

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

@@ -28,7 +28,9 @@ import expo.modules.ui.button.IconButtonContent
 import expo.modules.ui.button.FilledIconButtonContent
 import expo.modules.ui.button.FilledTonalIconButtonContent
 import expo.modules.ui.button.OutlinedIconButtonContent
+import expo.modules.ui.graphics.ImageLoader
 import expo.modules.ui.icon.IconView
+import expo.modules.ui.image.ImageView
 import expo.modules.ui.menu.DropdownMenuContent
 import expo.modules.ui.menu.DropdownMenuProps
 import expo.modules.ui.menu.DropdownMenuItemContent
@@ -55,15 +57,23 @@ import okhttp3.OkHttpClient
 class ExpoUIModule : Module() {
   var okHttpClient: OkHttpClient? = null
     private set
+  var imageLoader: ImageLoader? = null
+    private set
 
   override fun definition() = ModuleDefinition {
     Name("ExpoUI")
 
     OnCreate {
-      okHttpClient = OkHttpClient.Builder().build()
+      val context = requireNotNull(appContext.reactContext) {
+        "ExpoUIModule requires an active React context"
+      }
+      okHttpClient = appContext.createOkHttpClientBuilder().build()
+      imageLoader = ImageLoader(context, requireNotNull(okHttpClient))
     }
 
     OnDestroy {
+      imageLoader?.close()
+      imageLoader = null
       okHttpClient?.dispatcher?.executorService?.shutdown()
       okHttpClient?.connectionPool?.evictAll()
       okHttpClient?.cache?.close()
@@ -79,6 +89,13 @@ class ExpoUIModule : Module() {
         callback
       }
 
+      Function("setWorklet") { callback: WorkletCallback, worklet: Worklet ->
+        // Dispatch on main thread as callback is read on the main thread
+        appContext.mainQueue.launch {
+          callback.worklet = worklet
+        }
+      }
+
       Property("__expo_ui_shared_object__") { _: WorkletCallback ->
         true
       }
@@ -167,6 +184,9 @@ class ExpoUIModule : Module() {
     View(InnerTextFieldView::class)
     View(PlaceholderView::class)
     View(IconView::class)
+    View(ImageView::class) {
+      Events("onLoad", "onError")
+    }
     View(LazyColumnView::class)
     View(LazyRowView::class)
 

package/android/src/main/java/expo/modules/ui/graphics/DrawablePainter.kt

@@ -0,0 +1,43 @@
+package expo.modules.ui.graphics
+
+import android.graphics.drawable.BitmapDrawable
+import android.graphics.drawable.Drawable
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.asImageBitmap
+import androidx.compose.ui.graphics.drawscope.DrawScope
+import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
+import androidx.compose.ui.graphics.nativeCanvas
+import androidx.compose.ui.graphics.painter.BitmapPainter
+import androidx.compose.ui.graphics.painter.Painter
+
+@Composable
+internal fun rememberDrawablePainter(drawable: Drawable?): Painter? {
+  return remember(drawable) {
+    when (drawable) {
+      null -> null
+      is BitmapDrawable -> BitmapPainter(drawable.bitmap.asImageBitmap())
+      else -> DrawablePainter(drawable.mutate())
+    }
+  }
+}
+
+private class DrawablePainter(
+  private val drawable: Drawable
+) : Painter() {
+  override val intrinsicSize: Size
+    get() = Size(
+      drawable.intrinsicWidth.toFloat().takeIf { it > 0 } ?: Size.Unspecified.width,
+      drawable.intrinsicHeight.toFloat().takeIf { it > 0 } ?: Size.Unspecified.height
+    )
+
+  override fun DrawScope.onDraw() {
+    drawIntoCanvas { canvas ->
+      with(drawable) {
+        setBounds(0, 0, size.width.toInt(), size.height.toInt())
+        draw(canvas.nativeCanvas)
+      }
+    }
+  }
+}

package/android/src/main/java/expo/modules/ui/{icon/VectorIconLoader.kt → graphics/ImageLoader.kt}

@@ -1,135 +1,155 @@
-package expo.modules.ui.icon
+package expo.modules.ui.graphics
 
 import android.content.Context
 import android.content.res.XmlResourceParser
+import android.graphics.BitmapFactory
+import android.graphics.drawable.BitmapDrawable
 import android.graphics.drawable.Drawable
 import android.net.Uri
 import android.util.Log
+import android.util.LruCache
 import android.util.Xml
+import androidx.compose.ui.graphics.PathFillType
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.graphics.vector.PathParser
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import androidx.core.graphics.drawable.toDrawable
 import androidx.core.graphics.toColorInt
+import androidx.core.net.toUri
+import expo.modules.kotlin.okhttp.await
+import kotlinx.coroutines.CancellationException
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.withContext
 import okhttp3.OkHttpClient
 import okhttp3.Request
 import org.xmlpull.v1.XmlPullParser
 import java.io.File
-import java.io.InputStream
+import java.io.IOException
 
 /**
- * Loads and parses vector icons from various sources (HTTP, file, content provider).
+ * Loads and parses images from various sources (HTTP, file, content provider).
  * Supports XML vector drawables (Android format) and bitmap images.
  *
  * All loading operations are suspend functions and run on appropriate dispatchers.
  */
-class VectorIconLoader(
+class ImageLoader(
   private val context: Context,
   private val okHttpClient: OkHttpClient
 ) {
+  private val imageCache = object : LruCache<String, ImageResult>(memoryCacheSizeKilobytes()) {
+    override fun sizeOf(key: String, value: ImageResult): Int {
+      val bitmap = (value.drawable as? BitmapDrawable)?.bitmap ?: return 1
+
+      return (bitmap.allocationByteCount / 1024)
+        .coerceAtLeast(1)
+    }
+  }
 
   /**
-   * Result of icon loading operation.
+   * Result of an image loading operation.
    */
-  data class IconResult(
+  data class ImageResult(
     val imageVector: ImageVector? = null,
-    val drawable: Drawable? = null
-  )
+    val drawable: Drawable? = null,
+    val error: String? = null
+  ) {
+    val isSuccess: Boolean
+      get() = imageVector != null || drawable != null
+  }
 
   /**
-   * Load an icon from a URI string.
-   * Returns an IconResult containing either an ImageVector (for XML) or Drawable (for bitmaps).
+   * Load an image from a URI string.
+   * Returns an ImageResult containing either an ImageVector (for XML) or Drawable (for bitmaps).
    *
    * This is a suspend function that performs I/O operations on the IO dispatcher.
    */
-  suspend fun loadFromUri(uriString: String?): IconResult = withContext(Dispatchers.IO) {
-    if (uriString.isNullOrEmpty()) return@withContext IconResult()
+  suspend fun loadFromUri(uriString: String?): ImageResult = withContext(Dispatchers.IO) {
+    if (uriString.isNullOrEmpty()) {
+      return@withContext ImageResult(error = "Image URI is empty")
+    }
 
     val uri = try {
-      Uri.parse(uriString)
+      uriString.toUri()
     } catch (e: Exception) {
       Log.e(TAG, "Failed to parse URI: $uriString", e)
-      return@withContext IconResult()
+      return@withContext ImageResult(error = "Failed to parse image URI: $uriString")
     }
 
-    try {
-      // For resource URIs, use Android's XmlResourceParser which handles compiled binary XML
-      if (uri.scheme == "res") {
-        return@withContext loadFromResourceId(uri)
+    imageCache.get(uriString)?.let { return@withContext it }
+    loadUncached(uri).also { result ->
+      if (result.isSuccess) {
+        imageCache.put(uriString, result)
       }
-
-      val inputStream = getInputStreamForUri(uri) ?: return@withContext IconResult()
-      inputStream.use { stream ->
-        parseIconFromStream(stream)
-      }
-    } catch (e: Exception) {
-      Log.e(TAG, "Failed to load icon from URI: $uri", e)
-      IconResult()
     }
   }
 
   /**
-   * Get input stream for different URI schemes.
+   * Clears pending work and releases decoded images held by this loader.
    */
-  private fun getInputStreamForUri(uri: Uri): InputStream? {
-    return when (uri.scheme) {
-      "file" -> {
-        val path = uri.path ?: return null
-        File(path).inputStream()
-      }
-      "content" -> {
-        context.contentResolver.openInputStream(uri)
-      }
-      "http", "https" -> {
-        downloadFromHttp(uri.toString())
-      }
-      "android.resource" -> {
-        context.contentResolver.openInputStream(uri)
-      }
-      else -> {
-        context.contentResolver.openInputStream(uri)
+  fun close() {
+    imageCache.evictAll()
+  }
+
+  private suspend fun loadUncached(uri: Uri): ImageResult {
+    return try {
+      // For resource URIs, use Android's XmlResourceParser which handles compiled binary XML.
+      if (uri.scheme == "res") {
+        loadFromResourceId(uri)
+      } else {
+        val bytes = when (uri.scheme) {
+          "file" -> {
+            val path = uri.path ?: throw IOException("Image file URI has no path: $uri")
+            File(path).readBytes()
+          }
+
+          "content", "android.resource" -> {
+            context.contentResolver.openInputStream(uri)?.use { it.readBytes() }
+              ?: throw IOException("Unable to open image URI: $uri")
+          }
+
+          "http", "https" -> downloadFromHttp(uri.toString())
+          else -> throw IOException("Unsupported image URI scheme: ${uri.scheme ?: "none"}")
+        }
+        parseImageFromBytes(bytes)
       }
+    } catch (e: CancellationException) {
+      throw e
+    } catch (e: Exception) {
+      val message = e.message ?: "Failed to load image from URI: $uri"
+      Log.e(TAG, message, e)
+      ImageResult(error = message)
     }
   }
 
   /**
-   * Download icon from HTTP/HTTPS URL using OkHttp.
-   * Uses OkHttp's blocking call which is safe on IO dispatcher.
+   * Download an image from HTTP/HTTPS URL using OkHttp.
+   * The OkHttp call is cancelled when the enclosing coroutine is cancelled.
    */
-  private fun downloadFromHttp(url: String): InputStream? {
-    return try {
-      val request = Request.Builder()
-        .url(url)
-        .build()
-
-      // OkHttp's execute() is blocking, which is fine on IO dispatcher
-      val response = okHttpClient.newCall(request).execute()
+  private suspend fun downloadFromHttp(url: String): ByteArray {
+    val request = Request.Builder()
+      .url(url)
+      .build()
+    return okHttpClient.newCall(request).await().use { response ->
       if (!response.isSuccessful) {
-        Log.e(TAG, "Failed to download icon from $url: ${response.code}")
-        response.close()
-        return null
+        throw IOException("Failed to download image from $url: HTTP ${response.code}")
       }
-
-      response.body?.byteStream()
-    } catch (e: Exception) {
-      Log.e(TAG, "HTTP download failed: $url", e)
-      null
+      response.body?.bytes()
+        ?: throw IOException("Image response from $url has no body")
     }
   }
 
   /**
-   * Load icon from an Android resource ID extracted from a `res:/` URI.
+   * Load an image from an Android resource ID extracted from a `res:/` URI.
    * Uses [XmlResourceParser] which handles compiled (binary) XML in release builds.
    */
-  private fun loadFromResourceId(uri: Uri): IconResult {
+  private fun loadFromResourceId(uri: Uri): ImageResult {
     val resourceId = uri.lastPathSegment?.toIntOrNull()
       ?: uri.path?.trimStart('/')?.toIntOrNull()
     if (resourceId == null || resourceId <= 0) {
       Log.w(TAG, "Invalid resource ID in URI: $uri")
-      return IconResult()
+      return ImageResult(error = "Invalid image resource ID: $uri")
     }
 
     // Try parsing as XML (handles both text and compiled binary XML)
@@ -138,38 +158,40 @@ class VectorIconLoader(
       xmlParser.use { parser ->
         val imageVector = parseXmlToImageVector(parser)
         if (imageVector != null) {
-          return IconResult(imageVector = imageVector)
+          return ImageResult(imageVector = imageVector)
         }
       }
     } catch (e: Exception) {
       Log.d(TAG, "Resource $resourceId is not XML, trying as raw resource", e)
     }
 
-    // Fall back to raw resource stream (bitmap images, etc.)
+    // Fall back to bitmap resource decoding.
     try {
-      context.resources.openRawResource(resourceId).use { stream ->
-        val drawable = Drawable.createFromStream(stream, null)
-        return IconResult(drawable = drawable)
-      }
+      val bitmap = BitmapFactory.decodeResource(context.resources, resourceId)
+        ?: return ImageResult(error = "Failed to decode image resource $resourceId")
+      return ImageResult(drawable = bitmap.toDrawable(context.resources))
     } catch (e: Exception) {
       Log.e(TAG, "Failed to load resource $resourceId", e)
-      return IconResult()
+      return ImageResult(error = e.message ?: "Failed to load image resource $resourceId")
     }
   }
 
   /**
-   * Parse icon from input stream.
+   * Parse an image from encoded bytes.
    * Detects format (XML or bitmap) and returns appropriate result.
    */
-  private fun parseIconFromStream(inputStream: InputStream): IconResult {
-    val bytes = inputStream.readBytes()
-
+  private fun parseImageFromBytes(bytes: ByteArray): ImageResult {
     return if (isXmlContent(bytes)) {
       val imageVector = parseXmlToImageVector(bytes)
-      IconResult(imageVector = imageVector)
+      if (imageVector != null) {
+        ImageResult(imageVector = imageVector)
+      } else {
+        ImageResult(error = "Failed to decode XML image")
+      }
     } else {
-      val drawable = Drawable.createFromStream(bytes.inputStream(), null)
-      IconResult(drawable = drawable)
+      val bitmap = BitmapFactory.decodeByteArray(bytes, 0, bytes.size)
+        ?: return ImageResult(error = "Failed to decode bitmap image")
+      ImageResult(drawable = bitmap.toDrawable(context.resources))
     }
   }
 
@@ -181,10 +203,7 @@ class VectorIconLoader(
 
     // Check for UTF-8 BOM
     var offset = 0
-    if (bytes.size >= 3 &&
-      bytes[0] == 0xEF.toByte() &&
-      bytes[1] == 0xBB.toByte() &&
-      bytes[2] == 0xBF.toByte()
+    if (bytes[0] == 0xEF.toByte() && bytes[1] == 0xBB.toByte() && bytes[2] == 0xBF.toByte()
     ) {
       offset = 3
     }
@@ -275,6 +294,7 @@ class VectorIconLoader(
               // Note: groups, clips, gradients not yet supported
             }
           }
+
           XmlPullParser.END_TAG -> {
             if (parser.name == "vector") {
               return builder.build()
@@ -298,6 +318,7 @@ class VectorIconLoader(
     try {
       var pathData = ""
       var fillColor: androidx.compose.ui.graphics.Color? = null
+      var pathFillType = PathFillType.NonZero
 
       for (i in 0 until parser.attributeCount) {
         when (parser.getAttributeName(i)) {
@@ -305,7 +326,13 @@ class VectorIconLoader(
           "fillColor" -> {
             fillColor = parseColor(parser.getAttributeValue(i))
           }
-          // Note: stroke properties, fillType, opacity not yet supported
+          "fillType" -> {
+            pathFillType = when (parser.getAttributeValue(i)) {
+              "evenOdd", "1" -> PathFillType.EvenOdd
+              else -> PathFillType.NonZero
+            }
+          }
+          // Note: stroke properties and opacity are not yet supported
         }
       }
 
@@ -313,7 +340,8 @@ class VectorIconLoader(
         val nodes = PathParser().parsePathString(pathData).toNodes()
         builder.addPath(
           pathData = nodes,
-          fill = fillColor?.let { SolidColor(it) }
+          fill = fillColor?.let { SolidColor(it) },
+          pathFillType = pathFillType
         )
       }
     } catch (e: Exception) {
@@ -332,7 +360,7 @@ class VectorIconLoader(
         .replace("px", "")
         .toFloat()
       numericValue.dp
-    } catch (e: Exception) {
+    } catch (_: Exception) {
       Log.w(TAG, "Failed to parse dimension: $value, using default 24dp")
       24.dp
     }
@@ -347,11 +375,13 @@ class VectorIconLoader(
         colorValue.startsWith("#") -> {
           androidx.compose.ui.graphics.Color(colorValue.toColorInt())
         }
+
         colorValue.startsWith("@android:color/") || colorValue.startsWith("?attr/") -> {
           // Theme attributes default to black (could be enhanced to resolve theme colors)
           Log.d(TAG, "Theme color attribute not resolved: $colorValue, using black")
           androidx.compose.ui.graphics.Color.Black
         }
+
         else -> {
           Log.w(TAG, "Unknown color format: $colorValue, using black")
           androidx.compose.ui.graphics.Color.Black
@@ -364,6 +394,11 @@ class VectorIconLoader(
   }
 
   companion object {
-    private const val TAG = "VectorIconLoader"
+    private const val TAG = "ImageLoader"
+
+    private fun memoryCacheSizeKilobytes(): Int {
+      val maxMemoryKilobytes = Runtime.getRuntime().maxMemory() / 1024
+      return (maxMemoryKilobytes / 8).coerceIn(1, Int.MAX_VALUE.toLong()).toInt()
+    }
   }
 }

package/android/src/main/java/expo/modules/ui/graphics/ImageSource.kt

@@ -0,0 +1,28 @@
+package expo.modules.ui.graphics
+
+import android.content.Context
+import android.net.Uri
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
+import expo.modules.kotlin.types.OptimizedRecord
+
+@OptimizedRecord
+data class ImageSource(
+  @Field val uri: String,
+  @Field val width: Int = 0,
+  @Field val height: Int = 0,
+  @Field val scale: Double = 1.0
+) : Record
+
+internal fun ImageSource.resolveUri(context: Context): String? {
+  return try {
+    val parsedUri = Uri.parse(uri)
+    if (parsedUri.scheme == null) {
+      ResourceIdHelper.getResourceUri(context, uri)?.toString()
+    } else {
+      uri
+    }
+  } catch (_: Exception) {
+    ResourceIdHelper.getResourceUri(context, uri)?.toString()
+  }
+}

package/android/src/main/java/expo/modules/ui/{icon → graphics}/ResourceIdHelper.kt

@@ -1,4 +1,4 @@
-package expo.modules.ui.icon
+package expo.modules.ui.graphics
 
 import android.annotation.SuppressLint
 import android.content.Context