react-native-skelo 0.0.3 → 0.0.5

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.
Files changed (38) hide show
  1. package/README.md +86 -92
  2. package/lib/commonjs/animations/PulseAnimation.js +17 -18
  3. package/lib/commonjs/animations/PulseAnimation.js.map +1 -1
  4. package/lib/commonjs/animations/ShimmerAnimation.js +47 -28
  5. package/lib/commonjs/animations/ShimmerAnimation.js.map +1 -1
  6. package/lib/commonjs/components/Skeleton.js +22 -16
  7. package/lib/commonjs/components/Skeleton.js.map +1 -1
  8. package/lib/commonjs/core/parser/expandLists.js +67 -0
  9. package/lib/commonjs/core/parser/expandLists.js.map +1 -0
  10. package/lib/commonjs/index.js +1 -0
  11. package/lib/commonjs/index.js.map +1 -1
  12. package/lib/module/animations/PulseAnimation.js +18 -19
  13. package/lib/module/animations/PulseAnimation.js.map +1 -1
  14. package/lib/module/animations/ShimmerAnimation.js +48 -29
  15. package/lib/module/animations/ShimmerAnimation.js.map +1 -1
  16. package/lib/module/components/Skeleton.js +22 -16
  17. package/lib/module/components/Skeleton.js.map +1 -1
  18. package/lib/module/core/parser/expandLists.js +61 -0
  19. package/lib/module/core/parser/expandLists.js.map +1 -0
  20. package/lib/module/index.js +4 -0
  21. package/lib/module/index.js.map +1 -1
  22. package/lib/typescript/animations/PulseAnimation.d.ts.map +1 -1
  23. package/lib/typescript/animations/ShimmerAnimation.d.ts.map +1 -1
  24. package/lib/typescript/components/Skeleton.d.ts +1 -1
  25. package/lib/typescript/components/Skeleton.d.ts.map +1 -1
  26. package/lib/typescript/core/parser/expandLists.d.ts +3 -0
  27. package/lib/typescript/core/parser/expandLists.d.ts.map +1 -0
  28. package/lib/typescript/index.d.ts +1 -0
  29. package/lib/typescript/index.d.ts.map +1 -1
  30. package/lib/typescript/types/skeleton.d.ts +8 -0
  31. package/lib/typescript/types/skeleton.d.ts.map +1 -1
  32. package/package.json +5 -10
  33. package/src/animations/PulseAnimation.tsx +17 -27
  34. package/src/animations/ShimmerAnimation.tsx +36 -47
  35. package/src/components/Skeleton.tsx +24 -18
  36. package/src/core/parser/expandLists.tsx +77 -0
  37. package/src/index.ts +4 -0
  38. package/src/types/skeleton.ts +9 -0
@@ -0,0 +1,67 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.expandListPlaceholders = expandListPlaceholders;
7
+ var _react = _interopRequireWildcard(require("react"));
8
+ var _reactNative = require("react-native");
9
+ var _componentUtils = require("../../utils/componentUtils");
10
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
11
+ // List components whose rows come from `renderItem` (not JSX children).
12
+ const LIST_TYPES = new Set(['FlatList', 'SectionList', 'VirtualizedList', 'FlashList']);
13
+ const NOOP_SEPARATORS = {
14
+ highlight: () => {},
15
+ unhighlight: () => {},
16
+ updateProps: () => {}
17
+ };
18
+
19
+ // Renders `count` sample rows from a list's `renderItem` so there's something
20
+ // to skeletonize while the real data is still loading (the rows don't exist in
21
+ // the tree yet). Rows that throw on placeholder data are skipped.
22
+ function renderSampleRows(list, count) {
23
+ const props = list.props || {};
24
+ const data = Array.isArray(props.data) ? props.data : [];
25
+ const sample = data.length > 0 ? data[0] : {};
26
+ const rows = [];
27
+ for (let i = 0; i < count; i++) {
28
+ try {
29
+ const row = props.renderItem?.({
30
+ item: sample,
31
+ index: i,
32
+ section: {},
33
+ separators: NOOP_SEPARATORS
34
+ });
35
+ if (row) {
36
+ rows.push(/*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
37
+ key: i
38
+ }, row));
39
+ }
40
+ } catch {
41
+ // Row couldn't render with placeholder data — skip it.
42
+ }
43
+ }
44
+ return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
45
+ style: props.contentContainerStyle
46
+ }, rows);
47
+ }
48
+
49
+ // Walks a child tree and replaces FlatList/SectionList with sample rows so a
50
+ // plain `<Skeleton><FlatList/></Skeleton>` produces a skeleton while loading.
51
+ function expandListPlaceholders(children, count) {
52
+ return _react.default.Children.map(children, child => {
53
+ if (! /*#__PURE__*/(0, _react.isValidElement)(child)) {
54
+ return child;
55
+ }
56
+ const name = (0, _componentUtils.getComponentName)(child);
57
+ const props = child.props || {};
58
+ if (LIST_TYPES.has(name) && typeof props.renderItem === 'function') {
59
+ return renderSampleRows(child, count);
60
+ }
61
+ if (props.children) {
62
+ return /*#__PURE__*/_react.default.cloneElement(child, undefined, expandListPlaceholders(props.children, count));
63
+ }
64
+ return child;
65
+ });
66
+ }
67
+ //# sourceMappingURL=expandLists.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_componentUtils","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","LIST_TYPES","Set","NOOP_SEPARATORS","highlight","unhighlight","updateProps","renderSampleRows","list","count","props","data","Array","isArray","sample","length","rows","row","renderItem","item","index","section","separators","push","createElement","Fragment","key","View","style","contentContainerStyle","expandListPlaceholders","children","React","Children","map","child","isValidElement","name","getComponentName","cloneElement","undefined"],"sourceRoot":"../../../../src","sources":["core/parser/expandLists.tsx"],"mappings":"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","ignoreList":[]}
@@ -57,6 +57,7 @@ Object.defineProperty(exports, "withSkeleton", {
57
57
  return _withSkeleton.withSkeleton;
58
58
  }
59
59
  });
60
+ require("./deep");
60
61
  var _Skeleton = require("./components/Skeleton");
61
62
  var _SkeletonIgnore = require("./components/SkeletonIgnore");
62
63
  var _withSkeleton = require("./components/withSkeleton");
@@ -1 +1 @@
1
- {"version":3,"names":["_Skeleton","require","_SkeletonIgnore","_withSkeleton","_StyleSkeleton","_Skelo","_primitives"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AAEA,IAAAG,cAAA,GAAAH,OAAA;AAIA,IAAAI,MAAA,GAAAJ,OAAA;AAYA,IAAAK,WAAA,GAAAL,OAAA","ignoreList":[]}
1
+ {"version":3,"names":["require","_Skeleton","_SkeletonIgnore","_withSkeleton","_StyleSkeleton","_Skelo","_primitives"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUAA,OAAA;AAGA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,eAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AAEA,IAAAI,cAAA,GAAAJ,OAAA;AAIA,IAAAK,MAAA,GAAAL,OAAA;AAYA,IAAAM,WAAA,GAAAN,OAAA","ignoreList":[]}
@@ -1,7 +1,6 @@
1
- import React, { useEffect } from 'react';
2
- import { StyleSheet } from 'react-native';
3
- import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withSequence, withTiming, Easing } from 'react-native-reanimated';
4
- // Breathing opacity loop on the UI thread with Reanimated.
1
+ import React, { useEffect, useRef } from 'react';
2
+ import { Animated, Easing, StyleSheet } from 'react-native';
3
+ // Breathing opacity loop using React Native's built-in Animated (native driver).
5
4
  export function PulseAnimation({
6
5
  width,
7
6
  height,
@@ -11,30 +10,30 @@ export function PulseAnimation({
11
10
  style,
12
11
  children
13
12
  }) {
14
- const opacity = useSharedValue(1);
13
+ const opacity = useRef(new Animated.Value(1)).current;
15
14
  useEffect(() => {
16
- opacity.value = withRepeat(withSequence(withTiming(0.5, {
15
+ const loop = Animated.loop(Animated.sequence([Animated.timing(opacity, {
16
+ toValue: 0.5,
17
17
  duration: duration / 2,
18
- easing: Easing.inOut(Easing.ease)
19
- }), withTiming(1, {
18
+ easing: Easing.inOut(Easing.ease),
19
+ useNativeDriver: true
20
+ }), Animated.timing(opacity, {
21
+ toValue: 1,
20
22
  duration: duration / 2,
21
- easing: Easing.inOut(Easing.ease)
22
- })), -1, false);
23
+ easing: Easing.inOut(Easing.ease),
24
+ useNativeDriver: true
25
+ })]));
26
+ loop.start();
27
+ return () => loop.stop();
23
28
  }, [duration, opacity]);
24
- const animatedStyle = useAnimatedStyle(() => {
25
- 'worklet';
26
-
27
- return {
28
- opacity: opacity.value
29
- };
30
- }, []);
31
29
  return /*#__PURE__*/React.createElement(Animated.View, {
32
30
  style: [styles.container, {
33
31
  width,
34
32
  height,
35
33
  borderRadius,
36
- backgroundColor: baseColor
37
- }, animatedStyle, style]
34
+ backgroundColor: baseColor,
35
+ opacity
36
+ }, style]
38
37
  }, children);
39
38
  }
40
39
  const styles = StyleSheet.create({
@@ -1 +1 @@
1
- {"version":3,"names":["React","useEffect","StyleSheet","Animated","useSharedValue","useAnimatedStyle","withRepeat","withSequence","withTiming","Easing","PulseAnimation","width","height","baseColor","duration","borderRadius","style","children","opacity","value","easing","inOut","ease","animatedStyle","createElement","View","styles","container","backgroundColor","create","overflow"],"sourceRoot":"../../../src","sources":["animations/PulseAnimation.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AAExC,SAASC,UAAU,QAAQ,cAAc;AACzC,OAAOC,QAAQ,IACbC,cAAc,EACdC,gBAAgB,EAChBC,UAAU,EACVC,YAAY,EACZC,UAAU,EACVC,MAAM,QACD,yBAAyB;AAahC;AACA,OAAO,SAASC,cAAcA,CAAC;EAC7BC,KAAK;EACLC,MAAM;EACNC,SAAS,GAAG,SAAS;EACrBC,QAAQ,GAAG,IAAI;EACfC,YAAY,GAAG,CAAC;EAChBC,KAAK;EACLC;AACU,CAAC,EAAE;EACb,MAAMC,OAAO,GAAGd,cAAc,CAAC,CAAC,CAAC;EAEjCH,SAAS,CAAC,MAAM;IACdiB,OAAO,CAACC,KAAK,GAAGb,UAAU,CACxBC,YAAY,CACVC,UAAU,CAAC,GAAG,EAAE;MACdM,QAAQ,EAAEA,QAAQ,GAAG,CAAC;MACtBM,MAAM,EAAEX,MAAM,CAACY,KAAK,CAACZ,MAAM,CAACa,IAAI;IAClC,CAAC,CAAC,EACFd,UAAU,CAAC,CAAC,EAAE;MACZM,QAAQ,EAAEA,QAAQ,GAAG,CAAC;MACtBM,MAAM,EAAEX,MAAM,CAACY,KAAK,CAACZ,MAAM,CAACa,IAAI;IAClC,CAAC,CACH,CAAC,EACD,CAAC,CAAC,EACF,KACF,CAAC;EACH,CAAC,EAAE,CAACR,QAAQ,EAAEI,OAAO,CAAC,CAAC;EAEvB,MAAMK,aAAa,GAAGlB,gBAAgB,CAAC,MAAM;IAC3C,SAAS;;IACT,OAAO;MAAEa,OAAO,EAAEA,OAAO,CAACC;IAAM,CAAC;EACnC,CAAC,EAAE,EAAE,CAAC;EAEN,oBACEnB,KAAA,CAAAwB,aAAA,CAACrB,QAAQ,CAACsB,IAAI;IACZT,KAAK,EAAE,CACLU,MAAM,CAACC,SAAS,EAChB;MAAEhB,KAAK;MAAEC,MAAM;MAAEG,YAAY;MAAEa,eAAe,EAAEf;IAAU,CAAC,EAC3DU,aAAa,EACbP,KAAK;EACL,GAEDC,QACY,CAAC;AAEpB;AAEA,MAAMS,MAAM,GAAGxB,UAAU,CAAC2B,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["React","useEffect","useRef","Animated","Easing","StyleSheet","PulseAnimation","width","height","baseColor","duration","borderRadius","style","children","opacity","Value","current","loop","sequence","timing","toValue","easing","inOut","ease","useNativeDriver","start","stop","createElement","View","styles","container","backgroundColor","create","overflow"],"sourceRoot":"../../../src","sources":["animations/PulseAnimation.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEhD,SAASC,QAAQ,EAAEC,MAAM,EAAEC,UAAU,QAAQ,cAAc;AAa3D;AACA,OAAO,SAASC,cAAcA,CAAC;EAC7BC,KAAK;EACLC,MAAM;EACNC,SAAS,GAAG,SAAS;EACrBC,QAAQ,GAAG,IAAI;EACfC,YAAY,GAAG,CAAC;EAChBC,KAAK;EACLC;AACU,CAAC,EAAE;EACb,MAAMC,OAAO,GAAGZ,MAAM,CAAC,IAAIC,QAAQ,CAACY,KAAK,CAAC,CAAC,CAAC,CAAC,CAACC,OAAO;EAErDf,SAAS,CAAC,MAAM;IACd,MAAMgB,IAAI,GAAGd,QAAQ,CAACc,IAAI,CACxBd,QAAQ,CAACe,QAAQ,CAAC,CAChBf,QAAQ,CAACgB,MAAM,CAACL,OAAO,EAAE;MACvBM,OAAO,EAAE,GAAG;MACZV,QAAQ,EAAEA,QAAQ,GAAG,CAAC;MACtBW,MAAM,EAAEjB,MAAM,CAACkB,KAAK,CAAClB,MAAM,CAACmB,IAAI,CAAC;MACjCC,eAAe,EAAE;IACnB,CAAC,CAAC,EACFrB,QAAQ,CAACgB,MAAM,CAACL,OAAO,EAAE;MACvBM,OAAO,EAAE,CAAC;MACVV,QAAQ,EAAEA,QAAQ,GAAG,CAAC;MACtBW,MAAM,EAAEjB,MAAM,CAACkB,KAAK,CAAClB,MAAM,CAACmB,IAAI,CAAC;MACjCC,eAAe,EAAE;IACnB,CAAC,CAAC,CACH,CACH,CAAC;IACDP,IAAI,CAACQ,KAAK,CAAC,CAAC;IACZ,OAAO,MAAMR,IAAI,CAACS,IAAI,CAAC,CAAC;EAC1B,CAAC,EAAE,CAAChB,QAAQ,EAAEI,OAAO,CAAC,CAAC;EAEvB,oBACEd,KAAA,CAAA2B,aAAA,CAACxB,QAAQ,CAACyB,IAAI;IACZhB,KAAK,EAAE,CACLiB,MAAM,CAACC,SAAS,EAChB;MAAEvB,KAAK;MAAEC,MAAM;MAAEG,YAAY;MAAEoB,eAAe,EAAEtB,SAAS;MAAEK;IAAQ,CAAC,EACpEF,KAAK;EACL,GAEDC,QACY,CAAC;AAEpB;AAEA,MAAMgB,MAAM,GAAGxB,UAAU,CAAC2B,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC","ignoreList":[]}
@@ -1,9 +1,8 @@
1
- import React, { useEffect, useState } from 'react';
2
- import { StyleSheet, View } from 'react-native';
3
- import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, interpolate, Easing } from 'react-native-reanimated';
4
- // Shimmer with no gradient library: the sweeping overlay uses React Native's
5
- // built-in `experimental_backgroundImage` CSS gradient (New Architecture),
6
- // animated on the UI thread with Reanimated.
1
+ import React, { useEffect, useRef, useState } from 'react';
2
+ import { Animated, Easing, StyleSheet, View } from 'react-native';
3
+ // Zero-dependency shimmer: a highlight band (dim/bright/dim segments to fake a
4
+ // soft gradient) sweeps across the base, driven by React Native's built-in
5
+ // Animated native driver. Plain Views only — guaranteed to render and animate.
7
6
  export function ShimmerAnimation({
8
7
  width,
9
8
  height,
@@ -14,35 +13,28 @@ export function ShimmerAnimation({
14
13
  style,
15
14
  children
16
15
  }) {
17
- const progress = useSharedValue(0);
16
+ const progress = useRef(new Animated.Value(0)).current;
18
17
  const [measuredWidth, setMeasuredWidth] = useState(0);
19
18
  useEffect(() => {
20
- progress.value = withRepeat(withTiming(1, {
19
+ const loop = Animated.loop(Animated.timing(progress, {
20
+ toValue: 1,
21
21
  duration,
22
- easing: Easing.linear
23
- }), -1, false);
22
+ easing: Easing.linear,
23
+ useNativeDriver: true
24
+ }));
25
+ loop.start();
26
+ return () => loop.stop();
24
27
  }, [duration, progress]);
25
28
  const onLayout = event => {
26
29
  const w = event.nativeEvent.layout.width;
27
30
  setMeasuredWidth(prev => prev === w ? prev : w);
28
31
  };
29
- const containerWidth = typeof width === 'number' ? width : measuredWidth;
30
- const animatedStyle = useAnimatedStyle(() => {
31
- 'worklet';
32
-
33
- const translateX = interpolate(progress.value, [0, 1], [-containerWidth, containerWidth]);
34
- return {
35
- transform: [{
36
- translateX
37
- }]
38
- };
39
- }, [containerWidth]);
40
-
41
- // `experimental_backgroundImage` isn't in the ViewStyle types yet.
42
- const gradientStyle = {
43
- ...StyleSheet.absoluteFillObject,
44
- experimental_backgroundImage: `linear-gradient(to right, ${baseColor}, ${highlightColor}, ${baseColor})`
45
- };
32
+ const containerWidth = typeof width === 'number' ? width : measuredWidth || 200;
33
+ const bandWidth = Math.max(containerWidth * 0.6, 80);
34
+ const translateX = progress.interpolate({
35
+ inputRange: [0, 1],
36
+ outputRange: [-bandWidth, containerWidth]
37
+ });
46
38
  return /*#__PURE__*/React.createElement(View, {
47
39
  onLayout: onLayout,
48
40
  style: [styles.container, {
@@ -53,14 +45,41 @@ export function ShimmerAnimation({
53
45
  }, style]
54
46
  }, /*#__PURE__*/React.createElement(Animated.View, {
55
47
  pointerEvents: "none",
56
- style: [StyleSheet.absoluteFill, animatedStyle]
48
+ style: [styles.band, {
49
+ width: bandWidth,
50
+ transform: [{
51
+ translateX
52
+ }]
53
+ }]
57
54
  }, /*#__PURE__*/React.createElement(View, {
58
- style: gradientStyle
55
+ style: [styles.segment, {
56
+ backgroundColor: highlightColor,
57
+ opacity: 0.25
58
+ }]
59
+ }), /*#__PURE__*/React.createElement(View, {
60
+ style: [styles.segment, {
61
+ backgroundColor: highlightColor,
62
+ opacity: 0.9
63
+ }]
64
+ }), /*#__PURE__*/React.createElement(View, {
65
+ style: [styles.segment, {
66
+ backgroundColor: highlightColor,
67
+ opacity: 0.25
68
+ }]
59
69
  })), children);
60
70
  }
61
71
  const styles = StyleSheet.create({
62
72
  container: {
63
73
  overflow: 'hidden'
74
+ },
75
+ band: {
76
+ position: 'absolute',
77
+ top: 0,
78
+ bottom: 0,
79
+ flexDirection: 'row'
80
+ },
81
+ segment: {
82
+ flex: 1
64
83
  }
65
84
  });
66
85
  //# sourceMappingURL=ShimmerAnimation.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","useEffect","useState","StyleSheet","View","Animated","useSharedValue","useAnimatedStyle","withRepeat","withTiming","interpolate","Easing","ShimmerAnimation","width","height","baseColor","highlightColor","duration","borderRadius","style","children","progress","measuredWidth","setMeasuredWidth","value","easing","linear","onLayout","event","w","nativeEvent","layout","prev","containerWidth","animatedStyle","translateX","transform","gradientStyle","absoluteFillObject","experimental_backgroundImage","createElement","styles","container","backgroundColor","pointerEvents","absoluteFill","create","overflow"],"sourceRoot":"../../../src","sources":["animations/ShimmerAnimation.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAOlD,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,OAAOC,QAAQ,IACbC,cAAc,EACdC,gBAAgB,EAChBC,UAAU,EACVC,UAAU,EACVC,WAAW,EACXC,MAAM,QACD,yBAAyB;AAahC;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAAC;EAC/BC,KAAK;EACLC,MAAM;EACNC,SAAS,GAAG,SAAS;EACrBC,cAAc,GAAG,SAAS;EAC1BC,QAAQ,GAAG,IAAI;EACfC,YAAY,GAAG,CAAC;EAChBC,KAAK;EACLC;AACY,CAAC,EAAE;EACf,MAAMC,QAAQ,GAAGf,cAAc,CAAC,CAAC,CAAC;EAClC,MAAM,CAACgB,aAAa,EAAEC,gBAAgB,CAAC,GAAGrB,QAAQ,CAAC,CAAC,CAAC;EAErDD,SAAS,CAAC,MAAM;IACdoB,QAAQ,CAACG,KAAK,GAAGhB,UAAU,CACzBC,UAAU,CAAC,CAAC,EAAE;MAAEQ,QAAQ;MAAEQ,MAAM,EAAEd,MAAM,CAACe;IAAO,CAAC,CAAC,EAClD,CAAC,CAAC,EACF,KACF,CAAC;EACH,CAAC,EAAE,CAACT,QAAQ,EAAEI,QAAQ,CAAC,CAAC;EAExB,MAAMM,QAAQ,GAAIC,KAAwB,IAAK;IAC7C,MAAMC,CAAC,GAAGD,KAAK,CAACE,WAAW,CAACC,MAAM,CAAClB,KAAK;IACxCU,gBAAgB,CAACS,IAAI,IAAKA,IAAI,KAAKH,CAAC,GAAGG,IAAI,GAAGH,CAAE,CAAC;EACnD,CAAC;EAED,MAAMI,cAAc,GAAG,OAAOpB,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAGS,aAAa;EAExE,MAAMY,aAAa,GAAG3B,gBAAgB,CAAC,MAAM;IAC3C,SAAS;;IACT,MAAM4B,UAAU,GAAGzB,WAAW,CAC5BW,QAAQ,CAACG,KAAK,EACd,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAAC,CAACS,cAAc,EAAEA,cAAc,CAClC,CAAC;IACD,OAAO;MAAEG,SAAS,EAAE,CAAC;QAAED;MAAW,CAAC;IAAE,CAAC;EACxC,CAAC,EAAE,CAACF,cAAc,CAAC,CAAC;;EAEpB;EACA,MAAMI,aAAa,GAAG;IACpB,GAAGlC,UAAU,CAACmC,kBAAkB;IAChCC,4BAA4B,EAAE,6BAA6BxB,SAAS,KAAKC,cAAc,KAAKD,SAAS;EACvG,CAAyB;EAEzB,oBACEf,KAAA,CAAAwC,aAAA,CAACpC,IAAI;IACHuB,QAAQ,EAAEA,QAAS;IACnBR,KAAK,EAAE,CACLsB,MAAM,CAACC,SAAS,EAChB;MAAE7B,KAAK;MAAEC,MAAM;MAAEI,YAAY;MAAEyB,eAAe,EAAE5B;IAAU,CAAC,EAC3DI,KAAK;EACL,gBAEFnB,KAAA,CAAAwC,aAAA,CAACnC,QAAQ,CAACD,IAAI;IACZwC,aAAa,EAAC,MAAM;IACpBzB,KAAK,EAAE,CAAChB,UAAU,CAAC0C,YAAY,EAAEX,aAAa;EAAE,gBAEhDlC,KAAA,CAAAwC,aAAA,CAACpC,IAAI;IAACe,KAAK,EAAEkB;EAAc,CAAE,CAChB,CAAC,EAEfjB,QACG,CAAC;AAEX;AAEA,MAAMqB,MAAM,GAAGtC,UAAU,CAAC2C,MAAM,CAAC;EAC/BJ,SAAS,EAAE;IACTK,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["React","useEffect","useRef","useState","Animated","Easing","StyleSheet","View","ShimmerAnimation","width","height","baseColor","highlightColor","duration","borderRadius","style","children","progress","Value","current","measuredWidth","setMeasuredWidth","loop","timing","toValue","easing","linear","useNativeDriver","start","stop","onLayout","event","w","nativeEvent","layout","prev","containerWidth","bandWidth","Math","max","translateX","interpolate","inputRange","outputRange","createElement","styles","container","backgroundColor","pointerEvents","band","transform","segment","opacity","create","overflow","position","top","bottom","flexDirection","flex"],"sourceRoot":"../../../src","sources":["animations/ShimmerAnimation.tsx"],"mappings":"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","ignoreList":[]}
@@ -4,6 +4,7 @@ import { SkeletonRenderer } from './SkeletonRenderer';
4
4
  import { SkeletonIgnore } from './SkeletonIgnore';
5
5
  import { StyleSkeleton } from '../core/generator/StyleSkeleton';
6
6
  import { getDeepExpander } from '../core/deepRegistry';
7
+ import { expandListPlaceholders } from '../core/parser/expandLists';
7
8
  import { DEFAULT_CONFIG } from '../constants/defaults';
8
9
 
9
10
  /**
@@ -39,7 +40,8 @@ export function Skeleton({
39
40
  children,
40
41
  styles,
41
42
  excludeStyles,
42
- deep = false,
43
+ deep,
44
+ count = 6,
43
45
  animation = DEFAULT_CONFIG.animation,
44
46
  duration = DEFAULT_CONFIG.duration,
45
47
  baseColor = DEFAULT_CONFIG.baseColor,
@@ -60,24 +62,28 @@ export function Skeleton({
60
62
  console.log('[Skelo] Parsing component tree...');
61
63
  }
62
64
  try {
65
+ // Turn FlatList/SectionList into placeholder rows so lists show a
66
+ // skeleton even though their data (and rows) don't exist yet.
67
+ const prepared = expandListPlaceholders(children, count);
68
+
63
69
  // Deep mode: expand opaque components into their real host tree via the
64
70
  // opt-in expander (registered by importing 'react-native-skelo/deep').
65
- // Falls back to static parsing if unavailable or it returns nothing.
66
- if (deep) {
67
- const expand = getDeepExpander();
68
- if (expand) {
69
- const expanded = expand(/*#__PURE__*/React.createElement(React.Fragment, null, children));
70
- if (expanded && expanded.length > 0) {
71
- return expanded;
72
- }
73
- if (__DEV__) {
74
- console.warn('[Skelo] deep expansion returned nothing; falling back to static parsing.');
75
- }
76
- } else if (__DEV__) {
77
- console.warn("[Skelo] `deep` requires react-reconciler. Install it and add `import 'react-native-skelo/deep';` in your app entry.");
71
+ // When `deep` is not set explicitly, it's used automatically whenever the
72
+ // expander is available. Falls back to static parsing otherwise.
73
+ const expand = getDeepExpander();
74
+ const wantDeep = deep === undefined ? expand !== null : deep;
75
+ if (wantDeep && expand) {
76
+ const expanded = expand(/*#__PURE__*/React.createElement(React.Fragment, null, prepared));
77
+ if (expanded && expanded.length > 0) {
78
+ return expanded;
79
+ }
80
+ if (__DEV__) {
81
+ console.warn('[Skelo] deep expansion returned nothing; falling back to static parsing.');
78
82
  }
83
+ } else if (deep === true && !expand && __DEV__) {
84
+ console.warn("[Skelo] `deep` requires react-reconciler. Install it and add `import 'react-native-skelo/deep';` in your app entry.");
79
85
  }
80
- const parsed = Parser.parse(children);
86
+ const parsed = Parser.parse(prepared);
81
87
  if (__DEV__ && debug) {
82
88
  // Log a lightweight summary: the raw nodes hold React elements
83
89
  // (`element`) and arbitrary props that aren't safely serializable.
@@ -95,7 +101,7 @@ export function Skeleton({
95
101
  }
96
102
  return [];
97
103
  }
98
- }, [loading, styles, deep, children, debug]);
104
+ }, [loading, styles, deep, count, children, debug]);
99
105
 
100
106
  // Create skeleton config
101
107
  const config = useMemo(() => ({
@@ -1 +1 @@
1
- {"version":3,"names":["React","useMemo","Parser","SkeletonRenderer","SkeletonIgnore","StyleSkeleton","getDeepExpander","DEFAULT_CONFIG","Skeleton","loading","children","styles","excludeStyles","deep","animation","duration","baseColor","highlightColor","borderRadius","accessible","accessibilityLabel","debug","skeletonTree","__DEV__","console","log","expand","expanded","createElement","Fragment","length","warn","parsed","parse","summarize","nodes","map","node","type","style","JSON","stringify","error","config","exclude","tree","displayName","Ignore"],"sourceRoot":"../../../src","sources":["components/Skeleton.tsx"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["React","useMemo","Parser","SkeletonRenderer","SkeletonIgnore","StyleSkeleton","getDeepExpander","expandListPlaceholders","DEFAULT_CONFIG","Skeleton","loading","children","styles","excludeStyles","deep","count","animation","duration","baseColor","highlightColor","borderRadius","accessible","accessibilityLabel","debug","skeletonTree","__DEV__","console","log","prepared","expand","wantDeep","undefined","expanded","createElement","Fragment","length","warn","parsed","parse","summarize","nodes","map","node","type","style","JSON","stringify","error","config","exclude","tree","displayName","Ignore"],"sourceRoot":"../../../src","sources":["components/Skeleton.tsx"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,61 @@
1
+ import React, { isValidElement } from 'react';
2
+ import { View } from 'react-native';
3
+ import { getComponentName } from '../../utils/componentUtils';
4
+
5
+ // List components whose rows come from `renderItem` (not JSX children).
6
+ const LIST_TYPES = new Set(['FlatList', 'SectionList', 'VirtualizedList', 'FlashList']);
7
+ const NOOP_SEPARATORS = {
8
+ highlight: () => {},
9
+ unhighlight: () => {},
10
+ updateProps: () => {}
11
+ };
12
+
13
+ // Renders `count` sample rows from a list's `renderItem` so there's something
14
+ // to skeletonize while the real data is still loading (the rows don't exist in
15
+ // the tree yet). Rows that throw on placeholder data are skipped.
16
+ function renderSampleRows(list, count) {
17
+ const props = list.props || {};
18
+ const data = Array.isArray(props.data) ? props.data : [];
19
+ const sample = data.length > 0 ? data[0] : {};
20
+ const rows = [];
21
+ for (let i = 0; i < count; i++) {
22
+ try {
23
+ const row = props.renderItem?.({
24
+ item: sample,
25
+ index: i,
26
+ section: {},
27
+ separators: NOOP_SEPARATORS
28
+ });
29
+ if (row) {
30
+ rows.push(/*#__PURE__*/React.createElement(React.Fragment, {
31
+ key: i
32
+ }, row));
33
+ }
34
+ } catch {
35
+ // Row couldn't render with placeholder data — skip it.
36
+ }
37
+ }
38
+ return /*#__PURE__*/React.createElement(View, {
39
+ style: props.contentContainerStyle
40
+ }, rows);
41
+ }
42
+
43
+ // Walks a child tree and replaces FlatList/SectionList with sample rows so a
44
+ // plain `<Skeleton><FlatList/></Skeleton>` produces a skeleton while loading.
45
+ export function expandListPlaceholders(children, count) {
46
+ return React.Children.map(children, child => {
47
+ if (! /*#__PURE__*/isValidElement(child)) {
48
+ return child;
49
+ }
50
+ const name = getComponentName(child);
51
+ const props = child.props || {};
52
+ if (LIST_TYPES.has(name) && typeof props.renderItem === 'function') {
53
+ return renderSampleRows(child, count);
54
+ }
55
+ if (props.children) {
56
+ return /*#__PURE__*/React.cloneElement(child, undefined, expandListPlaceholders(props.children, count));
57
+ }
58
+ return child;
59
+ });
60
+ }
61
+ //# sourceMappingURL=expandLists.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["React","isValidElement","View","getComponentName","LIST_TYPES","Set","NOOP_SEPARATORS","highlight","unhighlight","updateProps","renderSampleRows","list","count","props","data","Array","isArray","sample","length","rows","i","row","renderItem","item","index","section","separators","push","createElement","Fragment","key","style","contentContainerStyle","expandListPlaceholders","children","Children","map","child","name","has","cloneElement","undefined"],"sourceRoot":"../../../../src","sources":["core/parser/expandLists.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,cAAc,QAAQ,OAAO;AAE7C,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,gBAAgB,QAAQ,4BAA4B;;AAE7D;AACA,MAAMC,UAAU,GAAG,IAAIC,GAAG,CAAC,CAAC,UAAU,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,CAAC,CAAC;AAEvF,MAAMC,eAAe,GAAG;EACtBC,SAAS,EAAEA,CAAA,KAAM,CAAC,CAAC;EACnBC,WAAW,EAAEA,CAAA,KAAM,CAAC,CAAC;EACrBC,WAAW,EAAEA,CAAA,KAAM,CAAC;AACtB,CAAC;;AAED;AACA;AACA;AACA,SAASC,gBAAgBA,CAACC,IAAkB,EAAEC,KAAa,EAAa;EACtE,MAAMC,KAAK,GAAIF,IAAI,CAACE,KAAK,IAAI,CAAC,CAS7B;EAED,MAAMC,IAAI,GAAGC,KAAK,CAACC,OAAO,CAACH,KAAK,CAACC,IAAI,CAAC,GAAGD,KAAK,CAACC,IAAI,GAAG,EAAE;EACxD,MAAMG,MAAM,GAAGH,IAAI,CAACI,MAAM,GAAG,CAAC,GAAGJ,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;EAE7C,MAAMK,IAAiB,GAAG,EAAE;EAC5B,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGR,KAAK,EAAEQ,CAAC,EAAE,EAAE;IAC9B,IAAI;MACF,MAAMC,GAAG,GAAGR,KAAK,CAACS,UAAU,GAAG;QAC7BC,IAAI,EAAEN,MAAM;QACZO,KAAK,EAAEJ,CAAC;QACRK,OAAO,EAAE,CAAC,CAAC;QACXC,UAAU,EAAEpB;MACd,CAAC,CAAC;MACF,IAAIe,GAAG,EAAE;QACPF,IAAI,CAACQ,IAAI,cAAC3B,KAAA,CAAA4B,aAAA,CAAC5B,KAAK,CAAC6B,QAAQ;UAACC,GAAG,EAAEV;QAAE,GAAEC,GAAoB,CAAC,CAAC;MAC3D;IACF,CAAC,CAAC,MAAM;MACN;IAAA;EAEJ;EAEA,oBAAOrB,KAAA,CAAA4B,aAAA,CAAC1B,IAAI;IAAC6B,KAAK,EAAElB,KAAK,CAACmB;EAA+B,GAAEb,IAAW,CAAC;AACzE;;AAEA;AACA;AACA,OAAO,SAASc,sBAAsBA,CAACC,QAAmB,EAAEtB,KAAa,EAAa;EACpF,OAAOZ,KAAK,CAACmC,QAAQ,CAACC,GAAG,CAACF,QAAQ,EAAEG,KAAK,IAAI;IAC3C,IAAI,eAACpC,cAAc,CAACoC,KAAK,CAAC,EAAE;MAC1B,OAAOA,KAAK;IACd;IAEA,MAAMC,IAAI,GAAGnC,gBAAgB,CAACkC,KAAK,CAAC;IACpC,MAAMxB,KAAK,GAAIwB,KAAK,CAACxB,KAAK,IAAI,CAAC,CAA8B;IAE7D,IACET,UAAU,CAACmC,GAAG,CAACD,IAAI,CAAC,IACpB,OAAQzB,KAAK,CAA8BS,UAAU,KAAK,UAAU,EACpE;MACA,OAAOZ,gBAAgB,CAAC2B,KAAK,EAAEzB,KAAK,CAAC;IACvC;IAEA,IAAIC,KAAK,CAACqB,QAAQ,EAAE;MAClB,oBAAOlC,KAAK,CAACwC,YAAY,CAACH,KAAK,EAAEI,SAAS,EAAER,sBAAsB,CAACpB,KAAK,CAACqB,QAAQ,EAAEtB,KAAK,CAAC,CAAC;IAC5F;IAEA,OAAOyB,KAAK;EACd,CAAC,CAAC;AACJ","ignoreList":[]}
@@ -6,6 +6,10 @@
6
6
  * @packageDocumentation
7
7
  */
8
8
 
9
+ // Auto-register deep expansion (react-reconciler ships as a dependency), so
10
+ // `<Skeleton deep>` / opaque components work with zero setup.
11
+ import './deep';
12
+
9
13
  // Main component
10
14
  export { Skeleton } from './components/Skeleton';
11
15
  export { SkeletonIgnore } from './components/SkeletonIgnore';
@@ -1 +1 @@
1
- {"version":3,"names":["Skeleton","SkeletonIgnore","withSkeleton","StyleSkeleton","Skelo","SkeletonBox","SkeletonText","SkeletonImage","SkeletonCircle"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,SAASA,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,YAAY,QAAQ,2BAA2B;AAExD,SAASC,aAAa,QAAQ,gCAAgC;AAG9D;AACA,SAASC,KAAK,QAAQ,SAAS;;AAE/B;;AASA;AACA,SAASC,WAAW,EAAEC,YAAY,EAAEC,aAAa,EAAEC,cAAc,QAAQ,yBAAyB","ignoreList":[]}
1
+ {"version":3,"names":["Skeleton","SkeletonIgnore","withSkeleton","StyleSkeleton","Skelo","SkeletonBox","SkeletonText","SkeletonImage","SkeletonCircle"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,OAAO,QAAQ;;AAEf;AACA,SAASA,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,YAAY,QAAQ,2BAA2B;AAExD,SAASC,aAAa,QAAQ,gCAAgC;AAG9D;AACA,SAASC,KAAK,QAAQ,SAAS;;AAE/B;;AASA;AACA,SAASC,WAAW,EAAEC,YAAY,EAAEC,aAAa,EAAEC,cAAc,QAAQ,yBAAyB","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"PulseAnimation.d.ts","sourceRoot":"","sources":["../../../src/animations/PulseAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAWzE,UAAU,UAAU;IAClB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,MAAM,EACN,SAAqB,EACrB,QAAe,EACf,YAAgB,EAChB,KAAK,EACL,QAAQ,GACT,EAAE,UAAU,qBAqCZ"}
1
+ {"version":3,"file":"PulseAnimation.d.ts","sourceRoot":"","sources":["../../../src/animations/PulseAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzE,UAAU,UAAU;IAClB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,MAAM,EACN,SAAqB,EACrB,QAAe,EACf,YAAgB,EAChB,KAAK,EACL,QAAQ,GACT,EAAE,UAAU,qBAmCZ"}
@@ -1 +1 @@
1
- {"version":3,"file":"ShimmerAnimation.d.ts","sourceRoot":"","sources":["../../../src/animations/ShimmerAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EACV,cAAc,EAEd,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAWtB,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAKD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,MAAM,EACN,SAAqB,EACrB,cAA0B,EAC1B,QAAe,EACf,YAAgB,EAChB,KAAK,EACL,QAAQ,GACT,EAAE,YAAY,qBAsDd"}
1
+ {"version":3,"file":"ShimmerAnimation.d.ts","sourceRoot":"","sources":["../../../src/animations/ShimmerAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAqB,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG5F,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAKD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,MAAM,EACN,SAAqB,EACrB,cAA0B,EAC1B,QAAe,EACf,YAAgB,EAChB,KAAK,EACL,QAAQ,GACT,EAAE,YAAY,qBA+Cd"}
@@ -29,7 +29,7 @@ import { SkeletonIgnore } from './SkeletonIgnore';
29
29
  * </Skeleton>
30
30
  * ```
31
31
  */
32
- export declare function Skeleton({ loading, children, styles, excludeStyles, deep, animation, duration, baseColor, highlightColor, borderRadius, accessible, accessibilityLabel, debug, }: SkeletonProps): React.JSX.Element;
32
+ export declare function Skeleton({ loading, children, styles, excludeStyles, deep, count, animation, duration, baseColor, highlightColor, borderRadius, accessible, accessibilityLabel, debug, }: SkeletonProps): React.JSX.Element;
33
33
  export declare namespace Skeleton {
34
34
  var displayName: string;
35
35
  var Ignore: typeof SkeletonIgnore;
@@ -1 +1 @@
1
- {"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAKlD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,aAAa,EACb,IAAY,EACZ,SAAoC,EACpC,QAAkC,EAClC,SAAoC,EACpC,cAA8C,EAC9C,YAA0C,EAC1C,UAAiB,EACjB,kBAAsC,EACtC,KAAa,GACd,EAAE,aAAa,qBAyFf;yBAvGe,QAAQ"}
1
+ {"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAMlD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,aAAa,EACb,IAAI,EACJ,KAAS,EACT,SAAoC,EACpC,QAAkC,EAClC,SAAoC,EACpC,cAA8C,EAC9C,YAA0C,EAC1C,UAAiB,EACjB,kBAAsC,EACtC,KAAa,GACd,EAAE,aAAa,qBA6Ff;yBA5Ge,QAAQ"}
@@ -0,0 +1,3 @@
1
+ import type { ReactNode } from 'react';
2
+ export declare function expandListPlaceholders(children: ReactNode, count: number): ReactNode;
3
+ //# sourceMappingURL=expandLists.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"expandLists.d.ts","sourceRoot":"","sources":["../../../../src/core/parser/expandLists.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAqDrD,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAsBpF"}
@@ -5,6 +5,7 @@
5
5
  *
6
6
  * @packageDocumentation
7
7
  */
8
+ import './deep';
8
9
  export { Skeleton } from './components/Skeleton';
9
10
  export { SkeletonIgnore } from './components/SkeletonIgnore';
10
11
  export { withSkeleton } from './components/withSkeleton';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,YAAY,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,YAAY,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAGjE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,YAAY,EACV,aAAa,EACb,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,eAAe,GAChB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,QAAQ,CAAC;AAGhB,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,YAAY,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,YAAY,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAGjE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,YAAY,EACV,aAAa,EACb,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,eAAe,GAChB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC"}
@@ -69,6 +69,14 @@ export interface SkeletonProps {
69
69
  * When using `styles`, style keys to skip (e.g. layout containers).
70
70
  */
71
71
  excludeStyles?: string[];
72
+ /**
73
+ * Number of placeholder rows to render for a `FlatList` / `SectionList`
74
+ * while its data is still loading (its rows don't exist yet, so Skelo calls
75
+ * `renderItem` with a placeholder and repeats it `count` times).
76
+ *
77
+ * @default 6
78
+ */
79
+ count?: number;
72
80
  /**
73
81
  * Deep mode: expand opaque (custom) child components into their real
74
82
  * host-element tree via offline rendering, producing a structured skeleton
@@ -1 +1 @@
1
- {"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/types/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElE;;;;;;;;;GASG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IAEjB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAEzC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,EAAE,CAAC;IAE7C;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IAEzB;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAEzC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACjC,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,cAAc,CAAC,EACb,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,eAAe,GAAG,cAAc,GAAG,cAAc,CAAC;CAC5F;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB"}
1
+ {"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/types/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElE;;;;;;;;;GASG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IAEjB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAEzC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,EAAE,CAAC;IAE7C;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IAEzB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAEzC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACjC,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,cAAc,CAAC,EACb,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,eAAe,GAAG,cAAc,GAAG,cAAc,CAAC;CAC5F;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-skelo",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
4
4
  "description": "Automatic skeleton loading for React Native. Write your UI once, Skelo builds the loading state automatically.",
5
5
  "main": "lib/commonjs/index.js",
6
6
  "module": "lib/module/index.js",
@@ -87,14 +87,10 @@
87
87
  },
88
88
  "peerDependencies": {
89
89
  "react": "*",
90
- "react-native": "*",
91
- "react-native-reanimated": ">=3.0.0",
92
- "react-reconciler": ">=0.29.0"
90
+ "react-native": "*"
93
91
  },
94
- "peerDependenciesMeta": {
95
- "react-reconciler": {
96
- "optional": true
97
- }
92
+ "dependencies": {
93
+ "react-reconciler": "^0.31.0"
98
94
  },
99
95
  "devDependencies": {
100
96
  "@commitlint/config-conventional": "^18.4.3",
@@ -112,7 +108,6 @@
112
108
  "react": "18.2.0",
113
109
  "react-native": "0.73.1",
114
110
  "react-native-builder-bob": "^0.23.2",
115
- "react-native-reanimated": "^3.6.1",
116
111
  "react-reconciler": "^0.29.2",
117
112
  "react-test-renderer": "18.2.0",
118
113
  "release-it": "^17.0.1",
@@ -127,7 +122,7 @@
127
122
  "<rootDir>/lib/"
128
123
  ],
129
124
  "transformIgnorePatterns": [
130
- "node_modules/(?!(@react-native|react-native|react-native-reanimated)/)"
125
+ "node_modules/(?!(@react-native|react-native)/)"
131
126
  ],
132
127
  "collectCoverageFrom": [
133
128
  "src/**/*.{ts,tsx}",