@onekeyfe/react-native-image 3.0.122 → 3.0.124

package/ios/OneKeyImage.swift

@@ -344,11 +344,14 @@ final class HybridOneKeyImage: HybridOneKeyImageSpec, RecyclableView {
       manager: safetyHandle.manager,
       url: url
     )
-    hostView.sd_setImage(
+    hostView.sd_internalSetImage(
       with: url,
       placeholderImage: nil,
       options: OneKeyImageRequestContext.renderOptions,
       context: context,
+      setImageBlock: { [weak self] image, _, _, _ in
+        self?.applyDisplayedImage(image, generation: generation)
+      },
       progress: { [weak self] receivedSize, _, _ in
         guard safetyHandle.tracker.inspectReceivedByteCount(Int64(receivedSize)) else { return }
         DispatchQueue.main.async { [weak self] in
@@ -356,7 +359,9 @@ final class HybridOneKeyImage: HybridOneKeyImageSpec, RecyclableView {
           self.hostView.sd_cancelCurrentImageLoad()
         }
       },
-      completed: { [weak self] image, error, cacheType, _ in
+      completed: { [weak self] image, _, error, cacheType, finished, _ in
+        // Progressive loads deliver partial images before the terminal callback.
+        guard finished else { return }
         guard let self, self.requestGeneration == generation else {
           safetyHandle.finish()
           return
@@ -515,6 +520,18 @@ final class HybridOneKeyImage: HybridOneKeyImageSpec, RecyclableView {
     }
   }
 
+  // OneKey patch: SDWebImage assigns `image` from inside its own completion, which
+  // runs before this object's generation guard and never re-checks whether the view
+  // still belongs to the request that started the load. Fabric recycles a single
+  // OneKeyImage UIView across unrelated images, so a superseded completion could
+  // repaint a slot that now shows a different image. Every write goes through here.
+  func applyDisplayedImage(_ image: UIImage?, generation: UInt64) {
+    guard Self.isCurrentRequestGeneration(generation, current: requestGeneration) else {
+      return
+    }
+    hostView.image = image
+  }
+
   private func showLoading(
     requestIsActive: Bool,
     letLibraryStartIndicator: Bool
@@ -579,7 +596,7 @@ final class HybridOneKeyImage: HybridOneKeyImageSpec, RecyclableView {
     skeletonIndicator.stopAnimatingIndicator()
     fallbackLayer.isHidden = true
     resetImageTransition()
-    hostView.image = image
+    applyDisplayedImage(image, generation: generation)
     hostView.backgroundColor = .clear
     if requestIsActive {
       applyLoadedImageTransition(cacheType: .memory)

package/ios/tests/OneKeyImageInfrastructureTests.swift

@@ -1,6 +1,7 @@
 import SDWebImage
 import SDWebImageSVGCoder
 import SDWebImageWebPCoder
+import UIKit
 import XCTest
 
 @testable import OneKeyImage
@@ -543,6 +544,18 @@ final class OneKeyImageInfrastructureTests: XCTestCase {
     )
   }
 
+  func testSupersededRequestNeverPaintsRecycledView() throws {
+    let image = HybridOneKeyImage()
+    let imageView = try XCTUnwrap(image.view as? SDAnimatedImageView)
+    let painted = UIImage()
+
+    image.applyDisplayedImage(painted, generation: .max)
+    XCTAssertNil(imageView.image)
+
+    image.applyDisplayedImage(painted, generation: 0)
+    XCTAssertIdentical(imageView.image, painted)
+  }
+
   func testAnimatedViewUsesBoundedFrameBuffer() throws {
     let image = HybridOneKeyImage()
     let imageView = try XCTUnwrap(image.view as? SDAnimatedImageView)

package/lib/module/index.js

@@ -173,6 +173,30 @@ 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 hasBorderWidth = Boolean(flattenedStyle && [flattenedStyle.borderWidth, flattenedStyle.borderTopWidth, flattenedStyle.borderRightWidth, flattenedStyle.borderBottomWidth, flattenedStyle.borderLeftWidth].some(width => typeof width === 'number' && width > 0));
+  const borderOverlayStyle = flattenedStyle && hasRoundedCorners && hasBorderWidth ? {
+    borderWidth: flattenedStyle.borderWidth,
+    borderTopWidth: flattenedStyle.borderTopWidth,
+    borderRightWidth: flattenedStyle.borderRightWidth,
+    borderBottomWidth: flattenedStyle.borderBottomWidth,
+    borderLeftWidth: flattenedStyle.borderLeftWidth,
+    borderColor: flattenedStyle.borderColor,
+    borderTopColor: flattenedStyle.borderTopColor,
+    borderRightColor: flattenedStyle.borderRightColor,
+    borderBottomColor: flattenedStyle.borderBottomColor,
+    borderLeftColor: flattenedStyle.borderLeftColor,
+    borderStyle: flattenedStyle.borderStyle,
+    borderRadius: flattenedStyle.borderRadius,
+    borderTopLeftRadius: flattenedStyle.borderTopLeftRadius,
+    borderTopRightRadius: flattenedStyle.borderTopRightRadius,
+    borderBottomLeftRadius: flattenedStyle.borderBottomLeftRadius,
+    borderBottomRightRadius: flattenedStyle.borderBottomRightRadius,
+    borderStartStartRadius: flattenedStyle.borderStartStartRadius,
+    borderStartEndRadius: flattenedStyle.borderStartEndRadius,
+    borderEndStartRadius: flattenedStyle.borderEndStartRadius,
+    borderEndEndRadius: flattenedStyle.borderEndEndRadius,
+    zIndex: 1
+  } : undefined;
   const native = /*#__PURE__*/createElement(NativeOneKeyImage, {
     ...viewProps,
     ...nativeCallbacks,
@@ -192,7 +216,7 @@ export function OneKeyImage({
   });
   if (!shouldWrapNative) return native;
   return /*#__PURE__*/_jsxs(View, {
-    style: [style, styles.overlayContainer],
+    style: [style, styles.overlayContainer, borderOverlayStyle ? styles.borderlessContainer : undefined],
     collapsable: false,
     children: [native, effectiveState === 'loading' && placeholder != null ? /*#__PURE__*/_jsx(View, {
       pointerEvents: "none",
@@ -202,6 +226,9 @@ export function OneKeyImage({
       pointerEvents: "none",
       style: StyleSheet.absoluteFill,
       children: fallback
+    }) : null, borderOverlayStyle ? /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      style: [StyleSheet.absoluteFill, borderOverlayStyle]
     }) : null]
   });
 }
@@ -228,6 +255,13 @@ export const OneKeyImageCache = {
 const styles = StyleSheet.create({
   overlayContainer: {
     overflow: 'hidden'
+  },
+  borderlessContainer: {
+    borderWidth: 0,
+    borderTopWidth: 0,
+    borderRightWidth: 0,
+    borderBottomWidth: 0,
+    borderLeftWidth: 0
   }
 });
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-image",
-  "version": "3.0.122",
+  "version": "3.0.124",
   "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.122",
+    "@onekeyfe/react-native-skeleton": "3.0.124",
     "react": "*",
     "react-native": "*",
     "react-native-nitro-modules": "0.37.0"

package/src/index.tsx

@@ -325,6 +325,42 @@ export function OneKeyImage({
       ].some((radius) => typeof radius === 'number' && radius > 0)
   );
   const shouldWrapNative = hasOverlay || hasRoundedCorners;
+  const hasBorderWidth = Boolean(
+    flattenedStyle &&
+      [
+        flattenedStyle.borderWidth,
+        flattenedStyle.borderTopWidth,
+        flattenedStyle.borderRightWidth,
+        flattenedStyle.borderBottomWidth,
+        flattenedStyle.borderLeftWidth,
+      ].some((width) => typeof width === 'number' && width > 0)
+  );
+  const borderOverlayStyle =
+    flattenedStyle && hasRoundedCorners && hasBorderWidth
+      ? {
+          borderWidth: flattenedStyle.borderWidth,
+          borderTopWidth: flattenedStyle.borderTopWidth,
+          borderRightWidth: flattenedStyle.borderRightWidth,
+          borderBottomWidth: flattenedStyle.borderBottomWidth,
+          borderLeftWidth: flattenedStyle.borderLeftWidth,
+          borderColor: flattenedStyle.borderColor,
+          borderTopColor: flattenedStyle.borderTopColor,
+          borderRightColor: flattenedStyle.borderRightColor,
+          borderBottomColor: flattenedStyle.borderBottomColor,
+          borderLeftColor: flattenedStyle.borderLeftColor,
+          borderStyle: flattenedStyle.borderStyle,
+          borderRadius: flattenedStyle.borderRadius,
+          borderTopLeftRadius: flattenedStyle.borderTopLeftRadius,
+          borderTopRightRadius: flattenedStyle.borderTopRightRadius,
+          borderBottomLeftRadius: flattenedStyle.borderBottomLeftRadius,
+          borderBottomRightRadius: flattenedStyle.borderBottomRightRadius,
+          borderStartStartRadius: flattenedStyle.borderStartStartRadius,
+          borderStartEndRadius: flattenedStyle.borderStartEndRadius,
+          borderEndStartRadius: flattenedStyle.borderEndStartRadius,
+          borderEndEndRadius: flattenedStyle.borderEndEndRadius,
+          zIndex: 1,
+        }
+      : undefined;
 
   const native = createElement(NativeOneKeyImage, {
     ...viewProps,
@@ -350,7 +386,14 @@ export function OneKeyImage({
   if (!shouldWrapNative) return native;
 
   return (
-    <View style={[style, styles.overlayContainer]} collapsable={false}>
+    <View
+      style={[
+        style,
+        styles.overlayContainer,
+        borderOverlayStyle ? styles.borderlessContainer : undefined,
+      ]}
+      collapsable={false}
+    >
       {native}
       {effectiveState === 'loading' && placeholder != null ? (
         <View pointerEvents="none" style={StyleSheet.absoluteFill}>
@@ -362,6 +405,12 @@ export function OneKeyImage({
           {fallback}
         </View>
       ) : null}
+      {borderOverlayStyle ? (
+        <View
+          pointerEvents="none"
+          style={[StyleSheet.absoluteFill, borderOverlayStyle]}
+        />
+      ) : null}
     </View>
   );
 }
@@ -401,4 +450,11 @@ const styles = StyleSheet.create({
   overlayContainer: {
     overflow: 'hidden',
   },
+  borderlessContainer: {
+    borderWidth: 0,
+    borderTopWidth: 0,
+    borderRightWidth: 0,
+    borderBottomWidth: 0,
+    borderLeftWidth: 0,
+  },
 });