react-native-skelo 0.0.2 → 0.0.5

package/lib/typescript/animations/PulseAnimation.d.ts

@@ -1,59 +1,15 @@
 import React from 'react';
 import type { DimensionValue, StyleProp, ViewStyle } from 'react-native';
 interface PulseProps {
-    /**
-     * Width of the pulse container
-     */
     width?: DimensionValue;
-    /**
-     * Height of the pulse container
-     */
     height?: DimensionValue;
-    /**
-     * Base color of the skeleton
-     * @default '#E1E9EE'
-     */
     baseColor?: string;
-    /**
-     * Highlight color for pulse
-     * @default '#F2F8FC'
-     */
     highlightColor?: string;
-    /**
-     * Animation duration in milliseconds
-     * @default 1000
-     */
     duration?: number;
-    /**
-     * Border radius
-     */
     borderRadius?: number;
-    /**
-     * Additional styles
-     */
     style?: StyleProp<ViewStyle>;
-    /**
-     * Child content (rendered inside pulse)
-     */
     children?: React.ReactNode;
 }
-/**
- * Pulse animation component using Reanimated 3
- *
- * Creates a subtle breathing/pulsing effect using:
- * - Shared values for performance
- * - Worklets for 60 FPS on UI thread
- * - Opacity animation for pulse effect
- *
- * @example
- * ```tsx
- * <PulseAnimation
- *   width={200}
- *   height={20}
- *   borderRadius={4}
- * />
- * ```
- */
 export declare function PulseAnimation({ width, height, baseColor, duration, borderRadius, style, children, }: PulseProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=PulseAnimation.d.ts.map

package/lib/typescript/animations/PulseAnimation.d.ts.map

@@ -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;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,MAAM,EACN,SAAqB,EACrB,QAAe,EACf,YAAgB,EAChB,KAAK,EACL,QAAQ,GACT,EAAE,UAAU,qBAiDZ"}
+{"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"}

package/lib/typescript/animations/ShimmerAnimation.d.ts

@@ -1,59 +1,15 @@
 import React from 'react';
 import type { DimensionValue, StyleProp, ViewStyle } from 'react-native';
 interface ShimmerProps {
-    /**
-     * Width of the shimmer container
-     */
     width?: DimensionValue;
-    /**
-     * Height of the shimmer container
-     */
     height?: DimensionValue;
-    /**
-     * Base color of the skeleton
-     * @default '#E1E9EE'
-     */
     baseColor?: string;
-    /**
-     * Highlight color that shimmers across
-     * @default '#F2F8FC'
-     */
     highlightColor?: string;
-    /**
-     * Animation duration in milliseconds
-     * @default 1500
-     */
     duration?: number;
-    /**
-     * Border radius
-     */
     borderRadius?: number;
-    /**
-     * Additional styles
-     */
     style?: StyleProp<ViewStyle>;
-    /**
-     * Child content (rendered on top of shimmer)
-     */
     children?: React.ReactNode;
 }
-/**
- * Shimmer animation component using Reanimated 3
- *
- * Creates a smooth left-to-right shimmer effect using:
- * - Shared values for performance
- * - Worklets for 60 FPS on UI thread
- * - Linear gradient for shimmer effect
- *
- * @example
- * ```tsx
- * <ShimmerAnimation
- *   width={200}
- *   height={20}
- *   borderRadius={4}
- * />
- * ```
- */
 export declare function ShimmerAnimation({ width, height, baseColor, highlightColor, duration, borderRadius, style, children, }: ShimmerProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=ShimmerAnimation.d.ts.map

package/lib/typescript/animations/ShimmerAnimation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShimmerAnimation.d.ts","sourceRoot":"","sources":["../../../src/animations/ShimmerAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAYzE,UAAU,YAAY;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,MAAM,EACN,SAAqB,EACrB,cAA0B,EAC1B,QAAe,EACf,YAAgB,EAChB,KAAK,EACL,QAAQ,GACT,EAAE,YAAY,qBA2Ed"}
+{"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"}

package/lib/typescript/components/Skeleton.d.ts

@@ -29,7 +29,7 @@ import { SkeletonIgnore } from './SkeletonIgnore';
  * </Skeleton>
  * ```
  */
-export declare function Skeleton({ loading, children, styles, excludeStyles, deep, animation, duration, baseColor, highlightColor, borderRadius, accessible, accessibilityLabel, debug, }: SkeletonProps): React.JSX.Element;
+export declare function Skeleton({ loading, children, styles, excludeStyles, deep, count, animation, duration, baseColor, highlightColor, borderRadius, accessible, accessibilityLabel, debug, }: SkeletonProps): React.JSX.Element;
 export declare namespace Skeleton {
     var displayName: string;
     var Ignore: typeof SkeletonIgnore;

package/lib/typescript/components/Skeleton.d.ts.map

@@ -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"}
+{"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"}

package/lib/typescript/core/parser/expandLists.d.ts

@@ -0,0 +1,3 @@
+import type { ReactNode } from 'react';
+export declare function expandListPlaceholders(children: ReactNode, count: number): ReactNode;
+//# sourceMappingURL=expandLists.d.ts.map

package/lib/typescript/core/parser/expandLists.d.ts.map

@@ -0,0 +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"}

package/lib/typescript/index.d.ts

@@ -5,6 +5,7 @@
  *
  * @packageDocumentation
  */
+import './deep';
 export { Skeleton } from './components/Skeleton';
 export { SkeletonIgnore } from './components/SkeletonIgnore';
 export { withSkeleton } from './components/withSkeleton';

package/lib/typescript/index.d.ts.map

@@ -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"}
+{"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"}

package/lib/typescript/types/skeleton.d.ts

@@ -69,6 +69,14 @@ export interface SkeletonProps {
      * When using `styles`, style keys to skip (e.g. layout containers).
      */
     excludeStyles?: string[];
+    /**
+     * Number of placeholder rows to render for a `FlatList` / `SectionList`
+     * while its data is still loading (its rows don't exist yet, so Skelo calls
+     * `renderItem` with a placeholder and repeats it `count` times).
+     *
+     * @default 6
+     */
+    count?: number;
     /**
      * Deep mode: expand opaque (custom) child components into their real
      * host-element tree via offline rendering, producing a structured skeleton

package/lib/typescript/types/skeleton.d.ts.map

@@ -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"}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "react-native-skelo",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "description": "Automatic skeleton loading for React Native. Write your UI once, Skelo builds the loading state automatically.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -87,15 +87,10 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*",
-    "react-native-linear-gradient": ">=2.8.0",
-    "react-native-reanimated": ">=3.0.0",
-    "react-reconciler": ">=0.29.0"
+    "react-native": "*"
   },
-  "peerDependenciesMeta": {
-    "react-reconciler": {
-      "optional": true
-    }
+  "dependencies": {
+    "react-reconciler": "^0.31.0"
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^18.4.3",
@@ -113,8 +108,6 @@
     "react": "18.2.0",
     "react-native": "0.73.1",
     "react-native-builder-bob": "^0.23.2",
-    "react-native-linear-gradient": "^2.8.3",
-    "react-native-reanimated": "^3.6.1",
     "react-reconciler": "^0.29.2",
     "react-test-renderer": "18.2.0",
     "release-it": "^17.0.1",
@@ -129,7 +122,7 @@
       "<rootDir>/lib/"
     ],
     "transformIgnorePatterns": [
-      "node_modules/(?!(@react-native|react-native|react-native-reanimated|react-native-linear-gradient)/)"
+      "node_modules/(?!(@react-native|react-native)/)"
     ],
     "collectCoverageFrom": [
       "src/**/*.{ts,tsx}",

package/src/animations/PulseAnimation.tsx

@@ -1,77 +1,19 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import type { DimensionValue, StyleProp, ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native';
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withRepeat,
-  withSequence,
-  withTiming,
-  Easing,
-} from 'react-native-reanimated';
+import { Animated, Easing, StyleSheet } from 'react-native';
 
 interface PulseProps {
-  /**
-   * Width of the pulse container
-   */
   width?: DimensionValue;
-
-  /**
-   * Height of the pulse container
-   */
   height?: DimensionValue;
-
-  /**
-   * Base color of the skeleton
-   * @default '#E1E9EE'
-   */
   baseColor?: string;
-
-  /**
-   * Highlight color for pulse
-   * @default '#F2F8FC'
-   */
   highlightColor?: string;
-
-  /**
-   * Animation duration in milliseconds
-   * @default 1000
-   */
   duration?: number;
-
-  /**
-   * Border radius
-   */
   borderRadius?: number;
-
-  /**
-   * Additional styles
-   */
   style?: StyleProp<ViewStyle>;
-
-  /**
-   * Child content (rendered inside pulse)
-   */
   children?: React.ReactNode;
 }
 
-/**
- * Pulse animation component using Reanimated 3
- *
- * Creates a subtle breathing/pulsing effect using:
- * - Shared values for performance
- * - Worklets for 60 FPS on UI thread
- * - Opacity animation for pulse effect
- *
- * @example
- * ```tsx
- * <PulseAnimation
- *   width={200}
- *   height={20}
- *   borderRadius={4}
- * />
- * ```
- */
+// Breathing opacity loop using React Native's built-in Animated (native driver).
 export function PulseAnimation({
   width,
   height,
@@ -81,48 +23,34 @@ export function PulseAnimation({
   style,
   children,
 }: PulseProps) {
-  // Shared value for opacity (0 to 1)
-  const opacity = useSharedValue(1);
+  const opacity = useRef(new Animated.Value(1)).current;
 
   useEffect(() => {
-    // Start infinite pulse animation
-    // Sequence: fade out -> fade in
-    opacity.value = withRepeat(
-      withSequence(
-        withTiming(0.5, {
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: 0.5,
           duration: duration / 2,
           easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
         }),
-        withTiming(1, {
+        Animated.timing(opacity, {
+          toValue: 1,
           duration: duration / 2,
           easing: Easing.inOut(Easing.ease),
-        })
-      ),
-      -1, // Infinite repeat
-      false // Don't reverse
+          useNativeDriver: true,
+        }),
+      ])
     );
+    loop.start();
+    return () => loop.stop();
   }, [duration, opacity]);
 
-  // Animated style for pulse effect
-  const animatedStyle = useAnimatedStyle(() => {
-    'worklet';
-
-    return {
-      opacity: opacity.value,
-    };
-  }, []);
-
   return (
     <Animated.View
       style={[
         styles.container,
-        {
-          width,
-          height,
-          borderRadius,
-          backgroundColor: baseColor,
-        },
-        animatedStyle,
+        { width, height, borderRadius, backgroundColor: baseColor, opacity },
         style,
       ]}
     >

package/src/animations/ShimmerAnimation.tsx

@@ -1,78 +1,21 @@
-import React, { useEffect } from 'react';
-import type { DimensionValue, StyleProp, ViewStyle } from 'react-native';
-import { StyleSheet, View } from 'react-native';
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withRepeat,
-  withTiming,
-  interpolate,
-  Easing,
-} from 'react-native-reanimated';
-import { LinearGradient } from 'react-native-linear-gradient';
+import React, { useEffect, useRef, useState } from 'react';
+import type { DimensionValue, LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
+import { Animated, Easing, StyleSheet, View } from 'react-native';
 
 interface ShimmerProps {
-  /**
-   * Width of the shimmer container
-   */
   width?: DimensionValue;
-
-  /**
-   * Height of the shimmer container
-   */
   height?: DimensionValue;
-
-  /**
-   * Base color of the skeleton
-   * @default '#E1E9EE'
-   */
   baseColor?: string;
-
-  /**
-   * Highlight color that shimmers across
-   * @default '#F2F8FC'
-   */
   highlightColor?: string;
-
-  /**
-   * Animation duration in milliseconds
-   * @default 1500
-   */
   duration?: number;
-
-  /**
-   * Border radius
-   */
   borderRadius?: number;
-
-  /**
-   * Additional styles
-   */
   style?: StyleProp<ViewStyle>;
-
-  /**
-   * Child content (rendered on top of shimmer)
-   */
   children?: React.ReactNode;
 }
 
-/**
- * Shimmer animation component using Reanimated 3
- *
- * Creates a smooth left-to-right shimmer effect using:
- * - Shared values for performance
- * - Worklets for 60 FPS on UI thread
- * - Linear gradient for shimmer effect
- *
- * @example
- * ```tsx
- * <ShimmerAnimation
- *   width={200}
- *   height={20}
- *   borderRadius={4}
- * />
- * ```
- */
+// Zero-dependency shimmer: a highlight band (dim/bright/dim segments to fake a
+// soft gradient) sweeps across the base, driven by React Native's built-in
+// Animated native driver. Plain Views only — guaranteed to render and animate.
 export function ShimmerAnimation({
   width,
   height,
@@ -83,77 +26,49 @@ export function ShimmerAnimation({
   style,
   children,
 }: ShimmerProps) {
-  // Shared value for animation progress (0 to 1)
-  const progress = useSharedValue(0);
+  const progress = useRef(new Animated.Value(0)).current;
+  const [measuredWidth, setMeasuredWidth] = useState(0);
 
   useEffect(() => {
-    // Start infinite shimmer animation
-    progress.value = withRepeat(
-      withTiming(1, {
+    const loop = Animated.loop(
+      Animated.timing(progress, {
+        toValue: 1,
         duration,
         easing: Easing.linear,
-      }),
-      -1, // Infinite repeat
-      false // Don't reverse
+        useNativeDriver: true,
+      })
     );
+    loop.start();
+    return () => loop.stop();
   }, [duration, progress]);
 
-  // Animated style for shimmer overlay
-  const animatedStyle = useAnimatedStyle(() => {
-    'worklet';
+  const onLayout = (event: LayoutChangeEvent) => {
+    const w = event.nativeEvent.layout.width;
+    setMeasuredWidth(prev => (prev === w ? prev : w));
+  };
 
-    // Calculate shimmer position
-    // Interpolate from -100% to 100% to create left-to-right sweep
-    const translateX = interpolate(progress.value, [0, 1], [-1, 1]);
+  const containerWidth = typeof width === 'number' ? width : measuredWidth || 200;
+  const bandWidth = Math.max(containerWidth * 0.6, 80);
 
-    return {
-      transform: [{ translateX: translateX * (typeof width === 'number' ? width : 200) }],
-    };
-  }, [width]);
+  const translateX = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-bandWidth, containerWidth],
+  });
 
   return (
     <View
-      style={[
-        styles.container,
-        {
-          width,
-          height,
-          borderRadius,
-          backgroundColor: baseColor,
-        },
-        style,
-      ]}
+      onLayout={onLayout}
+      style={[styles.container, { width, height, borderRadius, backgroundColor: baseColor }, style]}
     >
-      {/* Shimmer gradient overlay */}
       <Animated.View
-        style={[
-          StyleSheet.absoluteFill,
-          {
-            overflow: 'hidden',
-            borderRadius,
-          },
-        ]}
+        pointerEvents="none"
+        style={[styles.band, { width: bandWidth, transform: [{ translateX }] }]}
       >
-        <Animated.View
-          style={[
-            styles.shimmer,
-            {
-              width: typeof width === 'number' ? width : '100%',
-              height: '100%',
-            },
-            animatedStyle,
-          ]}
-        >
-          <LinearGradient
-            colors={[baseColor, highlightColor, highlightColor, baseColor]}
-            start={{ x: 0, y: 0 }}
-            end={{ x: 1, y: 0 }}
-            style={StyleSheet.absoluteFill}
-          />
-        </Animated.View>
+        <View style={[styles.segment, { backgroundColor: highlightColor, opacity: 0.25 }]} />
+        <View style={[styles.segment, { backgroundColor: highlightColor, opacity: 0.9 }]} />
+        <View style={[styles.segment, { backgroundColor: highlightColor, opacity: 0.25 }]} />
       </Animated.View>
 
-      {/* Child content */}
       {children}
     </View>
   );
@@ -163,7 +78,13 @@ const styles = StyleSheet.create({
   container: {
     overflow: 'hidden',
   },
-  shimmer: {
+  band: {
     position: 'absolute',
+    top: 0,
+    bottom: 0,
+    flexDirection: 'row',
+  },
+  segment: {
+    flex: 1,
   },
 });

package/src/components/Skeleton.tsx

@@ -5,6 +5,7 @@ import { SkeletonRenderer } from './SkeletonRenderer';
 import { SkeletonIgnore } from './SkeletonIgnore';
 import { StyleSkeleton } from '../core/generator/StyleSkeleton';
 import { getDeepExpander } from '../core/deepRegistry';
+import { expandListPlaceholders } from '../core/parser/expandLists';
 import { DEFAULT_CONFIG } from '../constants/defaults';
 
 /**
@@ -40,7 +41,8 @@ export function Skeleton({
   children,
   styles,
   excludeStyles,
-  deep = false,
+  deep,
+  count = 6,
   animation = DEFAULT_CONFIG.animation,
   duration = DEFAULT_CONFIG.duration,
   baseColor = DEFAULT_CONFIG.baseColor,
@@ -63,27 +65,31 @@ export function Skeleton({
     }
 
     try {
+      // Turn FlatList/SectionList into placeholder rows so lists show a
+      // skeleton even though their data (and rows) don't exist yet.
+      const prepared = expandListPlaceholders(children, count);
+
       // Deep mode: expand opaque components into their real host tree via the
       // opt-in expander (registered by importing 'react-native-skelo/deep').
-      // Falls back to static parsing if unavailable or it returns nothing.
-      if (deep) {
-        const expand = getDeepExpander();
-        if (expand) {
-          const expanded = expand(<>{children}</>);
-          if (expanded && expanded.length > 0) {
-            return expanded;
-          }
-          if (__DEV__) {
-            console.warn('[Skelo] deep expansion returned nothing; falling back to static parsing.');
-          }
-        } else if (__DEV__) {
-          console.warn(
-            "[Skelo] `deep` requires react-reconciler. Install it and add `import 'react-native-skelo/deep';` in your app entry."
-          );
+      // When `deep` is not set explicitly, it's used automatically whenever the
+      // expander is available. Falls back to static parsing otherwise.
+      const expand = getDeepExpander();
+      const wantDeep = deep === undefined ? expand !== null : deep;
+      if (wantDeep && expand) {
+        const expanded = expand(<>{prepared}</>);
+        if (expanded && expanded.length > 0) {
+          return expanded;
+        }
+        if (__DEV__) {
+          console.warn('[Skelo] deep expansion returned nothing; falling back to static parsing.');
         }
+      } else if (deep === true && !expand && __DEV__) {
+        console.warn(
+          "[Skelo] `deep` requires react-reconciler. Install it and add `import 'react-native-skelo/deep';` in your app entry."
+        );
       }
 
-      const parsed = Parser.parse(children);
+      const parsed = Parser.parse(prepared);
 
       if (__DEV__ && debug) {
         // Log a lightweight summary: the raw nodes hold React elements
@@ -104,7 +110,7 @@ export function Skeleton({
       }
       return [];
     }
-  }, [loading, styles, deep, children, debug]);
+  }, [loading, styles, deep, count, children, debug]);
 
   // Create skeleton config
   const config = useMemo(