import React, { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useState, } from 'react'; import { Image, ImageErrorEvent, ImageLoadEvent, View } from 'react-native'; import { StyleSheet } from 'react-native-unistyles'; import { Icon, IconProps } from '@/registry/ui/icon'; import { Text, TextProps } from '@/registry/ui/text'; type AvatarSize = 'xs' | 'sm' | 'md' | 'lg'; type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error'; type AvatarContextType = { size: AvatarSize; imageLoadingStatus: ImageLoadingStatus; setImageLoadingStatus: (status: ImageLoadingStatus) => void; }; const AvatarContext = createContext(null); const useAvatar = () => { const ctx = useContext(AvatarContext); if (!ctx) { throw new Error('useAvatar must be used within a '); } return ctx; }; type AvatarProps = React.ComponentPropsWithRef & { size?: AvatarSize; }; function Avatar({ size = 'md', style, ...restProps }: AvatarProps) { const [imageLoadingStatus, setImageLoadingStatus] = useState('idle'); styles.useVariants({ size, }); const contextValue = useMemo( () => ({ size, imageLoadingStatus, setImageLoadingStatus, }), [size, imageLoadingStatus, setImageLoadingStatus], ); return ( ); } type AvatarImageProps = React.ComponentPropsWithRef; function AvatarImage({ onLoad: onLoadProp, onError: onErrorProp, style, ...restProps }: AvatarImageProps) { const { size, setImageLoadingStatus } = useAvatar(); styles.useVariants({ size, }); useLayoutEffect(() => { setImageLoadingStatus('loading'); return () => { setImageLoadingStatus('idle'); }; }, [setImageLoadingStatus]); const onLoad = useCallback( (e: ImageLoadEvent) => { setImageLoadingStatus('loaded'); onLoadProp?.(e); }, [onLoadProp, setImageLoadingStatus], ); const onError = useCallback( (e: ImageErrorEvent) => { setImageLoadingStatus('error'); onErrorProp?.(e); }, [onErrorProp, setImageLoadingStatus], ); return ( ); } Avatar.Image = AvatarImage; type AvatarFallbackProps = React.ComponentPropsWithRef & { delayMs?: number; }; function AvatarFallback({ delayMs, style, ...restProps }: AvatarFallbackProps) { const { size, imageLoadingStatus } = useAvatar(); styles.useVariants({ size, }); const [canRender, setCanRender] = useState(delayMs === undefined); useEffect(() => { let timerId: ReturnType; if (delayMs !== undefined) { timerId = setTimeout(() => setCanRender(true), delayMs); } return () => clearTimeout(timerId); }, [delayMs]); return canRender && imageLoadingStatus !== 'loaded' ? ( ) : null; } Avatar.Fallback = AvatarFallback; const textVariantMap: Record> = { xs: 'labelXs', sm: 'labelSm', md: 'labelMd', lg: 'labelLg', }; function AvatarText(props: TextProps) { const { size } = useAvatar(); return ; } Avatar.Text = AvatarText; const iconSizeMap: Record> = { xs: 14, sm: 16, md: 20, lg: 24, }; function AvatarIcon(props: IconProps) { const { size } = useAvatar(); return ; } Avatar.Icon = AvatarIcon; const styles = StyleSheet.create(({ colors, radius }) => ({ container: { position: 'relative', borderRadius: radius.full, borderCurve: 'continuous', overflow: 'hidden', variants: { size: { xs: { width: 28, height: 28, }, sm: { width: 36, height: 36, }, md: { width: 48, height: 48, }, lg: { width: 56, height: 56, }, }, }, }, fallback: { position: 'absolute', justifyContent: 'center', alignItems: 'center', backgroundColor: colors.muted, }, })); export { Avatar, useAvatar }; export type { AvatarProps };

Avatar

Installation

Usage

On this page