feat: GleamView.Line compound component by RamboWasReal · Pull Request #2 · RamboWasReal/react-native-gleam

RamboWasReal · 2026-03-17T17:52:23Z

Summary

Adds GleamView.Line — individual shimmer bars that inherit props (loading, speed, colors, etc.) from a parent GleamView via React Context
Eliminates conditional rendering for multi-line skeleton screens — 100% wrapper pattern
Restores ref forwarding via React 19 ref-as-prop (no forwardRef needed)
Bumps peer deps to React >=19, React Native >=0.78
Fixes onTransitionEnd to emit finished: false when a transition is interrupted (native iOS + Android change)

Breaking changes (beta)

onTransitionEnd on parent is ignored when Lines are present (dev warning emitted)
Peer deps bumped: requires React 19+ and React Native 0.78+

Usage

<GleamView loading={loading} speed={800}>
  <GleamView.Line style={{ height: 22, width: '70%' }} delay={0}>
    <Text>{title}</Text>
  </GleamView.Line>
  <GleamView.Line style={{ height: 16, width: '50%' }} delay={100}>
    <Text>{subtitle}</Text>
  </GleamView.Line>
</GleamView>

Test plan

84/84 tests pass (yarn test)
TypeScript strict mode (yarn typecheck)
ESLint + Prettier (yarn lint)
lib/ rebuilt (yarn prepare) — published types verified clean
Standalone GleamView regression: all 50 original tests unchanged
Ref forwarding tested (standalone + Line mode)
Manual: run yarn example ios / yarn example android and verify multi-line demo section

Adds GleamView.Line — individual shimmer bars that inherit props from a parent GleamView via React Context. No native code changes. - GleamView.Line inherits loading, speed, colors, direction, intensity, transitionDuration, transitionType from parent; delay and onTransitionEnd are per-line - Parent auto-detects Lines and switches to plain View container mode - hasLineChildren scans direct children + fragments on mount; registerLine via useLayoutEffect handles dynamic/wrapped cases - Dev warning when onTransitionEnd is passed to parent with Lines - 80 tests (30 new), example app multi-line demo, README docs - Breaking (beta): GleamView no longer forwards ref

- GleamLineProps extends AccessibilityProps (accessibilityLabel, etc.) - warnedTransitionRef resets when all Lines unmount (re-warns correctly) - Document context scoping behavior in README - Update Line props table with accessibility mention - 82 tests (2 new: accessibility props, warning re-fire)

Copilot

Pull request overview

Adds a compound GleamView.Line component that enables multi-line skeleton UIs by inheriting shimmer configuration from a parent GleamView via React Context, while switching the parent into a plain View container when Lines are present.

Changes:

Introduces GleamView.Line + GleamContext and updates GleamView export to provide context and switch rendering strategy based on Line usage.
Adds extensive test coverage for Line inheritance, dynamic mounting/unmounting behavior, and edge cases.
Updates build config to exclude test sources from the type build; updates example app and README docs for the new API and breaking changes.

Reviewed changes

Copilot reviewed 10 out of 21 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
tsconfig.build.json	Excludes `src/__tests__` from the TS build output.
src/index.tsx	Wraps native GleamView with context provider and adds `GleamView.Line` compound export + “plain View” mode.
src/GleamLine.tsx	New Line component that consumes context, registers with parent, and renders individual shimmer bars.
src/GleamContext.ts	New context definition for sharing shimmer props and registration between parent/lines.
src/tests/GleamView.test.tsx	Adds many tests covering Line behavior, inheritance, and mode switching.
example/src/App.tsx	Adds a multi-line demo section using `GleamView.Line`.
README.md	Documents `GleamView.Line` usage/props and beta breaking changes; updates platform implementation bullets.
lib/**	Regenerated build artifacts (module JS + TS typings) reflecting the new public API.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/GleamLine.tsx

README.md

- Import ReactNode explicitly instead of using React.ReactNode namespace - Revert README to correct native primitives (CADisplayLink/Choreographer)

Copilot

Pull request overview

Adds a new GleamView.Line compound component to support multi-line skeleton layouts using a wrapper pattern, with shimmer props inherited from the nearest parent GleamView via React Context.

Changes:

Replaces the simple GleamView re-export with a JS wrapper that provides context and switches parent rendering behavior when GleamView.Line children are present.
Introduces GleamContext + GleamLine implementation and expands the Jest test suite for Line composition and edge cases.
Updates docs and the example app to demonstrate multi-line skeleton usage; adjusts build config/output to exclude test types from the build artifacts.

Reviewed changes

Copilot reviewed 10 out of 21 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
tsconfig.build.json	Excludes `src/__tests__` from the build output.
src/index.tsx	Implements context-providing `GleamView` wrapper and attaches `GleamView.Line`.
src/tests/GleamView.test.tsx	Adds extensive tests for `GleamView.Line` inheritance, mode switching, and warnings.
src/GleamLine.tsx	Adds the `GleamView.Line` component that consumes context and renders a per-line native shimmer.
src/GleamContext.ts	Adds React Context definition for inherited shimmer props + line registration.
README.md	Documents `GleamView.Line`, its behavior, and breaking changes.
example/src/App.tsx	Adds a multi-line demo section using `GleamView.Line`.
lib/typescript/src/index.d.ts.map	Updates generated type map for new `index.tsx` exports/shape.
lib/typescript/src/index.d.ts	Updates generated typings to reflect `GleamView.Line` and new exports.
lib/typescript/src/tests/GleamView.test.d.ts.map	Removes generated test typings (due to build exclude).
lib/typescript/src/tests/GleamView.test.d.ts	Removes generated test typings (due to build exclude).
lib/typescript/src/GleamLine.d.ts.map	Adds generated typings for `GleamLine`.
lib/typescript/src/GleamLine.d.ts	Adds generated typings for `GleamLineProps`.
lib/typescript/src/GleamContext.d.ts.map	Adds generated typings for `GleamContext`.
lib/typescript/src/GleamContext.d.ts	Adds generated typings for `GleamContextValue`.
lib/module/index.js.map	Updates generated module sourcemap for new wrapper implementation.
lib/module/index.js	Updates generated module entry to the new wrapper + `Line` attachment.
lib/module/GleamLine.js.map	Adds generated module sourcemap for `GleamLine`.
lib/module/GleamLine.js	Adds generated module code for `GleamLine`.
lib/module/GleamContext.js.map	Adds generated module sourcemap for `GleamContext`.
lib/module/GleamContext.js	Adds generated module code for `GleamContext`.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/index.tsx

README.md

…rectly

Copilot

Pull request overview

This PR introduces a compound component API (GleamView.Line) for building multi-line skeleton UIs where each line is its own shimmer bar, inheriting shimmer configuration from a parent GleamView via React Context.

Changes:

Replaces the direct native-component export with a JS wrapper GleamView that provides context and switches behavior when GleamView.Line children are present.
Adds GleamView.Line (and supporting context + implementation) to render per-line shimmer bars with inherited props and per-line delay/onTransitionEnd.
Updates docs, example app, tests, and build outputs; excludes test sources from the TS build output.

Reviewed changes

Copilot reviewed 10 out of 21 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
tsconfig.build.json	Excludes `src/__tests__` from the build output.
src/index.tsx	Implements wrapper `GleamView` with context + “Line mode” container switching and `.Line` attachment.
src/GleamLine.tsx	Adds `GleamView.Line` implementation (context consumption + native shimmer rendering per line).
src/GleamContext.ts	Adds React context for inheriting shimmer props and line registration.
src/tests/GleamView.test.tsx	Adds extensive test coverage for `GleamView.Line` behavior and mode switching.
README.md	Documents `GleamView.Line`, props, behavior, and breaking changes.
example/src/App.tsx	Adds a demo section showcasing a multi-line skeleton built with `GleamView.Line`.
lib/typescript/src/index.d.ts	Updates published typings to reflect wrapper `GleamView` and `GleamView.Line`.
lib/typescript/src/index.d.ts.map	Updates sourcemap for the generated typings.
lib/typescript/src/tests/GleamView.test.d.ts	Removes generated test type output from the published typings.
lib/typescript/src/tests/GleamView.test.d.ts.map	Removes generated test sourcemap output.
lib/typescript/src/GleamLine.d.ts	Adds generated typings for `GleamLine`.
lib/typescript/src/GleamLine.d.ts.map	Adds sourcemap for `GleamLine` typings.
lib/typescript/src/GleamContext.d.ts	Adds generated typings for `GleamContext`.
lib/typescript/src/GleamContext.d.ts.map	Adds sourcemap for `GleamContext` typings.
lib/module/index.js	Updates built JS output to the new wrapper `GleamView` + `.Line`.
lib/module/index.js.map	Updates sourcemap for built JS entry.
lib/module/GleamLine.js	Adds built JS output for `GleamLine`.
lib/module/GleamLine.js.map	Adds sourcemap for `GleamLine` build output.
lib/module/GleamContext.js	Adds built JS output for `GleamContext`.
lib/module/GleamContext.js.map	Adds sourcemap for `GleamContext` build output.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/index.tsx

React 19 guarantees setState on unmounted components is a zero-cost no-op, eliminating the need for isMountedRef guards. RN 0.78+ ships with React 19.

React 19 passes ref as a regular prop to function components — no forwardRef needed. GleamView now accepts ref and forwards it to the underlying View (line mode) or NativeGleamView (standalone mode). This removes the ref breaking change from the beta.

…rrupted When loading toggles back to true during an active transition, the native side now emits onTransitionEnd({ finished: false }) before resetting state. Previously the callback was silently dropped, making the finished parameter misleading.

…itions

Copilot

Pull request overview

Adds a compound-component API for multi-line skeletons by introducing GleamView.Line, which inherits shimmer configuration from a parent GleamView via React Context, while preserving the existing standalone GleamView behavior.

Changes:

Introduce GleamView.Line + GleamContext and update GleamView to render as a plain container when Lines are present.
Update peer requirements (React >= 19, React Native >= 0.78) and adjust build config to exclude test sources from build output.
Update native iOS/Android to emit onTransitionEnd({ finished: false }) when transitions are interrupted; expand docs, example app demo, and tests accordingly.

Reviewed changes

Copilot reviewed 13 out of 25 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
yarn.lock	Updates lock metadata consistent with bumped peer requirements.
tsconfig.build.json	Excludes `src/__tests__` from build output generation.
src/index.tsx	Replaces re-export with a JS wrapper component that provides context + conditionally renders native vs container, and attaches `GleamView.Line`.
src/tests/GleamView.test.tsx	Adds tests for `GleamView.Line` behavior, inheritance, mode switching, warnings, and React 19 ref-as-prop behavior.
src/GleamLine.tsx	Implements the `GleamLine` component that registers with parent and renders native shimmer using inherited props.
src/GleamContext.ts	Adds the React Context contract for sharing shimmer props + line registration.
package.json	Bumps peerDependencies to React >= 19 and RN >= 0.78.
lib/typescript/src/index.d.ts.map	Updates generated TS map for new exports/types.
lib/typescript/src/index.d.ts	Updates generated TS declarations for new `GleamView` wrapper + `Line` and types.
lib/typescript/src/tests/GleamView.test.d.ts.map	Removes generated test declaration map (tests excluded from build).
lib/typescript/src/tests/GleamView.test.d.ts	Removes generated test declaration (tests excluded from build).
lib/typescript/src/GleamLine.d.ts.map	Adds generated declarations map for `GleamLine`.
lib/typescript/src/GleamLine.d.ts	Adds generated declarations for `GleamLine`.
lib/typescript/src/GleamContext.d.ts.map	Adds generated declarations map for `GleamContext`.
lib/typescript/src/GleamContext.d.ts	Adds generated declarations for `GleamContext`.
lib/module/index.js.map	Updates generated ESM map for new wrapper implementation + exports.
lib/module/index.js	Updates generated ESM entry for new wrapper implementation + `GleamView.Line`.
lib/module/GleamLine.js.map	Adds generated ESM map for `GleamLine`.
lib/module/GleamLine.js	Adds generated ESM for `GleamLine`.
lib/module/GleamContext.js.map	Adds generated ESM map for `GleamContext`.
lib/module/GleamContext.js	Adds generated ESM for `GleamContext`.
ios/GleamView.mm	Emits `onTransitionEnd(finished: false)` when a transition is interrupted by returning to loading state.
android/src/main/java/com/gleam/GleamView.kt	Same interrupted-transition event emission behavior on Android.
example/src/App.tsx	Adds a demo section for multi-line skeleton usage with `GleamView.Line`.
README.md	Documents `GleamView.Line`, updated `onTransitionEnd` semantics, updated RN requirement, and breaking behavior when Lines are present.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/index.tsx

ios/GleamView.mm

    if (_loading) {
+        if (_isTransitioning) {
+            [self _emitTransitionEnd:NO];
+        }


README.md

RamboWasReal added 2 commits March 17, 2026 13:51

RamboWasReal requested a review from Copilot March 17, 2026 18:19

Copilot started reviewing on behalf of RamboWasReal March 17, 2026 18:20 View session

Copilot AI reviewed Mar 17, 2026

View reviewed changes

src/GleamLine.tsx Outdated Show resolved Hide resolved

README.md Outdated Show resolved Hide resolved

fix: address Copilot review — ReactNode import, README native primitives

fa6a647

- Import ReactNode explicitly instead of using React.ReactNode namespace - Revert README to correct native primitives (CADisplayLink/Choreographer)

RamboWasReal requested a review from Copilot March 17, 2026 18:28

Copilot started reviewing on behalf of RamboWasReal March 17, 2026 18:28 View session

Copilot AI reviewed Mar 17, 2026

View reviewed changes

src/index.tsx Show resolved Hide resolved

README.md Outdated Show resolved Hide resolved

docs: clarify Line props — shimmer props are inherited, not passed di…

d63ba36

…rectly

RamboWasReal requested a review from Copilot March 17, 2026 18:39

Copilot started reviewing on behalf of RamboWasReal March 17, 2026 18:40 View session

Copilot AI reviewed Mar 17, 2026

View reviewed changes

src/index.tsx Show resolved Hide resolved

src/index.tsx Show resolved Hide resolved

RamboWasReal added 8 commits March 17, 2026 14:46

fix: type SHIMMER_KEYS against NativeProps for compile-time safety

e1a721a

chore: bump peer deps to react >=19, react-native >=0.78

f7fab44

React 19 guarantees setState on unmounted components is a zero-cost no-op, eliminating the need for isMountedRef guards. RN 0.78+ ships with React 19.

test: add ref forwarding tests for standalone and Line modes

7bef981

chore: update lockfile for peerDependencies change

d383fa2

docs: guide consumers to use GleamViewProps for accurate ref typing

d3bb243

docs: update onTransitionEnd description to reflect interrupted trans…

967cfa9

…itions

RamboWasReal requested a review from Copilot March 17, 2026 19:15

Copilot started reviewing on behalf of RamboWasReal March 17, 2026 19:15 View session

Copilot AI reviewed Mar 17, 2026

View reviewed changes

src/index.tsx Show resolved Hide resolved

ios/GleamView.mm

Comment on lines 496 to +499

if (_loading) {

if (_isTransitioning) {

[self _emitTransitionEnd:NO];

}

README.md Show resolved Hide resolved

docs: add React 19 to requirements section

c68cf16

RamboWasReal merged commit 2ab4f7a into main Mar 17, 2026
4 checks passed

RamboWasReal deleted the feat/gleam-view-line branch March 17, 2026 19:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: GleamView.Line compound component#2

feat: GleamView.Line compound component#2
RamboWasReal merged 13 commits intomainfrom
feat/gleam-view-line

RamboWasReal commented Mar 17, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

RamboWasReal commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Breaking changes (beta)

Usage

Test plan

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

RamboWasReal commented Mar 17, 2026 •

edited

Loading