expo-image 0.2.2 → 1.0.0-alpha.1

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# Changelog
+
+## Unpublished
+
+### 🛠 Breaking changes
+
+### 🎉 New features
+
+### 🐛 Bug fixes
+
+### 💡 Others
+
+## 1.0.0-alpha.1 — 2022-12-16
+
+### 🎉 New features
+
+- Initial release 🥳

package/README.md

@@ -1,32 +1,30 @@
 # expo-image
 
-A cross-platform, performant image component for React Native and Expo with Web support
+> 🚨 This module is experimental, incomplete, and we advise against using it in production its current state.
+
+A cross-platform, performant image component for React Native and Expo with Web support.
 
 # API documentation
 
-- [Documentation for the main branch](https://github.com/expo/expo/blob/main/docs/pages/versions/unversioned/sdk/image.md)
-- [Documentation for the latest stable release](https://docs.expo.dev/versions/latest/sdk/image/)
+The documentation is not available yet, but most of the public APIs already have TSDoc comments.
 
 # Installation in managed Expo projects
 
-For [managed](https://docs.expo.dev/versions/latest/introduction/managed-vs-bare/) Expo projects, please follow the installation instructions in the [API documentation for the latest stable release](https://docs.expo.dev/versions/latest/sdk/image/). If you follow the link and there is no documentation available then this library is not yet usable within managed projects — it is likely to be included in an upcoming Expo SDK release.
+`expo-image` is not available for managed workflow yet.
 
 # Installation in bare React Native projects
 
-### Add the package to your npm dependencies
-
-```
-npm install expo-image
-```
+For bare React Native projects, you must ensure that you have [installed and configured the `expo` package](https://docs.expo.dev/bare/installing-expo-modules/) before continuing.
 
-### Configure for iOS
+> 🚨 Expo Image is compatible only with Expo SDK47+
 
-Run `npx pod-install` after installing the npm package.
+Add the package to your dependencies with the following commands:
 
-### Configure for Android
-
-No additional setup necessary.
+```
+expo install expo-camera
+npx pod-install
+```
 
 # Contributing
 
-Contributions are very welcome! Please refer to guidelines described in the [contributing guide](https://github.com/expo/expo#contributing).
+Contributions are not encouraged at this time.

package/android/build.gradle

@@ -55,7 +55,7 @@ android {
     minSdkVersion safeExtGet("minSdkVersion", 21)
     targetSdkVersion safeExtGet("targetSdkVersion", 31)
     versionCode 1
-    versionName "0.2.2"
+    versionName "1.0.0-alpha.1"
   }
   lintOptions {
     abortOnError false
@@ -88,16 +88,21 @@ repositories {
 }
 
 dependencies {
-  def GLIDE_VERSION = "4.12.0"
+  def GLIDE_VERSION = "4.13.2"
+
+  implementation project(':expo-modules-core')
 
   //noinspection GradleDynamicVersion
   implementation 'com.facebook.react:react-native:+'  // From node_modules
 
-  implementation "com.github.zjupure:webpdecoder:2.0.${GLIDE_VERSION}"
+  implementation "com.github.zjupure:webpdecoder:2.1.${GLIDE_VERSION}"
   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.24.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')}"
 

package/android/proguard-rules.pro

@@ -1,5 +1,6 @@
 # https://bumptech.github.io/glide/doc/download-setup.html#proguard
 
+-keep public class * implements com.bumptech.glide.module.LibraryGlideModule
 -keep public class * implements com.bumptech.glide.module.GlideModule
 -keep public class * extends com.bumptech.glide.module.AppGlideModule
 -keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
@@ -17,4 +18,8 @@
 
 -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 { *; }
+-keep public class com.bumptech.glide.integration.webp.WebpBitmapFactory { *; }
+
+-keep public class com.bumptech.glide.requestThumbnailRequestCoordinator {
+  *;
+}

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

@@ -1,5 +1,8 @@
 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
 
@@ -8,4 +11,9 @@ import com.bumptech.glide.module.AppGlideModule
  * to work.
  */
 @GlideModule
-class ExpoImageAppGlideModule : AppGlideModule()
+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

@@ -1,52 +1,168 @@
 package expo.modules.image
 
-import android.util.Log
+import android.view.View
 import com.bumptech.glide.Glide
 import com.bumptech.glide.load.model.GlideUrl
-import com.facebook.react.bridge.Promise
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.bridge.ReactContextBaseJavaModule
-import com.facebook.react.bridge.ReactMethod
-import kotlinx.coroutines.CoroutineScope
-import kotlinx.coroutines.Dispatchers
-import kotlinx.coroutines.cancel
-import kotlinx.coroutines.launch
-import java.lang.Exception
-import java.lang.IllegalStateException
-import java.util.concurrent.CancellationException
-
-class ExpoImageModule(val context: ReactApplicationContext) : ReactContextBaseJavaModule(context) {
-  private val moduleCoroutineScope = CoroutineScope(Dispatchers.IO)
-  override fun getName() = "ExpoImageModule"
-
-  @ReactMethod
-  fun prefetch(url: String, promise: Promise) {
-    moduleCoroutineScope.launch {
-      try {
-        val glideUrl = GlideUrl(url)
-        val result = Glide.with(context)
-            .download(glideUrl)
-            .submit()
-            .awaitGet()
-        if (result != null) {
-          promise.resolve(null)
-        } else {
-          promise.reject("ERR_IMAGE_PREFETCH_FAILURE", "Failed to prefetch the image: ${url}.")
-        }
-      } catch (e: Exception) {
-        promise.reject("ERR_IMAGE_PREFETCH_FAILURE", "Failed to prefetch the image: ${e.message}", e)
+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.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()
       }
     }
-  }
 
-  override fun onCatalystInstanceDestroy() {
-    try {
-      // TODO: Use [expo.modules.core.errors.ModuleDestroyedException] when migrated to Expo Module
-      moduleCoroutineScope.cancel(CancellationException("ExpoImage module is destroyed. Cancelling all jobs."))
-    } catch (e: IllegalStateException) {
-      Log.w("ExpoImageModule", "No coroutines to cancel")
+    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.imageView.sources = sources ?: emptyList()
+      }
+
+      Prop("contentFit") { view: ExpoImageViewWrapper, contentFit: ContentFit? ->
+        view.imageView.contentFit = contentFit ?: ContentFit.Cover
+      }
+
+      Prop("contentPosition") { view: ExpoImageViewWrapper, contentPosition: ContentPosition? ->
+        view.imageView.contentPosition = contentPosition ?: ContentPosition.center
+      }
+
+      Prop("blurRadius") { view: ExpoImageViewWrapper, blurRadius: Int ->
+        view.imageView.blurRadius = blurRadius
+      }
+
+      Prop("fadeDuration") { view: ExpoImageViewWrapper, fadeDuration: Int ->
+        view.imageView.fadeDuration = fadeDuration
+      }
+
+      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.imageView.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.imageView.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.imageView.setBorderColor(index, rgbComponent, alphaComponent)
+      }
+
+      Prop("borderStyle") { view: ExpoImageViewWrapper, borderStyle: String? ->
+        view.imageView.setBorderStyle(borderStyle)
+      }
+
+      Prop("backgroundColor") { view: ExpoImageViewWrapper, color: Int? ->
+        view.imageView.setBackgroundColor(color)
+      }
+
+      Prop("tintColor") { view: ExpoImageViewWrapper, color: Int? ->
+        view.imageView.setTintColor(color)
+      }
+
+      Prop("placeholder") { view: ExpoImageViewWrapper, placeholder: List<SourceMap>? ->
+        view.imageView.placeholders = placeholder ?: emptyList()
+      }
+
+      Prop("accessible") { view: ExpoImageViewWrapper, accessible: Boolean ->
+        view.imageView.isFocusable = accessible
+      }
+
+      Prop("priority") { view: ExpoImageViewWrapper, priority: Priority? ->
+        view.imageView.priority = priority ?: Priority.NORMAL
+      }
+
+      Prop("cachePolicy") { view: ExpoImageViewWrapper, cachePolicy: CachePolicy? ->
+        view.imageView.cachePolicy = cachePolicy ?: CachePolicy.DISK
+      }
+
+      OnViewDidUpdateProps { view: ExpoImageViewWrapper ->
+        view.imageView.onAfterUpdateTransaction()
+      }
+
+      OnViewDestroys { view: ExpoImageViewWrapper ->
+        view.imageView.onDrop()
+      }
     }
+  }
+}
 
-    super.onCatalystInstanceDestroy()
+// 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) }
   }
 }