React-native-skeleton-loaders NPM

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

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} />

single-skeleton2

`<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>

single-skeleton4

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>

multiple-2