expo-skeleton-placeholder

SkeletonPlaceholder

SkeletonPlaceholder is a React Native library to easily create an amazing loading effect with FlexBox.

Android and iOS


$3

> Note: This package requires @react-native-masked-view/masked-view and react-native-linear-gradient

###### Step #1

Using yarn:

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

Using npm:

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

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

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

Otherwise:

`bash
cd ios
pod install
`

###### Step #2

Using yarn:

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

Using npm:

`bash
npm install react-native-skeleton-placeholder --save
`

$3

There are two ways to use this package:

with SkeletonPlacehoder.Item 🆕

`javascript
import React from 'react';
import {View} from 'react-native';
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';

const App = () => {
return (









);
};
`

or with View, Text or Image

`javascript
import React from 'react';
import {View} from 'react-native';
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';

const App = () => {
return (





Hello world



);
};
``

$3

#### SkeletonPlaceholder

| Prop | Description | Type | Default |
| :-------------: | :------------------------------------------------------------------: | :---------------: | :-------: |
| backgroundColor | Determines the color of placeholder | string | _#E1E9EE_ |
| highlightColor | Determines the highlight color of placeholder | string (hex \| rgb \| rgba) | _#F2F8FC_ |
| speed | Determines the animation speed in milliseconds. 0 disables animation | number | _800_ |
| direction | Determines the animation direction | "right" \| "left" | "right" |
| enabled | Determines if Skeleton should show placeholders or its children | boolean | true |
| borderRadius | Determines default border radius for placeholders | number | undefined |

#### SkeletonPlaceholder.Item

| Prop | Description | Type | Default |
| :--: | :-------------------------------: | :--: | :-----: |
| any | Any view style props was accepted | any |

$3

You are welcome to contribute!

$3

MIT