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-view
Using npm:
npm install @react-native-masked-view/masked-view --save
If you are running a react-native version below 0.60:
react-native link @react-native-masked-view/masked-view
Otherwise:
cd ios
pod install
Using yarn:
yarn add nicolaslazzos/react-native-skeleton-placeholder
Using npm:
npm install git+https://github.com/nicolaslazzos/react-native-skeleton-placeholder --save
import 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!