@onekeyfe/react-native-image 3.0.99 → 3.0.101

package/README.md

@@ -56,6 +56,12 @@ large lists conservative, and `autoplay={true}` on other native platforms. Pass
 `autoplay` explicitly whenever a screen needs the same behavior on both
 platforms.
 
+Animated-image canvas limits are intentionally platform-specific. Android caps
+the unavoidable decoded ARGB canvas at 4,194,304 pixels (16 MiB), while iOS
+allows metadata dimensions up to 16,000,000 pixels and separately caps its
+decoded animation frame buffer at 16 MiB. These limits reflect the native
+decoders' different allocation behavior.
+
 `recyclingKey` is available for recycled list cells. Changing it clears stale
 content before the next source is displayed.
 

package/android/src/main/java/com/margelo/nitro/onekeyimage/OneKeyImage.kt

@@ -38,6 +38,7 @@ private class OneKeyImageHostView(context: ThemedReactContext) : ImageView(conte
       syncPlayback()
     }
   var onReadyForRequest: (() -> Unit)? = null
+  var onAttachmentChanged: ((Boolean) -> Unit)? = null
 
   override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
     super.onSizeChanged(w, h, oldw, oldh)
@@ -58,11 +59,13 @@ private class OneKeyImageHostView(context: ThemedReactContext) : ImageView(conte
   override fun onAttachedToWindow() {
     super.onAttachedToWindow()
     syncPlayback()
+    onAttachmentChanged?.invoke(true)
   }
 
   override fun onDetachedFromWindow() {
     super.onDetachedFromWindow()
     syncPlayback()
+    onAttachmentChanged?.invoke(false)
   }
 
   override fun onVisibilityAggregated(isVisible: Boolean) {
@@ -129,6 +132,7 @@ class HybridOneKeyImage(private val context: ThemedReactContext) :
   private var requestActive = false
   private var displayState = DisplayState.LOADING
   private var displayRunnable: Runnable? = null
+  private var pendingDisplayGeneration: Long? = null
   private var fallbackRunnable: Runnable? = null
 
   override val view: View = hostView
@@ -202,6 +206,14 @@ class HybridOneKeyImage(private val context: ThemedReactContext) :
     OneKeyImageGlideRegistry.ensureRegistered(context)
     hostView.updateSkeletonStyle()
     hostView.onReadyForRequest = { scheduleLoad() }
+    hostView.onAttachmentChanged = { attached ->
+      if (attached) {
+        schedulePendingDisplayIfNeeded()
+      } else {
+        displayRunnable?.let(hostView::removeCallbacks)
+        displayRunnable = null
+      }
+    }
     applyContentFit()
     applyVariant()
   }
@@ -229,6 +241,7 @@ class HybridOneKeyImage(private val context: ThemedReactContext) :
     resetForReuse()
     disposed = true
     hostView.onReadyForRequest = null
+    hostView.onAttachmentChanged = null
     super.onDropView()
   }
 
@@ -236,6 +249,7 @@ class HybridOneKeyImage(private val context: ThemedReactContext) :
     disposed = true
     cancelCurrent(invalidateGeneration = true)
     hostView.onReadyForRequest = null
+    hostView.onAttachmentChanged = null
     super.dispose()
   }
 
@@ -466,7 +480,7 @@ class HybridOneKeyImage(private val context: ThemedReactContext) :
   private fun requestOptions(policy: OneKeyImageCachePolicy): RequestOptions {
     val options = RequestOptions()
       .dontTransform()
-      .downsample(OneKeyImageSafeDownsampleStrategy())
+      .downsample(OneKeyImageSafeDownsampleStrategy)
     return when (policy) {
       OneKeyImageCachePolicy.MEMORY_DISK -> options.diskCacheStrategy(DiskCacheStrategy.AUTOMATIC)
       OneKeyImageCachePolicy.MEMORY -> options.diskCacheStrategy(DiskCacheStrategy.NONE)
@@ -495,6 +509,7 @@ class HybridOneKeyImage(private val context: ThemedReactContext) :
     loadRunnable = null
     displayRunnable?.let(hostView::removeCallbacks)
     displayRunnable = null
+    pendingDisplayGeneration = null
     fallbackRunnable?.let(hostView::removeCallbacks)
     fallbackRunnable = null
     clearCurrentTarget()
@@ -512,14 +527,26 @@ class HybridOneKeyImage(private val context: ThemedReactContext) :
   }
 
   private fun scheduleOnDisplay(requestGeneration: Long) {
+    pendingDisplayGeneration = requestGeneration
+    schedulePendingDisplayIfNeeded()
+  }
+
+  private fun schedulePendingDisplayIfNeeded() {
+    val requestGeneration = pendingDisplayGeneration ?: return
     displayRunnable?.let(hostView::removeCallbacks)
+    displayRunnable = null
+    if (!hostView.isAttachedToWindow) return
     val runnable = Runnable {
       displayRunnable = null
       if (
+        pendingDisplayGeneration == requestGeneration &&
         requestGeneration == generation &&
         !disposed &&
-        displayState == DisplayState.IMAGE
+        displayState == DisplayState.IMAGE &&
+        hostView.drawable != null &&
+        hostView.isAttachedToWindow
       ) {
+        pendingDisplayGeneration = null
         onDisplay?.invoke()
       }
     }

package/android/src/main/java/com/margelo/nitro/onekeyimage/OneKeyImageCache.kt

@@ -23,7 +23,7 @@ class HybridOneKeyImageCache : HybridOneKeyImageCacheSpec() {
       }
       val baseOptions = RequestOptions()
         .dontTransform()
-        .downsample(OneKeyImageSafeDownsampleStrategy())
+        .downsample(OneKeyImageSafeDownsampleStrategy)
       val options = when (source.cachePolicy ?: OneKeyImageCachePolicy.MEMORY_DISK) {
         OneKeyImageCachePolicy.MEMORY_DISK -> baseOptions
           .diskCacheStrategy(DiskCacheStrategy.AUTOMATIC)

package/android/src/main/java/com/margelo/nitro/onekeyimage/OneKeyImageDecodeDimensions.kt

@@ -147,7 +147,7 @@ internal data class OneKeyImageDecodeDimensions(
  * 16 MiB area cap. `override()` alone cannot enforce an area cap for very wide
  * or tall sources because Glide's default strategy follows target edges.
  */
-internal class OneKeyImageSafeDownsampleStrategy : DownsampleStrategy() {
+internal object OneKeyImageSafeDownsampleStrategy : DownsampleStrategy() {
   override fun getScaleFactor(
     sourceWidth: Int,
     sourceHeight: Int,

package/android/src/test/java/com/margelo/nitro/onekeyimage/OneKeyImageDecodeDimensionsTest.kt

@@ -3,6 +3,7 @@ package com.margelo.nitro.onekeyimage
 import org.junit.Assert.assertEquals
 import org.junit.Assert.assertTrue
 import org.junit.Test
+import java.lang.reflect.Modifier
 
 class OneKeyImageDecodeDimensionsTest {
   @Test
@@ -67,4 +68,19 @@ class OneKeyImageDecodeDimensionsTest {
 
     assertTrue(decodedBytes <= OneKeyImageDecodeDimensions.MAX_DECODE_BYTES)
   }
+
+  @Test
+  fun safeDownsampleStrategyIsSingletonForStableMemoryCacheIdentity() {
+    val strategyClass = Class.forName(
+      "com.margelo.nitro.onekeyimage.OneKeyImageSafeDownsampleStrategy",
+      false,
+      javaClass.classLoader,
+    )
+
+    assertTrue(
+      strategyClass.declaredFields.any { field ->
+        field.name == "INSTANCE" && Modifier.isStatic(field.modifiers)
+      },
+    )
+  }
 }

package/lib/module/index.js

@@ -168,10 +168,13 @@ export function OneKeyImage({
     }) : undefined,
     onLoadEnd: needsLoadEnd ? callback(() => refs.current.onLoadEnd?.()) : undefined
   }), [hasOverlay, identity, needsDisplay, needsError, needsHybridRef, needsLoad, needsLoadEnd, needsLoadStart, normalized?.uri, placeholder]);
+  const flattenedStyle = StyleSheet.flatten(style);
+  const hasRoundedCorners = Boolean(flattenedStyle && [flattenedStyle.borderRadius, flattenedStyle.borderTopLeftRadius, flattenedStyle.borderTopRightRadius, flattenedStyle.borderBottomLeftRadius, flattenedStyle.borderBottomRightRadius, flattenedStyle.borderStartStartRadius, flattenedStyle.borderStartEndRadius, flattenedStyle.borderEndStartRadius, flattenedStyle.borderEndEndRadius].some(radius => typeof radius === 'number' && radius > 0));
+  const shouldWrapNative = hasOverlay || hasRoundedCorners;
   const native = /*#__PURE__*/createElement(NativeOneKeyImage, {
     ...viewProps,
     ...nativeCallbacks,
-    style: hasOverlay ? StyleSheet.absoluteFill : style,
+    style: shouldWrapNative ? StyleSheet.absoluteFill : style,
     sourceUri: normalized?.uri,
     sourceHeadersJson: normalized?.headers ? JSON.stringify(normalized.headers) : undefined,
     variant,
@@ -183,7 +186,7 @@ export function OneKeyImage({
     overscan,
     loadingStrategy: placeholder == null ? loadingStrategy : OneKeyImageLoadingStrategy.NONE
   });
-  if (!hasOverlay) return native;
+  if (!shouldWrapNative) return native;
   return /*#__PURE__*/_jsxs(View, {
     style: [style, styles.overlayContainer],
     collapsable: false,
@@ -200,7 +203,10 @@ export function OneKeyImage({
 }
 export const OneKeyImageCache = {
   preload(sources) {
-    return nativeCache.preload(sources.filter(source => Boolean(source.uri)).map(source => ({
+    const hasInvalidSource = sources.some(source => !source.uri?.trim());
+    const validSources = sources.filter(source => Boolean(source.uri?.trim()));
+    if (validSources.length === 0) return Promise.resolve(false);
+    return nativeCache.preload(validSources.map(source => ({
       uri: source.uri,
       headersJson: source.headers ? JSON.stringify(source.headers) : undefined,
       cachePolicy: source.cachePolicy ?? OneKeyImageCachePolicy.MEMORY_DISK,
@@ -209,7 +215,7 @@ export const OneKeyImageCache = {
       pixelRatio: source.pixelRatio,
       overscan: source.overscan,
       optimizeTos: source.optimizeTos
-    })));
+    }))).then(success => success && !hasInvalidSource);
   },
   clearMemory: () => nativeCache.clearMemory(),
   clearDisk: () => nativeCache.clearDisk(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-image",
-  "version": "3.0.99",
+  "version": "3.0.101",
   "description": "High-performance native image view for OneKey",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -81,7 +81,7 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@onekeyfe/react-native-skeleton": "3.0.99",
+    "@onekeyfe/react-native-skeleton": "3.0.101",
     "react": "*",
     "react-native": "*",
     "react-native-nitro-modules": "0.37.0"

package/src/index.tsx

@@ -307,10 +307,27 @@ export function OneKeyImage({
     ]
   );
 
+  const flattenedStyle = StyleSheet.flatten(style);
+  const hasRoundedCorners = Boolean(
+    flattenedStyle &&
+      [
+        flattenedStyle.borderRadius,
+        flattenedStyle.borderTopLeftRadius,
+        flattenedStyle.borderTopRightRadius,
+        flattenedStyle.borderBottomLeftRadius,
+        flattenedStyle.borderBottomRightRadius,
+        flattenedStyle.borderStartStartRadius,
+        flattenedStyle.borderStartEndRadius,
+        flattenedStyle.borderEndStartRadius,
+        flattenedStyle.borderEndEndRadius,
+      ].some((radius) => typeof radius === 'number' && radius > 0)
+  );
+  const shouldWrapNative = hasOverlay || hasRoundedCorners;
+
   const native = createElement(NativeOneKeyImage, {
     ...viewProps,
     ...nativeCallbacks,
-    style: hasOverlay ? StyleSheet.absoluteFill : style,
+    style: shouldWrapNative ? StyleSheet.absoluteFill : style,
     sourceUri: normalized?.uri,
     sourceHeadersJson: normalized?.headers
       ? JSON.stringify(normalized.headers)
@@ -326,7 +343,7 @@ export function OneKeyImage({
       placeholder == null ? loadingStrategy : OneKeyImageLoadingStrategy.NONE,
   });
 
-  if (!hasOverlay) return native;
+  if (!shouldWrapNative) return native;
 
   return (
     <View style={[style, styles.overlayContainer]} collapsable={false}>
@@ -347,11 +364,17 @@ export function OneKeyImage({
 
 export const OneKeyImageCache = {
   preload(sources: OneKeyImagePreloadInput[]) {
-    return nativeCache.preload(
-      sources
-        .filter((source) => Boolean(source.uri))
-        .map((source) => ({
-          uri: source.uri!,
+    const hasInvalidSource = sources.some((source) => !source.uri?.trim());
+    const validSources = sources.filter(
+      (source): source is OneKeyImagePreloadInput & { uri: string } =>
+        Boolean(source.uri?.trim())
+    );
+    if (validSources.length === 0) return Promise.resolve(false);
+
+    return nativeCache
+      .preload(
+        validSources.map((source) => ({
+          uri: source.uri,
           headersJson: source.headers
             ? JSON.stringify(source.headers)
             : undefined,
@@ -362,7 +385,8 @@ export const OneKeyImageCache = {
           overscan: source.overscan,
           optimizeTos: source.optimizeTos,
         }))
-    );
+      )
+      .then((success) => success && !hasInvalidSource);
   },
   clearMemory: () => nativeCache.clearMemory(),
   clearDisk: () => nativeCache.clearDisk(),