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-placeholder
Using npm:
npm install react-native-skeleton-placeholder --save
Usage
Example 1:
;;; Component { 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> ; } ;
Example 2:
;;; Component { return <SafeAreaView> 0 1 2 3 4 </SafeAreaView> ; } ;
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!