SkeletonPlaceholder is a React Native library to easily create an amazing loading effect with FlexBox.
Android and iOS
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 react-native-skeleton-placeholder
Using npm:
npm install react-native-skeleton-placeholder --save
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>
<SkeletonPlaceholder.Item flexDirection="row" alignItems="center">
<SkeletonPlaceholder.Item width={60} height={60} borderRadius={50} />
<SkeletonPlaceholder.Item marginLeft={20}>
<SkeletonPlaceholder.Item width={120} height={20} borderRadius={4} />
<SkeletonPlaceholder.Item
marginTop={6}
width={80}
height={20}
borderRadius={4}
/>
</SkeletonPlaceholder.Item>
</SkeletonPlaceholder.Item>
</SkeletonPlaceholder>
);
};
or with View
import React from "react";
import { View } from "react-native";
import SkeletonPlaceholder from "react-native-skeleton-placeholder";
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>
);
};
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 style props was accepted | any |
You are welcome to contribute!