react-native-skelo 0.0.3 → 0.0.5

package/src/animations/PulseAnimation.tsx

@@ -1,14 +1,6 @@
-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?: DimensionValue;
@@ -21,7 +13,7 @@ interface PulseProps {
   children?: React.ReactNode;
 }
 
-// Breathing opacity loop on the UI thread with Reanimated.
+// Breathing opacity loop using React Native's built-in Animated (native driver).
 export function PulseAnimation({
   width,
   height,
@@ -31,36 +23,34 @@ export function PulseAnimation({
   style,
   children,
 }: PulseProps) {
-  const opacity = useSharedValue(1);
+  const opacity = useRef(new Animated.Value(1)).current;
 
   useEffect(() => {
-    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,
-      false
+          useNativeDriver: true,
+        }),
+      ])
     );
+    loop.start();
+    return () => loop.stop();
   }, [duration, opacity]);
 
-  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,19 +1,6 @@
-import React, { useEffect, useState } from 'react';
-import type {
-  DimensionValue,
-  LayoutChangeEvent,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
-import { StyleSheet, View } from 'react-native';
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withRepeat,
-  withTiming,
-  interpolate,
-  Easing,
-} from 'react-native-reanimated';
+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?: DimensionValue;
@@ -26,9 +13,9 @@ interface ShimmerProps {
   children?: React.ReactNode;
 }
 
-// Shimmer with no gradient library: the sweeping overlay uses React Native's
-// built-in `experimental_backgroundImage` CSS gradient (New Architecture),
-// animated on the UI thread with Reanimated.
+// 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,
@@ -39,15 +26,20 @@ export function ShimmerAnimation({
   style,
   children,
 }: ShimmerProps) {
-  const progress = useSharedValue(0);
+  const progress = useRef(new Animated.Value(0)).current;
   const [measuredWidth, setMeasuredWidth] = useState(0);
 
   useEffect(() => {
-    progress.value = withRepeat(
-      withTiming(1, { duration, easing: Easing.linear }),
-      -1,
-      false
+    const loop = Animated.loop(
+      Animated.timing(progress, {
+        toValue: 1,
+        duration,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
     );
+    loop.start();
+    return () => loop.stop();
   }, [duration, progress]);
 
   const onLayout = (event: LayoutChangeEvent) => {
@@ -55,38 +47,26 @@ export function ShimmerAnimation({
     setMeasuredWidth(prev => (prev === w ? prev : w));
   };
 
-  const containerWidth = typeof width === 'number' ? width : measuredWidth;
+  const containerWidth = typeof width === 'number' ? width : measuredWidth || 200;
+  const bandWidth = Math.max(containerWidth * 0.6, 80);
 
-  const animatedStyle = useAnimatedStyle(() => {
-    'worklet';
-    const translateX = interpolate(
-      progress.value,
-      [0, 1],
-      [-containerWidth, containerWidth]
-    );
-    return { transform: [{ translateX }] };
-  }, [containerWidth]);
-
-  // `experimental_backgroundImage` isn't in the ViewStyle types yet.
-  const gradientStyle = {
-    ...StyleSheet.absoluteFillObject,
-    experimental_backgroundImage: `linear-gradient(to right, ${baseColor}, ${highlightColor}, ${baseColor})`,
-  } as unknown as ViewStyle;
+  const translateX = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-bandWidth, containerWidth],
+  });
 
   return (
     <View
       onLayout={onLayout}
-      style={[
-        styles.container,
-        { width, height, borderRadius, backgroundColor: baseColor },
-        style,
-      ]}
+      style={[styles.container, { width, height, borderRadius, backgroundColor: baseColor }, style]}
     >
       <Animated.View
         pointerEvents="none"
-        style={[StyleSheet.absoluteFill, animatedStyle]}
+        style={[styles.band, { width: bandWidth, transform: [{ translateX }] }]}
       >
-        <View style={gradientStyle} />
+        <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>
 
       {children}
@@ -98,4 +78,13 @@ const styles = StyleSheet.create({
   container: {
     overflow: 'hidden',
   },
+  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(

package/src/core/parser/expandLists.tsx

@@ -0,0 +1,77 @@
+import React, { isValidElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
+import { View } from 'react-native';
+import { getComponentName } from '../../utils/componentUtils';
+
+// 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: ReactElement, count: number): ReactNode {
+  const props = (list.props || {}) as {
+    renderItem?: (info: {
+      item: unknown;
+      index: number;
+      section?: unknown;
+      separators: typeof NOOP_SEPARATORS;
+    }) => ReactNode;
+    data?: unknown[];
+    contentContainerStyle?: unknown;
+  };
+
+  const data = Array.isArray(props.data) ? props.data : [];
+  const sample = data.length > 0 ? data[0] : {};
+
+  const rows: ReactNode[] = [];
+  for (let i = 0; i < count; i++) {
+    try {
+      const row = props.renderItem?.({
+        item: sample,
+        index: i,
+        section: {},
+        separators: NOOP_SEPARATORS,
+      });
+      if (row) {
+        rows.push(<React.Fragment key={i}>{row}</React.Fragment>);
+      }
+    } catch {
+      // Row couldn't render with placeholder data — skip it.
+    }
+  }
+
+  return <View style={props.contentContainerStyle as never}>{rows}</View>;
+}
+
+// Walks a child tree and replaces FlatList/SectionList with sample rows so a
+// plain `<Skeleton><FlatList/></Skeleton>` produces a skeleton while loading.
+export function expandListPlaceholders(children: ReactNode, count: number): ReactNode {
+  return React.Children.map(children, child => {
+    if (!isValidElement(child)) {
+      return child;
+    }
+
+    const name = getComponentName(child);
+    const props = (child.props || {}) as { children?: ReactNode };
+
+    if (
+      LIST_TYPES.has(name) &&
+      typeof (props as { renderItem?: unknown }).renderItem === 'function'
+    ) {
+      return renderSampleRows(child, count);
+    }
+
+    if (props.children) {
+      return React.cloneElement(child, undefined, expandListPlaceholders(props.children, count));
+    }
+
+    return child;
+  });
+}

package/src/index.ts

@@ -6,6 +6,10 @@
  * @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,6 +79,15 @@ 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