stream-chat-expo 9.1.2 → 9.1.3-beta.2

package/android/src/main/java/com/streamchatreactnative/shared/StreamShimmerFrameLayout.kt

@@ -1,16 +1,16 @@
 package com.streamchatreactnative
 
-import android.animation.ValueAnimator
 import android.content.Context
 import android.graphics.Canvas
 import android.graphics.Color
 import android.graphics.LinearGradient
 import android.graphics.Matrix
 import android.graphics.Paint
+import android.graphics.Rect
 import android.graphics.Shader
 import android.util.AttributeSet
+import android.view.Choreographer
 import android.view.View
-import android.view.animation.LinearInterpolator
 import android.widget.FrameLayout
 import kotlin.math.roundToInt
 
@@ -38,12 +38,12 @@ class StreamShimmerFrameLayout @JvmOverloads constructor(
     isDither = true
   }
   private val shimmerMatrix = Matrix()
+  private val visibleViewportRect = Rect()
 
   private var shimmerShader: LinearGradient? = null
   private var shimmerTranslateX: Float = 0f
-  private var animatedDurationMs: Long = 0L
-  private var animatedViewWidth: Float = 0f
-  private var animator: ValueAnimator? = null
+  private var isRegisteredForShimmerFrames: Boolean = false
+  private var shimmerStartTimeNanos: Long = UNSET_FRAME_TIME_NANOS
 
   init {
     setWillNotDraw(false)
@@ -68,6 +68,7 @@ class StreamShimmerFrameLayout @JvmOverloads constructor(
       if (duration > 0) duration.toLong() else DEFAULT_DURATION_MS
     if (durationMs == normalizedDurationMs) return
     durationMs = normalizedDurationMs
+    shimmerStartTimeNanos = UNSET_FRAME_TIME_NANOS
     updateAnimatorState()
   }
 
@@ -79,8 +80,8 @@ class StreamShimmerFrameLayout @JvmOverloads constructor(
   }
 
   fun updateAnimatorState() {
-    // Centralized lifecycle gate for animation start/stop. This keeps shimmer off for detached or
-    // hidden views to avoid wasting UI-thread work in long lists.
+    // Centralized lifecycle gate for the shared frame clock. This keeps shimmer off for detached or
+    // hidden views and prevents every mounted shimmer from owning a separate ValueAnimator.
     if (shouldAnimateShimmer()) {
       startShimmer()
     } else {
@@ -96,7 +97,7 @@ class StreamShimmerFrameLayout @JvmOverloads constructor(
   }
 
   override fun onDetachedFromWindow() {
-    // Detached views are not drawable; stop and clear animator so a future attach starts cleanly.
+    // Detached views are not drawable; unregister so a future attach starts cleanly.
     stopShimmer()
     super.onDetachedFromWindow()
   }
@@ -114,9 +115,7 @@ class StreamShimmerFrameLayout @JvmOverloads constructor(
 
   override fun onVisibilityChanged(changedView: View, visibility: Int) {
     super.onVisibilityChanged(changedView, visibility)
-    if (changedView === this) {
-      updateAnimatorState()
-    }
+    updateAnimatorState()
   }
 
   override fun dispatchDraw(canvas: Canvas) {
@@ -155,13 +154,10 @@ class StreamShimmerFrameLayout @JvmOverloads constructor(
       return
     }
 
-    // Wide multi-stop strip creates a softer "glassy" sweep and avoids the hard thin-line look.
+    // Match iOS CAGradientLayer shimmer stops so both platforms have the same visual falloff.
     val shimmerWidth = (viewWidth * SHIMMER_STRIP_WIDTH_RATIO).coerceAtLeast(1f)
     val transparentHighlight = colorWithAlpha(gradientColor, 0f)
-    val edgeBase = colorWithAlpha(gradientColor, EDGE_HIGHLIGHT_ALPHA_FACTOR)
     val softBase = colorWithAlpha(gradientColor, SOFT_HIGHLIGHT_ALPHA_FACTOR)
-    val mediumBase = colorWithAlpha(gradientColor, MID_HIGHLIGHT_ALPHA_FACTOR)
-    val innerBase = colorWithAlpha(gradientColor, INNER_HIGHLIGHT_ALPHA_FACTOR)
     shimmerShader = LinearGradient(
       0f,
       0f,
@@ -169,28 +165,16 @@ class StreamShimmerFrameLayout @JvmOverloads constructor(
       0f,
       intArrayOf(
         transparentHighlight,
-        edgeBase,
         softBase,
-        mediumBase,
-        innerBase,
         gradientColor,
-        innerBase,
-        mediumBase,
         softBase,
-        edgeBase,
         transparentHighlight,
       ),
       floatArrayOf(
         0f,
-        0.08f,
-        0.2f,
-        0.32f,
-        0.4f,
+        0.35f,
         0.5f,
-        0.6f,
-        0.68f,
-        0.8f,
-        0.92f,
+        0.65f,
         1f,
       ),
       Shader.TileMode.CLAMP,
@@ -198,34 +182,59 @@ class StreamShimmerFrameLayout @JvmOverloads constructor(
   }
 
   private fun startShimmer() {
+    if (isRegisteredForShimmerFrames) return
     val viewWidth = width.toFloat()
-    if (viewWidth <= 0f) return
-    // Keep the existing animator only when size and duration still match the current request.
-    if (animator != null && animatedViewWidth == viewWidth && animatedDurationMs == durationMs) return
+    shimmerStartTimeNanos = UNSET_FRAME_TIME_NANOS
+    if (viewWidth > 0f) {
+      shimmerTranslateX = -(viewWidth * SHIMMER_STRIP_WIDTH_RATIO).coerceAtLeast(1f)
+    }
+    isRegisteredForShimmerFrames = true
+    StreamShimmerFrameClock.register(this)
+  }
 
-    stopShimmer()
+  private fun stopShimmer() {
+    if (isRegisteredForShimmerFrames) {
+      isRegisteredForShimmerFrames = false
+      StreamShimmerFrameClock.unregister(this)
+    }
+    resetShimmerFrameState()
+  }
+
+  internal fun onSharedShimmerFrame(frameTimeNanos: Long) {
+    val viewWidth = width.toFloat()
+    if (viewWidth <= 0f || !hasVisibleViewport()) return
+
+    if (shimmerStartTimeNanos == UNSET_FRAME_TIME_NANOS) {
+      shimmerStartTimeNanos = frameTimeNanos
+    }
 
     // Animate from fully offscreen left to fully offscreen right so the strip enters/exits cleanly.
     val shimmerWidth = (viewWidth * SHIMMER_STRIP_WIDTH_RATIO).coerceAtLeast(1f)
-    animatedViewWidth = viewWidth
-    animatedDurationMs = durationMs
-    animator = ValueAnimator.ofFloat(-shimmerWidth, viewWidth).apply {
-      duration = durationMs
-      repeatCount = ValueAnimator.INFINITE
-      interpolator = LinearInterpolator()
-      addUpdateListener {
-        shimmerTranslateX = it.animatedValue as Float
-        invalidate()
-      }
-      start()
-    }
+    val durationNanos = (durationMs * NANOS_PER_MILLISECOND).coerceAtLeast(1L)
+    val elapsedNanos = (frameTimeNanos - shimmerStartTimeNanos).coerceAtLeast(0L)
+    val progress = (elapsedNanos % durationNanos).toFloat() / durationNanos.toFloat()
+
+    shimmerTranslateX = -shimmerWidth + ((viewWidth + shimmerWidth) * progress)
+    invalidate()
   }
 
-  private fun stopShimmer() {
-    animator?.cancel()
-    animator = null
-    animatedDurationMs = 0L
-    animatedViewWidth = 0f
+  internal fun onRemovedFromSharedFrameClock() {
+    isRegisteredForShimmerFrames = false
+    resetShimmerFrameState()
+  }
+
+  internal fun shouldRunSharedShimmerFrame(): Boolean {
+    return shouldAnimateShimmer()
+  }
+
+  private fun hasVisibleViewport(): Boolean {
+    visibleViewportRect.setEmpty()
+    return getGlobalVisibleRect(visibleViewportRect) && !visibleViewportRect.isEmpty
+  }
+
+  private fun resetShimmerFrameState() {
+    shimmerStartTimeNanos = UNSET_FRAME_TIME_NANOS
+    shimmerTranslateX = 0f
   }
 
   private fun shouldAnimateShimmer(): Boolean {
@@ -251,10 +260,51 @@ class StreamShimmerFrameLayout @JvmOverloads constructor(
     private const val DEFAULT_BASE_COLOR = 0x00FFFFFF
     private const val DEFAULT_DURATION_MS = 1200L
     private const val DEFAULT_GRADIENT_COLOR = 0x59FFFFFF
+    private const val NANOS_PER_MILLISECOND = 1_000_000L
     private const val SHIMMER_STRIP_WIDTH_RATIO = 1.25f
-    private const val EDGE_HIGHLIGHT_ALPHA_FACTOR = 0.1f
     private const val SOFT_HIGHLIGHT_ALPHA_FACTOR = 0.24f
-    private const val MID_HIGHLIGHT_ALPHA_FACTOR = 0.48f
-    private const val INNER_HIGHLIGHT_ALPHA_FACTOR = 0.72f
+    private const val UNSET_FRAME_TIME_NANOS = -1L
+  }
+}
+
+private object StreamShimmerFrameClock : Choreographer.FrameCallback {
+  private val activeViews = LinkedHashSet<StreamShimmerFrameLayout>()
+  private var frameScheduled = false
+
+  fun register(view: StreamShimmerFrameLayout) {
+    activeViews.add(view)
+    scheduleNextFrame()
+  }
+
+  fun unregister(view: StreamShimmerFrameLayout) {
+    activeViews.remove(view)
+    if (activeViews.isEmpty() && frameScheduled) {
+      Choreographer.getInstance().removeFrameCallback(this)
+      frameScheduled = false
+    }
+  }
+
+  override fun doFrame(frameTimeNanos: Long) {
+    frameScheduled = false
+    if (activeViews.isEmpty()) return
+
+    val iterator = activeViews.iterator()
+    while (iterator.hasNext()) {
+      val view = iterator.next()
+      if (view.shouldRunSharedShimmerFrame()) {
+        view.onSharedShimmerFrame(frameTimeNanos)
+      } else {
+        iterator.remove()
+        view.onRemovedFromSharedFrameClock()
+      }
+    }
+
+    scheduleNextFrame()
+  }
+
+  private fun scheduleNextFrame() {
+    if (frameScheduled || activeViews.isEmpty()) return
+    Choreographer.getInstance().postFrameCallback(this)
+    frameScheduled = true
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-expo",
   "description": "The official Expo SDK for Stream Chat, a service for building chat applications",
-  "version": "9.1.2",
+  "version": "9.1.3-beta.2",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -27,7 +27,7 @@
   "types": "types/index.d.ts",
   "dependencies": {
     "mime": "^4.0.7",
-    "stream-chat-react-native-core": "9.1.2"
+    "stream-chat-react-native-core": "9.1.3-beta.2"
   },
   "peerDependencies": {
     "expo": ">=52.0.0",