Avatar

1import * as React from "react";
2import {
3  Image,
4  View,
5  Text,
6  ImageSourcePropType,
7  ImageStyle,
8} from "react-native";
9import { cn } from "@/lib/utils";
10 
11interface AvatarRootProps {
12  className?: string;
13  children: React.ReactNode;
14}
15 
16const AvatarRoot = React.forwardRef<View, AvatarRootProps>(
17  ({ className, children, ...props }, ref) => {
18    return (
19      <View
20        ref={ref}
21        className={cn(
22          "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
23          className
24        )}
25        {...props}
26      >
27        {children}
28      </View>
29    );
30  }
31);
32 
33interface AvatarImageProps {
34  className?: string;
35  source: ImageSourcePropType;
36  alt?: string;
37  style?: ImageStyle;
38  onLoad?: () => void;
39  onError?: () => void;
40}
41 
42const AvatarImage = React.forwardRef<Image, AvatarImageProps>(
43  ({ className, source, alt, ...props }, ref) => {
44    const imageContext = React.useContext(AvatarContext);
45 
46    const handleError = () => {
47      imageContext?.setHasError(true);
48      props.onError?.();
49    };
50 
51    const handleLoad = () => {
52      imageContext?.setImageLoaded(true);
53      props.onLoad?.();
54    };
55 
56    return (
57      <Image
58        ref={ref}
59        source={source}
60        accessibilityLabel={alt}
61        className={cn("h-full w-full object-cover", className)}
62        onError={handleError}
63        onLoad={handleLoad}
64        {...props}
65      />
66    );
67  }
68);
69 
70interface AvatarFallbackProps {
71  className?: string;
72  children: React.ReactNode;
73  delayMs?: number;
74}
75 
76interface AvatarContextValue {
77  hasError: boolean;
78  setHasError: React.Dispatch<React.SetStateAction<boolean>>;
79  imageLoaded: boolean;
80  setImageLoaded: React.Dispatch<React.SetStateAction<boolean>>;
81}
82 
83const AvatarContext = React.createContext<AvatarContextValue | null>(null);
84 
85const AvatarFallback = React.forwardRef<View, AvatarFallbackProps>(
86  ({ className, children, delayMs = 600, ...props }, ref) => {
87    const [isShowing, setIsShowing] = React.useState(delayMs === 0);
88    const avatarContext = React.useContext(AvatarContext);
89 
90    React.useEffect(() => {
91      if (delayMs === 0) return;
92 
93      // Only show fallback if image has error or hasn't loaded after delay
94      const timer = setTimeout(() => {
95        if (!avatarContext?.imageLoaded) {
96          setIsShowing(true);
97        }
98      }, delayMs);
99 
100      return () => clearTimeout(timer);
101    }, [delayMs, avatarContext?.imageLoaded]);
102 
103    // Hide fallback if image loads successfully
104// … truncated