React Native Skeleton Loaders

A small, intuitive, type-safe package for simple skeleton loaders that you can add whilst your app is in a loading state.

Table of contents

• Table of contents
• Install
• How it works
• Component API
• <Skeleton />
• <SkeletonGroup />
  • Staggering child elements
• Contributing
• License

Install

npm install react-native-skeleton-loaders

Or:

yarn add react-native-skeleton-loaders

How it works

Whilst waiting for data to load, to give the impression to the user that things are ticking along, you can add a skeleton loader. You can simply construct a layout of skeleton elements that match up with the eventual layout when the data has loaded:

const DataList = ({ isLoading }) => {
  return isLoading ? (
    <SkeletonGroup numberOfItems={3} direction="row" stagger={{ delay: 3 }}>
      <Skeleton w={100} h={100} />
    </SkeletonGroup>
  ) : (
    <Layout>
      <App />
    </Layout>
  );
};

---

Component API

<Skeleton />

Prop	Type	Default Value
w (width)	number
h (height)	number
bR (borderRadius)	number	3
mX (marginHorizontal)	number	2
mY (marginVertical)	number	2
color	string	'#ebebeb'
speed	400,500,700	500
circle	{ radius: number }	If you use this, then w and h will be overridden by the radius

For a single skeleton element, import <Skeleton />:

import { Skeleton } from "react-native-skeleton-loaders";

<Skeleton w={200} h={50} />;

<SkeletonGroup />

Prop	Type	Default Value	Notes
numberOfItems	number		There isn't a limit on how many items you can do, so use common sense!
direction	row,column	row	This mirrors the flex property, so goes vertically or horizontally
stagger	{ delay: number }	{ delay: 3 }
children	ReactElement<Skeleton>		This React child must be a <Skeleton /> component

If you want to have a group of skeleton elements, you can add a <SkeletonGroup />:

import { SkeletonGroup, Skeleton } from "react-native-skeleton-loaders";

<SkeletonGroup numberOfItems={4}>
  <Skeleton w={100} h={100} />
</SkeletonGroup>;

Staggering child elements

If you want the skeleton animation to be staggered in a more traditional skeleton animation way, you can simply add the stagger prop along with the delay for each element:

import { SkeletonGroup, Skeleton } from 'react-native-skeleton-loaders'

<SkeletonGroup numberOfItems={3} direction="row" stagger={{ delay: 3 }}>
  <Skeleton w={100} h={100} />
</SkeletonGroup>

<SkeletonGroup numberOfItems={3} direction="row" stagger={{ delay: 3 }}>
  <Skeleton w={100} h={100} />
</SkeletonGroup>

<SkeletonGroup numberOfItems={3} direction="row" stagger={{ delay: 3 }}>
  <Skeleton w={100} h={100} />
</SkeletonGroup>

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT