feat(skeleton): handle entering and exiting

vvv-sss · vvv-sss · commit 2f30afdcd1c7 · 2025-09-10T14:10:36.000+03:00
diff --git a/example/src/app/(home)/components/skeleton.tsx b/example/src/app/(home)/components/skeleton.tsx
@@ -1,6 +1,7 @@
 import { Avatar, Button, Card, Skeleton } from 'heroui-native';
 import { useState } from 'react';
 import { ScrollView, Text, View } from 'react-native';
+import { FadeInLeft, FadeOutRight } from 'react-native-reanimated';
 
 export default function SkeletonScreen() {
   const [isLoading, setIsLoading] = useState(true);
@@ -46,6 +47,8 @@ export default function SkeletonScreen() {
 
       <View className="w-full gap-3 mb-6">
         <Skeleton
+          entering={FadeInLeft}
+          exiting={FadeOutRight}
           className="h-4 w-full rounded-md"
           isLoading={isLoading}
           animationType={animationType}
@@ -56,6 +59,8 @@ export default function SkeletonScreen() {
         </Skeleton>
 
         <Skeleton
+          entering={FadeInLeft}
+          exiting={FadeOutRight}
           className="h-4 w-3/4 rounded-md"
           isLoading={isLoading}
           animationType={animationType}
@@ -64,6 +69,8 @@ export default function SkeletonScreen() {
         </Skeleton>
 
         <Skeleton
+          entering={FadeInLeft}
+          exiting={FadeOutRight}
           className="h-4 w-1/2 rounded-md"
           isLoading={isLoading}
           animationType={animationType}
diff --git a/src/components/skeleton/skeleton.styles.ts b/src/components/skeleton/skeleton.styles.ts
@@ -1,11 +1,12 @@
+import { StyleSheet } from 'react-native';
 import { tv } from 'tailwind-variants';
 import { combineStyles } from '../../providers/theme/helpers';
 
 /**
  * Main skeleton component styles
  */
 const skeleton = tv({
-  base: 'bg-muted overflow-hidden',
+  base: 'bg-muted/70 overflow-hidden',
 });
 
 /**
@@ -15,6 +16,15 @@ const gradientWrapper = tv({
   base: 'absolute inset-0',
 });
 
+/**
+ * Native styles for border curve
+ */
+export const nativeStyles = StyleSheet.create({
+  borderCurve: {
+    borderCurve: 'continuous',
+  },
+});
+
 /**
  * Combined skeleton styles
  */
diff --git a/src/components/skeleton/skeleton.tsx b/src/components/skeleton/skeleton.tsx
@@ -7,12 +7,15 @@ import {
 import Animated, {
   cancelAnimation,
   Easing,
+  FadeIn,
+  FadeOut,
   interpolate,
   ReduceMotion,
   useAnimatedStyle,
   useSharedValue,
   withRepeat,
   withTiming,
+  type SharedValue,
 } from 'react-native-reanimated';
 
 import { colorKit, useTheme } from '../../providers/theme';
@@ -29,12 +32,115 @@ import {
   DEFAULT_SPEED,
   DISPLAY_NAME,
 } from './skeleton.constants';
-import skeletonStyles from './skeleton.styles';
-import type { SkeletonProps } from './skeleton.types';
+import skeletonStyles, { nativeStyles } from './skeleton.styles';
+import type {
+  PulseConfig,
+  ShimmerConfig,
+  SkeletonProps,
+} from './skeleton.types';
+
+// --------------------------------------------------
+
+interface ShimmerAnimationProps {
+  isLoading: boolean;
+  shimmerConfig?: ShimmerConfig;
+  componentWidth: number;
+  offset: number;
+  progress: SharedValue<number>;
+  screenWidth: number;
+  isDark: boolean;
+  colors: any;
+}
+
+const ShimmerAnimation: React.FC<ShimmerAnimationProps> = ({
+  shimmerConfig,
+  componentWidth,
+  offset,
+  progress,
+  screenWidth,
+  isDark,
+  colors,
+}) => {
+  const highlightColor = isDark
+    ? colorKit
+        .setAlpha(colorKit.increaseBrightness(colors.background, 10).hex(), 0.5)
+        .hex()
+    : colorKit
+        .setAlpha(colorKit.decreaseBrightness(colors.background, 5).hex(), 0.5)
+        .hex();
+
+  const gradientColors = shimmerConfig?.gradientConfig?.colors ?? [
+    'transparent',
+    highlightColor,
+    'transparent',
+  ];
+  const gradientStart =
+    shimmerConfig?.gradientConfig?.start ?? DEFAULT_GRADIENT_START;
+  const gradientEnd =
+    shimmerConfig?.gradientConfig?.end ?? DEFAULT_GRADIENT_END;
+
+  const shimmerAnimatedStyle = useAnimatedStyle(() => {
+    const translateX = interpolate(
+      progress.get(),
+      [0, 1],
+      [-(componentWidth + offset), screenWidth]
+    );
+
+    return {
+      opacity: 1,
+      transform: [{ translateX }],
+    };
+  });
+
+  return (
+    <Animated.View
+      style={[
+        StyleSheet.absoluteFill,
+        nativeStyles.borderCurve,
+        shimmerAnimatedStyle,
+      ]}
+    >
+      <LinearGradientComponent
+        colors={gradientColors}
+        start={gradientStart}
+        end={gradientEnd}
+        style={StyleSheet.absoluteFill}
+      />
+    </Animated.View>
+  );
+};
+
+// --------------------------------------------------
+
+interface PulseAnimationProps {
+  pulseConfig?: PulseConfig;
+  progress: SharedValue<number>;
+}
+
+const usePulseAnimation = ({ pulseConfig, progress }: PulseAnimationProps) => {
+  const pulseMinOpacity = pulseConfig?.minOpacity ?? DEFAULT_PULSE_MIN_OPACITY;
+  const pulseMaxOpacity = pulseConfig?.maxOpacity ?? DEFAULT_PULSE_MAX_OPACITY;
+
+  return useAnimatedStyle(() => {
+    const opacity = interpolate(
+      progress.get(),
+      [0, 1],
+      [pulseMinOpacity, pulseMaxOpacity]
+    );
+
+    return {
+      opacity,
+    };
+  });
+};
+
+// --------------------------------------------------
 
 const Skeleton: React.FC<SkeletonProps> = (props) => {
   const {
     children,
+    entering = FadeIn,
+    exiting = FadeOut,
     isLoading = true,
     animationType = 'shimmer',
     shimmerConfig,
@@ -49,41 +155,18 @@ const Skeleton: React.FC<SkeletonProps> = (props) => {
   const progress = useSharedValue(0);
 
   const { width: SCREEN_WIDTH } = useWindowDimensions();
-
   const { colors, isDark } = useTheme();
 
   const shimmerDuration = shimmerConfig?.duration ?? DEFAULT_SHIMMER_DURATION;
   const shimmerEasing = shimmerConfig?.easing ?? DEFAULT_EASING;
   const shimmerSpeed = shimmerConfig?.speed ?? DEFAULT_SPEED;
 
-  const highlightColor = isDark
-    ? colorKit
-        .setAlpha(colorKit.increaseBrightness(colors.background, 10).hex(), 0.5)
-        .hex()
-    : colorKit
-        .setAlpha(colorKit.decreaseBrightness(colors.background, 5).hex(), 0.5)
-        .hex();
-
-  const gradientColors = shimmerConfig?.gradientConfig?.colors ?? [
-    'transparent',
-    highlightColor,
-    'transparent',
-  ];
-  const gradientStart =
-    shimmerConfig?.gradientConfig?.start ?? DEFAULT_GRADIENT_START;
-  const gradientEnd =
-    shimmerConfig?.gradientConfig?.end ?? DEFAULT_GRADIENT_END;
-
-  // Pulse configuration
   const pulseDuration = pulseConfig?.duration ?? DEFAULT_PULSE_DURATION;
   const pulseEasing = pulseConfig?.easing ?? Easing.inOut(Easing.ease);
-  const pulseMinOpacity = pulseConfig?.minOpacity ?? DEFAULT_PULSE_MIN_OPACITY;
-  const pulseMaxOpacity = pulseConfig?.maxOpacity ?? DEFAULT_PULSE_MAX_OPACITY;
 
-  // 5. Styles
   const tvStyles = skeletonStyles.skeleton({ className });
+  const pulseAnimatedStyle = usePulseAnimation({ pulseConfig, progress });
 
-  // 6. Effects
   useEffect(() => {
     if (isLoading && animationType !== 'none') {
       progress.set(0);
@@ -130,46 +213,6 @@ const Skeleton: React.FC<SkeletonProps> = (props) => {
     pulseEasing,
   ]);
 
-  // 7. Animation styles
-  const shimmerAnimatedStyle = useAnimatedStyle(() => {
-    if (animationType !== 'shimmer' || !isLoading) {
-      return {
-        opacity: 0,
-        transform: [{ translateX: 0 }],
-      };
-    }
-
-    const translateX = interpolate(
-      progress.get(),
-      [0, 1],
-      [-(componentWidth + offset), SCREEN_WIDTH]
-    );
-
-    return {
-      opacity: 1,
-      transform: [{ translateX }],
-    };
-  });
-
-  const pulseAnimatedStyle = useAnimatedStyle(() => {
-    if (animationType !== 'pulse' || !isLoading) {
-      return {
-        opacity: 1,
-      };
-    }
-
-    const opacity = interpolate(
-      progress.get(),
-      [0, 1],
-      [pulseMinOpacity, pulseMaxOpacity]
-    );
-
-    return {
-      opacity,
-    };
-  });
-
-  // 8. Callbacks
   const handleLayout = useCallback(
     (event: LayoutChangeEvent) => {
       if (componentWidth === 0) {
@@ -181,27 +224,39 @@ const Skeleton: React.FC<SkeletonProps> = (props) => {
     [componentWidth]
   );
 
-  // 9. Render
   if (!isLoading) {
-    return <>{children}</>;
+    return (
+      <Animated.View key="content" entering={entering} exiting={exiting}>
+        {children}
+      </Animated.View>
+    );
   }
 
   return (
     <Animated.View
+      key="skeleton"
+      entering={entering}
+      exiting={exiting}
       onLayout={handleLayout}
-      style={[animationType === 'pulse' && pulseAnimatedStyle, style]}
+      style={[
+        animationType === 'pulse' && pulseAnimatedStyle,
+        nativeStyles.borderCurve,
+        style,
+      ]}
       className={tvStyles}
       {...restProps}
     >
       {animationType === 'shimmer' && componentWidth > 0 && (
-        <Animated.View style={[StyleSheet.absoluteFill, shimmerAnimatedStyle]}>
-          <LinearGradientComponent
-            colors={gradientColors}
-            start={gradientStart}
-            end={gradientEnd}
-            style={StyleSheet.absoluteFill}
-          />
-        </Animated.View>
+        <ShimmerAnimation
+          isLoading={isLoading}
+          shimmerConfig={shimmerConfig}
+          componentWidth={componentWidth}
+          offset={offset}
+          progress={progress}
+          screenWidth={SCREEN_WIDTH}
+          isDark={isDark}
+          colors={colors}
+        />
       )}
     </Animated.View>
   );
diff --git a/src/components/skeleton/skeleton.types.ts b/src/components/skeleton/skeleton.types.ts
@@ -1,5 +1,5 @@
 import type { ViewProps } from 'react-native';
-import type { EasingFunction } from 'react-native-reanimated';
+import type { AnimatedProps, EasingFunction } from 'react-native-reanimated';
 
 /**
  * Skeleton animation type - defines the animation style
@@ -87,7 +87,7 @@ export interface PulseConfig {
 /**
  * Props for the main Skeleton component
  */
-export interface SkeletonProps extends ViewProps {
+export interface SkeletonProps extends AnimatedProps<ViewProps> {
   /**
    * Child components to show when not loading
    */
