Skip to content

Releases: tychota/react-native-fabric-shimmer

react-native-fabric-shimmer@1.0.0-alpha.0

Choose a tag to compare

Major Changes

  • 30dd050 Thanks @tychota! - Two changes shipping together: a small but breaking API refactor on <Bone> for React Compiler memoization, plus a refresh of the default bone visuals.

    Breaking — <Bone> props are now flat scalars (no nested ctx object).

    // Before
    <Bone rect={rect} ctx={ctx} />
    
    // After
    <Bone
      rect={rect}
      progress={ctx.progress}
      baseColor={ctx.baseColor}
      highlightColor={ctx.highlightColor}
      animation={ctx.animation}
    />

    The BoneContext type is still exported and is still what renderBone(rect, ctx) callbacks receive — only <Bone>'s own surface changed. The reason: when Skeleton rebuilt ctx inline inside its bones.map callback on every render, every Bone re-ran on every Skeleton re-render because React Compiler couldn't deduplicate a freshly-constructed object literal. Flat scalar props let the Compiler skip the Bone body when nothing bone-relevant has changed — visible as a measured 3.4 ms / 50-skeleton commit dropping to ~0 in the React DevTools Profiler.

    Visual refinement of the default bone — same shape and behaviour, calmer execution.

    • Shimmer bar widened from 40% to 58% of the bone, with cubic ease-in-out on the sweep so the highlight enters and leaves gently rather than popping. Stagger between neighbours softened so the wave still travels across the card without visibly cascading.
    • Pulse curve replaced the linear triangle wave with a cosine wave between 0.62 and 1. The trough is smooth (no peak), and the loop seam is at opacity 1 (both endpoints) so the cycle doesn't visibly restart.
    • Cycle duration 1400 ms → 1500 ms.
    • Container vs leaf rendering contract documented explicitly: containers render statically using the captured source styling (acting as the card's outline); only leaves animate.
    • Example app palette (apps/example/src/theme/tokens.ts) now declares colours in OKLCH and converts to hex at module load via culori. RN 0.83's colour parser doesn't yet accept oklch() strings (queued for 0.84+); see docs/extension/colors for the recommended bridge.

react-native-fabric-shimmer@0.2.1

Choose a tag to compare

@github-actions github-actions released this 14 May 09:10
d94713b

Patch Changes

  • c14be29 Thanks @tychota! - Polish:

    • Library README enriched with the "real component IS the skeleton" framing, the refineBones + find/hide extension example, a dumpTree debug snippet, and Credits (Nicușor Cîciudan's blog post and 0xGF/boneyard) — the npm package page now shows the same level of detail as the docs site.
    • Dev-mode warning prefix renamed from [dynamic-shimmer] to [fabric-shimmer] to match the package name. Three call sites updated (useMeasureBones two messages, buildBoneTree one). Filtering for these warnings in logs needs the new prefix.

    No behaviour or public-API change.

react-native-fabric-shimmer@0.2.0

Choose a tag to compare

@github-actions github-actions released this 14 May 02:32
716237d

Minor Changes

  • af8a1d4 Thanks @tychota! - Internal: align example app to Expo SDK 55's exact pinned matrix; pin React + React Native in the workspace overrides to match.

    No public API changes. The library code is unchanged from v0.1.0 — this release exists to lock down the development matrix so the example app, docs, and Storybook all reconcile to the same React patch (19.2.0) and React Native patch (0.83.6), eliminating per-workspace duplicate-package warnings from expo-doctor. Library devDep expo-linear-gradient bumped from ^55.0.13 to ~55.0.14 (the version SDK 55 currently pins).

    The example app uses ~ ranges for SDK 55 packages going forward so dependabot won't drift them out of the SDK matrix; Dependabot is configured to ignore expo non-major bumps, react/react-dom (workspace-pinned), and react-native-reanimated/react-native-worklets (RN 0.83 Fabric pins). Vitest major bumps are also ignored — that migration is its own scoped effort.

    Dev-tool refresh bundled in this release:

    • eslint-plugin-react-hooks ^5.2.0 → ^7.1.1
    • oxfmt ^0.40.0 → ^0.49.0
    • oxlint ^1.50.0 → ^1.64.0
    • oxlint-tsgolint ^0.21.0 → ^0.22.1
    • react-native-unistyles ^3.0.0 → ^3.2.4 (example app)

react-native-fabric-shimmer@0.1.0

Choose a tag to compare

@github-actions github-actions released this 14 May 02:17
d94ef9e

Minor Changes

  • 6b35aed Thanks @tychota! - Initial public release.

    <Skeleton loading> wraps any component tree and paints animated bones at the exact positions of the real content, measured at runtime via Fabric's JSI measureLayout. No build-time scan, no JSON pre-bake — the real component is the skeleton.

    What's in the box:

    • Skeleton — the wrapper. Visibility honours a delay-then-min-show pattern (delayShowDuration, default 100 ms) so fast loads never flash a skeleton; once mounted, minShowDuration keeps it on screen long enough to avoid flicker. Three animations: shimmer (default), pulse, none. Fades in/out with transition (default 300 ms). Container bones (cards with bg + border) render statically using the captured source styling; leaf bones (text, image, view) animate with a hairline highlightColor outline.
    • Bone — default bone renderer; override per-rect with renderBone.
    • defaultClassifyleaf / container / transparent / skip from fiber type + flattened style. Only host fibers (typeof fiber.type === "string") are classified — component fibers (forwardRefs like <Text>, <Image>) pass through to their host so measurement actually lands on a Fabric stateNode.
    • IR helperswalk, find, findAll, hide, merge, union for refineBones.
    • dumpTree — formats a measured BoneNode tree as indented ASCII (type, classification, rect) for debugging custom classify/refine logic.

    Requirements: React Native ≥ 0.76 with the New Architecture enabled (Fabric); React ≥ 19; react-native-reanimated ≥ 4; expo-linear-gradient ≥ 15 (peer). React Compiler-safe. Honours ReduceMotion.System.

    120 tests across 22 files cover the IR helpers, fiber classification, measurement pipeline (buildBoneTreemeasureTreeflattenTree), visibility hooks, Bone + Skeleton element trees, and dumpTree. ESM 5.2 kB gzip / CJS 5.3 kB gzip via size-limit. Reassure perf baseline at 10 and 30 bones.