Avatar Primitive
Types Primitives
Slot Primitives
An image component featuring an alternative representation for depicting the user.
Installation
Copy/paste the following code to ~/components/primitives/avatar/index.tsx
import * as React from 'react';import { ImageErrorEventData, ImageLoadEventData, NativeSyntheticEvent, Image as RNImage, View,} from 'react-native';import * as Slot from '~/components/primitives/slot';import { ComponentPropsWithAsChild, SlottableViewProps, ViewRef } from '~/components/primitives/types';import { AvatarImageProps, AvatarRootProps } from './types';
type AvatarState = 'loading' | 'error' | 'loaded';
interface IRootContext extends AvatarRootProps { status: AvatarState; setStatus: (status: AvatarState) => void;}
const RootContext = React.createContext<IRootContext | null>(null);
const Root = React.forwardRef<ViewRef, SlottableViewProps & AvatarRootProps>( ({ asChild, alt, ...viewProps }, ref) => { const [status, setStatus] = React.useState<AvatarState>('loading'); const Component = asChild ? Slot.View : View; return ( <RootContext.Provider value={{ alt, status, setStatus }}> <Component ref={ref} {...viewProps} /> </RootContext.Provider> ); });
Root.displayName = 'RootAvatar';
function useRootContext() { const context = React.useContext(RootContext); if (!context) { throw new Error('Avatar compound components cannot be rendered outside the Avatar component'); } return context;}
const Image = React.forwardRef< React.ElementRef<typeof RNImage>, Omit<ComponentPropsWithAsChild<typeof RNImage>, 'alt'> & AvatarImageProps>( ( { asChild, onLoad: onLoadProps, onError: onErrorProps, onLoadingStatusChange, ...props }, ref ) => { const { alt, setStatus, status } = useRootContext();
const onLoad = React.useCallback( (e: NativeSyntheticEvent<ImageLoadEventData>) => { setStatus('loaded'); onLoadingStatusChange?.('loaded'); onLoadProps?.(e); }, [onLoadProps] );
const onError = React.useCallback( (e: NativeSyntheticEvent<ImageErrorEventData>) => { setStatus('error'); onLoadingStatusChange?.('error'); onErrorProps?.(e); }, [onErrorProps] );
if (status === 'error') { return null; }
const Component = asChild ? Slot.Image : RNImage; return <Component ref={ref} alt={alt} onLoad={onLoad} onError={onError} {...props} />; });
Image.displayName = 'ImageAvatar';
const Fallback = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => { const { alt, status } = useRootContext();
if (status !== 'error') { return null; } const Component = asChild ? Slot.View : View; return <Component ref={ref} role={'img'} aria-label={alt} {...props} />;});
Fallback.displayName = 'FallbackAvatar';
export { Fallback, Image, Root };Copy/paste the following code for types to ~/components/primitives/avatar/types.ts
interface AvatarRootProps { alt: string;}
interface AvatarImageProps { children?: React.ReactNode; onLoadingStatusChange?: (status: 'error' | 'loaded') => void;}
export type { AvatarRootProps, AvatarImageProps };Usage
import * as AvatarPrimitive from '~/components/primitives/avatar';
const GITHUB_AVATAR_URI = 'https://github.com/mrzachnugent.png';
function Example() { return ( <AvatarPrimitive.Root alt="Zach Nugent's Avatar"> <AvatarPrimitive.Image source={{ uri: GITHUB_AVATAR_URI }} /> <AvatarPrimitive.Fallback> <Text>ZN</Text> </AvatarPrimitive.Fallback> </AvatarPrimitive.Root> );}Props
Root
Extends View props
| Prop | Type | Note |
|---|---|---|
| alt * | string | |
| asChild | boolean | (optional) |
Image
Extends Image props except alt
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |
Fallback
Extends View props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |