react-native-skeleton-placeholder
v5.2.4
Published
SkeletonPlaceholder is a React Native library to easily create an amazing loading effect.
Downloads
175,235
Maintainers
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:
yarn add @react-native-masked-view/masked-view react-native-linear-gradient
Using npm:
npm install @react-native-masked-view/masked-view react-native-linear-gradient --save
If you are running a react-native version below 0.60:
react-native link @react-native-masked-view/masked-view react-native-linear-gradient
Otherwise:
cd ios
pod install
Step #2
Using yarn:
yarn add react-native-skeleton-placeholder
Using npm:
npm install react-native-skeleton-placeholder --save
Usage
There are two ways to use this package:
with SkeletonPlacehoder.Item 🆕
import React from 'react';
import {View} from 'react-native';
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
const App = () => {
return (
<SkeletonPlaceholder borderRadius={4}>
<SkeletonPlaceholder.Item flexDirection="row" alignItems="center">
<SkeletonPlaceholder.Item width={60} height={60} borderRadius={50} />
<SkeletonPlaceholder.Item marginLeft={20}>
<SkeletonPlaceholder.Item width={120} height={20} />
<SkeletonPlaceholder.Item marginTop={6} width={80} height={20} />
</SkeletonPlaceholder.Item>
</SkeletonPlaceholder.Item>
</SkeletonPlaceholder>
);
};
or with View, Text or Image
import React from 'react';
import {View} from 'react-native';
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
const App = () => {
return (
<SkeletonPlaceholder borderRadius={4}>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<View style={{width: 60, height: 60, borderRadius: 50}} />
<View style={{marginLeft: 20}}>
<Image style={{width: 120, height: 20}} src={requre('./src/assets/image.png')} />
<Text style={{marginTop: 6, fontSize: 14, lineHeight: 18}}>Hello world</Text>
</View>
</View>
</SkeletonPlaceholder>
);
};
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!