@onekeyfe/react-native-skeleton 3.0.48 → 3.0.49

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

@@ -36,6 +36,27 @@ class HybridSkeleton(val context: ThemedReactContext) : HybridSkeletonSpec() {
   private val maxRetryCount: Int = 10
   private var pendingStartRunnable: Runnable? = null
 
+  // Guard against high-frequency afterUpdate() ValueAnimator churn (REACT-NATIVE-40K ANR).
+  // Fabric calls afterUpdate() on every prop commit, and list/order-book screens update
+  // very frequently. Unconditionally restarting the shimmer cancels/rebuilds the
+  // ValueAnimator each time (ValueAnimator.cancel -> AnimationHandler.removeCallback ->
+  // ArrayList.indexOf), blocking the main thread. We cache a signature of the inputs that
+  // actually drive the animation (speed + gradient colors + view size) and only restart
+  // when that signature changes. If nothing relevant changed and the shimmer is already
+  // running, we leave the existing animator untouched (no cancel, no rebuild).
+  private var lastShimmerSignature: String? = null
+  private var isShimmerRunning: Boolean = false
+
+  // Build a signature from every input that decides the shimmer animation:
+  // - animationSpeed -> ValueAnimator.duration
+  // - gradient colors -> shimmer gradient / draw output
+  // - view width/height -> animation travel range (-width..width*2) and draw bounds
+  private fun currentShimmerSignature(): String {
+    val colors = customGradientColors ?: DEFAULT_GRADIENT_COLORS
+    val colorsKey = colors.joinToString(",")
+    return "$animationSpeed|$colorsKey|${view.width}x${view.height}"
+  }
+
   // View with shimmer effect
   override val view: View = object : View(context) {
     override fun onDraw(canvas: Canvas) {
@@ -137,6 +158,11 @@ class HybridSkeleton(val context: ThemedReactContext) : HybridSkeletonSpec() {
       }
       start()
     }
+
+    // Record the inputs this running animator was built from, so afterUpdate() can skip
+    // restarting while none of them change.
+    lastShimmerSignature = currentShimmerSignature()
+    isShimmerRunning = true
   }
 
   private fun stopShimmer() {
@@ -152,13 +178,24 @@ class HybridSkeleton(val context: ThemedReactContext) : HybridSkeletonSpec() {
       cancel()
     }
     shimmerAnimator = null
+    isShimmerRunning = false
   }
 
   override fun afterUpdate() {
     super.afterUpdate()
-    if (!isDisposed) {
-      restartShimmer()
+    if (isDisposed) return
+
+    // Defensive guard against ValueAnimator churn (REACT-NATIVE-40K ANR):
+    // afterUpdate() runs on every Fabric prop commit. Only restart the shimmer when an
+    // input that actually drives the animation changed (speed / colors / view size).
+    // If the shimmer is already running and nothing relevant changed, leave the existing
+    // ValueAnimator alone to avoid main-thread cancel/rebuild churn.
+    val signature = currentShimmerSignature()
+    if (isShimmerRunning && shimmerAnimator != null && signature == lastShimmerSignature) {
+      return
     }
+
+    restartShimmer()
   }
 
   private fun restartShimmer() {

package/ios/Skeleton.swift

@@ -15,6 +15,31 @@ class HybridSkeleton : HybridSkeletonSpec {
   private let maxRetryCount: Int = 10
   private var viewObserver: NSKeyValueObservation?
 
+  // Guard against high-frequency afterUpdate() animation churn (REACT-NATIVE-40K ANR).
+  // Fabric calls afterUpdate() on every prop commit; list/order-book screens update very
+  // frequently. Unconditionally restarting the shimmer tears down/rebuilds the
+  // CAGradientLayer + CABasicAnimation each time on the main thread. We cache a signature
+  // of the inputs that actually drive the animation (speed + gradient colors + bounds) and
+  // only restart when that signature changes. Otherwise the running animation is left as-is.
+  private var lastShimmerSignature: String?
+  private var isShimmerRunning: Bool = false
+
+  // Build a signature from every input that decides the shimmer animation:
+  // - shimmerSpeed -> CABasicAnimation.duration
+  // - gradient colors -> CAGradientLayer.colors
+  // - view bounds -> animation travel range (-width..width) and layer frames
+  private func currentShimmerSignature() -> String {
+    let colors: [UIColor] = customGradientColors ?? DEFAULT_GRADIENT_COLORS
+    let colorsKey = colors.map { color -> String in
+      var r: CGFloat = 0, g: CGFloat = 0, b: CGFloat = 0, a: CGFloat = 0
+      color.getRed(&r, green: &g, blue: &b, alpha: &a)
+      return "\(r)-\(g)-\(b)-\(a)"
+    }.joined(separator: ",")
+    let speed = shimmerSpeed ?? 3
+    let bounds = view.bounds
+    return "\(speed)|\(colorsKey)|\(bounds.width)x\(bounds.height)"
+  }
+
   var shimmerGradientColors: [String]? {
     didSet {
       guard isActive else { return }
@@ -172,6 +197,11 @@ class HybridSkeleton : HybridSkeletonSpec {
 
     // Use weak self pattern for potential future animation delegates/completion handlers
     gradientLayer.add(animation, forKey: "shimmerAnimation")
+
+    // Record the inputs this running animation was built from, so afterUpdate() can skip
+    // restarting while none of them change.
+    lastShimmerSignature = currentShimmerSignature()
+    isShimmerRunning = true
   }
 
   func stopShimmer() {
@@ -195,12 +225,24 @@ class HybridSkeleton : HybridSkeletonSpec {
     // Nil out references
     shimmerLayer = nil
     skeletonLayer = nil
+    isShimmerRunning = false
   }
 
   func afterUpdate() {
     guard isActive else { return }
     DispatchQueue.main.async { [weak self] in
       guard let self = self, self.isActive else { return }
+
+      // Defensive guard against animation churn (REACT-NATIVE-40K ANR):
+      // afterUpdate() runs on every Fabric prop commit. Only restart the shimmer when an
+      // input that actually drives the animation changed (speed / colors / bounds). If the
+      // shimmer is already running and nothing relevant changed, leave the existing
+      // CABasicAnimation alone to avoid main-thread layer teardown/rebuild churn.
+      let signature = self.currentShimmerSignature()
+      if self.isShimmerRunning, self.shimmerLayer != nil, signature == self.lastShimmerSignature {
+        return
+      }
+
       self.restartShimmer()
     }
   }

package/package.json

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