react-native-smart-skeleton 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +100 -1
- package/package.json +14 -8
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@ Created by Neeraj Singh.
|
|
|
6
6
|
|
|
7
7
|
## Demo
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
|
|
10
10
|
|
|
11
11
|
## Why use this package?
|
|
12
12
|
|
|
@@ -115,6 +115,105 @@ export default function App() {
|
|
|
115
115
|
|
|
116
116
|
`SkeletonProvider` is optional — every shape also works standalone, falling back to the OS color scheme and library defaults.
|
|
117
117
|
|
|
118
|
+
## Example usage
|
|
119
|
+
|
|
120
|
+
```tsx
|
|
121
|
+
<SkeletonProvider
|
|
122
|
+
theme="system"
|
|
123
|
+
animation="shimmer"
|
|
124
|
+
performanceMode="balanced"
|
|
125
|
+
>
|
|
126
|
+
<SafeAreaView style={styles.container}>
|
|
127
|
+
<ScrollView
|
|
128
|
+
contentContainerStyle={styles.content}
|
|
129
|
+
showsVerticalScrollIndicator={false}
|
|
130
|
+
>
|
|
131
|
+
<Skeleton.Rect width={220} height={32} borderRadius={8} style={styles.spacing} />
|
|
132
|
+
|
|
133
|
+
<Skeleton.Rect
|
|
134
|
+
width="70%"
|
|
135
|
+
height={18}
|
|
136
|
+
borderRadius={6}
|
|
137
|
+
style={styles.spacing}
|
|
138
|
+
backgroundColor="rgb(116, 84, 84)"
|
|
139
|
+
highlightColor="#70cbe9"
|
|
140
|
+
/>
|
|
141
|
+
|
|
142
|
+
<Skeleton.Group staggerDelay={100}>
|
|
143
|
+
<Skeleton.Circle
|
|
144
|
+
size={80}
|
|
145
|
+
style={styles.avatar}
|
|
146
|
+
backgroundColor="rgb(185, 162, 162)"
|
|
147
|
+
highlightColor="#fff"
|
|
148
|
+
/>
|
|
149
|
+
|
|
150
|
+
<Skeleton.Rect
|
|
151
|
+
width="80%"
|
|
152
|
+
height={18}
|
|
153
|
+
style={styles.smallSpacing}
|
|
154
|
+
backgroundColor="rgb(213, 20, 20)"
|
|
155
|
+
highlightColor="#fff"
|
|
156
|
+
/>
|
|
157
|
+
|
|
158
|
+
<Skeleton.Rect
|
|
159
|
+
width="60%"
|
|
160
|
+
height={18}
|
|
161
|
+
style={styles.spacing}
|
|
162
|
+
backgroundColor="rgb(185, 162, 162)"
|
|
163
|
+
highlightColor="#fff"
|
|
164
|
+
/>
|
|
165
|
+
</Skeleton.Group>
|
|
166
|
+
|
|
167
|
+
<Skeleton.Rect width="100%" height={120} borderRadius={12} style={styles.spacing} />
|
|
168
|
+
|
|
169
|
+
<Skeleton.Pill
|
|
170
|
+
width={140}
|
|
171
|
+
height={40}
|
|
172
|
+
style={styles.spacing}
|
|
173
|
+
backgroundColor="rgb(249, 96, 234)"
|
|
174
|
+
highlightColor="#edcff4"
|
|
175
|
+
/>
|
|
176
|
+
|
|
177
|
+
<Skeleton.Square size={80} borderRadius={12} style={styles.spacing} />
|
|
178
|
+
|
|
179
|
+
<Skeleton.Rect width="100%" height={18} animation="shimmer" style={styles.smallSpacing} />
|
|
180
|
+
<Skeleton.Rect width="100%" height={18} animation="pulse" style={styles.smallSpacing} />
|
|
181
|
+
<Skeleton.Rect width="100%" height={18} animation="wave" style={styles.smallSpacing} />
|
|
182
|
+
<Skeleton.Rect width="100%" height={18} animation="breathing" style={styles.spacing} />
|
|
183
|
+
|
|
184
|
+
<Skeleton.Profile avatarSize={60} lines={3} style={styles.spacing} />
|
|
185
|
+
<Skeleton.Card imageHeight={180} lines={3} showAvatar style={styles.spacing} />
|
|
186
|
+
<Skeleton.Chat messages={5} style={styles.spacing} />
|
|
187
|
+
<Skeleton.Product count={4} columns={2} style={styles.spacing} />
|
|
188
|
+
<Skeleton.Video aspectRatio={16 / 9} showTitle showMeta style={styles.spacing} />
|
|
189
|
+
|
|
190
|
+
<Skeleton.Clone
|
|
191
|
+
layout={{
|
|
192
|
+
direction: "row",
|
|
193
|
+
gap: 12,
|
|
194
|
+
children: [
|
|
195
|
+
{
|
|
196
|
+
shape: "circle",
|
|
197
|
+
width: 60,
|
|
198
|
+
height: 60,
|
|
199
|
+
},
|
|
200
|
+
{
|
|
201
|
+
direction: "column",
|
|
202
|
+
gap: 8,
|
|
203
|
+
children: [
|
|
204
|
+
{ width: 180, height: 16 },
|
|
205
|
+
{ width: 120, height: 14 },
|
|
206
|
+
{ width: 80, height: 14 },
|
|
207
|
+
],
|
|
208
|
+
},
|
|
209
|
+
],
|
|
210
|
+
}}
|
|
211
|
+
/>
|
|
212
|
+
</ScrollView>
|
|
213
|
+
</SafeAreaView>
|
|
214
|
+
</SkeletonProvider>
|
|
215
|
+
```
|
|
216
|
+
|
|
118
217
|
## Shapes
|
|
119
218
|
|
|
120
219
|
```tsx
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-smart-skeleton",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "A fully customizable, theme-aware, animated skeleton loader for React Native.",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -23,14 +23,20 @@
|
|
|
23
23
|
"prepare": "bob build"
|
|
24
24
|
},
|
|
25
25
|
"keywords": [
|
|
26
|
-
"react-native",
|
|
26
|
+
"react-native-skeleton",
|
|
27
|
+
"react-native-loader",
|
|
28
|
+
"react-native-placeholder",
|
|
29
|
+
"react-native-shimmer",
|
|
30
|
+
"react-native-pulse",
|
|
31
|
+
"react-native-wave",
|
|
32
|
+
"react-native-linear-gradient",
|
|
33
|
+
"react-native-theme",
|
|
34
|
+
"expo-loader",
|
|
35
|
+
"expo-skeleton",
|
|
36
|
+
"expo-placeholder",
|
|
27
37
|
"skeleton",
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"shimmer",
|
|
31
|
-
"reanimated",
|
|
32
|
-
"ios",
|
|
33
|
-
"android"
|
|
38
|
+
"skeleton-loader",
|
|
39
|
+
"content-loader"
|
|
34
40
|
],
|
|
35
41
|
"license": "MIT",
|
|
36
42
|
"peerDependencies": {
|