Avatar

1import { cva, type VariantProps } from "class-variance-authority";
2import {
3  Children,
4  cloneElement,
5  createContext,
6  isValidElement,
7  useCallback,
8  useContext,
9  useMemo,
10  useState,
11} from "react";
12import { Image, type ImageProps, Text, View } from "react-native";
13import { withUniwind } from "uniwind";
14import { cn } from "@/lib/utils";
15 
16// Types
17type AvatarSize = NonNullable<VariantProps<typeof avatarVariants>["size"]>;
18type AvatarImageStatus = "idle" | "loading" | "loaded" | "error";
19 
20type AvatarImageKeyStatus = {
21  status: AvatarImageStatus;
22  srcKey: string;
23};
24 
25type AvatarContextValue = {
26  size: AvatarSize;
27  imageKeyStatus: AvatarImageKeyStatus;
28  setImageKeyStatus: (status: AvatarImageKeyStatus) => void;
29};
30 
31type AvatarProps = React.ComponentProps<typeof View> &
32  VariantProps<typeof avatarVariants> & {
33    children?: React.ReactNode;
34  };
35 
36type AvatarImageProps = ImageProps;
37 
38type AvatarFallbackProps = React.ComponentProps<typeof View> & {
39  children?: React.ReactNode;
40};
41 
42type AvatarBadgeProps = React.ComponentProps<typeof View> & {
43  children?: React.ReactNode;
44};
45 
46type ClassNameElement = React.ReactElement<{ className?: string }>;
47 
48// Context
49const AvatarContext = createContext<AvatarContextValue | null>(null);
50 
51const useAvatarContext = () => {
52  const context = useContext(AvatarContext);
53  if (!context) {
54    throw new Error("Avatar components must be used within an Avatar");
55  }
56  return context;
57};
58 
59const StyledImage = withUniwind(Image);
60 
61// Components
62export const Avatar = ({
63  children,
64  className,
65  size = "default",
66  ...props
67}: AvatarProps) => {
68  const [imageKeyStatus, _setImageKeyStatus] = useState<AvatarImageKeyStatus>({
69    srcKey: "",
70    status: "idle",
71  });
72 
73  const setImageKeyStatus = useCallback((payload: AvatarImageKeyStatus) => {
74    _setImageKeyStatus((prev) => {
75      const isSameKey = payload.srcKey === prev.srcKey;
76 
77      if (prev.status === "loaded" && isSameKey) {
78        return prev;
79      }
80 
81      return payload;
82    });
83  }, []);
84 
85  const ctx = useMemo(
86    () => ({
87      imageKeyStatus,
88      setImageKeyStatus,
89      size: size ?? "default",
90    }),
91    [imageKeyStatus, size, setImageKeyStatus]
92  );
93 
94  return (
95    <AvatarContext.Provider value={ctx}>
96      <View
97        className={cn(avatarVariants({ className, size }))}
98        data-slot="avatar"
99        {...props}
100      >
101        {children}
102      </View>
103    </AvatarContext.Provider>
104  );
105};
106 
107export const AvatarImage = ({
108  alt,
109  className,
110// … truncated