Avatar

Data Display

Avatar

Circular avatar that falls back to initials or icons when images fail.

Usage

Represent people, organizations, or shared resources in lists and detail views.

Highlights

• Automatic initials extraction with emoji support
• Icon fallback for service badges

When to use it

• User data includes optional profile imagery.
• You need deterministic placeholders for offline usage.

Related components

BadgeListItemChip

Examples

Default

Preview (Web)

import { Avatar } from 'react-native-molecules/components/Avatar';

export default function Example() {
  const source = {
      uri: 'https://www.eyerys.com/sites/default/files/mark_zuckerberg.jpg'
  };

  return <Avatar size={60} label="Thet Aung" source={source} />;
}

Prop	Type	Default	Description
source	ImageSourcePropType | undefined	—	—
iconName	string | undefined	—	Will be used as fallback if source is nullish or image doesn't load
iconType	"material-community" | "feather" | undefined	—	—
iconProps	Omit<IconProps, "ref" | "name" | "type"> | undefined	—	—
label	string | undefined	—	Will be used as fallback if link and iconName aren't passed
labelProps	Omit<TextProps, "children"> | undefined	—	—
imageProps	Omit<ImageProps, "source"> | undefined	—	—
color	string | undefined	—	Color of the Avatar Will not be visible if there's an image unless the image has transparency Can be color string or token
size	string | number | undefined	—	Size of the Avatar Can be a number of a token

Defined in react-native-molecules/components/Avatar