@onekeyfe/react-native-skeleton 1.1.11 → 1.1.12

package/android/src/main/java/com/margelo/nitro/skeleton/Skeleton.kt

@@ -132,4 +132,8 @@ class HybridSkeleton(val context: ThemedReactContext) : HybridSkeletonSpec() {
       DEFAULT_GRADIENT_COLORS[0]
     }
   }
+
+  override fun dispose() {
+    stopShimmer()
+  }
 }

package/ios/Skeleton.swift

@@ -6,17 +6,22 @@ let DEFAULT_GRADIENT_COLORS: [UIColor] = [UIColor(red: 210.0/255.0, green: 210.0
 
 class HybridSkeleton : HybridSkeletonSpec {
   
-  // Shimmer layer
+  // Shimmer layers
   private var shimmerLayer: CAGradientLayer?
+  private var skeletonLayer: CALayer?
   private var customGradientColors: [UIColor]?
+  private var isActive: Bool = true
+  private var retryCount: Int = 0
+  private let maxRetryCount: Int = 10
+  private var viewObserver: NSKeyValueObservation?
   
   var shimmerGradientColors: [String]? {
     didSet {
-      Task {
-        customGradientColors = shimmerGradientColors?.map { hexStringToUIColor(hexColor: $0) }
-        await MainActor.run {
-          restartShimmer()
-        }
+      guard isActive else { return }
+      DispatchQueue.main.async { [weak self] in
+        guard let self = self, self.isActive else { return }
+        self.customGradientColors = shimmerGradientColors?.map { self.hexStringToUIColor(hexColor: $0) }
+        self.restartShimmer()
       }
     }
   }
@@ -26,7 +31,11 @@ class HybridSkeleton : HybridSkeletonSpec {
 
   var shimmerSpeed: Double? {
     didSet {
-      restartShimmer()
+      guard isActive else { return }
+      DispatchQueue.main.async { [weak self] in
+        guard let self = self, self.isActive else { return }
+        self.restartShimmer()
+      }
     }
   }
   
@@ -35,22 +44,72 @@ class HybridSkeleton : HybridSkeletonSpec {
     setupView()
   }
   
+  deinit {
+    // Mark as inactive to prevent any new operations
+    isActive = false
+    
+    // Clean up observer
+    viewObserver?.invalidate()
+    viewObserver = nil
+    
+    // Ensure all cleanup happens on main thread synchronously
+    if Thread.isMainThread {
+      stopShimmer()
+    } else {
+      DispatchQueue.main.sync {
+        self.stopShimmer()
+      }
+    }
+    
+    // Clear view reference and ensure no dangling animations
+    view.layer.removeAllAnimations()
+    view.layer.sublayers?.removeAll()
+    view.layer.mask = nil
+  }
+  
   private func setupView() {
     view.clipsToBounds = true
     
+    // Observe view hierarchy changes for cleanup
+    viewObserver = view.observe(\.superview, options: [.new]) { [weak self] view, change in
+      guard let self = self else { return }
+      if change.newValue == nil {
+        // View was removed from hierarchy, clean up
+        DispatchQueue.main.async { [weak self] in
+          self?.stopShimmer()
+        }
+      }
+    }
+    
     // Start animation when view is ready
-    DispatchQueue.main.async {
+    DispatchQueue.main.async { [weak self] in
+      guard let self = self, self.isActive else { return }
       self.startShimmer()
     }
   }
   
   func startShimmer() {
+    retryCount = 0 // Reset retry count when starting new shimmer
+    startShimmerInternal()
+  }
+  
+  private func startShimmerInternal() {
+    guard isActive else { return }
+    
     stopShimmer()
     
     guard !view.bounds.isEmpty else {
+      // Check if we have exceeded max retry count
+      guard retryCount < maxRetryCount else {
+        print("⚠️ Skeleton shimmer: Max retry count reached. View bounds are still empty.")
+        return
+      }
+      
+      retryCount += 1
       // Retry after a short delay if bounds are not ready
-      DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
-        self.startShimmer()
+      DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) { [weak self] in
+        guard let self = self, self.isActive else { return }
+        self.startShimmerInternal()
       }
       return
     }
@@ -59,12 +118,14 @@ class HybridSkeleton : HybridSkeletonSpec {
     let backgroundColor = colors[0].cgColor
     let highlightColor = colors[1].cgColor
     
-    let skeletonLayer = CALayer()
-    skeletonLayer.backgroundColor = backgroundColor
-    skeletonLayer.name = "SkeletonLayer"
-    skeletonLayer.anchorPoint = .zero
-    skeletonLayer.frame = view.bounds
+    // Create skeleton layer for masking
+    let newSkeletonLayer = CALayer()
+    newSkeletonLayer.backgroundColor = backgroundColor
+    newSkeletonLayer.name = "SkeletonLayer"
+    newSkeletonLayer.anchorPoint = .zero
+    newSkeletonLayer.frame = view.bounds
     
+    // Create gradient layer for animation
     let gradientLayer = CAGradientLayer()
     gradientLayer.colors = [backgroundColor, highlightColor, backgroundColor]
     gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
@@ -72,13 +133,16 @@ class HybridSkeleton : HybridSkeletonSpec {
     gradientLayer.frame = view.bounds
     gradientLayer.name = "ShimmerLayer"
     
-    view.layer.mask = skeletonLayer
-    view.layer.addSublayer(skeletonLayer)
+    // Set mask and add gradient layer (don't add skeleton layer as sublayer)
+    view.layer.mask = newSkeletonLayer
     view.layer.addSublayer(gradientLayer)
     view.clipsToBounds = true
     
+    // Store references
+    skeletonLayer = newSkeletonLayer
     shimmerLayer = gradientLayer
     
+    // Create animation
     let width = view.bounds.width
     let animation = CABasicAnimation(keyPath: "transform.translation.x")
     animation.duration = shimmerSpeed ?? 3
@@ -87,23 +151,48 @@ class HybridSkeleton : HybridSkeletonSpec {
     animation.repeatCount = .infinity
     animation.autoreverses = false
     animation.fillMode = CAMediaTimingFillMode.forwards
+    animation.isRemovedOnCompletion = false // Keep animation when completed
     
+    // Use weak self pattern for potential future animation delegates/completion handlers
     gradientLayer.add(animation, forKey: "shimmerAnimation")
   }
   
   func stopShimmer() {
-    shimmerLayer?.removeAnimation(forKey: "shimmerAnimation")
+    // Remove animation from shimmer layer
+    shimmerLayer?.removeAllAnimations()  // Remove all animations, more comprehensive
     shimmerLayer?.removeFromSuperlayer()
+    
+    // Clear mask reference before setting to nil
+    if view.layer.mask === skeletonLayer {
+      view.layer.mask = nil
+    }
+    
+    // Clean up all sublayers that might be shimmer layers
+    view.layer.sublayers?.forEach { layer in
+      if layer.name == "ShimmerLayer" {
+        layer.removeAllAnimations()
+        layer.removeFromSuperlayer()
+      }
+    }
+    
+    // Nil out references
     shimmerLayer = nil
+    skeletonLayer = nil
   }
   
   func afterUpdate() {
-    restartShimmer()
+    guard isActive else { return }
+    DispatchQueue.main.async { [weak self] in
+      guard let self = self, self.isActive else { return }
+      self.restartShimmer()
+    }
   }
   
   func restartShimmer() {
+    guard isActive else { return }
     stopShimmer()
-    startShimmer()
+    retryCount = 0 // Reset retry count on restart
+    startShimmerInternal()
   }
   
   func hexStringToUIColor(hexColor: String) -> UIColor {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-skeleton",
-  "version": "1.1.11",
+  "version": "1.1.12",
   "description": "react-native-skeleton",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",