Skip to main content

Avatar

Avatar renders an image styled as a user avatar. It supports multiple shapes and sizes for use in profiles, lists, and comments.

Import​

import { Avatar } from '@ui-kitten/components';

Basic Usage​

import React from 'react';
import { Layout, Avatar } from '@ui-kitten/components';

const AvatarExample = () => (
  <Layout style={{ flex: 1, padding: 16, flexDirection: 'row', gap: 8 }}>
    <Avatar
      source={require('./assets/avatar.png')}
      shape="round"
      size="giant"
    />
    <Avatar
      source={{ uri: 'https://example.com/avatar.jpg' }}
      shape="rounded"
      size="medium"
    />
    <Avatar
      source={require('./assets/avatar.png')}
      shape="square"
      size="small"
    />
  </Layout>
);

Props​

PropertyTypeDefaultDescription
sourceImageSourcePropType-Image source (local require or remote URI).
namestringundefinedShown as initials (first letter of the first two words) when there is no source or the image fails to load; also the accessible name.
status'basic' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'control''basic'Background and text colours of the initials frame.
shape'round' | 'rounded' | 'square''round'Shape of the avatar.
size'tiny' | 'small' | 'medium' | 'large' | 'giant''medium'Size of the avatar.
styleImageStyleundefinedAdditional styles applied to the avatar image.
appearance'default''default'Appearance defined in the Eva mapping.
ImageComponentComponentTypeImageComponent used to render the image. Pass a custom one to use a caching or SVG image library.

Avatar also accepts all props of the component given to ImageComponent, which by default is React Native's Image.

Initials​

Without a source, or when the image fails to load, name renders as initials in a frame of the same size and shape, coloured by status:

<Avatar name="Jane Doe" status="primary" size="large" />
<Avatar name="Jane Doe" source={{ uri: 'https://example.com/avatar.jpg' }} />

The text size per avatar size and the status colours come from the Avatar mapping (textFontSize, backgroundColor, textColor).

Storybook​

Live examples coming soon via Storybook.