SkeletonPlaceholder
SkeletonPlaceholder is a React Native library to easily create an amazing loading effect. [ANDROID & IOS]
This package includes the dependency **react-native-linear-gradient**
Installation
Note: If your project already includes the react-native-linear-gradient you can skip the Step #1
Step #1
Using yarn:
yarn add react-native-linear-gradient
Using npm:
npm install react-native-linear-gradient --save
If you are running a react-native version below 0.60:
react-native link react-native-linear-gradient
Otherwise:
cd iospod 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 🆕
;;; const App = { return <SkeletonPlaceholder> <SkeletonPlaceholderItem flexDirection="row" alignItems="center"> <SkeletonPlaceholderItem width=60 height=60 borderRadius=50 /> <SkeletonPlaceholderItem marginLeft=20> <SkeletonPlaceholderItem width=120 height=20 borderRadius=4 /> <SkeletonPlaceholderItem marginTop=6 width=80 height=20 borderRadius=4 /> </SkeletonPlaceholderItem> </SkeletonPlaceholderItem> </SkeletonPlaceholder> ;};
or with View
;;; const App = { return <SkeletonPlaceholder> <View style= flexDirection: "row" alignItems: "center" > <View style= width: 60 height: 60 borderRadius: 50 /> <View style= marginLeft: 20 > <View style= width: 120 height: 20 borderRadius: 4 /> <View style= marginTop: 6 width: 80 height: 20 borderRadius: 4 /> </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 | #F2F8FC |
speed | Determines the animation speed in milliseconds | number | 800 |
SkeletonPlaceholder.Item
Prop | Description | Type | Default |
---|---|---|---|
any | Any view style props was accepted | any |
Contributing
Any help this module will be appreciated!