@onekeyfe/react-native-skeleton 3.0.95 → 3.0.98

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

@@ -0,0 +1,173 @@
+package com.margelo.nitro.skeleton
+
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.LinearGradient
+import android.graphics.Matrix
+import android.graphics.Paint
+import android.graphics.RectF
+import android.graphics.Shader
+import android.view.Choreographer
+import java.lang.ref.WeakReference
+
+public val ONEKEY_SKELETON_DEFAULT_COLORS: IntArray = intArrayOf(
+  Color.rgb(210, 210, 210),
+  Color.rgb(235, 235, 235),
+)
+
+/**
+ * One process-wide frame clock for every active skeleton renderer. The clock
+ * owns no Views and keeps listeners weak, avoiding one ValueAnimator per image.
+ */
+private object OneKeySkeletonClock : Choreographer.FrameCallback {
+  interface Listener {
+    fun onSkeletonFrame(frameTimeNanos: Long)
+  }
+
+  private val listeners = ArrayList<WeakReference<Listener>>()
+  private var scheduled = false
+
+  fun register(listener: Listener) {
+    var index = listeners.size - 1
+    while (index >= 0) {
+      val current = listeners[index].get()
+      if (current == null) {
+        listeners.removeAt(index)
+      } else if (current === listener) {
+        return
+      }
+      index--
+    }
+    listeners.add(WeakReference(listener))
+    if (!scheduled) {
+      scheduled = true
+      Choreographer.getInstance().postFrameCallback(this)
+    }
+  }
+
+  fun unregister(listener: Listener) {
+    var index = listeners.size - 1
+    while (index >= 0) {
+      val current = listeners[index].get()
+      if (current == null || current === listener) listeners.removeAt(index)
+      index--
+    }
+  }
+
+  override fun doFrame(frameTimeNanos: Long) {
+    scheduled = false
+    if (listeners.isEmpty()) return
+    var index = 0
+    while (index < listeners.size) {
+      val listener = listeners[index].get()
+      if (listener == null) {
+        listeners.removeAt(index)
+      } else {
+        listener.onSkeletonFrame(frameTimeNanos)
+        index++
+      }
+    }
+    if (listeners.isNotEmpty()) {
+      scheduled = true
+      Choreographer.getInstance().postFrameCallback(this)
+    }
+  }
+}
+
+/**
+ * View-independent shimmer renderer shared by Skeleton and OneKeyImage.
+ * Paint, Matrix and LinearGradient are retained and only rebuilt when bounds or
+ * colors change; draw() performs no shader/paint/matrix allocation.
+ */
+public class OneKeySkeletonRenderer(
+  private val invalidate: () -> Unit,
+) {
+  private val paint = Paint(Paint.ANTI_ALIAS_FLAG)
+  private val shaderMatrix = Matrix()
+  private val drawBounds = RectF()
+  private var colors = ONEKEY_SKELETON_DEFAULT_COLORS.copyOf()
+  private var shader: LinearGradient? = null
+  private var shaderWidth = -1f
+  private var durationNanos = 3_000_000_000L
+  private var startedAtNanos = 0L
+  private var phase = 0f
+  private var running = false
+  private val frameListener = object : OneKeySkeletonClock.Listener {
+    override fun onSkeletonFrame(frameTimeNanos: Long) {
+      handleFrame(frameTimeNanos)
+    }
+  }
+
+  public fun updateStyle(colors: IntArray?, durationSeconds: Double?) {
+    val nextColors = colors?.takeIf { it.size >= 2 }?.copyOfRange(0, 2)
+      ?: ONEKEY_SKELETON_DEFAULT_COLORS.copyOf()
+    val colorsChanged = !this.colors.contentEquals(nextColors)
+    this.colors = nextColors
+    durationNanos = ((durationSeconds ?: 3.0).coerceAtLeast(0.1) * 1_000_000_000L).toLong()
+    if (colorsChanged) invalidateShader()
+  }
+
+  public fun updateBounds(width: Int, height: Int) {
+    val nextWidth = width.coerceAtLeast(0).toFloat()
+    val nextHeight = height.coerceAtLeast(0).toFloat()
+    if (drawBounds.width() != nextWidth || drawBounds.height() != nextHeight) {
+      drawBounds.set(0f, 0f, nextWidth, nextHeight)
+      invalidateShader()
+    }
+  }
+
+  public fun start() {
+    if (running) return
+    running = true
+    startedAtNanos = 0L
+    OneKeySkeletonClock.register(frameListener)
+  }
+
+  public fun stop() {
+    if (!running) return
+    running = false
+    OneKeySkeletonClock.unregister(frameListener)
+  }
+
+  public fun draw(canvas: Canvas) {
+    if (drawBounds.isEmpty) return
+    ensureShader()
+    val width = drawBounds.width()
+    shaderMatrix.setTranslate(-width + (phase * width * 3f), 0f)
+    shader?.setLocalMatrix(shaderMatrix)
+    canvas.drawRect(drawBounds, paint)
+  }
+
+  private fun handleFrame(frameTimeNanos: Long) {
+    if (!running) return
+    if (startedAtNanos == 0L) startedAtNanos = frameTimeNanos
+    phase = ((frameTimeNanos - startedAtNanos) % durationNanos).toFloat() / durationNanos.toFloat()
+    invalidate()
+  }
+
+  private fun ensureShader() {
+    val width = drawBounds.width()
+    if (shader != null && shaderWidth == width) return
+    shader = LinearGradient(
+      0f,
+      0f,
+      width,
+      0f,
+      intArrayOf(colors[0], colors[1], colors[0]),
+      SHADER_STOPS,
+      Shader.TileMode.CLAMP,
+    )
+    shaderWidth = width
+    paint.shader = shader
+  }
+
+  private fun invalidateShader() {
+    shader = null
+    shaderWidth = -1f
+    paint.shader = null
+  }
+
+  private companion object {
+    val SHADER_STOPS = floatArrayOf(0f, 0.5f, 1f)
+  }
+}

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

@@ -1,232 +1,101 @@
 package com.margelo.nitro.skeleton
 
-import android.animation.ValueAnimator
 import android.graphics.Canvas
 import android.graphics.Color
-import android.graphics.LinearGradient
-import android.graphics.Paint
-import android.graphics.Shader
 import android.view.View
-import android.view.animation.LinearInterpolator
 import com.facebook.proguard.annotations.DoNotStrip
 import com.facebook.react.uimanager.ThemedReactContext
-import androidx.core.graphics.toColorInt
 
-// Animation constants
-val DEFAULT_GRADIENT_COLORS = intArrayOf(
-    Color.rgb(210, 210, 210),
-    Color.rgb(235, 235, 235)
-)
+private class SkeletonHostView(context: ThemedReactContext) : View(context) {
+  private val renderer = OneKeySkeletonRenderer { postInvalidateOnAnimation() }
+  var disposed = false
+  private var aggregatedVisible = true
 
-@DoNotStrip
-class HybridSkeleton(val context: ThemedReactContext) : HybridSkeletonSpec() {
-
-  // Shimmer animation
-  private var shimmerAnimator: ValueAnimator? = null
-  private var shimmerPaint: Paint = Paint()
-  private var translateX: Float = 0f
-
-  // Animation properties
-  private var customGradientColors: IntArray? = null
-  private var animationSpeed: Long = 3000L
-
-  // Memory safety flags
-  private var isDisposed: Boolean = false
-  private var retryCount: Int = 0
-  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}"
+  fun updateRenderer(colors: IntArray?, durationSeconds: Double) {
+    setBackgroundColor(colors?.firstOrNull() ?: ONEKEY_SKELETON_DEFAULT_COLORS[0])
+    renderer.updateStyle(colors, durationSeconds)
+    renderer.updateBounds(width, height)
+    syncAnimationState()
   }
 
-  // View with shimmer effect
-  override val view: View = object : View(context) {
-    override fun onDraw(canvas: Canvas) {
-      super.onDraw(canvas)
-
-      if (width > 0 && height > 0) {
-        val colors = customGradientColors ?: DEFAULT_GRADIENT_COLORS
-        val backgroundColor = colors[0]
-        val highlightColor = colors[1]
-
-        val gradient = LinearGradient(
-          translateX - width,
-          0f,
-          translateX,
-          0f,
-          intArrayOf(backgroundColor, highlightColor, backgroundColor),
-          floatArrayOf(0f, 0.5f, 1f),
-          Shader.TileMode.CLAMP
-        )
-
-        shimmerPaint.shader = gradient
-        canvas.drawRect(0f, 0f, width.toFloat(), height.toFloat(), shimmerPaint)
-      }
-    }
+  fun stopRenderer() {
+    renderer.stop()
   }
 
-  override var shimmerSpeed: Double?
-    get() = animationSpeed.toDouble() / 1000.0
-    set(value) {
-      if (isDisposed) return
-      animationSpeed = ((value ?: 3.0) * 1000).toLong()
-      restartShimmer()
-    }
+  override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+    super.onSizeChanged(w, h, oldw, oldh)
+    renderer.updateBounds(w, h)
+  }
 
-  override var shimmerGradientColors: Array<String>?
-    get() = customGradientColors?.map { String.format("#%06X", 0xFFFFFF and it) }?.toTypedArray()
-    set(value) {
-      if (isDisposed) return
-      if (value != null) {
-        customGradientColors = value.map { hexStringToColor(it) }.toIntArray()
-        restartShimmer()
-      }
-    }
+  override fun onDraw(canvas: Canvas) {
+    super.onDraw(canvas)
+    renderer.draw(canvas)
+  }
 
-  init {
-    setupView()
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    syncAnimationState()
   }
 
-  private fun setupView() {
-    view.post {
-      startShimmer()
-    }
+  override fun onDetachedFromWindow() {
+    super.onDetachedFromWindow()
+    syncAnimationState()
   }
 
-  private fun startShimmer() {
-    if (isDisposed) return
+  override fun onVisibilityAggregated(isVisible: Boolean) {
+    super.onVisibilityAggregated(isVisible)
+    aggregatedVisible = isVisible
+    syncAnimationState()
+  }
 
-    stopShimmer()
-    retryCount = 0 // Reset retry count
-    startShimmerInternal()
+  private fun syncAnimationState() {
+    if (!disposed && isAttachedToWindow && aggregatedVisible) renderer.start() else renderer.stop()
   }
+}
 
-  private fun startShimmerInternal() {
-    if (isDisposed) return
-
-    if (view.width == 0 || view.height == 0) {
-      // Check if we have exceeded max retry count
-      if (retryCount >= maxRetryCount) {
-        android.util.Log.w("HybridSkeleton", "Max retry count reached. View bounds are still empty.")
-        return
-      }
-
-      retryCount++
-      // Clean up previous pending runnable
-      pendingStartRunnable?.let { view.removeCallbacks(it) }
-
-      // Create new runnable and schedule
-      val runnable = Runnable {
-        if (!isDisposed) {
-          startShimmerInternal()
-        }
-      }
-      pendingStartRunnable = runnable
-      view.postDelayed(runnable, 100)
-      return
-    }
+/** Thin Nitro adapter around the reusable view-independent renderer. */
+@DoNotStrip
+class HybridSkeleton(context: ThemedReactContext) : HybridSkeletonSpec() {
+  private val hostView = SkeletonHostView(context)
+  private var colors: IntArray? = null
+  private var durationSeconds = 3.0
 
-    val width = view.width.toFloat()
-
-    shimmerAnimator = ValueAnimator.ofFloat(-width, width * 2).apply {
-      duration = animationSpeed
-      repeatCount = ValueAnimator.INFINITE
-      interpolator = LinearInterpolator()
-      addUpdateListener { animation ->
-        if (!isDisposed) {
-          translateX = animation.animatedValue as Float
-          view.invalidate()
-        }
-      }
-      start()
-    }
+  override val view: View = hostView
 
-    // 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() {
-    // Clean up pending runnable
-    pendingStartRunnable?.let {
-      view.removeCallbacks(it)
-      pendingStartRunnable = null
+  override var shimmerSpeed: Double?
+    get() = durationSeconds
+    set(value) {
+      if (hostView.disposed) return
+      durationSeconds = (value ?: 3.0).coerceAtLeast(0.1)
+      updateRenderer()
     }
 
-    // Clean up animator and its listeners
-    shimmerAnimator?.apply {
-      removeAllUpdateListeners()
-      cancel()
+  override var shimmerGradientColors: Array<String>?
+    get() = colors?.map { String.format("#%06X", 0xFFFFFF and it) }?.toTypedArray()
+    set(value) {
+      if (hostView.disposed) return
+      colors = value?.takeIf { it.size >= 2 }?.take(2)?.map(::parseColor)?.toIntArray()
+      updateRenderer()
     }
-    shimmerAnimator = null
-    isShimmerRunning = false
-  }
 
   override fun afterUpdate() {
     super.afterUpdate()
-    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()
+    if (!hostView.disposed) updateRenderer()
   }
 
-  private fun restartShimmer() {
-    if (isDisposed) return
-    stopShimmer()
-    retryCount = 0 // Reset retry count on restart
-    startShimmerInternal()
+  override fun dispose() {
+    hostView.disposed = true
+    hostView.stopRenderer()
+    super.dispose()
   }
 
-  private fun hexStringToColor(hexColor: String): Int {
-    var hexSanitized = hexColor.trim()
-
-    if (hexSanitized.startsWith("#")) {
-      hexSanitized = hexSanitized.substring(1)
-    }
-
-    return try {
-      Color.parseColor("#$hexSanitized")
-    } catch (e: Exception) {
-      DEFAULT_GRADIENT_COLORS[0]
-    }
+  private fun updateRenderer() {
+    hostView.updateRenderer(colors, durationSeconds)
   }
 
-  override fun dispose() {
-    // Mark as disposed to prevent any new operations
-    isDisposed = true
-
-    // Stop all animations and clean up
-    stopShimmer()
-
-    // Clear view references to prevent memory leaks
-    view.invalidate()
+  private fun parseColor(value: String): Int = try {
+    Color.parseColor(value)
+  } catch (_: IllegalArgumentException) {
+    ONEKEY_SKELETON_DEFAULT_COLORS[0]
   }
 }