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

package/README.md

@@ -52,6 +52,32 @@ function UserCard({ loading, user }) {
 
 When `loading={true}`, children are hidden and a shimmer animation plays. When `loading={false}`, the shimmer fades out and children fade in.
 
+### Multi-line skeleton (`GleamView.Line`)
+
+Use `GleamView.Line` to create individual shimmer bars that inherit props from a parent `GleamView`. No conditional rendering — the wrapper pattern works for multi-line skeletons too.
+
+```tsx
+<GleamView loading={loading} speed={800} baseColor="#E0E0E0">
+  <GleamView.Line style={{ height: 22, borderRadius: 6, width: '70%' }}>
+    <Text style={{ fontSize: 16 }}>{title}</Text>
+  </GleamView.Line>
+  <GleamView.Line
+    style={{ height: 16, borderRadius: 4, width: '50%' }}
+    delay={100}
+  >
+    <Text style={{ fontSize: 13 }}>{subtitle}</Text>
+  </GleamView.Line>
+</GleamView>
+```
+
+When `loading={true}`, each `GleamView.Line` renders its own shimmer bar, sized by `style`. The parent acts as a plain container (no block shimmer). When `loading={false}`, Lines become transparent and children render normally.
+
+Lines inherit `loading`, `speed`, `direction`, `baseColor`, `highlightColor`, `intensity`, `transitionDuration`, and `transitionType` from the parent. `delay` and `onTransitionEnd` are per-line.
+
+For best performance, place `GleamView.Line` as direct children of `GleamView` (or inside fragments). Lines nested inside intermediate wrappers (e.g., `<View>`) still work, but require an extra render cycle to detect.
+
+Every `GleamView` provides context to its subtree. A `GleamView.Line` always binds to its nearest `GleamView` ancestor — nested `GleamView` components each control their own Lines independently.
+
 ### Staggered skeleton
 
 ```tsx
@@ -95,10 +121,21 @@ When `loading={true}`, children are hidden and a shimmer animation plays. When `
 | `intensity` | `number` | `1` | Highlight strength (0-1). Lower = more subtle shimmer |
 | `baseColor` | `string` | `#E0E0E0` | Background color of the shimmer |
 | `highlightColor` | `string` | `#F5F5F5` | Color of the moving highlight |
-| `onTransitionEnd` | `function` | — | Called when the fade transition completes. Receives `{ nativeEvent: { finished: boolean } }` |
+| `onTransitionEnd` | `function` | — | Called when the transition completes or is interrupted. Receives `{ nativeEvent: { finished: boolean } }` — `true` if completed, `false` if interrupted (e.g., `loading` toggled back to `true`) |
 
 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.
 
+### GleamView.Line Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `style` | `ViewStyle` | — | Style for the shimmer bar (height, width, borderRadius) |
+| `delay` | `number` | `0` | Phase offset for this line (useful for stagger) |
+| `onTransitionEnd` | `function` | — | Called when this line's transition completes |
+| `testID` | `string` | — | Test identifier |
+
+All standard accessibility props (`accessibilityLabel`, `accessibilityRole`, etc.) are accepted directly. Shimmer props (`loading`, `speed`, `direction`, etc.) cannot be passed to `GleamView.Line` — they are inherited automatically from the parent `GleamView`.
+
 ### GleamDirection
 
 ```tsx
@@ -121,7 +158,8 @@ GleamTransition.Collapse  // 'collapse' — shimmer collapses vertically then ho
 
 ## Requirements
 
-- React Native **0.76+** (New Architecture / Fabric)
+- React **19+**
+- React Native **0.78+** (New Architecture / Fabric)
 - iOS 15+
 - Android SDK 24+
 
@@ -139,12 +177,20 @@ When `loading` switches to `false`:
 
 1. The shimmer transitions out over `transitionDuration` ms (style depends on `transitionType`)
 2. Children fade in simultaneously
-3. `onTransitionEnd` fires when complete
+3. `onTransitionEnd` fires with `finished: true` (or `finished: false` if interrupted)
 
 All shimmer instances sharing the same `speed` are automatically synchronized via a shared clock.
 
 The shimmer respects uniform `borderRadius` and standard view styles.
 
+## Breaking changes (beta)
+
+- When `GleamView.Line` children are present, the parent `GleamView` renders as a plain `View` container. `onTransitionEnd` on the parent is ignored in this mode — use `onTransitionEnd` on individual `GleamView.Line` components instead. A dev warning is emitted if this happens.
+
+## Limitations
+
+- The shimmer overlay supports uniform `borderRadius` only — per-corner radii are not applied to the shimmer.
+
 ## License
 
 MIT

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

@@ -12,6 +12,7 @@ import android.graphics.Shader
 import android.os.SystemClock
 import android.view.Choreographer
 import android.view.animation.DecelerateInterpolator
+import androidx.annotation.UiThread
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.bridge.WritableMap
@@ -325,6 +326,9 @@ class GleamView(context: Context) : ReactViewGroup(context) {
 
     private fun applyLoadingState(wasLoading: Boolean) {
         if (loading) {
+            if (isTransitioning) {
+                emitTransitionEnd(false)
+            }
             // Set isTransitioning=false BEFORE cancel to prevent stale onAnimationEnd
             isTransitioning = false
             transitionGeneration++
@@ -409,9 +413,9 @@ class GleamView(context: Context) : ReactViewGroup(context) {
      */
     companion object SharedClock {
         private val views = mutableListOf<GleamView>()
-        private val iterationSnapshot = mutableListOf<GleamView>()
         private var frameCallback: Choreographer.FrameCallback? = null
 
+        @UiThread
         fun register(view: GleamView) {
             if (!views.contains(view)) {
                 views.add(view)
@@ -419,6 +423,7 @@ class GleamView(context: Context) : ReactViewGroup(context) {
             if (views.size == 1) start()
         }
 
+        @UiThread
         fun unregister(view: GleamView) {
             views.remove(view)
             if (views.isEmpty()) stop()
@@ -427,9 +432,10 @@ class GleamView(context: Context) : ReactViewGroup(context) {
         private fun start() {
             frameCallback = Choreographer.FrameCallback { frameTimeNanos ->
                 val timeMs = frameTimeNanos / 1_000_000f
-                iterationSnapshot.clear()
-                iterationSnapshot.addAll(views)
-                iterationSnapshot.forEach { it.onFrame(timeMs) }
+                // Reverse index iteration — safe if onFrame triggers unregister (shrinks tail)
+                for (i in views.indices.reversed()) {
+                    views[i].onFrame(timeMs)
+                }
                 frameCallback?.let { Choreographer.getInstance().postFrameCallback(it) }
             }
             Choreographer.getInstance().postFrameCallback(frameCallback!!)

package/ios/GleamView.mm

@@ -223,6 +223,12 @@ static void _unregisterView(GleamView *view) {
     _didInitialSetup = NO;
 }
 
+// Invariant: a registered view (_isRegistered=YES) is held by the static
+// __strong _views array, which prevents ARC dealloc while registered.
+// Off-main dealloc with _isRegistered=YES should therefore be unreachable.
+// If the invariant is violated in release, we skip _unregisterView to avoid
+// racing on the statics (_views, _viewCount, _displayLink) that are read/written
+// by the display link on the main thread. The view leaks in _views but no crash.
 - (void)dealloc
 {
     if (_isRegistered) {
@@ -230,9 +236,7 @@ static void _unregisterView(GleamView *view) {
         if ([NSThread isMainThread]) {
             _unregisterView(self);
         } else {
-            dispatch_async(dispatch_get_main_queue(), ^{
-                _stopDisplayLinkIfNeeded();
-            });
+            NSAssert(NO, @"GleamView deallocated off main thread — static __strong array should prevent this");
         }
     }
 }
@@ -494,6 +498,9 @@ static void _unregisterView(GleamView *view) {
 - (void)_applyLoadingState
 {
     if (_loading) {
+        if (_isTransitioning) {
+            [self _emitTransitionEnd:NO];
+        }
         _isTransitioning = NO;
         _contentAlpha = 0.0;
         _lastSetChildrenAlpha = -1.0;

package/lib/module/GleamContext.js

@@ -0,0 +1,5 @@
+"use strict";
+
+import { createContext } from 'react';
+export const GleamContext = /*#__PURE__*/createContext(null);
+//# sourceMappingURL=GleamContext.js.map

package/lib/module/GleamContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","GleamContext"],"sourceRoot":"../../src","sources":["GleamContext.ts"],"mappings":";;AAAA,SAASA,aAAa,QAAQ,OAAO;AAerC,OAAO,MAAMC,YAAY,gBAAGD,aAAa,CAA2B,IAAI,CAAC","ignoreList":[]}

package/lib/module/GleamLine.js

@@ -0,0 +1,50 @@
+"use strict";
+
+import { useContext, useLayoutEffect } from 'react';
+import { View } from 'react-native';
+import NativeGleamView from './GleamViewNativeComponent';
+import { GleamContext } from "./GleamContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function GleamLine({
+  children,
+  style,
+  testID,
+  delay,
+  onTransitionEnd,
+  ...accessibilityProps
+}) {
+  const ctx = useContext(GleamContext);
+  const register = ctx?.registerLine;
+  useLayoutEffect(() => {
+    if (!register) return;
+    return register();
+  }, [register]);
+  if (!ctx) {
+    if (__DEV__) {
+      console.warn('GleamView.Line must be used inside a GleamView');
+    }
+    return /*#__PURE__*/_jsx(View, {
+      style: style,
+      testID: testID,
+      ...accessibilityProps,
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx(NativeGleamView, {
+    loading: ctx.loading,
+    speed: ctx.speed,
+    direction: ctx.direction,
+    delay: delay,
+    transitionDuration: ctx.transitionDuration,
+    transitionType: ctx.transitionType,
+    intensity: ctx.intensity,
+    baseColor: ctx.baseColor,
+    highlightColor: ctx.highlightColor,
+    onTransitionEnd: onTransitionEnd,
+    style: style,
+    testID: testID,
+    ...accessibilityProps,
+    children: children
+  });
+}
+//# sourceMappingURL=GleamLine.js.map

package/lib/module/GleamLine.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useContext","useLayoutEffect","View","NativeGleamView","GleamContext","jsx","_jsx","GleamLine","children","style","testID","delay","onTransitionEnd","accessibilityProps","ctx","register","registerLine","__DEV__","console","warn","loading","speed","direction","transitionDuration","transitionType","intensity","baseColor","highlightColor"],"sourceRoot":"../../src","sources":["GleamLine.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,eAAe,QAAwB,OAAO;AACnE,SACEC,IAAI,QAIC,cAAc;AACrB,OAAOC,eAAe,MAA4B,4BAA4B;AAC9E,SAASC,YAAY,QAAQ,mBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAU9C,OAAO,SAASC,SAASA,CAAC;EACxBC,QAAQ;EACRC,KAAK;EACLC,MAAM;EACNC,KAAK;EACLC,eAAe;EACf,GAAGC;AACW,CAAC,EAAE;EACjB,MAAMC,GAAG,GAAGd,UAAU,CAACI,YAAY,CAAC;EACpC,MAAMW,QAAQ,GAAGD,GAAG,EAAEE,YAAY;EAElCf,eAAe,CAAC,MAAM;IACpB,IAAI,CAACc,QAAQ,EAAE;IACf,OAAOA,QAAQ,CAAC,CAAC;EACnB,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,IAAI,CAACD,GAAG,EAAE;IACR,IAAIG,OAAO,EAAE;MACXC,OAAO,CAACC,IAAI,CAAC,gDAAgD,CAAC;IAChE;IACA,oBACEb,IAAA,CAACJ,IAAI;MAACO,KAAK,EAAEA,KAAM;MAACC,MAAM,EAAEA,MAAO;MAAA,GAAKG,kBAAkB;MAAAL,QAAA,EACvDA;IAAQ,CACL,CAAC;EAEX;EAEA,oBACEF,IAAA,CAACH,eAAe;IACdiB,OAAO,EAAEN,GAAG,CAACM,OAAQ;IACrBC,KAAK,EAAEP,GAAG,CAACO,KAAM;IACjBC,SAAS,EAAER,GAAG,CAACQ,SAAU;IACzBX,KAAK,EAAEA,KAAM;IACbY,kBAAkB,EAAET,GAAG,CAACS,kBAAmB;IAC3CC,cAAc,EAAEV,GAAG,CAACU,cAAe;IACnCC,SAAS,EAAEX,GAAG,CAACW,SAAU;IACzBC,SAAS,EAAEZ,GAAG,CAACY,SAAU;IACzBC,cAAc,EAAEb,GAAG,CAACa,cAAe;IACnCf,eAAe,EAAEA,eAAgB;IACjCH,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IAAA,GACXG,kBAAkB;IAAAL,QAAA,EAErBA;EAAQ,CACM,CAAC;AAEtB","ignoreList":[]}

package/lib/module/index.js

@@ -1,6 +1,17 @@
 "use strict";
 
-export { default as GleamView } from './GleamViewNativeComponent';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { View } from 'react-native';
+import NativeGleamView from './GleamViewNativeComponent';
+import { GleamContext } from "./GleamContext.js";
+import { GleamLine } from "./GleamLine.js";
+
+/**
+ * Props accepted by GleamView, including ref (React 19 ref-as-prop).
+ * Use this type instead of `ComponentProps<typeof GleamView>` for
+ * accurate ref typing.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
 export let GleamDirection = /*#__PURE__*/function (GleamDirection) {
   GleamDirection["LeftToRight"] = "ltr";
   GleamDirection["RightToLeft"] = "rtl";
@@ -13,4 +24,115 @@ export let GleamTransition = /*#__PURE__*/function (GleamTransition) {
   GleamTransition["Collapse"] = "collapse";
   return GleamTransition;
 }({});
+
+// Shimmer-specific keys that must be destructured from props before spreading
+// viewProps onto <View> in Line mode.
+//   Direction 1 (compile-time): `satisfies` catches stale/typo keys.
+//   Direction 2 (DEV runtime): check inside GleamViewComponent catches
+//   new NativeProps keys that weren't added to this list or destructured.
+const SHIMMER_KEYS = new Set(['loading', 'speed', 'direction', 'delay', 'transitionDuration', 'transitionType', 'intensity', 'baseColor', 'highlightColor', 'onTransitionEnd']);
+function hasLineChildren(children) {
+  let found = false;
+  React.Children.forEach(children, child => {
+    if (found) return;
+    if (! /*#__PURE__*/React.isValidElement(child)) return;
+    if (child.type === GleamLine) {
+      found = true;
+    } else if (child.type === React.Fragment) {
+      found = hasLineChildren(child.props.children);
+    }
+  });
+  return found;
+}
+
+// React 19: ref is a regular prop, no forwardRef needed.
+// Internal ref type is loosened to avoid monorepo type conflicts between
+// root and example workspace @types/react copies. The exported GleamViewProps
+// provides the correct consumer-facing type.
+function GleamViewComponent({
+  ref,
+  ...props
+}) {
+  const {
+    loading,
+    speed,
+    direction,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    delay,
+    transitionDuration,
+    transitionType,
+    intensity,
+    baseColor,
+    highlightColor,
+    onTransitionEnd,
+    children,
+    ...viewProps
+  } = props;
+  if (__DEV__) {
+    for (const key of Object.keys(viewProps)) {
+      if (SHIMMER_KEYS.has(key)) {
+        console.error(`GleamView: shimmer prop "${key}" leaked into viewProps. ` + 'Add it to the destructuring in GleamViewComponent and to SHIMMER_KEYS.');
+      }
+    }
+  }
+  const lineCountRef = useRef(0);
+  const warnedTransitionRef = useRef(false);
+  const [hasLines, setHasLines] = useState(() => hasLineChildren(children));
+  const registerLine = useCallback(() => {
+    lineCountRef.current++;
+    setHasLines(true);
+    return () => {
+      lineCountRef.current--;
+      if (lineCountRef.current === 0) {
+        queueMicrotask(() => {
+          if (lineCountRef.current === 0) {
+            setHasLines(false);
+            warnedTransitionRef.current = false;
+          }
+        });
+      }
+    };
+  }, []);
+  const contextValue = useMemo(() => ({
+    loading,
+    speed,
+    direction,
+    transitionDuration,
+    transitionType,
+    intensity,
+    baseColor,
+    highlightColor,
+    registerLine
+  }), [loading, speed, direction, transitionDuration, transitionType, intensity, baseColor, highlightColor, registerLine]);
+
+  // Cast needed: View and NativeGleamView accept Ref<ReactNativeElement>
+  // but that type isn't publicly exported from react-native. Safe at runtime.
+  const nativeRef = ref;
+  if (hasLines) {
+    if (__DEV__ && onTransitionEnd && !warnedTransitionRef.current) {
+      warnedTransitionRef.current = true;
+      console.warn('GleamView: onTransitionEnd is ignored when GleamView.Line children are present. ' + 'Use onTransitionEnd on individual GleamView.Line components instead.');
+    }
+    return /*#__PURE__*/_jsx(GleamContext.Provider, {
+      value: contextValue,
+      children: /*#__PURE__*/_jsx(View, {
+        ref: nativeRef,
+        ...viewProps,
+        children: children
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(GleamContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(NativeGleamView, {
+      ref: nativeRef,
+      ...props,
+      children: children
+    })
+  });
+}
+GleamViewComponent.displayName = 'GleamView';
+export const GleamView = Object.assign(GleamViewComponent, {
+  Line: GleamLine
+});
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default","GleamView","GleamDirection","GleamTransition"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,SAAS,QAAQ,4BAA4B;AAGjE,WAAYC,cAAc,0BAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAA,OAAdA,cAAc;AAAA;AAM1B,WAAYC,eAAe,0BAAfA,eAAe;EAAfA,eAAe;EAAfA,eAAe;EAAfA,eAAe;EAAA,OAAfA,eAAe;AAAA","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useMemo","useRef","useState","View","NativeGleamView","GleamContext","GleamLine","jsx","_jsx","GleamDirection","GleamTransition","SHIMMER_KEYS","Set","hasLineChildren","children","found","Children","forEach","child","isValidElement","type","Fragment","props","GleamViewComponent","ref","loading","speed","direction","delay","transitionDuration","transitionType","intensity","baseColor","highlightColor","onTransitionEnd","viewProps","__DEV__","key","Object","keys","has","console","error","lineCountRef","warnedTransitionRef","hasLines","setHasLines","registerLine","current","queueMicrotask","contextValue","nativeRef","warn","Provider","value","displayName","GleamView","assign","Line"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/GleamContext.d.ts

@@ -0,0 +1,14 @@
+import { type NativeProps } from './GleamViewNativeComponent';
+export interface GleamContextValue {
+    loading: NativeProps['loading'];
+    speed: NativeProps['speed'];
+    direction: NativeProps['direction'];
+    transitionDuration: NativeProps['transitionDuration'];
+    transitionType: NativeProps['transitionType'];
+    intensity: NativeProps['intensity'];
+    baseColor: NativeProps['baseColor'];
+    highlightColor: NativeProps['highlightColor'];
+    registerLine: () => () => void;
+}
+export declare const GleamContext: import("react").Context<GleamContextValue | null>;
+//# sourceMappingURL=GleamContext.d.ts.map

package/lib/typescript/src/GleamContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GleamContext.d.ts","sourceRoot":"","sources":["../../../src/GleamContext.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAChC,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC5B,SAAS,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACpC,kBAAkB,EAAE,WAAW,CAAC,oBAAoB,CAAC,CAAC;IACtD,cAAc,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;IAC9C,SAAS,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACpC,SAAS,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACpC,cAAc,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;IAC9C,YAAY,EAAE,MAAM,MAAM,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,YAAY,mDAAgD,CAAC"}

package/lib/typescript/src/GleamLine.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+import { type AccessibilityProps, type StyleProp, type ViewStyle } from 'react-native';
+import { type NativeProps } from './GleamViewNativeComponent';
+export interface GleamLineProps extends AccessibilityProps {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+    delay?: NativeProps['delay'];
+    onTransitionEnd?: NativeProps['onTransitionEnd'];
+}
+export declare function GleamLine({ children, style, testID, delay, onTransitionEnd, ...accessibilityProps }: GleamLineProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=GleamLine.d.ts.map

package/lib/typescript/src/GleamLine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GleamLine.d.ts","sourceRoot":"","sources":["../../../src/GleamLine.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAwB,EAAE,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAG/E,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,eAAe,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;CAClD;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,KAAK,EACL,MAAM,EACN,KAAK,EACL,eAAe,EACf,GAAG,kBAAkB,EACtB,EAAE,cAAc,2CAuChB"}

package/lib/typescript/src/index.d.ts

@@ -1,5 +1,17 @@
-export { default as GleamView } from './GleamViewNativeComponent';
-export type { NativeProps as GleamViewProps } from './GleamViewNativeComponent';
+import React from 'react';
+import { View } from 'react-native';
+import { type NativeProps } from './GleamViewNativeComponent';
+import { GleamLine } from './GleamLine';
+export type { NativeProps } from './GleamViewNativeComponent';
+export type { GleamLineProps } from './GleamLine';
+/**
+ * Props accepted by GleamView, including ref (React 19 ref-as-prop).
+ * Use this type instead of `ComponentProps<typeof GleamView>` for
+ * accurate ref typing.
+ */
+export type GleamViewProps = NativeProps & {
+    ref?: React.Ref<View>;
+};
 export declare enum GleamDirection {
     LeftToRight = "ltr",
     RightToLeft = "rtl",
@@ -10,4 +22,13 @@ export declare enum GleamTransition {
     Shrink = "shrink",
     Collapse = "collapse"
 }
+declare function GleamViewComponent({ ref, ...props }: NativeProps & {
+    ref?: React.Ref<unknown>;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace GleamViewComponent {
+    var displayName: string;
+}
+export declare const GleamView: typeof GleamViewComponent & {
+    Line: typeof GleamLine;
+};
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAClE,YAAY,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAEhF,oBAAY,cAAc;IACxB,WAAW,QAAQ;IACnB,WAAW,QAAQ;IACnB,WAAW,QAAQ;CACpB;AAED,oBAAY,eAAe;IACzB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,QAAQ,aAAa;CACtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAwB,EAAE,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE/E,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,YAAY,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAC9D,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;CACvB,CAAC;AAEF,oBAAY,cAAc;IACxB,WAAW,QAAQ;IACnB,WAAW,QAAQ;IACnB,WAAW,QAAQ;CACpB;AAED,oBAAY,eAAe;IACzB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,QAAQ,aAAa;CACtB;AAwCD,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;CAAE,2CAqG5C;kBAxGQ,kBAAkB;;;AA4G3B,eAAO,MAAM,SAAS;;CAEpB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gleam",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-beta.8",
   "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": ">=18.0.0",
-    "react-native": ">=0.76.0"
+    "react": ">=19.0.0",
+    "react-native": ">=0.78.0"
   },
   "workspaces": [
     "example"

package/src/GleamContext.ts

@@ -0,0 +1,16 @@
+import { createContext } from 'react';
+import { type NativeProps } from './GleamViewNativeComponent';
+
+export interface GleamContextValue {
+  loading: NativeProps['loading'];
+  speed: NativeProps['speed'];
+  direction: NativeProps['direction'];
+  transitionDuration: NativeProps['transitionDuration'];
+  transitionType: NativeProps['transitionType'];
+  intensity: NativeProps['intensity'];
+  baseColor: NativeProps['baseColor'];
+  highlightColor: NativeProps['highlightColor'];
+  registerLine: () => () => void;
+}
+
+export const GleamContext = createContext<GleamContextValue | null>(null);

package/src/GleamLine.tsx

@@ -0,0 +1,65 @@
+import { useContext, useLayoutEffect, type ReactNode } from 'react';
+import {
+  View,
+  type AccessibilityProps,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import NativeGleamView, { type NativeProps } from './GleamViewNativeComponent';
+import { GleamContext } from './GleamContext';
+
+export interface GleamLineProps extends AccessibilityProps {
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  delay?: NativeProps['delay'];
+  onTransitionEnd?: NativeProps['onTransitionEnd'];
+}
+
+export function GleamLine({
+  children,
+  style,
+  testID,
+  delay,
+  onTransitionEnd,
+  ...accessibilityProps
+}: GleamLineProps) {
+  const ctx = useContext(GleamContext);
+  const register = ctx?.registerLine;
+
+  useLayoutEffect(() => {
+    if (!register) return;
+    return register();
+  }, [register]);
+
+  if (!ctx) {
+    if (__DEV__) {
+      console.warn('GleamView.Line must be used inside a GleamView');
+    }
+    return (
+      <View style={style} testID={testID} {...accessibilityProps}>
+        {children}
+      </View>
+    );
+  }
+
+  return (
+    <NativeGleamView
+      loading={ctx.loading}
+      speed={ctx.speed}
+      direction={ctx.direction}
+      delay={delay}
+      transitionDuration={ctx.transitionDuration}
+      transitionType={ctx.transitionType}
+      intensity={ctx.intensity}
+      baseColor={ctx.baseColor}
+      highlightColor={ctx.highlightColor}
+      onTransitionEnd={onTransitionEnd}
+      style={style}
+      testID={testID}
+      {...accessibilityProps}
+    >
+      {children}
+    </NativeGleamView>
+  );
+}

package/src/index.tsx

@@ -1,5 +1,20 @@
-export { default as GleamView } from './GleamViewNativeComponent';
-export type { NativeProps as GleamViewProps } from './GleamViewNativeComponent';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { View } from 'react-native';
+import NativeGleamView, { type NativeProps } from './GleamViewNativeComponent';
+import { GleamContext, type GleamContextValue } from './GleamContext';
+import { GleamLine } from './GleamLine';
+
+export type { NativeProps } from './GleamViewNativeComponent';
+export type { GleamLineProps } from './GleamLine';
+
+/**
+ * Props accepted by GleamView, including ref (React 19 ref-as-prop).
+ * Use this type instead of `ComponentProps<typeof GleamView>` for
+ * accurate ref typing.
+ */
+export type GleamViewProps = NativeProps & {
+  ref?: React.Ref<View>;
+};
 
 export enum GleamDirection {
   LeftToRight = 'ltr',
@@ -12,3 +27,153 @@ export enum GleamTransition {
   Shrink = 'shrink',
   Collapse = 'collapse',
 }
+
+// Shimmer-specific keys that must be destructured from props before spreading
+// viewProps onto <View> in Line mode.
+//   Direction 1 (compile-time): `satisfies` catches stale/typo keys.
+//   Direction 2 (DEV runtime): check inside GleamViewComponent catches
+//   new NativeProps keys that weren't added to this list or destructured.
+const SHIMMER_KEYS: ReadonlySet<string> = new Set([
+  'loading',
+  'speed',
+  'direction',
+  'delay',
+  'transitionDuration',
+  'transitionType',
+  'intensity',
+  'baseColor',
+  'highlightColor',
+  'onTransitionEnd',
+] as const satisfies ReadonlyArray<keyof NativeProps>);
+
+function hasLineChildren(children: React.ReactNode): boolean {
+  let found = false;
+  React.Children.forEach(children, (child) => {
+    if (found) return;
+    if (!React.isValidElement(child)) return;
+    if (child.type === GleamLine) {
+      found = true;
+    } else if (child.type === React.Fragment) {
+      found = hasLineChildren(
+        (child.props as { children?: React.ReactNode }).children
+      );
+    }
+  });
+  return found;
+}
+
+// React 19: ref is a regular prop, no forwardRef needed.
+// Internal ref type is loosened to avoid monorepo type conflicts between
+// root and example workspace @types/react copies. The exported GleamViewProps
+// provides the correct consumer-facing type.
+function GleamViewComponent({
+  ref,
+  ...props
+}: NativeProps & { ref?: React.Ref<unknown> }) {
+  const {
+    loading,
+    speed,
+    direction,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    delay,
+    transitionDuration,
+    transitionType,
+    intensity,
+    baseColor,
+    highlightColor,
+    onTransitionEnd,
+    children,
+    ...viewProps
+  } = props;
+
+  if (__DEV__) {
+    for (const key of Object.keys(viewProps)) {
+      if (SHIMMER_KEYS.has(key)) {
+        console.error(
+          `GleamView: shimmer prop "${key}" leaked into viewProps. ` +
+            'Add it to the destructuring in GleamViewComponent and to SHIMMER_KEYS.'
+        );
+      }
+    }
+  }
+
+  const lineCountRef = useRef(0);
+  const warnedTransitionRef = useRef(false);
+  const [hasLines, setHasLines] = useState(() => hasLineChildren(children));
+
+  const registerLine = useCallback(() => {
+    lineCountRef.current++;
+    setHasLines(true);
+    return () => {
+      lineCountRef.current--;
+      if (lineCountRef.current === 0) {
+        queueMicrotask(() => {
+          if (lineCountRef.current === 0) {
+            setHasLines(false);
+            warnedTransitionRef.current = false;
+          }
+        });
+      }
+    };
+  }, []);
+
+  const contextValue = useMemo<GleamContextValue>(
+    () => ({
+      loading,
+      speed,
+      direction,
+      transitionDuration,
+      transitionType,
+      intensity,
+      baseColor,
+      highlightColor,
+      registerLine,
+    }),
+    [
+      loading,
+      speed,
+      direction,
+      transitionDuration,
+      transitionType,
+      intensity,
+      baseColor,
+      highlightColor,
+      registerLine,
+    ]
+  );
+
+  // Cast needed: View and NativeGleamView accept Ref<ReactNativeElement>
+  // but that type isn't publicly exported from react-native. Safe at runtime.
+  const nativeRef = ref as any;
+
+  if (hasLines) {
+    if (__DEV__ && onTransitionEnd && !warnedTransitionRef.current) {
+      warnedTransitionRef.current = true;
+      console.warn(
+        'GleamView: onTransitionEnd is ignored when GleamView.Line children are present. ' +
+          'Use onTransitionEnd on individual GleamView.Line components instead.'
+      );
+    }
+    return (
+      <GleamContext.Provider value={contextValue}>
+        <View ref={nativeRef} {...viewProps}>
+          {children}
+        </View>
+      </GleamContext.Provider>
+    );
+  }
+
+  return (
+    <GleamContext.Provider value={contextValue}>
+      <NativeGleamView ref={nativeRef} {...props}>
+        {children}
+      </NativeGleamView>
+    </GleamContext.Provider>
+  );
+}
+
+GleamViewComponent.displayName = 'GleamView';
+
+export const GleamView = Object.assign(GleamViewComponent, {
+  Line: GleamLine,
+});