1.2.0 • Published 4 years ago
react-native-skeleton-loader-pulse v1.2.0
React Native Skeleton Loader Pulse Component
Skeleton Loader Pulse for React Native

Install
npm install react-native-skeleton-loader-pulseou
yarn add react-native-skeleton-loader-pulseUsage
SkeletonItem
import React from "react";
import { SkeletonItem } from "react-native-skeleton-loader-pulse";
export default function Component() {
return <SkeletonItem />;
}Props
| property | propType | required | default | description |
|---|---|---|---|---|
| color | string | undefined | - | #ccc | Skeleton color |
| pulseTime | number | undefined | - | 1 | pulse time in seconds |
| width | string | number | undefined | - | 100% | width container component |
| height | string | number | undefined | - | 10px | height container component |
| marginTop | string | number | undefined | - | 0 | margin top component |
| marginBottom | string | number | undefined | - | 0 | margin bottom component |
| marginLeft | string | number | undefined | - | 0 | margin left component |
| marginRight | string | number | undefined | - | 0 | margin right component |
| borderRadius | number | undefined | - | 0 | border radius component |
SkeletonLayout
import React from "react";
import { SkeletonLayout } from "react-native-skeleton-loader-pulse";
export default function Component() {
return (
<SkeletonLayout
align="center"
items={[
{
borderRadius: 50,
height: 100,
marginBottom: 15,
width: 100,
},
{
height: 25,
marginBottom: 10,
width: 250,
},
{
height: 10,
width: 270,
},
{
height: 10,
width: 300,
},
{
height: 10,
width: 280,
},
]}
/>
);
}Props
| property | propType | required | default | description |
|---|---|---|---|---|
| color | string | undefined | - | #ccc | Skeleton color |
| pulseTime | number | undefined | - | 1 | pulse time |
| width | string | number | undefined | - | 100% | width container component |
| direction | "column" | "row" | undefined | - | column | flex-direction of layout |
| align | "center" | "left" | "right" | undefined | - | left | align items of layout |
| items | Item[] | yes | - | Layout: Array of objects |
Props array Item
| property | propType | required | default | description |
|---|---|---|---|---|
| height | number | string | yes | - | height |
| width | number | string | undefined | - | 100% | widtt |
| borderRadius | number | undefined | - | 0 | border radius |
| marginBottom | number | string | undefined | - | 3px | margin bottom |
| marginTop | number | string | undefined | - | 3px | margin top |
| marginLeft | number | string | undefined | - | 0 | margin left |
| marginRight | number | string | undefined | - | 0 | margin right |
LICENSE
This project is licensed under the MIT License.
Development by: André Coelho
1.2.0
4 years ago
1.0.8
5 years ago
1.0.84
5 years ago
1.0.83
5 years ago
1.0.82
5 years ago
1.0.81
5 years ago
1.0.88
5 years ago
1.0.87
5 years ago
1.0.86
5 years ago
1.0.85
5 years ago
1.0.89
5 years ago
1.0.7
6 years ago
1.0.6
6 years ago
1.0.5
6 years ago
1.0.4
6 years ago
1.0.2
6 years ago
1.0.3
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago