Skeleton

1import { createContext, useContext, useEffect, useMemo } from "react";
2import Animated, {
3  type SharedValue,
4  useAnimatedStyle,
5  useSharedValue,
6  withRepeat,
7  withTiming,
8} from "react-native-reanimated";
9import { cn } from "@/lib/utils";
10 
11// Constants
12const ANIMATION_DURATION = 1000;
13const MIN_OPACITY = 0.4;
14const MAX_OPACITY = 1;
15 
16// Types
17type InternalSkeletonGroupContextType = {
18  opacity: SharedValue<number>;
19};
20 
21type SkeletonGroupProps = {
22  children: React.ReactNode;
23};
24 
25type SkeletonProps = React.ComponentProps<typeof Animated.View>;
26 
27// Context
28const SkeletonGroupContext =
29  createContext<InternalSkeletonGroupContextType | null>(null);
30 
31const useSkeletonGroupContext = () => useContext(SkeletonGroupContext);
32 
33// Components
34export const SkeletonGroup = ({ children }: SkeletonGroupProps) => {
35  const opacity = useSharedValue(MIN_OPACITY);
36 
37  useEffect(() => {
38    opacity.value = withRepeat(
39      withTiming(MAX_OPACITY, { duration: ANIMATION_DURATION }),
40      -1,
41      true
42    );
43  }, [opacity]);
44 
45  const ctx = useMemo(() => {
46    return {
47      opacity,
48    };
49  }, [opacity]);
50 
51  return (
52    <SkeletonGroupContext.Provider value={ctx}>
53      {children}
54    </SkeletonGroupContext.Provider>
55  );
56};
57 
58export const Skeleton = ({ className, ...props }: SkeletonProps) => {
59  const groupContext = useSkeletonGroupContext();
60  const localOpacity = useSharedValue(MIN_OPACITY);
61  const opacity = groupContext?.opacity ?? localOpacity;
62 
63  useEffect(() => {
64    if (groupContext) {
65      return;
66    }
67 
68    localOpacity.value = withRepeat(
69      withTiming(MAX_OPACITY, { duration: ANIMATION_DURATION }),
70      -1,
71      true
72    );
73  }, [groupContext, localOpacity]);
74 
75  const animatedStyle = useAnimatedStyle(() => {
76    return {
77      opacity: opacity.value,
78    };
79  });
80 
81  return (
82    <Animated.View
83      className={cn("w-full rounded-md bg-accent", className)}
84      data-slot="skeleton"
85      style={animatedStyle}
86      {...props}
87    />
88  );
89};