Avatar

Avatar Primitive

Demo

An image component featuring an alternative representation for depicting the user.

Installation

CLI

npx @react-native-reusables/cli@latest add avatar

Manual

Dependency

Before copy/pasting, add the avatar primitive to your project.

Copy/paste the following code to ~/components/ui/avatar.tsx:

Usage

import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar';
import { Text } from '~/components/ui/text';

const GITHUB_AVATAR_URI = 'https://github.com/mrzachnugent.png';

function Example() {
  return (
     <Avatar alt="Zach Nugent's Avatar">
        <AvatarImage source={{ uri: GITHUB_AVATAR_URI }} />
        <AvatarFallback>
          <Text>ZN</Text>
        </AvatarFallback>
      </Avatar>
  );
}

Props

Avatar

Extends View props

Prop	Type	Note
alt *	string
asChild	boolean	(optional)

AvatarImage

Extends Image props except alt

Prop	Type	Note
asChild	boolean	(optional)

AvatarFallback

Extends View props

Prop	Type	Note
asChild	boolean	(optional)