react-native-gleam 1.0.4 → 1.0.6

package/README.md

@@ -3,7 +3,7 @@
 Native-powered shimmer loading effect for React Native. Built with pure native animations — no reanimated, no SVG, zero dependencies.
 
 - **iOS**: `CAGradientLayer` + `CADisplayLink`
-- **Android**: `Choreographer` + `LinearGradient`
+- **Android**: `Choreographer` + `LinearGradient` + `ValueAnimator`
 - **Fabric only** (New Architecture)
 
 https://github.com/user-attachments/assets/70eb886c-f3e2-4611-8ecc-0b03227267d0

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

@@ -11,6 +11,7 @@ import android.graphics.RectF
 import android.graphics.Shader
 import android.os.SystemClock
 import android.view.Choreographer
+import android.view.View
 import android.view.animation.DecelerateInterpolator
 import androidx.annotation.UiThread
 import com.facebook.react.bridge.Arguments
@@ -141,16 +142,14 @@ class GleamView(context: Context) : ReactViewGroup(context) {
             if (loading) {
                 registerClock()
             } else {
-                contentOpacity = 1f
-                shimmerOpacity = 0f
+                forceLoadedState()
             }
         } else {
             // Re-attachment: restore correct state
             if (loading) {
                 registerClock()
             } else if (!isTransitioning) {
-                contentOpacity = 1f
-                shimmerOpacity = 0f
+                forceLoadedState()
             }
         }
     }
@@ -171,6 +170,20 @@ class GleamView(context: Context) : ReactViewGroup(context) {
         }
     }
 
+    override fun onVisibilityChanged(changedView: View, visibility: Int) {
+        super.onVisibilityChanged(changedView, visibility)
+        if (!didAttach) return
+
+        if (visibility == VISIBLE) {
+            if (loading) {
+                registerClock()
+                invalidate()
+            } else if (!isTransitioning) {
+                forceLoadedState()
+            }
+        }
+    }
+
     /** Called by ViewManager when the view is dropped */
     fun cleanup() {
         unregisterClock()
@@ -369,22 +382,28 @@ class GleamView(context: Context) : ReactViewGroup(context) {
                     start()
                 }
             } else {
-                unregisterClock()
-                contentOpacity = 1f
-                shimmerOpacity = 0f
-                invalidate()
+                forceLoadedState()
                 emitTransitionEnd(true)
             }
         }
     }
 
-    private fun finishTransition() {
-        if (!isTransitioning) return
+    private fun forceLoadedState() {
         isTransitioning = false
+        transitionGeneration++
+        transitionAnimator?.removeAllListeners()
+        transitionAnimator?.cancel()
+        transitionAnimator = null
         unregisterClock()
+        transitionProgress = 1f
         contentOpacity = 1f
         shimmerOpacity = 0f
         invalidate()
+    }
+
+    private fun finishTransition() {
+        if (!isTransitioning) return
+        forceLoadedState()
         emitTransitionEnd(true)
     }
 

package/ios/GleamView.mm

@@ -26,6 +26,7 @@ static GleamView * __strong *_views = NULL;
 static NSUInteger _viewCount = 0;
 static NSUInteger _viewCapacity = 0;
 static CADisplayLink *_displayLink;
+static void *kHiddenKVOContext = &kHiddenKVOContext;
 
 static void _startDisplayLinkIfNeeded(void) {
     if (_displayLink) return;
@@ -103,6 +104,7 @@ static void _unregisterView(GleamView *view) {
     CGFloat _contentAlpha;
     CGFloat _lastSetChildrenAlpha;
     BOOL _didInitialSetup;
+    BOOL _isObservingHidden;
 }
 
 + (ComponentDescriptorProvider)componentDescriptorProvider
@@ -158,6 +160,9 @@ static void _unregisterView(GleamView *view) {
             @"transform": [NSNull null],
         };
         _shimmerLayer.locations = @[@0.0, @0.5, @1.0];
+
+        [self addObserver:self forKeyPath:@"hidden" options:NSKeyValueObservingOptionOld | NSKeyValueObservingOptionNew context:kHiddenKVOContext];
+        _isObservingHidden = YES;
     }
     return self;
 }
@@ -167,6 +172,8 @@ static void _unregisterView(GleamView *view) {
     [super mountChildComponentView:childComponentView index:index];
     if (_loading || _isTransitioning) {
         childComponentView.alpha = _contentAlpha;
+    } else {
+        childComponentView.alpha = 1.0;
     }
 }
 
@@ -183,10 +190,7 @@ static void _unregisterView(GleamView *view) {
         }
         [self _registerClock];
     } else if (!_isTransitioning) {
-        [self _setChildrenAlphaIfNeeded:1.0];
-        _shimmerLayer.opacity = 0.0;
-        [_shimmerLayer removeFromSuperlayer];
-        [self _unregisterClock];
+        [self _forceLoadedState];
     }
 }
 
@@ -205,10 +209,7 @@ static void _unregisterView(GleamView *view) {
     } else if (!_isTransitioning) {
         // _isTransitioning=YES means ticks are actively driving it to
         // completion (we no longer bail on !self.window) — let it finish.
-        [self _setChildrenAlphaIfNeeded:1.0];
-        _shimmerLayer.opacity = 0.0;
-        [_shimmerLayer removeFromSuperlayer];
-        [self _unregisterClock];
+        [self _forceLoadedState];
     }
 }
 
@@ -236,6 +237,10 @@ static void _unregisterView(GleamView *view) {
 
 - (void)prepareForRecycle
 {
+    if (_isObservingHidden) {
+        [self removeObserver:self forKeyPath:@"hidden" context:kHiddenKVOContext];
+        _isObservingHidden = NO;
+    }
     [super prepareForRecycle];
     [self _unregisterClock];
     _isTransitioning = NO;
@@ -249,6 +254,9 @@ static void _unregisterView(GleamView *view) {
     _loading = YES;
     _wasLoading = YES;
     _didInitialSetup = NO;
+
+    [self addObserver:self forKeyPath:@"hidden" options:NSKeyValueObservingOptionOld | NSKeyValueObservingOptionNew context:kHiddenKVOContext];
+    _isObservingHidden = YES;
 }
 
 // Invariant: a registered view (_isRegistered=YES) is held by the static
@@ -259,6 +267,10 @@ static void _unregisterView(GleamView *view) {
 // by the display link on the main thread. The view leaks in _views but no crash.
 - (void)dealloc
 {
+    if (_isObservingHidden) {
+        _isObservingHidden = NO;
+        [self removeObserver:self forKeyPath:@"hidden" context:kHiddenKVOContext];
+    }
     if (_isRegistered) {
         _isRegistered = NO;
         if ([NSThread isMainThread]) {
@@ -287,63 +299,57 @@ static void _unregisterView(GleamView *view) {
 
 - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
 {
-    const auto &oldViewProps = *std::static_pointer_cast<GleamViewProps const>(_props);
     const auto &newViewProps = *std::static_pointer_cast<GleamViewProps const>(props);
 
-    if (oldViewProps.speed != newViewProps.speed) {
-        double s = newViewProps.speed / 1000.0;
-        _speed = (isnan(s) || isinf(s) || s <= 0) ? 1.0 : fmax(s, 0.001);
-    }
-
-    if (oldViewProps.delay != newViewProps.delay) {
-        double d = newViewProps.delay / 1000.0;
-        _delay = (isnan(d) || isinf(d)) ? 0.0 : d;
-    }
-
-    if (oldViewProps.transitionDuration != newViewProps.transitionDuration) {
-        double td = newViewProps.transitionDuration / 1000.0;
-        _transitionDuration = (isnan(td) || isinf(td) || td < 0) ? 0.3 : td;
-    }
-
-    if (oldViewProps.transitionType != newViewProps.transitionType) {
-        auto tt = newViewProps.transitionType;
-        if (tt == GleamViewTransitionType::Shrink) _transitionTypeValue = 1;
-        else if (tt == GleamViewTransitionType::Collapse) _transitionTypeValue = 2;
-        else _transitionTypeValue = 0;
-    }
-
-    if (oldViewProps.direction != newViewProps.direction) {
-        auto dir = newViewProps.direction;
-        if (dir == GleamViewDirection::Rtl) {
-            _direction = GleamDirectionRTL;
-        } else if (dir == GleamViewDirection::Ttb) {
-            _direction = GleamDirectionTTB;
-        } else {
-            _direction = GleamDirectionLTR;
-        }
+    // Fabric can recycle a native component without changing the JS props for
+    // the next cell. prepareForRecycle resets internal state, so every update
+    // must resync from the new props instead of relying only on old/new prop
+    // diffs. This keeps FlatList-recycled cells from staying in shimmer mode
+    // when the recycled JS prop is still loading=false.
+    double s = newViewProps.speed / 1000.0;
+    _speed = (isnan(s) || isinf(s) || s <= 0) ? 1.0 : fmax(s, 0.001);
+
+    double d = newViewProps.delay / 1000.0;
+    _delay = (isnan(d) || isinf(d)) ? 0.0 : d;
+
+    double td = newViewProps.transitionDuration / 1000.0;
+    _transitionDuration = (isnan(td) || isinf(td) || td < 0) ? 0.3 : td;
+
+    auto tt = newViewProps.transitionType;
+    if (tt == GleamViewTransitionType::Shrink) _transitionTypeValue = 1;
+    else if (tt == GleamViewTransitionType::Collapse) _transitionTypeValue = 2;
+    else _transitionTypeValue = 0;
+
+    auto dir = newViewProps.direction;
+    if (dir == GleamViewDirection::Rtl) {
+        _direction = GleamDirectionRTL;
+    } else if (dir == GleamViewDirection::Ttb) {
+        _direction = GleamDirectionTTB;
+    } else {
+        _direction = GleamDirectionLTR;
     }
 
     BOOL colorsChanged = NO;
-    if (oldViewProps.intensity != newViewProps.intensity) {
-        _intensity = fmin(fmax(newViewProps.intensity, 0.0), 1.0);
+    CGFloat nextIntensity = fmin(fmax(newViewProps.intensity, 0.0), 1.0);
+    if (_intensity != nextIntensity) {
         colorsChanged = YES;
     }
+    _intensity = nextIntensity;
 
-    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];
+    UIColor *baseColor = RCTUIColorFromSharedColor(newViewProps.baseColor) ?: [UIColor colorWithRed:0.878 green:0.878 blue:0.878 alpha:1.0];
+    if (![_baseColor isEqual:baseColor]) {
         colorsChanged = YES;
     }
+    _baseColor = baseColor;
 
-    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];
+    UIColor *highlightColor = RCTUIColorFromSharedColor(newViewProps.highlightColor) ?: [UIColor colorWithRed:0.961 green:0.961 blue:0.961 alpha:1.0];
+    if (![_highlightColor isEqual:highlightColor]) {
         colorsChanged = YES;
     }
+    _highlightColor = highlightColor;
 
-    if (oldViewProps.loading != newViewProps.loading) {
-        _loading = newViewProps.loading;
-    }
+    BOOL loadingChanged = _loading != newViewProps.loading;
+    _loading = newViewProps.loading;
 
     if (!_didInitialSetup) {
         _didInitialSetup = YES;
@@ -353,20 +359,16 @@ static void _unregisterView(GleamView *view) {
             [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;
+            [self _forceLoadedState];
         }
     } else {
         if (colorsChanged) {
             [self _updateShimmerColors];
         }
-        if (oldViewProps.loading != newViewProps.loading) {
+        if (loadingChanged) {
             [self _applyLoadingState];
+        } else if (!_loading && !_isTransitioning) {
+            [self _forceLoadedState];
         }
     }
 
@@ -375,6 +377,32 @@ static void _unregisterView(GleamView *view) {
 
 #pragma mark - Private
 
+- (void)observeValueForKeyPath:(NSString *)keyPath
+                      ofObject:(id)object
+                        change:(NSDictionary<NSKeyValueChangeKey,id> *)change
+                       context:(void *)context
+{
+    if (context != kHiddenKVOContext) {
+        [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
+        return;
+    }
+
+    BOOL wasHidden = [change[NSKeyValueChangeOldKey] boolValue];
+    BOOL isHidden = [change[NSKeyValueChangeNewKey] boolValue];
+
+    if (wasHidden && !isHidden) {
+        // hidden YES→NO: ancestor removed display:'none' — resync visual state
+        if (_loading) {
+            if (_shimmerLayer.superlayer != self.layer) {
+                [self.layer addSublayer:_shimmerLayer];
+            }
+            [self _registerClock];
+        } else if (!_isTransitioning) {
+            [self _forceLoadedState];
+        }
+    }
+}
+
 - (CGFloat)_computeProgressWithTime:(CFTimeInterval)now
 {
     CGFloat effectiveTime = fmax(now - _delay, 0.0);
@@ -562,20 +590,31 @@ static void _unregisterView(GleamView *view) {
             _transitionElapsed = 0.0;
             [self _registerClock];
         } else {
-            [self _unregisterClock];
-            _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 _forceLoadedState];
             [self _emitTransitionEnd:YES];
         }
     }
 }
 
+- (void)_forceLoadedState
+{
+    if (_isTransitioning) {
+        _isTransitioning = NO;
+    }
+    [self _unregisterClock];
+    _lastSetChildrenAlpha = -1.0;
+    for (UIView *subview in self.subviews) {
+        subview.alpha = 1.0;
+    }
+    _lastSetChildrenAlpha = 1.0;
+    _contentAlpha = 1.0;
+    _shimmerOpacity = 0.0;
+    _shimmerLayer.opacity = 0.0;
+    _shimmerLayer.transform = CATransform3DIdentity;
+    _shimmerLayer.mask = nil;
+    [_shimmerLayer removeFromSuperlayer];
+}
+
 - (void)_finishTransition
 {
     _isTransitioning = NO;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gleam",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Native-powered shimmer loading effect for React Native",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",