forked from chramos/react-native-skeleton-placeholder
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathREADME.md
More file actions
128 lines (92 loc) · 3.79 KB
/
Copy pathREADME.md
File metadata and controls
128 lines (92 loc) · 3.79 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
## SkeletonPlaceholder
SkeletonPlaceholder is a React Native library to easily create an amazing loading effect with FlexBox.<br/>
Android and iOS
### Installation
> Note: This package requires **@react-native-masked-view/masked-view** and **react-native-linear-gradient**
###### Step #1
Using yarn:
```bash
yarn add @react-native-masked-view/masked-view react-native-linear-gradient
```
Using npm:
```bash
npm install @react-native-masked-view/masked-view react-native-linear-gradient --save
```
If you are running a **react-native** version below 0.60:
```bash
react-native link @react-native-masked-view/masked-view react-native-linear-gradient
```
Otherwise:
```bash
cd ios
pod install
```
###### Step #2
Using yarn:
```bash
yarn add @james-kirawan/expo-skeleton-placeholder
```
Using npm:
```bash
npm install @james-kirawan/expo-skeleton-placeholder --save
```
### Usage
There are two ways to use this package:
with **SkeletonPlacehoder.Item** 🆕
```javascript
import React from 'react';
import {View} from 'react-native';
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
const App = () => {
return (
<SkeletonPlaceholder borderRadius={4}>
<SkeletonPlaceholder.Item flexDirection="row" alignItems="center">
<SkeletonPlaceholder.Item width={60} height={60} borderRadius={50} />
<SkeletonPlaceholder.Item marginLeft={20}>
<SkeletonPlaceholder.Item width={120} height={20} />
<SkeletonPlaceholder.Item marginTop={6} width={80} height={20} />
</SkeletonPlaceholder.Item>
</SkeletonPlaceholder.Item>
</SkeletonPlaceholder>
);
};
```
or with **View**, **Text** or **Image**
```javascript
import React from 'react';
import {View} from 'react-native';
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
const App = () => {
return (
<SkeletonPlaceholder borderRadius={4}>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<View style={{width: 60, height: 60, borderRadius: 50}} />
<View style={{marginLeft: 20}}>
<Image style={{width: 120, height: 20}} src={requre('./src/assets/image.png')} />
<Text style={{marginTop: 6, fontSize: 14, lineHeight: 18}}>Hello world</Text>
</View>
</View>
</SkeletonPlaceholder>
);
};
```
### Properties
#### SkeletonPlaceholder
| Prop | Description | Type | Default |
| :-------------: | :------------------------------------------------------------------: | :-------------------------: | :-------: |
| backgroundColor | Determines the color of placeholder | string | _#E1E9EE_ |
| highlightColor | Determines the highlight color of placeholder | string (hex \| rgb \| rgba) | _#F2F8FC_ |
| speed | Determines the animation speed in milliseconds. 0 disables animation | number | _800_ |
| direction | Determines the animation direction | "right" \| "left" | "right" |
| enabled | Determines if Skeleton should show placeholders or its children | boolean | true |
| borderRadius | Determines default border radius for placeholders | number | undefined |
#### SkeletonPlaceholder.Item
| Prop | Description | Type | Default |
| :--: | :-------------------------------: | :--: | :-----: |
| any | Any view style props was accepted | any |
### Contributing
You are welcome to contribute!
### License
[MIT](https://choosealicense.com/licenses/mit/)