react-native-skelo 0.0.5 → 0.1.0-alpha.0

package/package.json

@@ -1,29 +1,12 @@
 {
   "name": "react-native-skelo",
-  "version": "0.0.5",
+  "version": "0.1.0-alpha.0",
   "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",
   "types": "lib/typescript/index.d.ts",
   "react-native": "src/index.ts",
   "source": "src/index.ts",
-  "exports": {
-    ".": {
-      "types": "./lib/typescript/index.d.ts",
-      "react-native": "./src/index.ts",
-      "import": "./lib/module/index.js",
-      "require": "./lib/commonjs/index.js",
-      "default": "./lib/commonjs/index.js"
-    },
-    "./deep": {
-      "types": "./lib/typescript/deep.d.ts",
-      "react-native": "./src/deep.ts",
-      "import": "./lib/module/deep.js",
-      "require": "./lib/commonjs/deep.js",
-      "default": "./lib/commonjs/deep.js"
-    },
-    "./package.json": "./package.json"
-  },
   "files": [
     "src",
     "lib",
@@ -35,7 +18,6 @@
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
     "typecheck": "tsc --noEmit",
-    "build": "bob build",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "lint:fix": "eslint \"**/*.{js,ts,tsx}\" --fix",
     "format": "prettier --write \"**/*.{js,ts,tsx,json,md}\"",
@@ -87,10 +69,15 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-linear-gradient": ">=2.8.0",
+    "react-native-reanimated": ">=3.0.0",
+    "react-reconciler": ">=0.29.0"
   },
-  "dependencies": {
-    "react-reconciler": "^0.31.0"
+  "peerDependenciesMeta": {
+    "react-reconciler": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^18.4.3",
@@ -108,6 +95,8 @@
     "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",
@@ -122,7 +111,7 @@
       "<rootDir>/lib/"
     ],
     "transformIgnorePatterns": [
-      "node_modules/(?!(@react-native|react-native)/)"
+      "node_modules/(?!(@react-native|react-native|react-native-reanimated|react-native-linear-gradient)/)"
     ],
     "collectCoverageFrom": [
       "src/**/*.{ts,tsx}",

package/src/animations/PulseAnimation.tsx

@@ -1,19 +1,77 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect } from 'react';
 import type { DimensionValue, StyleProp, ViewStyle } from 'react-native';
-import { Animated, Easing, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withSequence,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated';
 
 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;
 }
 
-// Breathing opacity loop using React Native's built-in Animated (native driver).
+/**
+ * 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 function PulseAnimation({
   width,
   height,
@@ -23,34 +81,48 @@ export function PulseAnimation({
   style,
   children,
 }: PulseProps) {
-  const opacity = useRef(new Animated.Value(1)).current;
+  // Shared value for opacity (0 to 1)
+  const opacity = useSharedValue(1);
 
   useEffect(() => {
-    const loop = Animated.loop(
-      Animated.sequence([
-        Animated.timing(opacity, {
-          toValue: 0.5,
+    // Start infinite pulse animation
+    // Sequence: fade out -> fade in
+    opacity.value = withRepeat(
+      withSequence(
+        withTiming(0.5, {
           duration: duration / 2,
           easing: Easing.inOut(Easing.ease),
-          useNativeDriver: true,
         }),
-        Animated.timing(opacity, {
-          toValue: 1,
+        withTiming(1, {
           duration: duration / 2,
           easing: Easing.inOut(Easing.ease),
-          useNativeDriver: true,
-        }),
-      ])
+        })
+      ),
+      -1, // Infinite repeat
+      false // Don't reverse
     );
-    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, opacity },
+        {
+          width,
+          height,
+          borderRadius,
+          backgroundColor: baseColor,
+        },
+        animatedStyle,
         style,
       ]}
     >

package/src/animations/ShimmerAnimation.tsx

@@ -1,21 +1,78 @@
-import React, { useEffect, useRef, useState } from 'react';
-import type { DimensionValue, LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
-import { Animated, Easing, StyleSheet, View } from 'react-native';
+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';
 
 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;
 }
 
-// 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.
+/**
+ * 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 function ShimmerAnimation({
   width,
   height,
@@ -26,49 +83,77 @@ export function ShimmerAnimation({
   style,
   children,
 }: ShimmerProps) {
-  const progress = useRef(new Animated.Value(0)).current;
-  const [measuredWidth, setMeasuredWidth] = useState(0);
+  // Shared value for animation progress (0 to 1)
+  const progress = useSharedValue(0);
 
   useEffect(() => {
-    const loop = Animated.loop(
-      Animated.timing(progress, {
-        toValue: 1,
+    // Start infinite shimmer animation
+    progress.value = withRepeat(
+      withTiming(1, {
         duration,
         easing: Easing.linear,
-        useNativeDriver: true,
-      })
+      }),
+      -1, // Infinite repeat
+      false // Don't reverse
     );
-    loop.start();
-    return () => loop.stop();
   }, [duration, progress]);
 
-  const onLayout = (event: LayoutChangeEvent) => {
-    const w = event.nativeEvent.layout.width;
-    setMeasuredWidth(prev => (prev === w ? prev : w));
-  };
+  // Animated style for shimmer overlay
+  const animatedStyle = useAnimatedStyle(() => {
+    'worklet';
 
-  const containerWidth = typeof width === 'number' ? width : measuredWidth || 200;
-  const bandWidth = Math.max(containerWidth * 0.6, 80);
+    // Calculate shimmer position
+    // Interpolate from -100% to 100% to create left-to-right sweep
+    const translateX = interpolate(progress.value, [0, 1], [-1, 1]);
 
-  const translateX = progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [-bandWidth, containerWidth],
-  });
+    return {
+      transform: [{ translateX: translateX * (typeof width === 'number' ? width : 200) }],
+    };
+  }, [width]);
 
   return (
     <View
-      onLayout={onLayout}
-      style={[styles.container, { width, height, borderRadius, backgroundColor: baseColor }, style]}
+      style={[
+        styles.container,
+        {
+          width,
+          height,
+          borderRadius,
+          backgroundColor: baseColor,
+        },
+        style,
+      ]}
     >
+      {/* Shimmer gradient overlay */}
       <Animated.View
-        pointerEvents="none"
-        style={[styles.band, { width: bandWidth, transform: [{ translateX }] }]}
+        style={[
+          StyleSheet.absoluteFill,
+          {
+            overflow: 'hidden',
+            borderRadius,
+          },
+        ]}
       >
-        <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
+          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>
       </Animated.View>
 
+      {/* Child content */}
       {children}
     </View>
   );
@@ -78,13 +163,7 @@ const styles = StyleSheet.create({
   container: {
     overflow: 'hidden',
   },
-  band: {
+  shimmer: {
     position: 'absolute',
-    top: 0,
-    bottom: 0,
-    flexDirection: 'row',
-  },
-  segment: {
-    flex: 1,
   },
 });

package/src/components/Skeleton.tsx

@@ -4,8 +4,7 @@ import { Parser } from '../core/parser';
 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 { expandToComponentNodes } from '../core/parser/expandOffline';
 import { DEFAULT_CONFIG } from '../constants/defaults';
 
 /**
@@ -41,8 +40,7 @@ export function Skeleton({
   children,
   styles,
   excludeStyles,
-  deep,
-  count = 6,
+  deep = false,
   animation = DEFAULT_CONFIG.animation,
   duration = DEFAULT_CONFIG.duration,
   baseColor = DEFAULT_CONFIG.baseColor,
@@ -65,31 +63,19 @@ 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').
-      // 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}</>);
+      // Deep mode: expand opaque components into their real host tree by
+      // rendering them offline. Falls back to static parsing on failure.
+      if (deep) {
+        const expanded = expandToComponentNodes(<>{children}</>);
         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(prepared);
+      const parsed = Parser.parse(children);
 
       if (__DEV__ && debug) {
         // Log a lightweight summary: the raw nodes hold React elements
@@ -110,7 +96,7 @@ export function Skeleton({
       }
       return [];
     }
-  }, [loading, styles, deep, count, children, debug]);
+  }, [loading, styles, deep, children, debug]);
 
   // Create skeleton config
   const config = useMemo(

package/src/index.ts

@@ -6,10 +6,6 @@
  * @packageDocumentation
  */
 
-// Auto-register deep expansion (react-reconciler ships as a dependency), so
-// `<Skeleton deep>` / opaque components work with zero setup.
-import './deep';
-
 // Main component
 export { Skeleton } from './components/Skeleton';
 export { SkeletonIgnore } from './components/SkeletonIgnore';

package/src/types/skeleton.ts

@@ -79,15 +79,6 @@ export interface SkeletonProps {
    */
   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/commonjs/core/deepRegistry.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getDeepExpander = getDeepExpander;
-exports.setDeepExpander = setDeepExpander;
-// Deep expansion is opt-in so the core bundle never depends on react-reconciler.
-// `react-native-skelo/deep` registers the expander; Skeleton reads it here.
-
-let expander = null;
-function setDeepExpander(fn) {
-  expander = fn;
-}
-function getDeepExpander() {
-  return expander;
-}
-//# sourceMappingURL=deepRegistry.js.map

package/lib/commonjs/core/deepRegistry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["expander","setDeepExpander","fn","getDeepExpander"],"sourceRoot":"../../../src","sources":["core/deepRegistry.ts"],"mappings":";;;;;;;AAGA;AACA;;AAGA,IAAIA,QAA6B,GAAG,IAAI;AAEjC,SAASC,eAAeA,CAACC,EAAgB,EAAQ;EACtDF,QAAQ,GAAGE,EAAE;AACf;AAEO,SAASC,eAAeA,CAAA,EAAwB;EACrD,OAAOH,QAAQ;AACjB","ignoreList":[]}

package/lib/commonjs/core/parser/expandLists.js

@@ -1,67 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.expandListPlaceholders = expandListPlaceholders;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _componentUtils = require("../../utils/componentUtils");
-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); }
-// List components whose rows come from `renderItem` (not JSX children).
-const LIST_TYPES = new Set(['FlatList', 'SectionList', 'VirtualizedList', 'FlashList']);
-const NOOP_SEPARATORS = {
-  highlight: () => {},
-  unhighlight: () => {},
-  updateProps: () => {}
-};
-
-// Renders `count` sample rows from a list's `renderItem` so there's something
-// to skeletonize while the real data is still loading (the rows don't exist in
-// the tree yet). Rows that throw on placeholder data are skipped.
-function renderSampleRows(list, count) {
-  const props = list.props || {};
-  const data = Array.isArray(props.data) ? props.data : [];
-  const sample = data.length > 0 ? data[0] : {};
-  const rows = [];
-  for (let i = 0; i < count; i++) {
-    try {
-      const row = props.renderItem?.({
-        item: sample,
-        index: i,
-        section: {},
-        separators: NOOP_SEPARATORS
-      });
-      if (row) {
-        rows.push(/*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
-          key: i
-        }, row));
-      }
-    } catch {
-      // Row couldn't render with placeholder data — skip it.
-    }
-  }
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: props.contentContainerStyle
-  }, rows);
-}
-
-// Walks a child tree and replaces FlatList/SectionList with sample rows so a
-// plain `<Skeleton><FlatList/></Skeleton>` produces a skeleton while loading.
-function expandListPlaceholders(children, count) {
-  return _react.default.Children.map(children, child => {
-    if (! /*#__PURE__*/(0, _react.isValidElement)(child)) {
-      return child;
-    }
-    const name = (0, _componentUtils.getComponentName)(child);
-    const props = child.props || {};
-    if (LIST_TYPES.has(name) && typeof props.renderItem === 'function') {
-      return renderSampleRows(child, count);
-    }
-    if (props.children) {
-      return /*#__PURE__*/_react.default.cloneElement(child, undefined, expandListPlaceholders(props.children, count));
-    }
-    return child;
-  });
-}
-//# sourceMappingURL=expandLists.js.map

package/lib/commonjs/core/parser/expandLists.js.map

@@ -1 +0,0 @@
-{"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":[]}

package/lib/commonjs/deep.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.deepEnabled = void 0;
-var _deepRegistry = require("./core/deepRegistry");
-var _expandOffline = require("./core/parser/expandOffline");
-// Opt-in deep mode. Import once in your app entry to enable `<Skeleton deep>`:
-//
-//   import 'react-native-skelo/deep';
-//
-// This is the only module that pulls in react-reconciler, so apps that don't
-// use deep mode never bundle it. Requires `react-reconciler` to be installed.
-
-(0, _deepRegistry.setDeepExpander)(_expandOffline.expandToComponentNodes);
-const deepEnabled = exports.deepEnabled = true;
-//# sourceMappingURL=deep.js.map

package/lib/commonjs/deep.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_deepRegistry","require","_expandOffline","setDeepExpander","expandToComponentNodes","deepEnabled","exports"],"sourceRoot":"../../src","sources":["deep.ts"],"mappings":";;;;;;AAMA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AAPA;AACA;AACA;AACA;AACA;AACA;;AAIA,IAAAE,6BAAe,EAACC,qCAAsB,CAAC;AAEhC,MAAMC,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,IAAI","ignoreList":[]}

package/lib/module/core/deepRegistry.js

@@ -1,11 +0,0 @@
-// Deep expansion is opt-in so the core bundle never depends on react-reconciler.
-// `react-native-skelo/deep` registers the expander; Skeleton reads it here.
-
-let expander = null;
-export function setDeepExpander(fn) {
-  expander = fn;
-}
-export function getDeepExpander() {
-  return expander;
-}
-//# sourceMappingURL=deepRegistry.js.map

package/lib/module/core/deepRegistry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["expander","setDeepExpander","fn","getDeepExpander"],"sourceRoot":"../../../src","sources":["core/deepRegistry.ts"],"mappings":"AAGA;AACA;;AAGA,IAAIA,QAA6B,GAAG,IAAI;AAExC,OAAO,SAASC,eAAeA,CAACC,EAAgB,EAAQ;EACtDF,QAAQ,GAAGE,EAAE;AACf;AAEA,OAAO,SAASC,eAAeA,CAAA,EAAwB;EACrD,OAAOH,QAAQ;AACjB","ignoreList":[]}