Skip to content
A customizable skeleton-like loading placeholder for react native projects using expo.
TypeScript JavaScript
Branch: master
Clone or download
Latest commit 7b63795 Oct 15, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demos Added gif demos Jun 19, 2019
src TypeScript config Oct 15, 2019
.eslintrc initial commit Jun 18, 2019
.gitignore TypeScript config Oct 15, 2019
.npmignore Switched to TypeScript Oct 10, 2019
.prettierrc TypeScript config Oct 15, 2019
LICENSE.md license.md Jun 19, 2019
README.md update readme Aug 3, 2019
babel.config.json TypeScript config Oct 15, 2019
jest.config.json TypeScript config Oct 15, 2019
package-lock.json 1.0.10 Oct 15, 2019
package.json 1.0.10 Oct 15, 2019
setup-test-env.js TypeScript config Oct 15, 2019
tsconfig.jest.json TypeScript config Oct 15, 2019
tsconfig.json skip lib check tsconfig Oct 15, 2019
tslint.json TypeScript config Oct 15, 2019

README.md

React Native Skeleton Content

If you are not using expo, please head up to this page instead.

React native Skeleton Content, a simple yet fully customizable component made to achieve loading animation in a Skeleton-style. Works in both iOS and Android.

npm version

Installation

npm install react-native-skeleton-content

Usage

  1. Import react-native-skeleton-content:
import SkeletonContent from "react-native-skeleton-content";
  1. Once you create the SkeletonContent, you have two options:
  • Child Layout : The component will figure out the layout of its bones with the dimensions of its direct children (make sure to wrap them in sized-views, with width and height properties, otherwise, shiver animation might not work).
  • Custom Layout : You provide a prop layout to the component specifying the size of the bones (see the Examples section below). Herunder is the example with a custom layout.
render () {
return (
<SkeletonContent
    containerStyle={{flex: 1, width: 300}}
    isLoading={false}
    layout={[
    { width: 220, height: 20, marginBottom: 6 },
    { width: 180, height: 20, marginBottom: 6 },
    ]}
    >

    <Text style={styles.normalText}>
        Your content
    </Text>

    <Text style={styles.bigText}>
        Other content
    </Text>

</SkeletonContent>
)
}
  1. Then simply sync the prop isLoading to your state to show/hide the SkeletonContent when the assets/data are available to the user.
render () {
    const { isLoading } = this.state;
    return (
    <SkeletonContent
        containerStyle={{flex: 1, width: 300}}
        isLoading={isLoading}>
        ...
    />
)
}

Props

Name Type Default Description
isLoading bool required Shows the Skeleton bones when true
layout array of objects [] A custom layout for the Skeleton bones
duration number 1200 ms Duration of one cycle of animation
containerStyle object flex: 1 The style applied to the View containing the bones
easing Easing bezier(0.5, 0, 0.25, 1) Easing of the bones animation
animationType string "shiver" The animation to be used for animating the bones (see demos below)
animationDirection string "horizontalRight" Used only for shiver animation, describes the direction and end-point (ex: horizontalRight goes on the x-axis from left to right)
boneColor string "#E1E9EE" Color of the bones
highlightColor string "#F2F8FC" Color of the highlight of the bones

Examples

See the playground section to experiment : 1 - Changing the direction of the animation (animationDirection prop) :

render () {
    return (
    <SkeletonContent
        containerStyle={{flex: 1, width: 300}}
        animationDirection="horizontalLeft"
        isLoading={true}>
        ...
    />
    )
}

2 - Changing the colors and switching to "pulse" animation (boneColor, highlightColor and animationType prop) :

render () {
    return (
    <SkeletonContent
        containerStyle={{flex: 1, width: 300}}
        boneColor="#121212"
        highlightColor="#333333"
        animationType="pulse"
        isLoading={true}>
        ...
    />
    )
}

3 - Customizing the layout of the bones (layout prop) :

render () {
    return (
    <SkeletonContent
        containerStyle={{flex: 1, width: 300}}
        animationDirection="horizontalLeft"
        layout={[
        // long line
        { width: 220, height: 20, marginBottom: 6 },
        // short line
        { width: 180, height: 20, marginBottom: 6 },
        ...
        ]}
        isLoading={true}>
        ...
    />
    )
}

Playground

You can test out the features and different props easily on Snack. Don't hesitate to take contact if anything is unclear !

You can’t perform that action at this time.