SkeletonPlaceholder is a React Native library to easily create an amazing loading effect with FlexBox.
Android and iOS
I (nicolaslazzos) improved this library so you can pass custom components as children and also the skeletons adapts to layout changes, including screen rotation. See the example in the Usage section.
Note: This package requires the dependency @react-native-masked-view/masked-view.
Using yarn:
yarn add @react-native-masked-view/masked-viewUsing npm:
npm install @react-native-masked-view/masked-view --saveIf you are running a react-native version below 0.60:
react-native link @react-native-masked-view/masked-viewOtherwise:
cd ios
pod install
Using yarn:
yarn add nicolaslazzos/react-native-skeleton-placeholderUsing npm:
npm install git+https://github.com/nicolaslazzos/react-native-skeleton-placeholder --saveimport React from "react";
import { View } from "react-native";
import { SkeletonContainer, Skeleton } from "react-native-skeleton-placeholder";
const App = () => {
return (
<SkeletonContainer>
<View style={{ flexDirection: "row", alignContent: "center", padding: 16 }}>
<Skeleton style={{ height: 70, width: 70, borderRadius: 6 }} />
<View style={{ flex: 1, justifyContent: "center", marginLeft: 16 }}>
<Skeleton style={{ height: 16, width: "50%", borderRadius: 6, marginBottom: 10 }} />
<Skeleton style={{ height: 16, width: "30%", borderRadius: 6, marginBottom: 10 }} />
<Skeleton style={{ height: 16, width: "70%", borderRadius: 6 }} />
</View>
</View>
</SkeletonContainer>
);
};Also you can do things like this, that wasn't possible with the original library.
import React from "react";
import { View } from "react-native";
import { SkeletonContainer, Skeleton } from "react-native-skeleton-placeholder";
const App = () => {
return (
<SkeletonContainer>
<ListItem />
<ListItem />
</SkeletonContainer>
);
};
const ListItem = () => {
return (
<View style={{ flexDirection: "row", alignContent: "center", padding: 16 }}>
<Skeleton style={{ height: 70, width: 70, borderRadius: 6 }} />
<View style={{ flex: 1, justifyContent: "center", marginLeft: 16 }}>
<Skeleton style={{ height: 16, width: "50%", borderRadius: 6, marginBottom: 10 }} />
<Skeleton style={{ height: 16, width: "30%", borderRadius: 6, marginBottom: 10 }} />
<Skeleton style={{ height: 16, width: "70%", borderRadius: 6 }} />
</View>
</View>
);
};| 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 |
| Prop | Description | Type | Default |
|---|---|---|---|
| any | Any view props was accepted | any |
You are welcome to contribute!
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent