react-native-gleam 1.0.0-beta.4.2 → 1.0.0-beta.6

package/Gleam.podspec

@@ -11,7 +11,7 @@ Pod::Spec.new do |s|
   s.authors      = package["author"]
 
   s.platforms    = { :ios => min_ios_version_supported }
-  s.source       = { :git => "https://github.com/AppAndFlow/react-native-gleam.git", :tag => "#{s.version}" }
+  s.source       = { :git => "https://github.com/RamboWasReal/react-native-gleam.git", :tag => "#{s.version}" }
 
   s.source_files = "ios/**/*.{h,m,mm,swift,cpp}"
   s.private_header_files = "ios/**/*.h"

package/README.md

@@ -89,7 +89,7 @@ When `loading={true}`, children are hidden and a shimmer animation plays. When `
 | `loading` | `boolean` | `true` | Toggle shimmer on/off |
 | `speed` | `number` | `1000` | Duration of one shimmer cycle (ms) |
 | `direction` | `GleamDirection` | `LeftToRight` | Animation direction |
-| `delay` | `number` | `0` | Delay before animation starts (ms) — useful for stagger |
+| `delay` | `number` | `0` | Phase offset (ms) — offsets the shimmer cycle for stagger effects |
 | `transitionDuration` | `number` | `300` | Duration of the transition from shimmer to content (ms). `0` = instant |
 | `transitionType` | `GleamTransition` | `Fade` | Transition style when loading ends |
 | `intensity` | `number` | `1` | Highlight strength (0-1). Lower = more subtle shimmer |
@@ -97,7 +97,7 @@ When `loading={true}`, children are hidden and a shimmer animation plays. When `
 | `highlightColor` | `string` | `#F5F5F5` | Color of the moving highlight |
 | `onTransitionEnd` | `function` | — | Called when the fade transition completes. Receives `{ nativeEvent: { finished: boolean } }` |
 
-All standard `View` props are also supported (`style`, `testID`, etc.).
+All standard `View` props are also supported (`style`, `testID`, etc.). Note: the shimmer overlay supports uniform `borderRadius` only — per-corner radii are not applied to the shimmer.
 
 ### GleamDirection
 
@@ -143,7 +143,7 @@ When `loading` switches to `false`:
 
 All shimmer instances sharing the same `speed` are automatically synchronized via a shared clock.
 
-The shimmer respects `borderRadius` and all standard view styles.
+The shimmer respects uniform `borderRadius` and standard view styles.
 
 ## License
 

package/android/src/main/java/com/gleam/GleamView.kt

@@ -5,8 +5,8 @@ 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.Path
 import android.graphics.RectF
 import android.graphics.Shader
 import android.os.SystemClock
@@ -27,19 +27,24 @@ class GleamView(context: Context) : ReactViewGroup(context) {
     enum class Direction { LTR, RTL, TTB }
     enum class TransitionType { FADE, SHRINK, COLLAPSE }
 
+    private var didAttach = false
+    private var transitionGeneration = 0
+
     var loading: Boolean = true
         set(value) {
             if (field != value) {
                 val wasLoading = field
                 field = value
-                applyLoadingState(wasLoading)
+                if (didAttach) {
+                    applyLoadingState(wasLoading)
+                }
             }
         }
 
     var speed: Float = 1000f
         set(value) {
             if (field != value) {
-                field = value
+                field = value.coerceAtLeast(1f)
             }
         }
 
@@ -60,7 +65,7 @@ class GleamView(context: Context) : ReactViewGroup(context) {
     var transitionDuration: Float = 300f
         set(value) {
             if (field != value) {
-                field = value
+                field = value.coerceAtLeast(0f)
             }
         }
 
@@ -75,6 +80,7 @@ class GleamView(context: Context) : ReactViewGroup(context) {
         set(value) {
             if (field != value) {
                 field = value.coerceIn(0f, 1f)
+                invalidateGradientCache()
                 invalidate()
             }
         }
@@ -83,6 +89,7 @@ class GleamView(context: Context) : ReactViewGroup(context) {
         set(value) {
             if (field != value) {
                 field = value
+                invalidateGradientCache()
                 invalidate()
             }
         }
@@ -91,17 +98,14 @@ class GleamView(context: Context) : ReactViewGroup(context) {
         set(value) {
             if (field != value) {
                 field = value
+                invalidateGradientCache()
                 invalidate()
             }
         }
 
+    // Drawing objects — pre-allocated, reused every frame
     private val shimmerPaint = Paint()
-    private val gradientColors = IntArray(3)
-    private val gradientPositions = floatArrayOf(0f, 0.5f, 1f)
-    private val gradientCoords = FloatArray(4)
-    private val clipPath = Path()
-    private val clipRect = RectF()
-    internal var cornerRadius: Float = 0f
+    private val drawRect = RectF()
     private var transitionAnimator: ValueAnimator? = null
     private var shimmerOpacity: Float = 1f
     private var contentOpacity: Float = 0f
@@ -109,23 +113,53 @@ class GleamView(context: Context) : ReactViewGroup(context) {
     private var transitionProgress: Float = 0f
     private var isRegistered: Boolean = false
 
+    // Cached gradient — only recreated when colors change
+    private var cachedGradient: LinearGradient? = null
+    private val shaderMatrix = Matrix()
+    private var lastCachedBaseColor: Int = 0
+    private var lastCachedHighlight: Int = 0
+
+    // Cached corner radius in pixels — only recomputed when prop changes
+    internal var cornerRadius: Float = 0f
+        set(value) {
+            if (field != value) {
+                field = value
+                cornerRadiusPx = PixelUtil.toPixelFromDIP(value)
+            }
+        }
+    private var cornerRadiusPx: Float = 0f
+
     init {
         setWillNotDraw(false)
     }
 
     override fun onAttachedToWindow() {
         super.onAttachedToWindow()
-        if (loading) {
-            registerClock()
+        if (!didAttach) {
+            didAttach = true
+            if (loading) {
+                registerClock()
+            } else {
+                contentOpacity = 1f
+                shimmerOpacity = 0f
+            }
+        } else {
+            // Re-attachment: restore correct state
+            if (loading) {
+                registerClock()
+            } else if (!isTransitioning) {
+                contentOpacity = 1f
+                shimmerOpacity = 0f
+            }
         }
     }
 
     override fun onDetachedFromWindow() {
         super.onDetachedFromWindow()
         unregisterClock()
+        isTransitioning = false
         transitionAnimator?.cancel()
         transitionAnimator = null
-        isTransitioning = false
     }
 
     override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
@@ -135,6 +169,14 @@ class GleamView(context: Context) : ReactViewGroup(context) {
         }
     }
 
+    /** Called by ViewManager when the view is dropped */
+    fun cleanup() {
+        unregisterClock()
+        isTransitioning = false
+        transitionAnimator?.cancel()
+        transitionAnimator = null
+    }
+
     private fun registerClock() {
         if (!isRegistered) {
             isRegistered = true
@@ -149,24 +191,39 @@ class GleamView(context: Context) : ReactViewGroup(context) {
         }
     }
 
-    /** Called by SharedClock every frame */
-    fun onFrame() {
+    /** Called by SharedClock every frame with current timestamp */
+    internal var frameTimeMs: Float = 0f
+
+    internal fun onFrame(timeMs: Float) {
+        frameTimeMs = timeMs
         invalidate()
     }
 
-    /**
-     * Compute progress from global time.
-     * Uses cosine easing: progress = (1 - cos(phase)) / 2
-     * This matches AccelerateDecelerateInterpolator and ensures smooth looping.
-     */
+    private fun invalidateGradientCache() {
+        cachedGradient = null
+    }
+
     private fun computeProgress(): Float {
-        val timeMs = SystemClock.uptimeMillis().toFloat()
+        val timeMs = if (frameTimeMs > 0f) frameTimeMs else SystemClock.uptimeMillis().toFloat()
         val effectiveTime = (timeMs - delay).coerceAtLeast(0f)
         val rawProgress = (effectiveTime % speed) / speed
-        // AccelerateDecelerateInterpolator equivalent: (cos((x + 1) * PI) / 2) + 0.5
         return ((cos((rawProgress + 1.0) * PI) / 2.0) + 0.5).toFloat()
     }
 
+    private fun ensureGradient(effectiveHighlight: Int) {
+        if (cachedGradient != null && lastCachedBaseColor == baseColor && lastCachedHighlight == effectiveHighlight) {
+            return
+        }
+        cachedGradient = LinearGradient(
+            0f, 0f, 1f, 0f,
+            intArrayOf(baseColor, effectiveHighlight, baseColor),
+            floatArrayOf(0f, 0.5f, 1f),
+            Shader.TileMode.CLAMP
+        )
+        lastCachedBaseColor = baseColor
+        lastCachedHighlight = effectiveHighlight
+    }
+
     override fun dispatchDraw(canvas: Canvas) {
         val w = width.toFloat()
         val h = height.toFloat()
@@ -193,40 +250,37 @@ class GleamView(context: Context) : ReactViewGroup(context) {
                 highlightColor
             }
 
-            gradientColors[0] = baseColor
-            gradientColors[1] = effectiveHighlight
-            gradientColors[2] = baseColor
+            ensureGradient(effectiveHighlight)
+            val gradient = cachedGradient ?: return
 
+            // Position the gradient using a matrix instead of recreating it
             when (direction) {
                 Direction.LTR -> {
                     val size = w
                     val s = -size + (animationProgress * (w + 2 * size))
-                    gradientCoords[0] = s; gradientCoords[1] = 0f
-                    gradientCoords[2] = s + size; gradientCoords[3] = 0f
+                    shaderMatrix.setScale(size, h)
+                    shaderMatrix.postTranslate(s, 0f)
                 }
                 Direction.RTL -> {
                     val size = w
                     val s = w + size - (animationProgress * (w + 2 * size))
-                    gradientCoords[0] = s; gradientCoords[1] = 0f
-                    gradientCoords[2] = s - size; gradientCoords[3] = 0f
+                    shaderMatrix.setScale(-size, h)
+                    shaderMatrix.postTranslate(s, 0f)
                 }
                 Direction.TTB -> {
                     val size = h
                     val s = -size + (animationProgress * (h + 2 * size))
-                    gradientCoords[0] = 0f; gradientCoords[1] = s
-                    gradientCoords[2] = 0f; gradientCoords[3] = s + size
+                    shaderMatrix.setRotate(90f)
+                    shaderMatrix.postScale(w, size)
+                    shaderMatrix.postTranslate(0f, s)
                 }
             }
 
-            shimmerPaint.shader = LinearGradient(
-                gradientCoords[0], gradientCoords[1],
-                gradientCoords[2], gradientCoords[3],
-                gradientColors, gradientPositions,
-                Shader.TileMode.CLAMP
-            )
+            gradient.setLocalMatrix(shaderMatrix)
+            shimmerPaint.shader = gradient
             shimmerPaint.alpha = (shimmerOpacity * 255).toInt()
 
-            // Shrink: scale down, fade starts at 30%
+            // Shrink: scale down, fast opacity fade
             if (isTransitioning && transitionType == TransitionType.SHRINK) {
                 val scale = 1f - transitionProgress * 0.5f
                 val shrinkOpacity = (1f - transitionProgress * 2.5f).coerceAtLeast(0f)
@@ -235,7 +289,7 @@ class GleamView(context: Context) : ReactViewGroup(context) {
                 canvas.scale(scale, scale, w / 2f, h / 2f)
             }
 
-            // Collapse: vertically then horizontally, with opacity fade
+            // Collapse: vertically then horizontally, with fast opacity fade
             if (isTransitioning && transitionType == TransitionType.COLLAPSE) {
                 val p = transitionProgress
                 val scaleY = if (p < 0.6f) 1f - (p / 0.6f) * 0.98f else 0.02f
@@ -246,20 +300,15 @@ class GleamView(context: Context) : ReactViewGroup(context) {
                 canvas.scale(scaleX, scaleY, w / 2f, h / 2f)
             }
 
-            if (cornerRadius > 0f) {
-                val r = PixelUtil.toPixelFromDIP(cornerRadius)
-                val count = canvas.save()
-                clipPath.reset()
-                clipRect.set(0f, 0f, w, h)
-                clipPath.addRoundRect(clipRect, r, r, Path.Direction.CW)
-                canvas.clipPath(clipPath)
-                canvas.drawRect(0f, 0f, w, h, shimmerPaint)
-                canvas.restoreToCount(count)
+            // Draw shimmer — use drawRoundRect instead of clipPath for hardware acceleration
+            drawRect.set(0f, 0f, w, h)
+            if (cornerRadiusPx > 0f) {
+                canvas.drawRoundRect(drawRect, cornerRadiusPx, cornerRadiusPx, shimmerPaint)
             } else {
-                canvas.drawRect(0f, 0f, w, h, shimmerPaint)
+                canvas.drawRect(drawRect, shimmerPaint)
             }
 
-            // Restore scale/CRT transform
+            // Restore scale transform
             if (isTransitioning && (transitionType == TransitionType.SHRINK || transitionType == TransitionType.COLLAPSE)) {
                 canvas.restore()
             }
@@ -276,9 +325,12 @@ class GleamView(context: Context) : ReactViewGroup(context) {
 
     private fun applyLoadingState(wasLoading: Boolean) {
         if (loading) {
+            // Set isTransitioning=false BEFORE cancel to prevent stale onAnimationEnd
+            isTransitioning = false
+            transitionGeneration++
             transitionAnimator?.cancel()
             transitionAnimator = null
-            isTransitioning = false
+            transitionProgress = 0f
             contentOpacity = 0f
             shimmerOpacity = 1f
             registerClock()
@@ -286,12 +338,16 @@ class GleamView(context: Context) : ReactViewGroup(context) {
         } else {
             if (wasLoading && transitionDuration > 0f) {
                 isTransitioning = true
+                // Unregister from shared clock — the ValueAnimator drives redraws during transition
+                unregisterClock()
+                val currentGen = ++transitionGeneration
                 transitionAnimator?.cancel()
 
                 transitionAnimator = ValueAnimator.ofFloat(0f, 1f).apply {
                     duration = transitionDuration.toLong()
-                    interpolator = DecelerateInterpolator()
+                    interpolator = DecelerateInterpolator(2f)
                     addUpdateListener { anim ->
+                        if (transitionGeneration != currentGen) return@addUpdateListener
                         val p = anim.animatedValue as Float
                         transitionProgress = p
                         contentOpacity = p
@@ -300,6 +356,7 @@ class GleamView(context: Context) : ReactViewGroup(context) {
                     }
                     addListener(object : android.animation.AnimatorListenerAdapter() {
                         override fun onAnimationEnd(animation: android.animation.Animator) {
+                            if (transitionGeneration != currentGen) return
                             finishTransition()
                         }
                     })
@@ -316,6 +373,7 @@ class GleamView(context: Context) : ReactViewGroup(context) {
     }
 
     private fun finishTransition() {
+        if (!isTransitioning) return
         isTransitioning = false
         unregisterClock()
         contentOpacity = 1f
@@ -350,11 +408,14 @@ class GleamView(context: Context) : ReactViewGroup(context) {
      * they compute progress from the same global timestamp.
      */
     companion object SharedClock {
-        private val views = mutableSetOf<GleamView>()
+        private val views = mutableListOf<GleamView>()
+        private val iterationSnapshot = mutableListOf<GleamView>()
         private var frameCallback: Choreographer.FrameCallback? = null
 
         fun register(view: GleamView) {
-            views.add(view)
+            if (!views.contains(view)) {
+                views.add(view)
+            }
             if (views.size == 1) start()
         }
 
@@ -364,8 +425,11 @@ class GleamView(context: Context) : ReactViewGroup(context) {
         }
 
         private fun start() {
-            frameCallback = Choreographer.FrameCallback { _ ->
-                views.toList().forEach { it.onFrame() }
+            frameCallback = Choreographer.FrameCallback { frameTimeNanos ->
+                val timeMs = frameTimeNanos / 1_000_000f
+                iterationSnapshot.clear()
+                iterationSnapshot.addAll(views)
+                iterationSnapshot.forEach { it.onFrame(timeMs) }
                 frameCallback?.let { Choreographer.getInstance().postFrameCallback(it) }
             }
             Choreographer.getInstance().postFrameCallback(frameCallback!!)

package/android/src/main/java/com/gleam/GleamViewManager.kt

@@ -81,6 +81,11 @@ class GleamViewManager : ViewGroupManager<GleamView>(),
     super.setBorderRadius(view, borderRadius)
   }
 
+  override fun onDropViewInstance(view: GleamView) {
+    view.cleanup()
+    super.onDropViewInstance(view)
+  }
+
   override fun needsCustomLayoutForChildren(): Boolean = false
 
   companion object {

package/ios/GleamView.mm

@@ -20,35 +20,62 @@ typedef NS_ENUM(NSInteger, GleamDirection) {
 
 #pragma mark - Shared Display Link Clock
 
-static NSMutableSet<GleamView *> *_registeredViews;
+// Plain C array for zero-alloc per-frame iteration.
+// Cleanup is guaranteed via removeFromSuperview, prepareForRecycle, and dealloc.
+static GleamView * __strong *_views = NULL;
+static NSUInteger _viewCount = 0;
+static NSUInteger _viewCapacity = 0;
 static CADisplayLink *_displayLink;
 
-static void _ensureDisplayLink(void) {
-    if (!_registeredViews) {
-        _registeredViews = [NSMutableSet new];
-    }
-}
-
 static void _startDisplayLinkIfNeeded(void) {
     if (_displayLink) return;
     _displayLink = [CADisplayLink displayLinkWithTarget:[GleamView class] selector:@selector(_onFrame:)];
+    if (@available(iOS 15.0, *)) {
+        _displayLink.preferredFrameRateRange = CAFrameRateRangeMake(30, 60, 60);
+    }
     [_displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
 }
 
 static void _stopDisplayLinkIfNeeded(void) {
-    if (_registeredViews.count > 0) return;
+    if (_viewCount > 0) return;
     [_displayLink invalidate];
     _displayLink = nil;
 }
 
 static void _registerView(GleamView *view) {
-    _ensureDisplayLink();
-    [_registeredViews addObject:view];
+    // Check duplicate
+    for (NSUInteger i = 0; i < _viewCount; i++) {
+        if (_views[i] == view) return;
+    }
+    // Grow if needed
+    if (_viewCount >= _viewCapacity) {
+        NSUInteger newCap = _viewCapacity == 0 ? 16 : _viewCapacity * 2;
+        GleamView * __strong *newBuf = (GleamView * __strong *)calloc(newCap, sizeof(GleamView *));
+        if (_views) {
+            for (NSUInteger i = 0; i < _viewCount; i++) {
+                newBuf[i] = _views[i];
+                _views[i] = nil;
+            }
+            free(_views);
+        }
+        _views = newBuf;
+        _viewCapacity = newCap;
+    }
+    _views[_viewCount++] = view;
     _startDisplayLinkIfNeeded();
 }
 
 static void _unregisterView(GleamView *view) {
-    [_registeredViews removeObject:view];
+    for (NSUInteger i = 0; i < _viewCount; i++) {
+        if (_views[i] == view) {
+            _views[i] = nil;
+            // Swap with last
+            _views[i] = _views[_viewCount - 1];
+            _views[_viewCount - 1] = nil;
+            _viewCount--;
+            break;
+        }
+    }
     _stopDisplayLinkIfNeeded();
 }
 
@@ -62,7 +89,7 @@ static void _unregisterView(GleamView *view) {
     CGFloat _speed;
     CGFloat _delay;
     CGFloat _transitionDuration;
-    NSInteger _transitionTypeValue; // 0=fade, 1=slide, 2=dissolve, 3=scale
+    NSInteger _transitionTypeValue; // 0=fade, 1=shrink, 2=collapse
     CGFloat _intensity;
     GleamDirection _direction;
     UIColor *_baseColor;
@@ -73,6 +100,8 @@ static void _unregisterView(GleamView *view) {
     CGFloat _transitionElapsed;
     CGFloat _shimmerOpacity;
     CGFloat _contentAlpha;
+    CGFloat _lastSetChildrenAlpha;
+    BOOL _didInitialSetup;
 }
 
 + (ComponentDescriptorProvider)componentDescriptorProvider
@@ -82,9 +111,15 @@ static void _unregisterView(GleamView *view) {
 
 + (void)_onFrame:(CADisplayLink *)link
 {
-    NSArray *views = [_registeredViews allObjects];
-    for (GleamView *view in views) {
-        [view _tick];
+    NSUInteger count = _viewCount;
+    if (count == 0) return;
+    CFTimeInterval now = CACurrentMediaTime();
+    // Iterate by index — safe even if _tick triggers unregister (swap-remove)
+    // Process in reverse to handle swap-remove correctly
+    for (NSUInteger i = count; i > 0; i--) {
+        if (i - 1 < _viewCount) {
+            [_views[i - 1] _tickWithTime:now];
+        }
     }
 }
 
@@ -109,9 +144,10 @@ static void _unregisterView(GleamView *view) {
         _isTransitioning = NO;
         _shimmerOpacity = 1.0;
         _contentAlpha = 0.0;
+        _lastSetChildrenAlpha = -1.0;
+        _didInitialSetup = NO;
 
         _shimmerLayer = [CAGradientLayer layer];
-        // Disable implicit animations on the gradient layer
         _shimmerLayer.actions = @{
             @"startPoint": [NSNull null],
             @"endPoint": [NSNull null],
@@ -120,7 +156,7 @@ static void _unregisterView(GleamView *view) {
             @"position": [NSNull null],
             @"transform": [NSNull null],
         };
-
+        _shimmerLayer.locations = @[@0.0, @0.5, @1.0];
     }
     return self;
 }
@@ -151,13 +187,54 @@ static void _unregisterView(GleamView *view) {
 - (void)removeFromSuperview
 {
     [self _unregisterClock];
+    if (_isTransitioning) {
+        _isTransitioning = NO;
+    }
+    // Reset to clean state based on loading
+    CGFloat targetAlpha = _loading ? 0.0 : 1.0;
+    _contentAlpha = targetAlpha;
+    _lastSetChildrenAlpha = -1.0;
+    for (UIView *subview in self.subviews) {
+        subview.alpha = targetAlpha;
+    }
+    _lastSetChildrenAlpha = targetAlpha;
+    _shimmerOpacity = _loading ? 1.0 : 0.0;
+    _shimmerLayer.opacity = _shimmerOpacity;
     _shimmerLayer.mask = nil;
+    _shimmerLayer.transform = CATransform3DIdentity;
+    [_shimmerLayer removeFromSuperlayer];
     [super removeFromSuperview];
 }
 
-- (void)dealloc
+- (void)prepareForRecycle
 {
+    [super prepareForRecycle];
     [self _unregisterClock];
+    _isTransitioning = NO;
+    _shimmerLayer.mask = nil;
+    _shimmerLayer.transform = CATransform3DIdentity;
+    _shimmerLayer.opacity = 0.0;
+    [_shimmerLayer removeFromSuperlayer];
+    _contentAlpha = 0.0;
+    _lastSetChildrenAlpha = -1.0;
+    _shimmerOpacity = 1.0;
+    _loading = YES;
+    _wasLoading = YES;
+    _didInitialSetup = NO;
+}
+
+- (void)dealloc
+{
+    if (_isRegistered) {
+        _isRegistered = NO;
+        if ([NSThread isMainThread]) {
+            _unregisterView(self);
+        } else {
+            dispatch_async(dispatch_get_main_queue(), ^{
+                _stopDisplayLinkIfNeeded();
+            });
+        }
+    }
 }
 
 - (void)_registerClock
@@ -182,7 +259,7 @@ static void _unregisterView(GleamView *view) {
     const auto &newViewProps = *std::static_pointer_cast<GleamViewProps const>(props);
 
     if (oldViewProps.speed != newViewProps.speed) {
-        _speed = newViewProps.speed / 1000.0;
+        _speed = fmax(newViewProps.speed / 1000.0, 0.001);
     }
 
     if (oldViewProps.delay != newViewProps.delay) {
@@ -200,10 +277,6 @@ static void _unregisterView(GleamView *view) {
         else _transitionTypeValue = 0;
     }
 
-    if (oldViewProps.intensity != newViewProps.intensity) {
-        _intensity = fmin(fmax(newViewProps.intensity, 0.0), 1.0);
-    }
-
     if (oldViewProps.direction != newViewProps.direction) {
         auto dir = newViewProps.direction;
         if (dir == GleamViewDirection::Rtl) {
@@ -215,54 +288,77 @@ static void _unregisterView(GleamView *view) {
         }
     }
 
+    BOOL colorsChanged = NO;
+    if (oldViewProps.intensity != newViewProps.intensity) {
+        _intensity = fmin(fmax(newViewProps.intensity, 0.0), 1.0);
+        colorsChanged = YES;
+    }
+
     if (oldViewProps.baseColor != newViewProps.baseColor) {
         UIColor *color = RCTUIColorFromSharedColor(newViewProps.baseColor);
         _baseColor = color ?: [UIColor colorWithRed:0.878 green:0.878 blue:0.878 alpha:1.0];
+        colorsChanged = YES;
     }
 
     if (oldViewProps.highlightColor != newViewProps.highlightColor) {
         UIColor *color = RCTUIColorFromSharedColor(newViewProps.highlightColor);
         _highlightColor = color ?: [UIColor colorWithRed:0.961 green:0.961 blue:0.961 alpha:1.0];
+        colorsChanged = YES;
     }
 
     if (oldViewProps.loading != newViewProps.loading) {
         _loading = newViewProps.loading;
     }
 
-    [self _updateShimmerColors];
-    [self _applyLoadingState];
+    if (!_didInitialSetup) {
+        _didInitialSetup = YES;
+        [self _updateShimmerColors];
+        if (_loading) {
+            _wasLoading = YES;
+            [self _applyLoadingState];
+        } else {
+            _wasLoading = NO;
+            _contentAlpha = 1.0;
+            _shimmerOpacity = 0.0;
+            _lastSetChildrenAlpha = -1.0;
+            for (UIView *subview in self.subviews) {
+                subview.alpha = 1.0;
+            }
+            _lastSetChildrenAlpha = 1.0;
+        }
+    } else {
+        if (colorsChanged) {
+            [self _updateShimmerColors];
+        }
+        if (oldViewProps.loading != newViewProps.loading) {
+            [self _applyLoadingState];
+        }
+    }
 
     [super updateProps:props oldProps:oldProps];
 }
 
 #pragma mark - Private
 
-/**
- * Compute shimmer progress from global time.
- * All views with same speed/delay share the same progress value.
- * Uses cosine easing for smooth looping (matches AccelerateDecelerateInterpolator).
- */
-- (CGFloat)_computeProgress
+- (CGFloat)_computeProgressWithTime:(CFTimeInterval)now
 {
-    CFTimeInterval time = CACurrentMediaTime();
-    CGFloat effectiveTime = fmax(time - _delay, 0.0);
+    CGFloat effectiveTime = fmax(now - _delay, 0.0);
     CGFloat rawProgress = fmod(effectiveTime, _speed) / _speed;
-    // Cosine easing: (1 - cos(rawProgress * PI)) / 2
     return (1.0 - cos(rawProgress * M_PI)) / 2.0;
 }
 
-- (void)_tick
+- (void)_tickWithTime:(CFTimeInterval)now
 {
+    if (!self.window) return;
+
     if (_isTransitioning) {
         _transitionElapsed += _displayLink.duration;
-        CGFloat t = fmin(_transitionElapsed / _transitionDuration, 1.0);
-        // Ease out
+        CGFloat t = _transitionDuration > 0 ? fmin(_transitionElapsed / _transitionDuration, 1.0) : 1.0;
         CGFloat eased = 1.0 - (1.0 - t) * (1.0 - t);
 
         switch (_transitionTypeValue) {
-            case 1: { // Shrink — scale down with mask clipping
-                _contentAlpha = eased;
-                [self _setChildrenAlpha:_contentAlpha];
+            case 1: { // Shrink
+                [self _setChildrenAlphaIfNeeded:eased];
                 CGFloat shrinkOpacity = 1.0 - fmin(eased * 2.5, 1.0);
                 _shimmerLayer.opacity = shrinkOpacity;
                 CGFloat scale = 1.0 - eased * 0.5;
@@ -278,12 +374,17 @@ static void _unregisterView(GleamView *view) {
                     mask.actions = @{@"path": [NSNull null]};
                     _shimmerLayer.mask = mask;
                 }
-                mask.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(x, y, fmax(w, 0.1), fmax(h, 0.1)) cornerRadius:self.layer.cornerRadius * scale].CGPath;
+                CGPathRef path = CGPathCreateWithRoundedRect(
+                    CGRectMake(x, y, fmax(w, 0.1), fmax(h, 0.1)),
+                    self.layer.cornerRadius * scale,
+                    self.layer.cornerRadius * scale,
+                    NULL);
+                mask.path = path;
+                CGPathRelease(path);
                 break;
             }
-            case 2: { // Collapse — vertically then horizontally via clip rect
-                _contentAlpha = eased;
-                [self _setChildrenAlpha:_contentAlpha];
+            case 2: { // Collapse
+                [self _setChildrenAlphaIfNeeded:eased];
                 CGFloat collapseOpacity = 1.0 - fmin(eased * 2.5, 1.0);
                 _shimmerLayer.opacity = collapseOpacity;
                 CGRect bounds = self.bounds;
@@ -294,44 +395,51 @@ static void _unregisterView(GleamView *view) {
                 CGFloat x = (bounds.size.width - w) / 2.0;
                 CGFloat y = (bounds.size.height - h) / 2.0;
 
-                // Use a mask layer to clip the shimmer to the collapsing rect
                 CAShapeLayer *mask = (CAShapeLayer *)_shimmerLayer.mask;
                 if (!mask) {
                     mask = [CAShapeLayer layer];
                     mask.actions = @{@"path": [NSNull null]};
                     _shimmerLayer.mask = mask;
                 }
-                mask.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(x, y, fmax(w, 0.1), fmax(h, 0.1)) cornerRadius:self.layer.cornerRadius].CGPath;
+                CGPathRef path = CGPathCreateWithRoundedRect(
+                    CGRectMake(x, y, fmax(w, 0.1), fmax(h, 0.1)),
+                    self.layer.cornerRadius,
+                    self.layer.cornerRadius,
+                    NULL);
+                mask.path = path;
+                CGPathRelease(path);
                 break;
             }
             default: // Fade
-                _contentAlpha = eased;
-                [self _setChildrenAlpha:_contentAlpha];
+                [self _setChildrenAlphaIfNeeded:eased];
                 _shimmerOpacity = 1.0 - eased;
                 _shimmerLayer.opacity = _shimmerOpacity;
                 break;
         }
 
-        [self _updateGradientPosition];
+        [self _updateGradientPositionWithTime:now];
 
         if (t >= 1.0) {
             [self _finishTransition];
         }
     } else if (_loading) {
-        [self _updateGradientPosition];
+        [self _updateGradientPositionWithTime:now];
     }
 }
 
-- (void)_setChildrenAlpha:(CGFloat)alpha
+- (void)_setChildrenAlphaIfNeeded:(CGFloat)alpha
 {
+    if (fabs(alpha - _lastSetChildrenAlpha) < 0.005) return;
+    _lastSetChildrenAlpha = alpha;
+    _contentAlpha = alpha;
     for (UIView *subview in self.subviews) {
         subview.alpha = alpha;
     }
 }
 
-- (void)_updateGradientPosition
+- (void)_updateGradientPositionWithTime:(CFTimeInterval)now
 {
-    CGFloat progress = [self _computeProgress];
+    CGFloat progress = [self _computeProgressWithTime:now];
 
     CGPoint startPoint, endPoint;
 
@@ -365,8 +473,8 @@ static void _unregisterView(GleamView *view) {
 {
     UIColor *effectiveHighlight = _highlightColor;
     if (_intensity < 1.0) {
-        CGFloat br, bg, bb, ba;
-        CGFloat hr, hg, hb, ha;
+        CGFloat br = 0, bg = 0, bb = 0, ba = 1;
+        CGFloat hr = 0, hg = 0, hb = 0, ha = 1;
         [_baseColor getRed:&br green:&bg blue:&bb alpha:&ba];
         [_highlightColor getRed:&hr green:&hg blue:&hb alpha:&ha];
         CGFloat r = br + (hr - br) * _intensity;
@@ -381,7 +489,6 @@ static void _unregisterView(GleamView *view) {
         (id)effectiveHighlight.CGColor,
         (id)_baseColor.CGColor,
     ];
-    _shimmerLayer.locations = @[@0.0, @0.5, @1.0];
 }
 
 - (void)_applyLoadingState
@@ -389,13 +496,20 @@ static void _unregisterView(GleamView *view) {
     if (_loading) {
         _isTransitioning = NO;
         _contentAlpha = 0.0;
+        _lastSetChildrenAlpha = -1.0;
         _shimmerOpacity = 1.0;
-        [self _setChildrenAlpha:0.0];
+        for (UIView *subview in self.subviews) {
+            subview.alpha = 0.0;
+        }
+        _lastSetChildrenAlpha = 0.0;
         _shimmerLayer.opacity = 1.0;
+        _shimmerLayer.transform = CATransform3DIdentity;
+        _shimmerLayer.mask = nil;
         _shimmerLayer.frame = self.bounds;
         if (_shimmerLayer.superlayer != self.layer) {
             [self.layer addSublayer:_shimmerLayer];
         }
+        [self _updateShimmerColors];
         [self _registerClock];
         _wasLoading = YES;
     } else {
@@ -408,7 +522,12 @@ static void _unregisterView(GleamView *view) {
             [self _registerClock];
         } else {
             [self _unregisterClock];
-            [self _setChildrenAlpha:1.0];
+            _lastSetChildrenAlpha = -1.0;
+            for (UIView *subview in self.subviews) {
+                subview.alpha = 1.0;
+            }
+            _lastSetChildrenAlpha = 1.0;
+            _contentAlpha = 1.0;
             _shimmerLayer.opacity = 0.0;
             [_shimmerLayer removeFromSuperlayer];
             [self _emitTransitionEnd:YES];
@@ -420,13 +539,17 @@ static void _unregisterView(GleamView *view) {
 {
     _isTransitioning = NO;
     [self _unregisterClock];
-    [self _setChildrenAlpha:1.0];
+    _lastSetChildrenAlpha = -1.0;
+    for (UIView *subview in self.subviews) {
+        subview.alpha = 1.0;
+    }
+    _lastSetChildrenAlpha = 1.0;
+    _contentAlpha = 1.0;
     _shimmerLayer.opacity = 0.0;
     _shimmerLayer.transform = CATransform3DIdentity;
     _shimmerLayer.mask = nil;
     _shimmerLayer.frame = self.bounds;
     [_shimmerLayer removeFromSuperlayer];
-    [self _updateShimmerColors]; // Reset colors after dissolve
     [self _emitTransitionEnd:YES];
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gleam",
-  "version": "1.0.0-beta.4.2",
+  "version": "1.0.0-beta.6",
   "description": "Native-powered shimmer loading effect for React Native",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -92,8 +92,8 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-native": "*"
+    "react": ">=18.0.0",
+    "react-native": ">=0.76.0"
   },
   "workspaces": [
     "example"