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