{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar",
  "type": "registry:ui",
  "title": "Avatar",
  "description": "A avatar component for React Native applications.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/avatar/avatar.tsx",
      "content": "import * as React from \"react\";\nimport {\n  Image,\n  View,\n  Text,\n  ImageSourcePropType,\n  ImageStyle,\n} from \"react-native\";\nimport { cn } from \"@/lib/utils\";\n\ninterface AvatarRootProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nconst AvatarRoot = React.forwardRef<View, AvatarRootProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <View\n        ref={ref}\n        className={cn(\n          \"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </View>\n    );\n  }\n);\n\ninterface AvatarImageProps {\n  className?: string;\n  source: ImageSourcePropType;\n  alt?: string;\n  style?: ImageStyle;\n  onLoad?: () => void;\n  onError?: () => void;\n}\n\nconst AvatarImage = React.forwardRef<Image, AvatarImageProps>(\n  ({ className, source, alt, ...props }, ref) => {\n    const imageContext = React.useContext(AvatarContext);\n\n    const handleError = () => {\n      imageContext?.setHasError(true);\n      props.onError?.();\n    };\n\n    const handleLoad = () => {\n      imageContext?.setImageLoaded(true);\n      props.onLoad?.();\n    };\n\n    return (\n      <Image\n        ref={ref}\n        source={source}\n        accessibilityLabel={alt}\n        className={cn(\"h-full w-full object-cover\", className)}\n        onError={handleError}\n        onLoad={handleLoad}\n        {...props}\n      />\n    );\n  }\n);\n\ninterface AvatarFallbackProps {\n  className?: string;\n  children: React.ReactNode;\n  delayMs?: number;\n}\n\ninterface AvatarContextValue {\n  hasError: boolean;\n  setHasError: React.Dispatch<React.SetStateAction<boolean>>;\n  imageLoaded: boolean;\n  setImageLoaded: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nconst AvatarContext = React.createContext<AvatarContextValue | null>(null);\n\nconst AvatarFallback = React.forwardRef<View, AvatarFallbackProps>(\n  ({ className, children, delayMs = 600, ...props }, ref) => {\n    const [isShowing, setIsShowing] = React.useState(delayMs === 0);\n    const avatarContext = React.useContext(AvatarContext);\n\n    React.useEffect(() => {\n      if (delayMs === 0) return;\n\n      // Only show fallback if image has error or hasn't loaded after delay\n      const timer = setTimeout(() => {\n        if (!avatarContext?.imageLoaded) {\n          setIsShowing(true);\n        }\n      }, delayMs);\n\n      return () => clearTimeout(timer);\n    }, [delayMs, avatarContext?.imageLoaded]);\n\n    // Hide fallback if image loads successfully\n    React.useEffect(() => {\n      if (avatarContext?.imageLoaded) {\n        setIsShowing(false);\n      }\n    }, [avatarContext?.imageLoaded]);\n\n    if (!isShowing || avatarContext?.imageLoaded) {\n      return null;\n    }\n\n    return (\n      <View\n        ref={ref}\n        className={cn(\n          \"absolute inset-0 flex h-full w-full items-center justify-center bg-muted\",\n          className\n        )}\n        {...props}\n      >\n        {typeof children === \"string\" ? (\n          <Text className=\"text-base font-medium text-muted-foreground\">\n            {children}\n          </Text>\n        ) : (\n          children\n        )}\n      </View>\n    );\n  }\n);\n\n// Wrap the original AvatarRoot to provide context\nconst Avatar = React.forwardRef<View, AvatarRootProps>((props, ref) => {\n  const [hasError, setHasError] = React.useState(false);\n  const [imageLoaded, setImageLoaded] = React.useState(false);\n\n  return (\n    <AvatarContext.Provider\n      value={{\n        hasError,\n        setHasError,\n        imageLoaded,\n        setImageLoaded,\n      }}\n    >\n      <AvatarRoot ref={ref} {...props} />\n    </AvatarContext.Provider>\n  );\n});\n\nAvatarRoot.displayName = \"AvatarRoot\";\nAvatar.displayName = \"Avatar\";\nAvatarImage.displayName = \"AvatarImage\";\nAvatarFallback.displayName = \"AvatarFallback\";\n\nexport { Avatar, AvatarImage, AvatarFallback };\n",
      "type": "registry:ui"
    }
  ],
  "changelog": [],
  "customUsage": "import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport React from \"react\";\n\nexport default function AvatarExample() {\n    return (\n        <Avatar>\n            <AvatarImage\n                source={{ uri: \"https://avatars.githubusercontent.com/u/204157942?s=200&v=4\" }}\n                alt=\"Profile picture\"\n            />\n            <AvatarFallback>TR</AvatarFallback>\n        </Avatar>\n    );\n} ",
  "customPreview": "import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport React from \"react\";\nimport { ScrollView, Text, View } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\n\nexport default function AvatarExample() {\n    return (\n        <>\n            <SafeAreaView className=\"flex-1 bg-background\" edges={[\"bottom\"]}>\n                <ScrollView className=\"px-5 py-5\">\n                    <View className=\"mb-6\">\n                        <Text className=\"text-2xl font-bold mb-2 text-foreground\">\n                            Avatar\n                        </Text>\n                        <Text className=\"text-base mb-4 text-muted-foreground\">\n                            An image component with a fallback for user avatars and profile pictures\n                        </Text>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Default Avatar\n                        </Text>\n                        <View className=\"flex-row gap-4\">\n                            <Avatar>\n                                <AvatarImage\n                                    source={{ uri: \"https://avatars.githubusercontent.com/u/204157942?s=200&v=4\" }}\n                                    alt=\"Profile picture\"\n                                />\n                                <AvatarFallback>TR</AvatarFallback>\n                            </Avatar>\n                        </View>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Avatar Sizes\n                        </Text>\n                        <View className=\"flex-row items-center gap-4\">\n                            <Avatar className=\"h-8 w-8\">\n                                <AvatarImage\n                                    source={{ uri: \"https://avatars.githubusercontent.com/u/204157942?s=200&v=4\" }}\n                                    alt=\"Small avatar\"\n                                />\n                                <AvatarFallback>TR</AvatarFallback>\n                            </Avatar>\n\n                            <Avatar>\n                                <AvatarImage\n                                    source={{ uri: \"https://avatars.githubusercontent.com/u/204157942?s=200&v=4\" }}\n                                    alt=\"Default avatar\"\n                                />\n                                <AvatarFallback>TR</AvatarFallback>\n                            </Avatar>\n\n                            <Avatar className=\"h-16 w-16\">\n                                <AvatarImage\n                                    source={{ uri: \"https://avatars.githubusercontent.com/u/204157942?s=200&v=4\" }}\n                                    alt=\"Large avatar\"\n                                />\n                                <AvatarFallback>TR</AvatarFallback>\n                            </Avatar>\n                        </View>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            With Fallback\n                        </Text>\n                        <View className=\"flex-row gap-4\">\n                            <Avatar>\n                                <AvatarImage\n                                    source={{ uri: \"https://invalid-image-url.png\" }}\n                                    alt=\"Invalid image\"\n                                />\n                                <AvatarFallback>JD</AvatarFallback>\n                            </Avatar>\n\n                            <Avatar>\n                                <AvatarImage\n                                    source={{ uri: \"https://another-invalid-url.png\" }}\n                                    alt=\"Invalid image\"\n                                />\n                                <AvatarFallback>AB</AvatarFallback>\n                            </Avatar>\n\n                            <Avatar>\n                                <AvatarFallback>MK</AvatarFallback>\n                            </Avatar>\n                        </View>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Custom Styling\n                        </Text>\n                        <View className=\"flex-row gap-4\">\n                            <Avatar className=\"bg-primary\">\n                                <AvatarFallback className=\"bg-primary text-primary-foreground\">\n                                    PR\n                                </AvatarFallback>\n                            </Avatar>\n\n                            <Avatar className=\"bg-secondary\">\n                                <AvatarFallback className=\"bg-secondary text-secondary-foreground\">\n                                    SC\n                                </AvatarFallback>\n                            </Avatar>\n\n                            <Avatar className=\"border-2 border-destructive\">\n                                <AvatarImage\n                                    source={{ uri: \"https://avatars.githubusercontent.com/u/204157942?s=200&v=4\" }}\n                                    alt=\"Bordered avatar\"\n                                    className=\"border-sm border-background\"\n                                />\n                                <AvatarFallback>BD</AvatarFallback>\n                            </Avatar>\n                        </View>\n                    </View>\n                </ScrollView>\n            </SafeAreaView>\n        </>\n    );\n} "
}