react-native-skeleton-auto

Auto-generated skeleton loaders for React Native — record a component's real layout once, replay it as shimmer rectangles. Zero runtime dependencies; the recorder is compiled out of production.

Install

npm install react-native-skeleton-auto
# dev-time tooling (record your layouts):
npm install --save-dev react-native-skeleton-auto-babel react-native-skeleton-auto-cli

Peers: react >=18, react-native >=0.76. expo-linear-gradient is an optional peer, only needed for the ./gradient shimmer variant.

Entry points

| Import | Purpose | Ships to prod | |---|---|---| | react-native-skeleton-auto | Skeleton, defineSkeleton, getSkeleton, mirror, tile | Yes (RN-core JS only) | | react-native-skeleton-auto/record | SkeletonRecorder + instrumented View/Text/Image | Dev only | | react-native-skeleton-auto/gradient | Gradient shimmer (needs expo-linear-gradient) | Optional |

Usage

import './skeletons'; // generated by `skeleton record`; registers recordings
import { Skeleton } from 'react-native-skeleton-auto';

{loading ? <Skeleton name="ProductCard" width={windowWidth} /> : <ProductCard {...data} />}

Skeleton renders a recorded layout as absolutely-positioned shimmer rects — it does not wrap your component. Pass repeat/gap to tile a single row (FlatList placeholders) and rtl to mirror (defaults to I18nManager.isRTL).

To generate skeletons.ts, see the babel plugin and CLI, and the repo README for the full record → replay round-trip.

License

MIT