react-native-skeleton-component

React Native Skeleton

React Native Skeleton is a react-native and react-native-web library to easily create a loading effect.

Installation

Step #1

Using yarn:

yarn add react-native-skeleton-component

Using npm:

npm install react-native-skeleton-component --save

Step #2 (Mobile Only)

Note: Only if you are using this package on react-native it requires the dependency @react-native-masked-view/masked-view for the wave animation (only available on mobile).
If your project includes the react-navigation >= 4.x you probably already have it installed and you can SKIP this step.

Using yarn:

yarn add @react-native-masked-view/masked-view

Using npm:

npm install @react-native-masked-view/masked-view --save

If you are running a react-native version below 0.60:

react-native link @react-native-masked-view/masked-view

Otherwise:

cd ios
pod install

Example

Check the following example to see it in action and try changing the default props to see how it works.

Usage

You always need to wrap the skeletons with the SkeletonContainer like in the following example.

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { SkeletonContainer, Skeleton } from 'react-native-skeleton-component';

const App = () => {
  return (
    <SkeletonContainer>
      <View style={styles.container}>
        <Skeleton style={styles.avatar} />
        <View style={styles.textContainer}>
          <Skeleton style={styles.title} />
          <Skeleton style={styles.subtitle} />
        </View>
        <Skeleton style={styles.icon} />
      </View>
    </SkeletonContainer>
  );
};

const styles = StyleSheet.create({
  container: { flexDirection: 'row', alignItems: 'center', marginBottom: 16 },
  avatar: { height: 40, width: 40, borderRadius: 0 },
  textContainer: { flex: 1, marginLeft: 16 },
  title: { width: '90%', height: 14, borderRadius: 7, marginBottom: 5 },
  subtitle: { width: '70%', height: 14, borderRadius: 7 },
  icon: { height: 16, width: 16, borderRadius: 4 },
});

Also you can do things like this.

import React from "react";
import { View } from "react-native";
import { SkeletonContainer, Skeleton } from "react-native-skeleton-component";

const App = () => {
  return (
    <SkeletonContainer>
      <ListItem />
      <ListItem />
      <ListItem />
    </SkeletonContainer>
  );
};

const ListItem = () => {
  return (
    <View style={styles.container}>
      <Skeleton style={styles.avatar} />
      <View style={styles.textContainer}>
        <Skeleton style={styles.title} />
        <Skeleton style={styles.subtitle} />
      </View>
      <Skeleton style={styles.icon} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flexDirection: 'row', alignItems: 'center', marginBottom: 16 },
  avatar: { height: 40, width: 40, borderRadius: 0 },
  textContainer: { flex: 1, marginLeft: 16 },
  title: { width: '90%', height: 14, borderRadius: 7, marginBottom: 5 },
  subtitle: { width: '70%', height: 14, borderRadius: 7 },
  icon: { height: 16, width: 16, borderRadius: 4 },
});

Properties

SkeletonContainer

Prop	Description	Type	Default
backgroundColor	Determines the color of placeholder	string	#E1E9EE
highlightColor	Determines the highlight color of placeholder	string	#EDF3F7
speed	Determines the animation speed in milliseconds	number	800
animation	Determines type of animation for the skeletons	wave, pulse or none	pulse

Note: The wave animaton is only available for mobile, because it makes use of the @react-native-masked-view/masked-view package.

Skeleton

Accepts any View prop.

License

MIT