stream-chat-react-native 8.13.7 → 9.0.0-beta.1

package/android/build.gradle

@@ -1,3 +1,8 @@
+def kotlinVersion =
+  rootProject.ext.has("kotlinVersion")
+    ? rootProject.ext.get("kotlinVersion")
+    : project.properties["ImageResizer_kotlinVersion"]
+
 buildscript {
   repositories {
     google()
@@ -6,7 +11,7 @@ buildscript {
 
   dependencies {
     classpath "com.android.tools.build:gradle:7.2.1"
-
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
   }
 }
 
@@ -15,6 +20,7 @@ def isNewArchitectureEnabled() {
 }
 
 apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
 
 
 def appProject = rootProject.allprojects.find { it.plugins.hasPlugin('com.android.application') }
@@ -30,6 +36,11 @@ def getExtOrDefault(name) {
 def getExtOrIntegerDefault(name) {
   return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["ImageResizer_" + name]).toInteger()
 }
+def localSharedNativeRootDir = new File(projectDir, "src/main/java/com/streamchatreactnative/shared")
+def sharedNativeRootDir = new File(projectDir, "../../shared-native/android")
+def hasNativeSources = { File dir ->
+  dir.exists() && !fileTree(dir).matching { include "**/*.kt"; include "**/*.java" }.files.isEmpty()
+}
 
 android {
   compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
@@ -65,11 +76,16 @@ android {
     targetCompatibility JavaVersion.VERSION_1_8
   }
 
+  kotlinOptions {
+    jvmTarget = "17"
+  }
+
   sourceSets {
     main {
       if (isNewArchitectureEnabled()) {
         java.srcDirs += [
           "src/newarch",
+          "src/main/java/com/streamchatreactnative/shared",
           // This is needed to build Kotlin project with NewArch enabled
           "${project.buildDir}/generated/source/codegen/java"
         ]
@@ -80,6 +96,44 @@ android {
   }
 }
 
+tasks.register("syncSharedShimmerSources") {
+  outputs.dir(localSharedNativeRootDir)
+  outputs.upToDateWhen { false }
+  doLast {
+    def sourceRootDir = null
+    if (hasNativeSources(localSharedNativeRootDir)) {
+      sourceRootDir = localSharedNativeRootDir
+    } else if (hasNativeSources(sharedNativeRootDir)) {
+      sourceRootDir = sharedNativeRootDir
+    }
+
+    if (sourceRootDir == null) {
+      throw new GradleException(
+        "Missing shared native Android sources. Expected either src/main/java/com/streamchatreactnative/shared/**/*.{kt,java} " +
+          "or ../../shared-native/android/**/*.{kt,java}."
+      )
+    }
+
+    if (sourceRootDir != localSharedNativeRootDir) {
+      project.delete(localSharedNativeRootDir)
+      project.copy {
+        from(sourceRootDir)
+        into(localSharedNativeRootDir)
+      }
+    } else if (!hasNativeSources(localSharedNativeRootDir)) {
+      throw new GradleException("Shared native source directory exists but has no Kotlin/Java files.")
+    }
+  }
+}
+
+tasks.matching { it.name == "preBuild" }.configureEach {
+  dependsOn("syncSharedShimmerSources")
+}
+
+tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).configureEach {
+  dependsOn("syncSharedShimmerSources")
+}
+
 repositories {
   mavenCentral()
   google()

package/android/src/main/java/com/streamchatreactnative/StreamChatReactNativePackage.java

@@ -6,9 +6,11 @@ import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.module.model.ReactModuleInfo;
 import com.facebook.react.module.model.ReactModuleInfoProvider;
 import com.facebook.react.TurboReactPackage;
-
+import com.facebook.react.uimanager.ViewManager;
 
 import java.util.HashMap;
+import java.util.Collections;
+import java.util.List;
 import java.util.Map;
 
 public class StreamChatReactNativePackage extends TurboReactPackage {
@@ -42,4 +44,9 @@ public class StreamChatReactNativePackage extends TurboReactPackage {
       return moduleInfos;
     };
   }
+
+  @Override
+  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+    return Collections.<ViewManager>singletonList(new StreamShimmerViewManager());
+  }
 }

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

@@ -0,0 +1,260 @@
+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.Shader
+import android.util.AttributeSet
+import android.view.View
+import android.view.animation.LinearInterpolator
+import android.widget.FrameLayout
+import kotlin.math.roundToInt
+
+/**
+ * Native shimmer container used by `StreamShimmerView`.
+ *
+ * This view draws a base color plus a moving highlight strip directly on canvas and still behaves
+ * like a regular container for React children. The animation runs fully on the native side so it
+ * does not depend on JS-driven frame updates. It automatically stops animating when the view is
+ * detached or not visible, rebuilds its shader when size or colors change, and waits for valid
+ * dimensions before starting animation to avoid invalid draw/animation states.
+ */
+class StreamShimmerFrameLayout @JvmOverloads constructor(
+  context: Context,
+  attrs: AttributeSet? = null,
+) : FrameLayout(context, attrs) {
+  private var baseColor: Int = DEFAULT_BASE_COLOR
+  private var durationMs: Long = DEFAULT_DURATION_MS
+  private var gradientColor: Int = DEFAULT_GRADIENT_COLOR
+  private var enabled: Boolean = true
+
+  private val basePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply { style = Paint.Style.FILL }
+  private val shimmerPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+    style = Paint.Style.FILL
+    isDither = true
+  }
+  private val shimmerMatrix = Matrix()
+
+  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
+
+  init {
+    setWillNotDraw(false)
+  }
+
+  fun setBaseColor(color: Int) {
+    if (baseColor == color) return
+    baseColor = color
+    rebuildShimmerShader()
+    invalidate()
+  }
+
+  fun setGradientColor(color: Int) {
+    if (gradientColor == color) return
+    gradientColor = color
+    rebuildShimmerShader()
+    invalidate()
+  }
+
+  fun setDuration(duration: Int) {
+    val normalizedDurationMs =
+      if (duration > 0) duration.toLong() else DEFAULT_DURATION_MS
+    if (durationMs == normalizedDurationMs) return
+    durationMs = normalizedDurationMs
+    updateAnimatorState()
+  }
+
+  fun setShimmerEnabled(enabled: Boolean) {
+    if (this.enabled == enabled) return
+    this.enabled = enabled
+    updateAnimatorState()
+    invalidate()
+  }
+
+  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.
+    if (shouldAnimateShimmer()) {
+      startShimmer()
+    } else {
+      stopShimmer()
+    }
+  }
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    // Reattachment (including reparenting) should recheck visibility state and restart only if
+    // this instance is eligible to animate.
+    updateAnimatorState()
+  }
+
+  override fun onDetachedFromWindow() {
+    // Detached views are not drawable; stop and clear animator so a future attach starts cleanly.
+    stopShimmer()
+    super.onDetachedFromWindow()
+  }
+
+  override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+    super.onSizeChanged(w, h, oldw, oldh)
+    rebuildShimmerShader()
+    updateAnimatorState()
+  }
+
+  override fun onWindowVisibilityChanged(visibility: Int) {
+    super.onWindowVisibilityChanged(visibility)
+    updateAnimatorState()
+  }
+
+  override fun onVisibilityChanged(changedView: View, visibility: Int) {
+    super.onVisibilityChanged(changedView, visibility)
+    if (changedView === this) {
+      updateAnimatorState()
+    }
+  }
+
+  override fun dispatchDraw(canvas: Canvas) {
+    val viewWidth = width.toFloat()
+    val viewHeight = height.toFloat()
+    if (viewWidth <= 0f || viewHeight <= 0f) {
+      super.dispatchDraw(canvas)
+      return
+    }
+
+    basePaint.color = baseColor
+    canvas.drawRect(0f, 0f, viewWidth, viewHeight, basePaint)
+
+    drawShimmer(canvas, viewWidth, viewHeight)
+    super.dispatchDraw(canvas)
+  }
+
+  private fun drawShimmer(canvas: Canvas, viewWidth: Float, viewHeight: Float) {
+    if (!enabled) return
+
+    val shader = shimmerShader ?: return
+
+    shimmerMatrix.setTranslate(shimmerTranslateX, 0f)
+    shader.setLocalMatrix(shimmerMatrix)
+    shimmerPaint.shader = shader
+    canvas.drawRect(0f, 0f, viewWidth, viewHeight, shimmerPaint)
+    shimmerPaint.shader = null
+  }
+
+  private fun rebuildShimmerShader() {
+    // Recreates the shimmer gradient for the current width/colors. This allocates shader state,
+    // so keep calls tied to real changes (size or color updates), not per frame execution.
+    val viewWidth = width.toFloat()
+    if (viewWidth <= 0f) {
+      shimmerShader = null
+      return
+    }
+
+    // Wide multi-stop strip creates a softer "glassy" sweep and avoids the hard thin-line look.
+    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,
+      shimmerWidth,
+      0f,
+      intArrayOf(
+        transparentHighlight,
+        edgeBase,
+        softBase,
+        mediumBase,
+        innerBase,
+        gradientColor,
+        innerBase,
+        mediumBase,
+        softBase,
+        edgeBase,
+        transparentHighlight,
+      ),
+      floatArrayOf(
+        0f,
+        0.08f,
+        0.2f,
+        0.32f,
+        0.4f,
+        0.5f,
+        0.6f,
+        0.68f,
+        0.8f,
+        0.92f,
+        1f,
+      ),
+      Shader.TileMode.CLAMP,
+    )
+  }
+
+  private fun startShimmer() {
+    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
+
+    stopShimmer()
+
+    // 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()
+    }
+  }
+
+  private fun stopShimmer() {
+    animator?.cancel()
+    animator = null
+    animatedDurationMs = 0L
+    animatedViewWidth = 0f
+  }
+
+  private fun shouldAnimateShimmer(): Boolean {
+    // `isShown` and explicit visibility/window checks cover different hide paths in nested
+    // hierarchies. Keeping them all prevents animations running when not visible to the user.
+    return enabled &&
+      isAttachedToWindow &&
+      width > 0 &&
+      height > 0 &&
+      visibility == View.VISIBLE &&
+      windowVisibility == View.VISIBLE &&
+      isShown &&
+      alpha > 0f
+  }
+
+  private fun colorWithAlpha(color: Int, alphaFactor: Float): Int {
+    // Preserve RGB while shaping only alpha; used for symmetric highlight falloff in gradient stops.
+    val alpha = (Color.alpha(color) * alphaFactor).roundToInt().coerceIn(0, 255)
+    return Color.argb(alpha, Color.red(color), Color.green(color), Color.blue(color))
+  }
+
+  companion object {
+    private const val DEFAULT_BASE_COLOR = 0x00FFFFFF
+    private const val DEFAULT_DURATION_MS = 1200L
+    private const val DEFAULT_GRADIENT_COLOR = 0x59FFFFFF
+    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
+  }
+}

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

@@ -0,0 +1,85 @@
+package com.streamchatreactnative
+
+import androidx.annotation.NonNull
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.viewmanagers.StreamShimmerViewManagerDelegate
+import com.facebook.react.viewmanagers.StreamShimmerViewManagerInterface
+
+/**
+ * Fabric manager for StreamShimmerView.
+ *
+ * It creates the native shimmer layout, maps React props to native setters, and exposes child
+ * management methods so Fabric can mount and unmount children correctly inside this container.
+ * The manager rechecks animation state after prop transactions and disables shimmer when a view
+ * instance is dropped as a defensive cleanup step for recycled or unmounted views. Because the
+ * shimmer view wraps React children, this must remain a real ViewGroupManager as using a non-group
+ * manager can fail in Fabric mounting paths at runtime.
+ */
+class StreamShimmerViewManager : ViewGroupManager<StreamShimmerFrameLayout>(),
+  StreamShimmerViewManagerInterface<StreamShimmerFrameLayout> {
+  private val delegate = StreamShimmerViewManagerDelegate(this)
+
+  override fun getName(): String = REACT_CLASS
+
+  @NonNull
+  override fun createViewInstance(@NonNull reactContext: ThemedReactContext): StreamShimmerFrameLayout {
+    val layout = StreamShimmerFrameLayout(reactContext)
+    layout.updateAnimatorState()
+    return layout
+  }
+
+  override fun onAfterUpdateTransaction(@NonNull view: StreamShimmerFrameLayout) {
+    super.onAfterUpdateTransaction(view)
+    // Prop batches can change visibility/enabled/colors together, so we re-evaluate the animator once
+    // after every transaction to keep state consistent and avoid duplicate start/stop churn.
+    view.updateAnimatorState()
+  }
+
+  override fun addView(parent: StreamShimmerFrameLayout, child: android.view.View, index: Int) {
+    parent.addView(child, index)
+  }
+
+  override fun getChildAt(parent: StreamShimmerFrameLayout, index: Int): android.view.View {
+    return parent.getChildAt(index)
+  }
+
+  override fun getChildCount(parent: StreamShimmerFrameLayout): Int {
+    return parent.childCount
+  }
+
+  override fun removeViewAt(parent: StreamShimmerFrameLayout, index: Int) {
+    parent.removeViewAt(index)
+  }
+
+  override fun getDelegate(): ViewManagerDelegate<StreamShimmerFrameLayout> = delegate
+
+  override fun setEnabled(view: StreamShimmerFrameLayout, enabled: Boolean) {
+    view.setShimmerEnabled(enabled)
+  }
+
+  override fun setBaseColor(view: StreamShimmerFrameLayout, color: Int?) {
+    view.setBaseColor(color ?: DEFAULT_BASE_COLOR)
+  }
+
+  override fun setDuration(view: StreamShimmerFrameLayout, duration: Int) {
+    view.setDuration(duration)
+  }
+
+  override fun setGradientColor(view: StreamShimmerFrameLayout, color: Int?) {
+    view.setGradientColor(color ?: DEFAULT_GRADIENT_COLOR)
+  }
+
+  override fun onDropViewInstance(@NonNull view: StreamShimmerFrameLayout) {
+    super.onDropViewInstance(view)
+    // Defensive shutdown for recycled/unmounted views; avoids animator leaks in list-heavy screens.
+    view.setShimmerEnabled(false)
+  }
+
+  companion object {
+    const val REACT_CLASS = "StreamShimmerView"
+    private const val DEFAULT_BASE_COLOR = 0x00FFFFFF
+    private const val DEFAULT_GRADIENT_COLOR = 0x59FFFFFF
+  }
+}

package/ios/shared/StreamShimmerView.swift

@@ -0,0 +1,249 @@
+import QuartzCore
+import UIKit
+
+/// Native shimmer view used by the Fabric component view.
+///
+/// It renders a base layer and a moving gradient highlight entirely in native code, so shimmer
+/// animation stays off the JS thread. The view updates its gradient when size or colors change and
+/// stops animation when it is not drawable (backgrounded, detached, hidden, or zero sized).
+@objcMembers
+public final class StreamShimmerView: UIView {
+  private static let edgeHighlightAlpha: CGFloat = 0.1
+  private static let softHighlightAlpha: CGFloat = 0.24
+  private static let midHighlightAlpha: CGFloat = 0.48
+  private static let innerHighlightAlpha: CGFloat = 0.72
+  private static let defaultHighlightAlpha: CGFloat = 0.35
+  private static let defaultShimmerDuration: CFTimeInterval = 1.2
+  private static let shimmerStripWidthRatio: CGFloat = 1.25
+  private static let shimmerAnimationKey = "stream_shimmer_translate_x"
+
+  private let baseLayer = CALayer()
+  private let shimmerLayer = CAGradientLayer()
+
+  private var baseColor: UIColor = UIColor(white: 1, alpha: 0)
+  private var gradientColor: UIColor = UIColor(white: 1, alpha: defaultHighlightAlpha)
+  private var enabled = false
+  private var shimmerDuration: CFTimeInterval = defaultShimmerDuration
+  private var lastAnimatedDuration: CFTimeInterval = 0
+  private var lastAnimatedSize: CGSize = .zero
+  private var isAppActive = true
+
+  public override init(frame: CGRect) {
+    super.init(frame: frame)
+    setupLayers()
+    setupLifecycleObservers()
+  }
+
+  public required init?(coder: NSCoder) {
+    super.init(coder: coder)
+    setupLayers()
+    setupLifecycleObservers()
+  }
+
+  deinit {
+    NotificationCenter.default.removeObserver(self)
+  }
+
+  public override func layoutSubviews() {
+    super.layoutSubviews()
+    updateLayersForCurrentState()
+  }
+
+  public override func didMoveToWindow() {
+    super.didMoveToWindow()
+    if window == nil {
+      // Detaching from window means this view is no longer drawable. Stop and clear animation so
+      // a later reattach starts from a clean state.
+      stopAnimation()
+    } else {
+      // Reattaching (including reparenting across windows) re-evaluates state and restarts only
+      // when needed by current bounds/visibility/enablement.
+      updateLayersForCurrentState()
+    }
+  }
+
+  public override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
+    super.traitCollectionDidChange(previousTraitCollection)
+    if let previousTraitCollection,
+      traitCollection.hasDifferentColorAppearance(comparedTo: previousTraitCollection)
+    {
+      // In current usage, colors are typically driven by JS props. We still refresh on trait
+      // changes so dynamically resolved native colors remain correct if that path is used later.
+      updateLayersForCurrentState()
+    }
+  }
+
+  public func apply(
+    baseColor: UIColor,
+    gradientColor: UIColor,
+    durationMilliseconds: Double,
+    enabled: Bool
+  ) {
+    self.baseColor = baseColor
+    self.gradientColor = gradientColor
+    shimmerDuration = Self.normalizedDuration(milliseconds: durationMilliseconds)
+    self.enabled = enabled
+    updateLayersForCurrentState()
+  }
+
+  public func stopAnimation() {
+    shimmerLayer.removeAnimation(forKey: Self.shimmerAnimationKey)
+    lastAnimatedDuration = 0
+    lastAnimatedSize = .zero
+  }
+
+  private func setupLayers() {
+    isUserInteractionEnabled = false
+
+    shimmerLayer.contentsScale = UIScreen.main.scale
+    shimmerLayer.allowsEdgeAntialiasing = true
+    shimmerLayer.startPoint = CGPoint(x: 0, y: 0.5)
+    shimmerLayer.endPoint = CGPoint(x: 1, y: 0.5)
+    shimmerLayer.locations = [0.0, 0.08, 0.2, 0.32, 0.4, 0.5, 0.6, 0.68, 0.8, 0.92, 1.0]
+
+    layer.addSublayer(baseLayer)
+    layer.addSublayer(shimmerLayer)
+  }
+
+  private func setupLifecycleObservers() {
+    NotificationCenter.default.addObserver(
+      self,
+      selector: #selector(handleWillEnterForeground),
+      name: UIApplication.willEnterForegroundNotification,
+      object: nil
+    )
+    NotificationCenter.default.addObserver(
+      self,
+      selector: #selector(handleDidEnterBackground),
+      name: UIApplication.didEnterBackgroundNotification,
+      object: nil
+    )
+  }
+
+  @objc
+  private func handleWillEnterForeground() {
+    // iOS can drop active layer animations while the app is backgrounded. We explicitly rerun
+    // a state update on foreground so shimmer reliably restarts when returning to the app.
+    isAppActive = true
+    updateLayersForCurrentState()
+  }
+
+  @objc
+  private func handleDidEnterBackground() {
+    isAppActive = false
+    stopAnimation()
+  }
+
+  private func updateLayersForCurrentState() {
+    let bounds = self.bounds
+    guard !bounds.isEmpty else {
+      stopAnimation()
+      return
+    }
+
+    baseLayer.frame = bounds
+    baseLayer.backgroundColor = baseColor.cgColor
+
+    updateShimmerLayer(for: bounds)
+    updateShimmerAnimation(for: bounds)
+  }
+
+  private func updateShimmerLayer(for bounds: CGRect) {
+    // Rebuild the shimmer gradient for current width/colors. Keep this tied to real state changes
+    // such as layout/prop updates, not continuous per frame calls.
+    let shimmerWidth = max(bounds.width * Self.shimmerStripWidthRatio, 1)
+    let transparentHighlight = color(gradientColor, alphaFactor: 0)
+    shimmerLayer.frame = CGRect(x: -shimmerWidth, y: 0, width: shimmerWidth, height: bounds.height)
+    shimmerLayer.colors = [
+      transparentHighlight.cgColor,
+      color(gradientColor, alphaFactor: Self.edgeHighlightAlpha).cgColor,
+      color(gradientColor, alphaFactor: Self.softHighlightAlpha).cgColor,
+      color(gradientColor, alphaFactor: Self.midHighlightAlpha).cgColor,
+      color(gradientColor, alphaFactor: Self.innerHighlightAlpha).cgColor,
+      gradientColor.cgColor,
+      color(gradientColor, alphaFactor: Self.innerHighlightAlpha).cgColor,
+      color(gradientColor, alphaFactor: Self.midHighlightAlpha).cgColor,
+      color(gradientColor, alphaFactor: Self.softHighlightAlpha).cgColor,
+      color(gradientColor, alphaFactor: Self.edgeHighlightAlpha).cgColor,
+      transparentHighlight.cgColor,
+    ]
+    shimmerLayer.isHidden = !enabled
+  }
+
+  private func updateShimmerAnimation(for bounds: CGRect) {
+    guard enabled, isAppActive, window != nil, bounds.width > 0, bounds.height > 0 else {
+      stopAnimation()
+      return
+    }
+
+    // If an animation already exists for the same size, keep it running instead of restarting.
+    if shimmerLayer.animation(forKey: Self.shimmerAnimationKey) != nil,
+      lastAnimatedSize == bounds.size,
+      lastAnimatedDuration == shimmerDuration
+    {
+      return
+    }
+
+    stopAnimation()
+
+    // Start just outside the left edge and sweep fully past the right edge for a clean pass.
+    let shimmerWidth = max(bounds.width * Self.shimmerStripWidthRatio, 1)
+    let animation = CABasicAnimation(keyPath: "transform.translation.x")
+    animation.fromValue = 0
+    animation.toValue = bounds.width + shimmerWidth
+    animation.duration = shimmerDuration
+    animation.repeatCount = .infinity
+    animation.timingFunction = CAMediaTimingFunction(name: .linear)
+    animation.isRemovedOnCompletion = true
+    shimmerLayer.add(animation, forKey: Self.shimmerAnimationKey)
+    lastAnimatedDuration = shimmerDuration
+    lastAnimatedSize = bounds.size
+  }
+
+  private static func normalizedDuration(milliseconds: Double) -> CFTimeInterval {
+    guard milliseconds > 0 else { return defaultShimmerDuration }
+    return milliseconds / 1000
+  }
+
+  private func color(_ color: UIColor, alphaFactor: CGFloat) -> UIColor {
+    // Preserve the resolved color channels and shape only alpha for smooth highlight falloff.
+    let resolvedColor = color.resolvedColor(with: traitCollection)
+
+    var red: CGFloat = 0
+    var green: CGFloat = 0
+    var blue: CGFloat = 0
+    var alpha: CGFloat = 0
+
+    if resolvedColor.getRed(&red, green: &green, blue: &blue, alpha: &alpha) {
+      return UIColor(red: red, green: green, blue: blue, alpha: alpha * alphaFactor)
+    }
+
+    guard
+      let converted = resolvedColor.cgColor.converted(
+        to: CGColorSpace(name: CGColorSpace.extendedSRGB)!,
+        intent: .defaultIntent,
+        options: nil
+      ),
+      let components = converted.components
+    else {
+      return resolvedColor.withAlphaComponent(resolvedColor.cgColor.alpha * alphaFactor)
+    }
+
+    switch components.count {
+    case 2:
+      return UIColor(
+        white: components[0],
+        alpha: components[1] * alphaFactor
+      )
+    case 4:
+      return UIColor(
+        red: components[0],
+        green: components[1],
+        blue: components[2],
+        alpha: components[3] * alphaFactor
+      )
+    default:
+      return resolvedColor.withAlphaComponent(resolvedColor.cgColor.alpha * alphaFactor)
+    }
+  }
+}

package/ios/shared/StreamShimmerViewComponentView.h

@@ -0,0 +1,22 @@
+#import <UIKit/UIKit.h>
+
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <React/RCTViewComponentView.h>
+#endif
+
+#ifndef StreamShimmerViewComponentView_h
+#define StreamShimmerViewComponentView_h
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface StreamShimmerViewComponentView :
+#ifdef RCT_NEW_ARCH_ENABLED
+    RCTViewComponentView
+#else
+    UIView
+#endif
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif /* StreamShimmerViewComponentView_h */

package/ios/shared/StreamShimmerViewComponentView.mm

@@ -0,0 +1,108 @@
+#import "StreamShimmerViewComponentView.h"
+
+#ifdef RCT_NEW_ARCH_ENABLED
+
+#if __has_include(<react/renderer/components/StreamChatReactNativeSpec/ComponentDescriptors.h>)
+#import <react/renderer/components/StreamChatReactNativeSpec/ComponentDescriptors.h>
+#import <react/renderer/components/StreamChatReactNativeSpec/Props.h>
+#import <react/renderer/components/StreamChatReactNativeSpec/RCTComponentViewHelpers.h>
+#elif __has_include(<react/renderer/components/StreamChatExpoSpec/ComponentDescriptors.h>)
+#import <react/renderer/components/StreamChatExpoSpec/ComponentDescriptors.h>
+#import <react/renderer/components/StreamChatExpoSpec/Props.h>
+#import <react/renderer/components/StreamChatExpoSpec/RCTComponentViewHelpers.h>
+#else
+#error "Unable to find generated codegen headers for StreamShimmerView."
+#endif
+
+#if __has_include(<stream_chat_react_native/stream_chat_react_native-Swift.h>)
+#import <stream_chat_react_native/stream_chat_react_native-Swift.h>
+#elif __has_include(<stream_chat_expo/stream_chat_expo-Swift.h>)
+#import <stream_chat_expo/stream_chat_expo-Swift.h>
+#elif __has_include("stream_chat_react_native-Swift.h")
+#import "stream_chat_react_native-Swift.h"
+#elif __has_include("stream_chat_expo-Swift.h")
+#import "stream_chat_expo-Swift.h"
+#else
+#error "Unable to import generated Swift header for StreamShimmerView."
+#endif
+
+#import <React/RCTConversions.h>
+
+using namespace facebook::react;
+
+@interface StreamShimmerViewComponentView () <RCTStreamShimmerViewViewProtocol>
+@end
+
+// Fabric bridge for StreamShimmerView. This component view owns the native shimmer instance,
+// applies codegen props, and keeps shimmer rendered as a background layer while Fabric manages
+// React children. Keeping shimmer as a layer avoids child-order conflicts during mount/unmount.
+@implementation StreamShimmerViewComponentView {
+  StreamShimmerView *_shimmerView;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<StreamShimmerViewComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const StreamShimmerViewProps>();
+    _props = defaultProps;
+
+    _shimmerView = [[StreamShimmerView alloc] initWithFrame:self.bounds];
+    _shimmerView.userInteractionEnabled = NO;
+    [self.layer insertSublayer:_shimmerView.layer atIndex:0];
+  }
+
+  return self;
+}
+
+- (void)layoutSubviews
+{
+  [super layoutSubviews];
+  _shimmerView.frame = self.bounds;
+
+  // Keep shimmer pinned as the layer furthest back. Some layer operations can reorder sublayers, and
+  // this guard restores expected layering without touching Fabric managed child views.
+  BOOL needsReinsert = _shimmerView.layer.superlayer != self.layer;
+  if (!needsReinsert) {
+    CALayer *firstLayer = self.layer.sublayers.firstObject;
+    needsReinsert = firstLayer != _shimmerView.layer;
+  }
+  if (needsReinsert) {
+    [self.layer insertSublayer:_shimmerView.layer atIndex:0];
+  }
+}
+
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
+{
+  const auto &newProps = *std::static_pointer_cast<const StreamShimmerViewProps>(props);
+
+  UIColor *baseColor = RCTUIColorFromSharedColor(newProps.baseColor) ?: [UIColor colorWithWhite:1 alpha:0];
+  UIColor *gradientColor = RCTUIColorFromSharedColor(newProps.gradientColor) ?: [UIColor whiteColor];
+
+  [_shimmerView applyWithBaseColor:baseColor
+                     gradientColor:gradientColor
+               durationMilliseconds:newProps.duration
+                           enabled:newProps.enabled];
+
+  [super updateProps:props oldProps:oldProps];
+}
+
+- (void)prepareForRecycle
+{
+  [super prepareForRecycle];
+  // Defensive cleanup for recycled cells/views so offscreen instances do not keep animating.
+  [_shimmerView stopAnimation];
+}
+
+- (void)dealloc
+{
+  [_shimmerView stopAnimation];
+}
+
+@end
+
+#endif

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native",
   "description": "The official React Native SDK for Stream Chat, a service for building chat applications",
-  "version": "8.13.7",
+  "version": "9.0.0-beta.1",
   "homepage": "https://www.npmjs.com/package/stream-chat-react-native",
   "author": {
     "company": "Stream.io Inc",
@@ -15,7 +15,10 @@
   "files": [
     "src",
     "types",
-    "android",
+    "android/src",
+    "android/build.gradle",
+    "android/gradle.properties",
+    "android/gradle",
     "ios",
     "*.podspec",
     "package.json"
@@ -26,7 +29,7 @@
   "dependencies": {
     "es6-symbol": "^3.1.3",
     "mime": "^4.0.7",
-    "stream-chat-react-native-core": "8.13.7"
+    "stream-chat-react-native-core": "9.0.0-beta.1"
   },
   "peerDependencies": {
     "@react-native-camera-roll/camera-roll": ">=7.8.0",
@@ -78,16 +81,22 @@
     }
   },
   "scripts": {
-    "prepack": " cp ../../README.md .",
-    "postpack": "rm README.md"
+    "postinstall": "if [ -f ../scripts/sync-shared-native.sh ] && [ -d ../shared-native/ios ]; then bash ../scripts/sync-shared-native.sh native-package; fi",
+    "prepack": "bash ../scripts/sync-shared-native.sh native-package && cp ../../README.md .",
+    "postpack": "rm README.md && bash ../scripts/clean-shared-native-copies.sh native-package"
   },
   "devDependencies": {
     "react-native": "^0.79.3"
   },
   "codegenConfig": {
     "name": "StreamChatReactNativeSpec",
-    "type": "modules",
-    "jsSrcsDir": "src/native"
+    "type": "all",
+    "jsSrcsDir": "src/native",
+    "ios": {
+      "componentProvider": {
+        "StreamShimmerView": "StreamShimmerViewComponentView"
+      }
+    }
   },
   "resolutions": {
     "@types/react": "^19.0.0"

package/src/index.js

@@ -11,6 +11,7 @@ import {
   getLocalAssetUri,
   getPhotos,
   iOS14RefreshGallerySelection,
+  NativeShimmerView,
   oniOS14GalleryLibrarySelectionChange,
   overrideAudioRecordingConfiguration,
   pickDocument,
@@ -32,6 +33,7 @@ registerNativeHandlers({
   getLocalAssetUri,
   getPhotos,
   iOS14RefreshGallerySelection,
+  NativeShimmerView,
   oniOS14GalleryLibrarySelectionChange,
   overrideAudioRecordingConfiguration,
   pickDocument,

package/src/native/StreamShimmerViewNativeComponent.ts

@@ -0,0 +1,15 @@
+import type { ColorValue, HostComponent, ViewProps } from 'react-native';
+
+import type { Int32, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface NativeProps extends ViewProps {
+  baseColor?: ColorValue;
+  duration?: WithDefault<Int32, 1200>;
+  enabled?: WithDefault<boolean, true>;
+  gradientColor?: ColorValue;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'StreamShimmerView',
+) as HostComponent<NativeProps>;

package/src/optionalDependencies/NativeShimmerView.ts

@@ -0,0 +1,3 @@
+import StreamShimmerViewNativeComponent from '../native/StreamShimmerViewNativeComponent';
+
+export const NativeShimmerView = StreamShimmerViewNativeComponent;

package/src/optionalDependencies/Video.tsx

@@ -2,7 +2,19 @@ import React from 'react';
 import AudioVideoPlayer from './AudioVideo';
 
 export const Video = AudioVideoPlayer
-  ? ({ onBuffer, onEnd, onLoad, onProgress, paused, repeat, resizeMode, style, uri, videoRef }) => (
+  ? ({
+      onBuffer,
+      onEnd,
+      onLoad,
+      onProgress,
+      paused,
+      repeat,
+      resizeMode,
+      style,
+      uri,
+      videoRef,
+      rate,
+    }) => (
       <AudioVideoPlayer
         ignoreSilentSwitch={'ignore'}
         onBuffer={onBuffer}
@@ -20,6 +32,7 @@ export const Video = AudioVideoPlayer
           uri,
         }}
         style={style}
+        rate={rate}
       />
     )
   : null;

package/src/optionalDependencies/index.ts

@@ -4,6 +4,7 @@ export * from './FlatList';
 export * from './getLocalAssetUri';
 export * from './getPhotos';
 export * from './iOS14RefreshGallerySelection';
+export * from './NativeShimmerView';
 export * from './oniOS14GalleryLibrarySelectionChange';
 export * from './pickDocument';
 export * from './pickImage';

package/stream-chat-react-native.podspec

@@ -1,7 +1,6 @@
 require "json"
 
 package = JSON.parse(File.read(File.join(__dir__, "package.json")))
-folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
 
 Pod::Spec.new do |s|
   s.name         = "stream-chat-react-native"
@@ -11,32 +10,16 @@ Pod::Spec.new do |s|
   s.license      = package["license"]
   s.authors      = package["author"]
 
-  s.platforms    = { :ios => "10.0" }
+  s.platforms    = { :ios => min_ios_version_supported }
   s.source       = { :git => "./ios", :tag => "#{s.version}" }
+  s.prepare_command = <<-CMD
+    if [ -d ../shared-native/ios ]; then
+      mkdir -p ios/shared
+      rsync -a --delete ../shared-native/ios/ ios/shared/
+    fi
+  CMD
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
+  s.private_header_files = "ios/**/*.h"
 
-  s.source_files = "ios/**/*.{h,m,mm}"
-
-  s.dependency "React-Core"
-  s.ios.framework = 'AssetsLibrary', 'MobileCoreServices'
-
-  # Don't install the dependencies when we run `pod install` in the old architecture.
-  if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
-    s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
-    s.pod_target_xcconfig    = {
-        "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
-        "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
-        "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
-    }
-    s.dependency "React-Codegen"
-    # Prebuilt RN modes already handle Folly (or don't expose RCT-Folly podspec).
-    use_prebuilt_core = ENV['RCT_USE_PREBUILT_RNCORE'] == '1'
-    use_prebuilt_deps = ENV['RCT_USE_RN_DEP'] == '1'
-    unless use_prebuilt_core || use_prebuilt_deps
-      s.dependency "RCT-Folly"
-    end
-    s.dependency "RCTRequired"
-    s.dependency "RCTTypeSafety"
-    s.dependency "ReactCommon/turbomodule/core"
-    install_modules_dependencies(s)
-  end
+  install_modules_dependencies(s)
 end