SkeletonPlaceholder
SkeletonPlaceholder is a React Native library to easily create an amazing loading effect.
| Example 1 | Example 2 |
|---|---|
 |  |
Installation
Using yarn:
yarn add react-native-skeleton-placeholderUsing npm:
npm install react-native-skeleton-placeholder --saveUsage
Example 1:
import React from "react"; import { SafeAreaView, View } from "react-native"; import SkeletonPlaceholder from "react-native-skeleton-placeholder"; class App extends React.Component { render() { return ( <SafeAreaView> <SkeletonPlaceholder> <View style={{ width: "100%", height: 140 }} /> <View style={{ width: 100, height: 100, borderRadius: 100, borderWidth: 5, borderColor: "white", alignSelf: "center", position: "relative", top: -50 }} /> <View style={{ width: 120, height: 20, alignSelf: "center" }} /> <View style={{ width: 240, height: 20, alignSelf: "center", marginTop: 12 }} /> </SkeletonPlaceholder> </SafeAreaView> ); } } export default App;Example 2:
import React from "react"; import { SafeAreaView, View } from "react-native"; import SkeletonPlaceholder from "react-native-skeleton-placeholder"; class App extends React.Component { render() { return ( <SafeAreaView> {[0, 1, 2, 3, 4].map((_, index) => ( <View key={index} style={{ marginBottom: 12 }}> <SkeletonPlaceholder> <View style={{ flexDirection: "row" }}> <View style={{ width: 100, height: 100 }} /> <View style={{ justifyContent: "space-between", marginLeft: 12, flex: 1 }} > <View style={{ width: "50%", height: 20 }} /> <View style={{ width: "30%", height: 20 }} /> <View style={{ width: "80%", height: 20 }} /> </View> </View> </SkeletonPlaceholder> </View> ))} </SafeAreaView> ); } } export default App;Prop
| Prop | Description | Type | Default |
|---|---|---|---|
| backgroundColor | The color of placeholder | string | "#eee" |
| minOpacity | Min opacity value when it is animating | number | 0.3 |
| maxOpacity | Max opacity value when it is animating | number | 1.0 |
Contributing
Any help this module will be approciate!
