Enhance your UI with our React Native Avatar component. Explore gluestack's-ui Avatar for seamless design and customization. Check out the docs to add an Avatar component to your app! This is an illustration of Avatar component.

size

Installation

Run the following command:

npx gluestack-ui add avatar

API Reference

To use this component in your project, include the following import statement in your file.

import {
  Avatar,
  AvatarBadge,
  AvatarFallbackText,
  AvatarImage,
} from '@/components/ui/avatar';

Important Note

IOS: It is highly recommended to use

before

to avoid indexing issues in IOS.

export default () => (
  <AvatarGroup>
    <Avatar>
      <AvatarFallbackText />
      <AvatarImage />
      <AvatarBadge />
    </Avatar>
  </AvatarGroup>
);

Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

Avatar

It inherits all the properties of React Native's View component.

AvatarGroup

It also inherits all the properties of React Native's View component.

AvatarImage

It inherits all the properties of React Native's Image component.

AvatarFallbackText

It inherits all the properties of React Native's Text component.

AvatarBadge

It inherits all the properties of React Native's View component.

Features

Returns a fallback to FallbackText if given an invalid image source.

Props

Avatar component is created using View component from react-native. It extends all the props supported by React Native View, utility props and the props mentioned below.

Avatar

Prop	Type	Default	Description
size	xs \| sm \| md \| lg \| xl \| 2xl	md	Determines the size of the avatar.

Examples

The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.

Avatar with letters

An Avatar component with text displays a stylized representation of a user or entity alongside accompanying text, providing a visual and textual identification within a user interface.

Avatar with Icon

An Avatar component with an icon combines a graphical symbol or icon with a user or entity representation, providing a visually appealing and easily recognizable identification within a user interface.

Avatar with Image

An Avatar component with an image incorporates a user or entity representation using a profile picture or image, adding a personalized touch and visual identification within a user interface.

Avatar Group

The avatar group allows users to group avatars and display them in a horizontal or vertical row for better visual representation and functionality.

Important Note

To reverse the order of avatars in case of multiple avatars use

flexDirection="row"

Avatar Group (Without Badge)

An Avatar Group component without badges organizes multiple avatars in a visually cohesive manner, offering a streamlined display of user or entity representations without additional visual indicators or badges within a user interface.

Avatar Group (with Badge)

An Avatar Group component with badges presents a collection of avatars with accompanying badges, providing visual indicators or additional information associated with each user or entity representation within a user interface.

Custom

A custom Avatar component with text allows for personalized user or entity representations by combining customized visuals, such as an image or icon, with accompanying text, providing a unique and identifiable presentation within a user interface.

Fallback

Fallback text is shown when the image fails to load, the image is not available or the provided image url is not correct.

Edit this page on GitHub