https://github.com/chramos/react-native-skeleton-placeholder
SkeletonPlaceholder is a React Native library to easily create an amazing loading effect.
https://github.com/chramos/react-native-skeleton-placeholder
Last synced: 5 months ago
JSON representation
SkeletonPlaceholder is a React Native library to easily create an amazing loading effect.
- Host: GitHub
- URL: https://github.com/chramos/react-native-skeleton-placeholder
- Owner: chramos
- License: mit
- Created: 2019-06-11T23:31:14.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-05-16T23:45:21.000Z (11 months ago)
- Last Synced: 2024-05-17T14:41:52.915Z (11 months ago)
- Language: TypeScript
- Homepage:
- Size: 4.78 MB
- Stars: 656
- Watchers: 4
- Forks: 118
- Open Issues: 40
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- jimsghstars - chramos/react-native-skeleton-placeholder - SkeletonPlaceholder is a React Native library to easily create an amazing loading effect. (TypeScript)
README
## SkeletonPlaceholder
SkeletonPlaceholder is a React Native library to easily create an amazing loading effect with FlexBox.
Android and iOS
### Installation
> 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
```### Usage
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
);
};
```### Properties
#### 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 |### Contributing
You are welcome to contribute!
### License
[MIT](https://choosealicense.com/licenses/mit/)
