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).
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.

Storybook​

Live examples coming soon via Storybook.