@umituz/react-native-design-system 2.4.5 → 2.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.4.5",
+  "version": "2.4.6",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/atoms/skeleton/AtomicSkeleton.tsx

@@ -22,8 +22,17 @@
  * ```
  */
 
-import React, { useEffect, useRef } from 'react';
-import { View, StyleSheet, Animated, type StyleProp, type ViewStyle } from 'react-native';
+import React, { useEffect } from 'react';
+import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withSequence,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 import { useAppDesignTokens } from '../../theme';
 import type { SkeletonPattern, SkeletonConfig } from './AtomicSkeleton.types';
 import { SKELETON_PATTERNS } from './AtomicSkeleton.types';
@@ -50,6 +59,53 @@ export interface AtomicSkeletonProps {
  * 
  * Provides visual feedback during content loading with customizable patterns
  */
+const SkeletonItem: React.FC<{
+  config: SkeletonConfig;
+  baseColor: string;
+  highlightColor: string;
+  disableAnimation: boolean;
+}> = ({ config, baseColor, highlightColor, disableAnimation }) => {
+  const opacity = useSharedValue(0);
+
+  useEffect(() => {
+    if (disableAnimation) return;
+
+    opacity.value = withRepeat(
+      withSequence(
+        withTiming(1, { duration: SHIMMER_DURATION / 2, easing: Easing.ease }),
+        withTiming(0, { duration: SHIMMER_DURATION / 2, easing: Easing.ease })
+      ),
+      -1,
+      false
+    );
+  }, [opacity, disableAnimation]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    backgroundColor: disableAnimation
+      ? baseColor
+      : opacity.value === 0
+        ? baseColor
+        : highlightColor,
+    opacity: disableAnimation ? 1 : 0.5 + opacity.value * 0.5,
+  }));
+
+  return (
+    <Animated.View
+      style={[
+        styles.skeleton,
+        {
+          width: config.width as number | `${number}%` | undefined,
+          height: config.height,
+          borderRadius: config.borderRadius,
+          marginBottom: config.marginBottom,
+          backgroundColor: baseColor,
+        },
+        animatedStyle,
+      ]}
+    />
+  );
+};
+
 export const AtomicSkeleton: React.FC<AtomicSkeletonProps> = ({
   pattern = 'list',
   custom,
@@ -63,59 +119,15 @@ export const AtomicSkeleton: React.FC<AtomicSkeletonProps> = ({
     ? custom
     : SKELETON_PATTERNS[pattern];
 
-  const shimmerAnim = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    if (disableAnimation) return;
-
-    const shimmerAnimation = Animated.loop(
-      Animated.sequence([
-        Animated.timing(shimmerAnim, {
-          toValue: 1,
-          duration: SHIMMER_DURATION,
-          useNativeDriver: false,
-        }),
-        Animated.timing(shimmerAnim, {
-          toValue: 0,
-          duration: 0,
-          useNativeDriver: false,
-        }),
-      ])
-    );
-
-    shimmerAnimation.start();
-
-    return () => {
-      shimmerAnimation.stop();
-    };
-  }, [shimmerAnim, disableAnimation]);
-
-  const backgroundColor = shimmerAnim.interpolate({
-    inputRange: [0, 0.5, 1],
-    outputRange: [
-      tokens.colors.surfaceSecondary,
-      tokens.colors.border,
-      tokens.colors.surfaceSecondary,
-    ],
-  });
-
   const renderSkeletonItem = (index: number) => (
     <View key={`skeleton-group-${index}`} style={styles.skeletonGroup}>
       {skeletonConfigs.map((config, configIndex) => (
-        <Animated.View
+        <SkeletonItem
           key={`skeleton-${index}-${configIndex}`}
-          style={[
-            styles.skeleton,
-            {
-              width: config.width as number | `${number}%` | undefined,
-              height: config.height,
-              borderRadius: config.borderRadius,
-              marginBottom: config.marginBottom,
-              backgroundColor: disableAnimation
-                ? tokens.colors.surfaceSecondary
-                : backgroundColor,
-            } as any,
-          ]}
+          config={config}
+          baseColor={tokens.colors.surfaceSecondary}
+          highlightColor={tokens.colors.border}
+          disableAnimation={disableAnimation}
         />
       ))}
     </View>