@amazon-devices/expo-image 2.0.1758683737

package/android/build.gradle

@@ -0,0 +1,124 @@
+apply plugin: 'com.android.library'
+apply plugin: 'kotlin-android'
+apply plugin: 'maven-publish'
+apply plugin: 'kotlin-kapt'
+
+def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
+if (expoModulesCorePlugin.exists()) {
+  apply from: expoModulesCorePlugin
+  applyKotlinExpoModulesCorePlugin()
+  // Remove this check, but keep the contents after SDK49 support is dropped
+  if (safeExtGet("expoProvidesDefaultConfig", false)) {
+    useCoreDependencies()
+  }
+}
+
+buildscript {
+  // Simple helper that allows the root project to override versions declared by this library.
+  ext.safeExtGet = { prop, fallback ->
+    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+  }
+
+  // Ensures backward compatibility
+  ext.getKotlinVersion = {
+    if (ext.has("kotlinVersion")) {
+      ext.kotlinVersion()
+    } else {
+      ext.safeExtGet("kotlinVersion", "1.8.10")
+    }
+  }
+
+  repositories {
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${getKotlinVersion()}")
+  }
+}
+
+android {
+  // Remove this if and it's contents, when support for SDK49 is dropped
+  if (!safeExtGet("expoProvidesDefaultConfig", false)) {
+    compileSdkVersion safeExtGet("compileSdkVersion", 33)
+
+    defaultConfig {
+      minSdkVersion safeExtGet("minSdkVersion", 23)
+      targetSdkVersion safeExtGet("targetSdkVersion", 33)
+    }
+
+    lintOptions {
+      abortOnError false
+    }
+  }
+
+  def agpVersion = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION
+  if (agpVersion.tokenize('.')[0].toInteger() < 8) {
+    compileOptions {
+      sourceCompatibility JavaVersion.VERSION_11
+      targetCompatibility JavaVersion.VERSION_11
+    }
+
+    kotlinOptions {
+      jvmTarget = JavaVersion.VERSION_11.majorVersion
+    }
+  }
+
+  namespace "expo.modules.image"
+  defaultConfig {
+    versionCode 1
+    versionName "1.6.0"
+    consumerProguardFiles("proguard-rules.pro")
+  }
+  publishing {
+    singleVariant("release") {
+      withSourcesJar()
+    }
+  }
+}
+
+if (safeExtGet("excludeAppGlideModule", false)) {
+  tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile) {
+    exclude("**/ExpoImageAppGlideModule.kt")
+  }
+}
+
+repositories {
+  // ref: https://www.baeldung.com/maven-local-repository
+  mavenLocal()
+  maven {
+    // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
+    url "$rootDir/../node_modules/react-native/android"
+  }
+  maven {
+    // Android JSC is installed from npm
+    url "$rootDir/../node_modules/jsc-android/dist"
+  }
+  google()
+  mavenCentral()
+}
+
+dependencies {
+  def GLIDE_VERSION = "4.13.2"
+
+  if (!safeExtGet("expoProvidesDefaultConfig", false)) {
+    implementation project(':expo-modules-core')
+    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:${getKotlinVersion()}"
+  }
+
+  //noinspection GradleDynamicVersion
+  implementation 'com.facebook.react:react-native:+'  // From node_modules
+
+  api "com.github.bumptech.glide:glide:${GLIDE_VERSION}"
+  kapt "com.github.bumptech.glide:compiler:${GLIDE_VERSION}"
+  api 'com.caverock:androidsvg-aar:1.4'
+
+  implementation "com.github.penfeizhou.android.animation:glide-plugin:2.28.0"
+  implementation "com.github.bumptech.glide:avif-integration:${GLIDE_VERSION}"
+
+  api 'com.github.bumptech.glide:okhttp3-integration:4.11.0'
+  api "com.squareup.okhttp3:okhttp:${safeExtGet("okHttpVersion", '4.9.2')}"
+
+  implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.5.1'
+  implementation "jp.wasabeef:glide-transformations:4.3.0"
+}

package/android/proguard-rules.pro

@@ -0,0 +1,28 @@
+# https://bumptech.github.io/glide/doc/download-setup.html#proguard
+
+-keep public class * extends com.bumptech.glide.module.LibraryGlideModule
+-keep public class * implements com.bumptech.glide.module.GlideModule
+-keep class * extends com.bumptech.glide.module.AppGlideModule {
+ <init>(...);
+}
+-keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
+  **[] $VALUES;
+  public *;
+}
+-keep class com.bumptech.glide.load.data.ParcelFileDescriptorRewinder$InternalRewinder {
+  *** rewind();
+}
+
+-keep public class com.bumptech.glide.request.ThumbnailRequestCoordinator {
+  *;
+}
+
+-dontwarn com.bumptech.glide.load.resource.bitmap.VideoDecoder
+
+# https://bumptech.github.io/glide/doc/configuration.html#applications
+
+-keep class com.bumptech.glide.GeneratedAppGlideModuleImpl
+
+-keep public class com.bumptech.glide.integration.webp.WebpImage { *; }
+-keep public class com.bumptech.glide.integration.webp.WebpFrame { *; }
+-keep public class com.bumptech.glide.integration.webp.WebpBitmapFactory { *; }

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,15 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+  <!-- Begin Glide configuration -->
+  <!-- Internet access (https://bumptech.github.io/glide/doc/download-setup.html#internet) -->
+  <uses-permission android:name="android.permission.INTERNET" />
+  <!--
+  Allows Glide to monitor connectivity status and restart failed requests if users go from a
+  a disconnected to a connected network state.
+  -->
+  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+
+  <!-- Local storage (https://bumptech.github.io/glide/doc/download-setup.html#local-storage) -->
+  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+
+  <!-- End Glide configuration -->
+</manifest>

package/android/src/main/java/expo/modules/image/Exceptions.kt

@@ -0,0 +1,9 @@
+package expo.modules.image
+
+import expo.modules.kotlin.exception.CodedException
+
+class ImagePrefetchFailure(message: String) :
+  CodedException(message = "Failed to prefetch the image: $message")
+
+class MissingActivity :
+  CodedException(message = "The current activity is no longer available")

package/android/src/main/java/expo/modules/image/ExpoImageAppGlideModule.kt

@@ -0,0 +1,19 @@
+package expo.modules.image
+
+import android.content.Context
+import android.util.Log
+import com.bumptech.glide.GlideBuilder
+import com.bumptech.glide.annotation.GlideModule
+import com.bumptech.glide.module.AppGlideModule
+
+/**
+ * We need to include an [AppGlideModule] for [GlideModule] annotations
+ * to work.
+ */
+@GlideModule
+class ExpoImageAppGlideModule : AppGlideModule() {
+  override fun applyOptions(context: Context, builder: GlideBuilder) {
+    super.applyOptions(context, builder)
+    builder.setLogLevel(Log.ERROR)
+  }
+}

package/android/src/main/java/expo/modules/image/ExpoImageModule.kt

@@ -0,0 +1,192 @@
+package expo.modules.image
+
+import android.view.View
+import androidx.core.view.doOnDetach
+import com.bumptech.glide.Glide
+import com.bumptech.glide.load.model.GlideUrl
+import com.facebook.react.uimanager.PixelUtil
+import com.facebook.react.uimanager.Spacing
+import com.facebook.react.uimanager.ViewProps
+import com.facebook.yoga.YogaConstants
+import expo.modules.image.enums.ContentFit
+import expo.modules.image.enums.Priority
+import expo.modules.image.records.CachePolicy
+import expo.modules.image.records.ContentPosition
+import expo.modules.image.records.ImageTransition
+import expo.modules.image.records.SourceMap
+import expo.modules.kotlin.functions.Queues
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+import expo.modules.kotlin.views.ViewDefinitionBuilder
+
+class ExpoImageModule : Module() {
+  override fun definition() = ModuleDefinition {
+    Name("ExpoImage")
+
+    Function("prefetch") { urls: List<String> ->
+      val context = appContext.reactContext ?: return@Function
+      urls.forEach {
+        Glide
+          .with(context)
+          .download(GlideUrl(it))
+          .submit()
+      }
+    }
+
+    AsyncFunction("clearMemoryCache") {
+      val activity = appContext.currentActivity ?: return@AsyncFunction false
+      Glide.get(activity).clearMemory()
+      return@AsyncFunction true
+    }.runOnQueue(Queues.MAIN)
+
+    AsyncFunction("clearDiskCache") {
+      val activity = appContext.currentActivity ?: return@AsyncFunction false
+      activity.let {
+        Glide.get(activity).clearDiskCache()
+      }
+
+      return@AsyncFunction true
+    }
+
+    View(ExpoImageViewWrapper::class) {
+      Events(
+        "onLoadStart",
+        "onProgress",
+        "onError",
+        "onLoad"
+      )
+
+      Prop("source") { view: ExpoImageViewWrapper, sources: List<SourceMap>? ->
+        view.sources = sources ?: emptyList()
+      }
+
+      Prop("contentFit") { view: ExpoImageViewWrapper, contentFit: ContentFit? ->
+        view.contentFit = contentFit ?: ContentFit.Cover
+      }
+
+      Prop("placeholderContentFit") { view: ExpoImageViewWrapper, placeholderContentFit: ContentFit? ->
+        view.placeholderContentFit = placeholderContentFit ?: ContentFit.ScaleDown
+      }
+
+      Prop("contentPosition") { view: ExpoImageViewWrapper, contentPosition: ContentPosition? ->
+        view.contentPosition = contentPosition ?: ContentPosition.center
+      }
+
+      Prop("blurRadius") { view: ExpoImageViewWrapper, blurRadius: Int? ->
+        view.blurRadius = blurRadius?.takeIf { it > 0 }
+      }
+
+      Prop("transition") { view: ExpoImageViewWrapper, transition: ImageTransition? ->
+        view.transition = transition
+      }
+
+      PropGroup(
+        ViewProps.BORDER_RADIUS to 0,
+        ViewProps.BORDER_TOP_LEFT_RADIUS to 1,
+        ViewProps.BORDER_TOP_RIGHT_RADIUS to 2,
+        ViewProps.BORDER_BOTTOM_RIGHT_RADIUS to 3,
+        ViewProps.BORDER_BOTTOM_LEFT_RADIUS to 4,
+        ViewProps.BORDER_TOP_START_RADIUS to 5,
+        ViewProps.BORDER_TOP_END_RADIUS to 6,
+        ViewProps.BORDER_BOTTOM_START_RADIUS to 7,
+        ViewProps.BORDER_BOTTOM_END_RADIUS to 8
+      ) { view: ExpoImageViewWrapper, index: Int, borderRadius: Float? ->
+        val radius = makeYogaUndefinedIfNegative(borderRadius ?: YogaConstants.UNDEFINED)
+        view.setBorderRadius(index, radius)
+      }
+
+      PropGroup(
+        ViewProps.BORDER_WIDTH to Spacing.ALL,
+        ViewProps.BORDER_LEFT_WIDTH to Spacing.LEFT,
+        ViewProps.BORDER_RIGHT_WIDTH to Spacing.RIGHT,
+        ViewProps.BORDER_TOP_WIDTH to Spacing.TOP,
+        ViewProps.BORDER_BOTTOM_WIDTH to Spacing.BOTTOM,
+        ViewProps.BORDER_START_WIDTH to Spacing.START,
+        ViewProps.BORDER_END_WIDTH to Spacing.END
+      ) { view: ExpoImageViewWrapper, index: Int, width: Float? ->
+        val pixelWidth = makeYogaUndefinedIfNegative(width ?: YogaConstants.UNDEFINED)
+          .ifYogaDefinedUse(PixelUtil::toPixelFromDIP)
+        view.setBorderWidth(index, pixelWidth)
+      }
+
+      PropGroup(
+        ViewProps.BORDER_COLOR to Spacing.ALL,
+        ViewProps.BORDER_LEFT_COLOR to Spacing.LEFT,
+        ViewProps.BORDER_RIGHT_COLOR to Spacing.RIGHT,
+        ViewProps.BORDER_TOP_COLOR to Spacing.TOP,
+        ViewProps.BORDER_BOTTOM_COLOR to Spacing.BOTTOM,
+        ViewProps.BORDER_START_COLOR to Spacing.START,
+        ViewProps.BORDER_END_COLOR to Spacing.END
+      ) { view: ExpoImageViewWrapper, index: Int, color: Int? ->
+        val rgbComponent = if (color == null) YogaConstants.UNDEFINED else (color and 0x00FFFFFF).toFloat()
+        val alphaComponent = if (color == null) YogaConstants.UNDEFINED else (color ushr 24).toFloat()
+        view.setBorderColor(index, rgbComponent, alphaComponent)
+      }
+
+      Prop("borderStyle") { view: ExpoImageViewWrapper, borderStyle: String? ->
+        view.borderStyle = borderStyle
+      }
+
+      Prop("backgroundColor") { view: ExpoImageViewWrapper, color: Int? ->
+        view.backgroundColor = color
+      }
+
+      Prop("tintColor") { view: ExpoImageViewWrapper, color: Int? ->
+        view.tintColor = color
+      }
+
+      Prop("placeholder") { view: ExpoImageViewWrapper, placeholder: List<SourceMap>? ->
+        view.placeholders = placeholder ?: emptyList()
+      }
+
+      Prop("accessible") { view: ExpoImageViewWrapper, accessible: Boolean? ->
+        view.accessible = accessible ?: false
+      }
+
+      Prop("accessibilityLabel") { view: ExpoImageViewWrapper, accessibilityLabel: String? ->
+        view.accessibilityLabel = accessibilityLabel
+      }
+
+      Prop("focusable") { view: ExpoImageViewWrapper, isFocusable: Boolean? ->
+        view.isFocusableProp = isFocusable ?: false
+      }
+
+      Prop("priority") { view: ExpoImageViewWrapper, priority: Priority? ->
+        view.priority = priority ?: Priority.NORMAL
+      }
+
+      Prop("cachePolicy") { view: ExpoImageViewWrapper, cachePolicy: CachePolicy? ->
+        view.cachePolicy = cachePolicy ?: CachePolicy.DISK
+      }
+
+      Prop("recyclingKey") { view: ExpoImageViewWrapper, recyclingKey: String? ->
+        view.recyclingKey = recyclingKey
+      }
+
+      Prop("allowDownscaling") { view: ExpoImageViewWrapper, allowDownscaling: Boolean? ->
+        view.allowDownscaling = allowDownscaling ?: true
+      }
+
+      OnViewDidUpdateProps { view: ExpoImageViewWrapper ->
+        view.rerenderIfNeeded()
+      }
+
+      OnViewDestroys { view: ExpoImageViewWrapper ->
+        view.doOnDetach {
+          view.onViewDestroys()
+        }
+      }
+    }
+  }
+}
+
+// TODO(@lukmccall): Remove when the same functionality will be defined by the expo-modules-core in SDK 48
+@Suppress("FunctionName")
+private inline fun <reified T : View, reified PropType, reified CustomValueType> ViewDefinitionBuilder<T>.PropGroup(
+  vararg props: Pair<String, CustomValueType>,
+  noinline body: (view: T, value: CustomValueType, prop: PropType) -> Unit
+) {
+  for ((name, value) in props) {
+    Prop<T, PropType>(name) { view, prop -> body(view, value, prop) }
+  }
+}

package/android/src/main/java/expo/modules/image/ExpoImageView.kt

@@ -0,0 +1,220 @@
+package expo.modules.image
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.PorterDuff
+import android.graphics.RectF
+import android.graphics.drawable.BitmapDrawable
+import android.graphics.drawable.Drawable
+import android.util.Log
+import androidx.appcompat.widget.AppCompatImageView
+import androidx.core.graphics.transform
+import androidx.core.view.isVisible
+import com.facebook.react.modules.i18nmanager.I18nUtil
+import com.facebook.react.uimanager.PixelUtil
+import com.facebook.react.views.view.ReactViewBackgroundDrawable
+import expo.modules.image.drawing.OutlineProvider
+import expo.modules.image.enums.ContentFit
+import expo.modules.image.records.ContentPosition
+
+@SuppressLint("ViewConstructor")
+class ExpoImageView(
+  context: Context
+) : AppCompatImageView(context) {
+  var currentTarget: ImageViewWrapperTarget? = null
+  var isPlaceholder: Boolean = false
+
+  fun recycleView(): ImageViewWrapperTarget? {
+    setImageDrawable(null)
+
+    val target = currentTarget?.apply {
+      isUsed = false
+    }
+
+    currentTarget = null
+    isVisible = false
+    isPlaceholder = false
+
+    return target
+  }
+
+  private val outlineProvider = OutlineProvider(context)
+
+  private var transformationMatrixChanged = false
+
+  private val borderDrawableLazyHolder = lazy {
+    ReactViewBackgroundDrawable(context).apply {
+      callback = this@ExpoImageView
+
+      outlineProvider.borderRadiiConfig
+        .map { it.ifYogaDefinedUse(PixelUtil::toPixelFromDIP) }
+        .withIndex()
+        .forEach { (i, radius) ->
+          if (i == 0) {
+            setRadius(radius)
+          } else {
+            setRadius(radius, i - 1)
+          }
+        }
+    }
+  }
+
+  override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+    super.onLayout(changed, left, top, right, bottom)
+    applyTransformationMatrix()
+  }
+
+  fun applyTransformationMatrix() {
+    if (drawable == null) {
+      return
+    }
+
+    if (isPlaceholder) {
+      applyTransformationMatrix(drawable, placeholderContentFit)
+    } else {
+      applyTransformationMatrix(drawable, contentFit, contentPosition)
+    }
+  }
+
+  private fun applyTransformationMatrix(
+    drawable: Drawable,
+    contentFit: ContentFit,
+    contentPosition: ContentPosition = ContentPosition.center
+  ) {
+    val imageRect = RectF(0f, 0f, drawable.intrinsicWidth.toFloat(), drawable.intrinsicHeight.toFloat())
+    val viewRect = RectF(0f, 0f, width.toFloat(), height.toFloat())
+
+    val matrix = contentFit.toMatrix(
+      imageRect,
+      viewRect,
+      currentTarget?.sourceWidth ?: -1,
+      currentTarget?.sourceHeight ?: -1
+    )
+    val scaledImageRect = imageRect.transform(matrix)
+
+    imageMatrix = matrix.apply {
+      contentPosition.apply(this, scaledImageRect, viewRect)
+    }
+  }
+
+  private val borderDrawable
+    get() = borderDrawableLazyHolder.value
+
+  init {
+    clipToOutline = true
+    scaleType = ScaleType.MATRIX
+    super.setOutlineProvider(outlineProvider)
+  }
+
+  // region Component Props
+  internal var contentFit: ContentFit = ContentFit.Cover
+    set(value) {
+      field = value
+      transformationMatrixChanged = true
+    }
+
+  internal var placeholderContentFit: ContentFit = ContentFit.ScaleDown
+    set(value) {
+      field = value
+      transformationMatrixChanged = true
+    }
+
+  internal var contentPosition: ContentPosition = ContentPosition.center
+    set(value) {
+      field = value
+      transformationMatrixChanged = true
+    }
+
+  internal fun setBorderRadius(position: Int, borderRadius: Float) {
+    val isInvalidated = outlineProvider.setBorderRadius(borderRadius, position)
+    if (isInvalidated) {
+      invalidateOutline()
+      if (!outlineProvider.hasEqualCorners()) {
+        invalidate()
+      }
+    }
+
+    // Setting the border-radius doesn't necessarily mean that a border
+    // should to be drawn. Only update the border-drawable when needed.
+    if (borderDrawableLazyHolder.isInitialized()) {
+      val radius = borderRadius.ifYogaDefinedUse(PixelUtil::toPixelFromDIP)
+      borderDrawableLazyHolder.value.apply {
+        if (position == 0) {
+          setRadius(radius)
+        } else {
+          setRadius(radius, position - 1)
+        }
+      }
+    }
+  }
+
+  internal fun setBorderWidth(position: Int, width: Float) {
+    borderDrawable.setBorderWidth(position, width)
+  }
+
+  internal fun setBorderColor(position: Int, rgb: Float, alpha: Float) {
+    borderDrawable.setBorderColor(position, rgb, alpha)
+  }
+
+  internal fun setBorderStyle(style: String?) {
+    borderDrawable.setBorderStyle(style)
+  }
+
+  internal fun setBackgroundColor(color: Int?) {
+    if (color == null) {
+      setBackgroundColor(Color.TRANSPARENT)
+    } else {
+      setBackgroundColor(color)
+    }
+  }
+
+  internal fun setTintColor(color: Int?) {
+    color?.let { setColorFilter(it, PorterDuff.Mode.SRC_IN) } ?: clearColorFilter()
+  }
+
+  override fun invalidateDrawable(drawable: Drawable) {
+    super.invalidateDrawable(drawable)
+    if (borderDrawableLazyHolder.isInitialized() && drawable === borderDrawable) {
+      invalidate()
+    }
+  }
+
+  override fun draw(canvas: Canvas) {
+    // When the border-radii are not all the same, a convex-path
+    // is used for the Outline. Unfortunately clipping is not supported
+    // for convex-paths and we fallback to Canvas clipping.
+    outlineProvider.clipCanvasIfNeeded(canvas, this)
+    // If we encounter a recycled bitmap here, it suggests an issue where we may have failed to
+    // finish clearing the image bitmap before the UI attempts to display it.
+    // One solution could be to suppress the error and assume that the second image view is currently responsible for displaying the correct view.
+    if ((drawable as? BitmapDrawable)?.bitmap?.isRecycled == true) {
+      Log.e("ExpoImage", "Trying to use a recycled bitmap")
+      recycleView()?.let { target ->
+        (parent as? ExpoImageViewWrapper)?.requestManager?.let { requestManager ->
+          target.clear(requestManager)
+        }
+      }
+    }
+    super.draw(canvas)
+  }
+
+  public override fun onDraw(canvas: Canvas) {
+    super.onDraw(canvas)
+    // Draw borders on top of the background and image
+    if (borderDrawableLazyHolder.isInitialized()) {
+      val layoutDirection = if (I18nUtil.getInstance().isRTL(context)) {
+        LAYOUT_DIRECTION_RTL
+      } else {
+        LAYOUT_DIRECTION_LTR
+      }
+
+      borderDrawable.apply {
+        resolvedLayoutDirection = layoutDirection
+        setBounds(0, 0, width, height)
+        draw(canvas)
+      }
+    }
+  }
+}