{"id":50875642,"url":"https://github.com/numandev1/react-native-auto-shimmer","last_synced_at":"2026-06-15T09:32:21.470Z","repository":{"id":349993647,"uuid":"1202765659","full_name":"numandev1/react-native-auto-shimmer","owner":"numandev1","description":"Auto generated shimmer loading for React Native / Expo","archived":false,"fork":false,"pushed_at":"2026-04-08T13:25:31.000Z","size":3997,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-08T13:25:56.526Z","etag":null,"topics":["expo","react-native","shimmer","shimmer-android","shimmer-animation","shimmer-effect","shimmer-loading"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/numandev1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"numandev1","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":"http://buymeacoffee.com/numan.dev"}},"created_at":"2026-04-06T11:28:12.000Z","updated_at":"2026-04-08T13:25:50.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/numandev1/react-native-auto-shimmer","commit_stats":null,"previous_names":["numandev1/react-native-auto-shimmer"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/numandev1/react-native-auto-shimmer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/numandev1%2Freact-native-auto-shimmer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/numandev1%2Freact-native-auto-shimmer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/numandev1%2Freact-native-auto-shimmer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/numandev1%2Freact-native-auto-shimmer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/numandev1","download_url":"https://codeload.github.com/numandev1/react-native-auto-shimmer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/numandev1%2Freact-native-auto-shimmer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34357281,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-15T02:00:07.085Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["expo","react-native","shimmer","shimmer-android","shimmer-animation","shimmer-effect","shimmer-loading"],"created_at":"2026-06-15T09:32:21.286Z","updated_at":"2026-06-15T09:32:21.452Z","avatar_url":"https://github.com/numandev1.png","language":"TypeScript","funding_links":["https://github.com/sponsors/numandev1","http://buymeacoffee.com/numan.dev","https://www.buymeacoffee.com/numan.dev"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg src=\"media/logo.gif\" alt=\"react-native-auto-shimmer\" width=\"420\" /\u003e\n\n# React Native Auto Shimmer\n\n### Stop hand-coding skeleton screens. Capture them from your real UI in one click.\n\n[![npm version](https://img.shields.io/npm/v/react-native-auto-shimmer?color=6366f1\u0026style=flat-square)](https://www.npmjs.com/package/react-native-auto-shimmer)\n[![npm downloads](https://img.shields.io/npm/dm/react-native-auto-shimmer?color=059669\u0026style=flat-square)](https://www.npmjs.com/package/react-native-auto-shimmer)\n[![license](https://img.shields.io/npm/l/react-native-auto-shimmer?color=f59e0b\u0026style=flat-square)](LICENSE)\n[![React Native](https://img.shields.io/badge/React%20Native-%3E%3D0.68-61dafb?style=flat-square\u0026logo=react)](https://reactnative.dev)\n[![Expo](https://img.shields.io/badge/Expo-compatible-000?style=flat-square\u0026logo=expo)](https://expo.dev)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen?style=flat-square)](CONTRIBUTING.md)\n\n\u003cbr/\u003e\n\n**⭐ If this saves you time, star the repo — it takes 2 seconds and helps others find it.**\n\n\u003cbr/\u003e\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\" width=\"25%\"\u003e\n\n**Auto Pulse**\n![pulse animation](media/simulator_with_pulse.gif)\n\n\u003c/td\u003e\n\u003ctd align=\"center\" width=\"25%\"\u003e\n\n**Auto Shimmer**\n![shimmer animation](media/simulator_with_shimmer.gif)\n\n\u003c/td\u003e\n\u003ctd align=\"center\" width=\"25%\"\u003e\n\n**ShimmerOverlay**\n![shimmer overlay effect](media/shimmer_overlay.gif)\n\n\u003c/td\u003e\n\u003ctd align=\"center\" width=\"25%\"\u003e\n\n**ShimmerPlaceholder**\n![shimmer placeholder effect](media/shimmer_placeholder.gif)\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003eAuto-captured from live UI\u003c/td\u003e\n\u003ctd align=\"center\"\u003eAuto-captured from live UI\u003c/td\u003e\n\u003ctd align=\"center\"\u003eWrap any element\u003c/td\u003e\n\u003ctd align=\"center\"\u003eFixed-size box\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c/div\u003e\n\n---\n\n## The problem with skeleton screens today\n\nEvery React Native developer has been here:\n\n```\n🤦 \"OK let me eyeball this card width... maybe 340px? Let me check on a different device...\"\n🤦 \"The design changed again. Rebuild all the skeletons.\"\n🤦 \"Why does the skeleton not match the real layout on iPad?\"\n```\n\nBuilding skeletons by hand is a time sink that should not exist. **react-native-auto-shimmer fixes this permanently.**\n\n---\n\n## How it works (30 seconds)\n\n![Skeleton Inspector live capture](media/simulator_with_debugger.png)\n\n\u003cdiv align=\"center\"\u003e\n\n*The Skeleton Inspector DevTools panel — click Capture, get pixel-perfect skeletons instantly*\n\n\u003c/div\u003e\n\n1. **Wrap** your component with `\u003cSkeletonCapture name=\"card\"\u003e`\n2. **Open** Skeleton Inspector in React Native DevTools\n3. **Click Capture** — real skeleton geometry is measured from the live fiber tree\n4. **Delete** any unwanted pieces with the trash icon\n5. **Save** — a TypeScript file lands in `src/skeletons/` with a ready-to-paste code snippet\n6. **Done** — skeletons that match your UI exactly, on every device size\n\nNo guessing. No hardcoding. No drift.\n\n---\n\n## Three ways to use it\n\n\u003cdiv align=\"center\"\u003e\n\n| | **Auto Shimmer** ⭐ Primary | **ShimmerOverlay** | **ShimmerPlaceholder** |\n|---|---|---|---|\n| **What** | Skeleton from live UI, zero manual work | Shimmer sweep over any element | Fixed-size shimmer box |\n| **Layout** | Measured from real component | Wraps whatever you give it | You set `width` / `height` |\n| **Responsive** | ✅ % widths, any screen | — | ❌ Fixed px |\n| **Setup** | One-time DevTools capture | Wrap \u0026 go | Drop in |\n| **Use when** | Building loading screens | Shine/highlight effects | Simple one-off placeholders |\n\n\u003c/div\u003e\n\n\u003e **Start with Auto Shimmer.** Drop to the manual options only for quick one-offs or pure visual effects.\n\n---\n\n## Installation\n\n```sh\nnpm install react-native-auto-shimmer\n# or\nyarn add react-native-auto-shimmer\n```\n\n\u003e No native modules · No `pod install` · No Gradle changes · Works with Expo · React Native ≥ 0.68\n\n---\n\n# Auto Shimmer ⭐\n\n\u003e The main event. Capture pixel-perfect skeleton layouts directly from your running UI — no measurement, no guesswork.\n\n## Before vs. After\n\n```diff\n- // 😩 The old way\n- const SkeletonCard = () =\u003e (\n-   \u003cView style={{ width: 340, height: 180, backgroundColor: '#e0e0e0' }} /\u003e\n-   \u003cView style={{ width: 280, height: 18,  backgroundColor: '#e0e0e0', marginTop: 16 }} /\u003e\n-   \u003cView style={{ width: 200, height: 14,  backgroundColor: '#e0e0e0', marginTop: 8  }} /\u003e\n-   // ... and redo all of this every time the design changes\n- );\n\n+ // ✅ With react-native-auto-shimmer\n+ \u003cSkeleton loading={loading} name=\"card\" style={styles.card}\u003e\n+   \u003cArticleCard /\u003e\n+ \u003c/Skeleton\u003e\n```\n\n## Setup\n\n### 1 — Install dev dependencies\n\n```sh\nyarn add -D @rozenite/metro react-native-auto-shimmer-rozenite-plugin\n```\n\n### 2 — Configure Metro\n\n```js\n// metro.config.js\nconst { getDefaultConfig } = require('@expo/metro-config'); // or require('metro-config')\nconst { withRozenite } = require('@rozenite/metro');\nconst { withSkeletonInspector } = require('react-native-auto-shimmer-rozenite-plugin/metro');\n\nlet config = getDefaultConfig(__dirname);\nconfig = withSkeletonInspector(config);\n\nif (process.env.WITH_ROZENITE === 'true') {\n  config = withRozenite(config, { enabled: true });\n}\n\nmodule.exports = config;\n```\n\n### 3 — Register the plugin\n\n```tsx\n// App.tsx or index.js\nif (__DEV__) {\n  const { getRozeniteDevToolsClient } = require('@rozenite/plugin-bridge');\n  const setupPlugin = require('react-native-auto-shimmer-rozenite-plugin').default;\n\n  getRozeniteDevToolsClient('react-native-auto-shimmer')\n    .then((client) =\u003e setupPlugin(client))\n    .catch((e) =\u003e console.warn('[SkeletonInspector] Could not connect:', e?.message));\n}\n```\n\n### 4 — Wrap your component\n\n```tsx\nimport { Skeleton, SkeletonCapture } from 'react-native-auto-shimmer';\n\nexport function ArticleScreen() {\n  const [loading, setLoading] = useState(true);\n\n  return (\n    \u003cSkeleton loading={loading} initialSkeletons={cardSkeletons} style={styles.card}\u003e\n      {/* Place SkeletonCapture inside Skeleton so it measures visible content */}\n      \u003cSkeletonCapture name=\"card\"\u003e\n        \u003cArticleCard /\u003e\n      \u003c/SkeletonCapture\u003e\n    \u003c/Skeleton\u003e\n  );\n}\n```\n\n### 5 — Run the inspector\n\n```sh\nWITH_ROZENITE=true yarn start\n```\n\nOpen your app → **React Native DevTools** → **Rozenite tab** → **Skeleton Inspector**\n\n### 6 — Capture, review, save\n\n1. Navigate to your screen (make sure `loading` is `false` — real content must be visible)\n2. Click **⬡ Capture** — skeletons are measured from the live layout\n3. Delete unwanted pieces with the trash icon\n4. Click **↓ Save .ts (Responsive)** — file lands in `src/skeletons/`\n5. Copy the ready-to-paste snippet from the panel\n\n![Skeleton Inspector — captured skeletons](docs/captured-skeletons.png)\n\n\u003e **Save .ts vs Save .json**\n\u003e `.ts` stores `x`/`w` as percentages → scales to every screen size. **Use this.**\n\u003e `.json` stores raw dp values → fastest for a quick snapshot on a single device.\n\n---\n\n## Using your skeletons\n\n### Import directly  (recommended)\n\n```tsx\nimport cardSkeletons from './skeletons/card.skeletons'; // .ts — responsive\n\n\u003cSkeleton loading={loading} initialSkeletons={cardSkeletons} style={styles.card}\u003e\n  \u003cArticleCard /\u003e\n\u003c/Skeleton\u003e\n```\n\n### Register once, use everywhere (optional)\n\n```ts\n// App.tsx\nimport { registerSkeletons } from 'react-native-auto-shimmer';\nimport cardSkeletons    from './skeletons/card.skeletons';\nimport profileSkeletons from './skeletons/profile.skeletons';\n\nregisterSkeletons({ card: cardSkeletons, profile: profileSkeletons });\n```\n\n```tsx\n// Any screen — no import needed\n\u003cSkeleton name=\"card\" loading={loading} style={styles.card}\u003e\n  \u003cArticleCard /\u003e\n\u003c/Skeleton\u003e\n```\n\n### Global config\n\n```ts\nimport { configureSkeleton } from 'react-native-auto-shimmer';\n\nconfigureSkeleton({\n  animate:   'shimmer',           // 'pulse' | 'shimmer' | 'solid'\n  color:     'rgba(0,0,0,0.06)',\n  darkColor: 'rgba(255,255,255,0.08)',\n});\n```\n\n---\n\n## API — `\u003cSkeleton\u003e`\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `loading` | `boolean` | **required** | Show skeleton (`true`) or real content (`false`) |\n| `children` | `ReactNode` | **required** | Your component |\n| `name` | `string` | — | Registry key set via `registerSkeletons` |\n| `initialSkeletons` | `SkeletonResult \\| ResponsiveSkeletons` | — | Direct skeleton data — takes priority over `name` |\n| `animate` | `'pulse' \\| 'shimmer' \\| 'solid' \\| boolean` | `'pulse'` | Animation style |\n| `color` | `string` | `'rgba(0,0,0,0.08)'` | Skeleton colour (light mode) |\n| `darkColor` | `string` | `'rgba(255,255,255,0.06)'` | Skeleton colour (dark mode) |\n| `style` | `ViewStyle` | — | Wrapper style — set `width`, `height`, `borderRadius` here |\n| `fallback` | `ReactNode` | — | Shown when `loading=true` but no skeletons exist yet |\n\n## API — `\u003cSkeletonCapture\u003e` *(dev only)*\n\nNo-op in production — tree-shakes to a plain `\u003cView\u003e` with zero overhead.\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `name` | `string` | Identifier shown in Skeleton Inspector |\n| `children` | `ReactNode` | The component to measure |\n| `style` | `ViewStyle` | Forwarded to the wrapper View |\n\n---\n\n## Animation styles\n\n| Value | Behaviour |\n|-------|-----------|\n| `'pulse'` | Opacity 100% → 45% loop — runs on the **native UI thread** |\n| `'shimmer'` | Bright highlight sweeps left-to-right across all pieces |\n| `'solid'` | Static — no animation (good for Reduce Motion) |\n\n---\n\n## Responsive skeletons \u0026 dark mode\n\n**Multi-breakpoint:** Capture at each device width. The file stores one entry per breakpoint; `\u003cSkeleton\u003e` picks the nearest match automatically.\n\n**Dark mode:** `\u003cSkeleton\u003e` reads `useColorScheme()` internally — pass `color` and `darkColor` or set them once with `configureSkeleton`.\n\n---\n\n# Manual Options\n\n\u003e Quick placeholders without the capture workflow.\n\n---\n\n## ShimmerOverlay\n\nAdds a shimmer sweep to **any** existing element — real content, buttons, images, cards. Not a loading placeholder; a visual highlight effect.\n\n```tsx\nimport { ShimmerOverlay } from 'react-native-auto-shimmer';\n\n// Basic\n\u003cShimmerOverlay\u003e\n  \u003cView style={styles.card} /\u003e\n\u003c/ShimmerOverlay\u003e\n\n// Premium button highlight\n\u003cShimmerOverlay color=\"rgba(255,200,0,0.7)\" mode=\"expand\" angle={20} duration={1800}\u003e\n  \u003cPremiumButton /\u003e\n\u003c/ShimmerOverlay\u003e\n\n// Staggered list\n{items.map((item, i) =\u003e (\n  \u003cShimmerOverlay key={item.id} initialDelay={i * 200}\u003e\n    \u003cListRow item={item} /\u003e\n  \u003c/ShimmerOverlay\u003e\n))}\n\n// Programmatic control\nconst shimmerRef = useRef\u003cShimmerOverlayRef\u003e(null);\n\u003cShimmerOverlay ref={shimmerRef} active={false}\u003e\n  \u003cView style={styles.banner} /\u003e\n\u003c/ShimmerOverlay\u003e\n\u003cButton title=\"Shine\" onPress={() =\u003e shimmerRef.current?.start()} /\u003e\n```\n\n### Props\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `active` | `boolean` | `true` | Whether the animation runs |\n| `color` | `string` | `'rgba(255,255,255,0.8)'` | Shimmer band colour |\n| `duration` | `number` | `1500` | One cycle in ms |\n| `delay` | `number` | `400` | Pause between cycles |\n| `initialDelay` | `number` | `0` | Delay before first cycle |\n| `angle` | `number` | `20` | Band angle in degrees |\n| `bandWidth` | `number` | `60` | Band width in px |\n| `mode` | `'normal' \\| 'expand' \\| 'shrink'` | `'normal'` | Band size style |\n| `direction` | `'left-to-right' \\| 'right-to-left'` | `'left-to-right'` | Sweep direction |\n| `iterations` | `number` | `-1` | Cycles (-1 = infinite) |\n| `respectReduceMotion` | `boolean` | `true` | Pauses on system Reduce Motion |\n| `pauseOnBackground` | `boolean` | `true` | Pauses when app backgrounds |\n| `onAnimationComplete` | `() =\u003e void` | — | Called when all iterations finish |\n\n### Ref methods\n\n```tsx\nref.current?.start();       // Start\nref.current?.stop();        // Stop\nref.current?.restart();     // Restart from beginning\nref.current?.isAnimating(); // → boolean\n```\n\n---\n\n## ShimmerPlaceholder\n\nA fixed-size shimmer box you size in code. Drop-in for [`react-native-shimmer-placeholder`](https://github.com/tomzaku/react-native-shimmer-placeholder) with **zero dependencies** — no LinearGradient needed.\n\n### Migrate in 2 lines\n\n```diff\n- import LinearGradient from 'react-native-linear-gradient';\n- import { createShimmerPlaceholder } from 'react-native-shimmer-placeholder';\n- const ShimmerPlaceHolder = createShimmerPlaceholder(LinearGradient);\n\n+ import { createShimmerPlaceholder } from 'react-native-auto-shimmer';\n+ const ShimmerPlaceHolder = createShimmerPlaceholder();\n```\n\n### Usage\n\n```tsx\nimport { ShimmerPlaceholder } from 'react-native-auto-shimmer';\n\n// Text line\n\u003cShimmerPlaceholder width={220} height={14} borderRadius={6} visible={loaded}\u003e\n  \u003cText\u003e{title}\u003c/Text\u003e\n\u003c/ShimmerPlaceholder\u003e\n\n// Avatar circle\n\u003cShimmerPlaceholder width={48} height={48} borderRadius={24} visible={loaded}\u003e\n  \u003cImage source={{ uri: avatarUrl }} style={styles.avatar} /\u003e\n\u003c/ShimmerPlaceholder\u003e\n\n// Dark mode\n\u003cShimmerPlaceholder\n  width={240} height={16} borderRadius={8}\n  shimmerColors={['#2a2a3e', '#3d3d5c', '#2a2a3e']}\n  visible={loaded}\n\u003e\n  \u003cText\u003e{label}\u003c/Text\u003e\n\u003c/ShimmerPlaceholder\u003e\n```\n\n### Full placeholder card\n\n```tsx\nfunction ArticleCardPlaceholder({ loaded }: { loaded: boolean }) {\n  return (\n    \u003cView style={styles.card}\u003e\n      \u003cShimmerPlaceholder width={340} height={180} visible={loaded}\u003e\n        \u003cImage source={{ uri: imageUrl }} style={styles.hero} /\u003e\n      \u003c/ShimmerPlaceholder\u003e\n      \u003cView style={styles.body}\u003e\n        \u003cShimmerPlaceholder width={280} height={18} borderRadius={6} visible={loaded} style={{ marginBottom: 8 }}\u003e\n          \u003cText style={styles.title}\u003e{title}\u003c/Text\u003e\n        \u003c/ShimmerPlaceholder\u003e\n        \u003cShimmerPlaceholder width={300} height={13} borderRadius={6} visible={loaded} style={{ marginBottom: 6 }}\u003e\n          \u003cText\u003e{excerpt}\u003c/Text\u003e\n        \u003c/ShimmerPlaceholder\u003e\n        \u003cView style={{ flexDirection: 'row', gap: 10, alignItems: 'center' }}\u003e\n          \u003cShimmerPlaceholder width={32} height={32} borderRadius={16} visible={loaded}\u003e\n            \u003cImage source={{ uri: avatarUrl }} style={styles.avatar} /\u003e\n          \u003c/ShimmerPlaceholder\u003e\n          \u003cShimmerPlaceholder width={120} height={13} borderRadius={6} visible={loaded}\u003e\n            \u003cText\u003e{authorName}\u003c/Text\u003e\n          \u003c/ShimmerPlaceholder\u003e\n        \u003c/View\u003e\n      \u003c/View\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\n### Props\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `width` | `number` | `200` | Width in px |\n| `height` | `number` | `15` | Height in px |\n| `visible` | `boolean` | `false` | `true` = show children, `false` = show shimmer |\n| `shimmerColors` | `[string, string, string]` | `['#ebebeb','#d0d0d0','#ebebeb']` | Gradient colours |\n| `isReversed` | `boolean` | `false` | Sweep right-to-left |\n| `duration` | `number` | `1000` | One sweep in ms |\n| `delay` | `number` | `0` | Delay before each sweep |\n| `borderRadius` | `number` | `0` | Border radius |\n| `style` | `StyleProp\u003cViewStyle\u003e` | — | Outer container style |\n| `contentStyle` | `StyleProp\u003cViewStyle\u003e` | — | Children wrapper style |\n| `shimmerStyle` | `StyleProp\u003cViewStyle\u003e` | — | Shimmer box style |\n\n---\n\n## FAQ\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eDo I need to keep \u0026lt;SkeletonCapture\u0026gt; in production?\u003c/strong\u003e\u003c/summary\u003e\n\nNo — but you can safely leave it. In production (`__DEV__ === false`) it renders as a transparent `\u003cView\u003e` with no bridge calls whatsoever.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eThe panel shows \"No components found\".\u003c/strong\u003e\u003c/summary\u003e\n\nNavigate to the screen that mounts your `\u003cSkeletonCapture\u003e`. Components register on mount and deregister on unmount — the panel reflects what's currently on screen.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e\u0026lt;Skeleton\u0026gt; shows blank space instead of a skeleton.\u003c/strong\u003e\u003c/summary\u003e\n\nNo skeleton data has been passed yet. Use `fallback` while you complete the capture:\n\n```tsx\n\u003cSkeleton loading={loading} fallback={\u003cView style={styles.placeholder} /\u003e}\u003e\n  \u003cMyCard /\u003e\n\u003c/Skeleton\u003e\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eMy component renders at different widths. Which do I capture?\u003c/strong\u003e\u003c/summary\u003e\n\nCapture at every meaningful width. Each capture adds a breakpoint to the same file and `\u003cSkeleton\u003e` picks the closest one at runtime.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eCan I edit the skeleton data by hand?\u003c/strong\u003e\u003c/summary\u003e\n\nYes. `x`/`w` are % of container width, `y`/`h` are dp, `r` is border-radius in dp or `\"50%\"` for circles. Or just delete unwanted pieces in the inspector before saving.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eDoes it work with Expo?\u003c/strong\u003e\u003c/summary\u003e\n\nYes. No native modules. The Rozenite plugin uses Metro's `enhanceMiddleware` API, which Expo supports out of the box.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eDoes it work with the New Architecture (Fabric)?\u003c/strong\u003e\u003c/summary\u003e\n\nYes. `SkeletonCapture` detects the renderer at runtime and uses the correct measurement path for both Fabric and the legacy renderer.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eDoes it work with React Navigation / Expo Router?\u003c/strong\u003e\u003c/summary\u003e\n\nYes. `\u003cSkeletonCapture\u003e` registers on mount and cleans up on unmount — no conflicts with any navigation library.\n\u003c/details\u003e\n\n---\n\n## Contributing\n\nBug fixes, features, and docs improvements are all welcome.\n\n- [Development workflow](CONTRIBUTING.md#development-workflow)\n- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)\n\n## Support the project\n\nIf this library saves you time, a star on GitHub goes a long way — it helps other developers discover it.\n\n\u003cdiv align=\"center\"\u003e\n\n**[⭐ Star on GitHub](https://github.com/numandev1/react-native-auto-shimmer)**\n\n\u003ca href=\"https://www.buymeacoffee.com/numan.dev\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png\" alt=\"Buy Me A Coffee\" style=\"height: auto !important;width: auto !important;\" \u003e\u003c/a\u003e\n\n\u003c/div\u003e\n\n---\n\ninspired by [boneyard](https://github.com/0xGF/boneyard)\n\n\n## License\n\nMIT © [Numan](https://github.com/numandev1)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnumandev1%2Freact-native-auto-shimmer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnumandev1%2Freact-native-auto-shimmer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnumandev1%2Freact-native-auto-shimmer/lists"}