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.

$3

#### Step #1

Using yarn:

``bash
yarn add react-native-skeleton-component
`

Using npm:

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

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

Using npm:

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

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

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

Otherwise:

`bash
cd ios
pod install
`

$3

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


$3

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

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

const App = () => {
return (










);
};

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.

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

const App = () => {
return (





);
};

const ListItem = () => {
return (








);
};

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 },
});
`

$3

#### 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.

$3

MIT