Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@empglabs/react-native-skeleton-placeholder
Advanced tools
SkeletonPlaceholder is a React Native library to easily create an amazing loading effect.
SkeletonPlaceholder is a React Native library to easily create an amazing loading effect with FlexBox.
Android and iOS
Note: This package requires @react-native-masked-view/masked-view and react-native-linear-gradient
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
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. 0 disables animation | number | 800 |
direction | Determines the animation direction | "right" | "left" | "right" |
Prop | Description | Type | Default |
---|---|---|---|
any | Any view style props was accepted | any |
You are welcome to contribute!
FAQs
SkeletonPlaceholder is a React Native library to easily create an amazing loading effect.
We found that @empglabs/react-native-skeleton-placeholder demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.