Skip to main content

Avatar

Component to show an image, initials or icon with different shapes.

Usage​

function AvatarUsage() {
  return (
    <View>
      <Avatar mode="circle" url="https://picsum.photos/200/300?random=1" />
    </View>
  )
}

Status​

AB
AB
AB
AB
AB
AB
function AvatarStatuses() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <Avatar status="primary" initials="AB" />
      <Avatar status="accent" initials="AB" />
      <Avatar status="success" initials="AB" />
      <Avatar status="info" initials="AB" />
      <Avatar status="warning" initials="AB" />
      <Avatar status="error" initials="AB" />
    </View>
  )
}

Size​

A
A
A
function AvatarSizes() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <Avatar size="small" initials="A" />
      <Avatar size="medium" initials="A" />
      <Avatar size="large" initials="A" />
    </View>
  )
}

Modes​

Mode control the shape of the Avatar component.

  • circle - circular Avatar shape
  • round - rounded shaped with default border radius
  • square - square shape with 0 border radius

function AvatarModes() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <Avatar mode="circle" url="https://picsum.photos/200/300?random=1" />
      <Avatar mode="round" url="https://picsum.photos/200/300?random=1" />
      <Avatar mode="square" url="https://picsum.photos/200/300?random=1" />
    </View>
  )
}

Modes and Sizes​

AB
AB
AB
AB
AB
AB
AB
AB
AB

Img Component​

Allows using custom image components (e.g., FastImage, ExpoImage) inside the Avatar.

function AvatarImgComponent() {
  return (
    <View>
      <Avatar
        imgComponent={Image}
        url="https://picsum.photos/seed/picsum/200/300"
      />
    </View>
  )
}

Fallback Icon​

Renders a fallback icon or custom ReactNode when the main image fails to load.

function AvatarFallbackIcon() {
  return (
    <View>
      <Avatar
        url="https://www.example.com/images/123.jpg"
        // eslint-disable-next-line react/no-unstable-nested-components
        fallbackIcon={(size) => <Icon name="add" size={size} />}
      />
    </View>
  )
}

Fallback Source​

Displays a fallback image (like a placeholder/source) if the image fails to load.

function AvatarFallbackSource() {
  return (
    <View>
      <Avatar
        url="https://www.example.com/images/123.jpg"
        fallbackSource={{uri: 'https://picsum.photos/200/300?random=1'}}
      />
    </View>
  )
}

Custom​

function AvatarCustom() {
  return (
    <View>
      <Avatar
        url="https://picsum.photos/200/300?random=1"
        defaultSource={{uri: 'https://picsum.photos/200/300?random=1'}}
        style={{alignSelf: 'center', borderWidth: 2, borderColor: 'yellow'}}
      />
    </View>
  )
}

Props​

PropData TypeDefault ValueDescription
ExtendsImageProps--Inherits properties from ImageProps
sizenumber | BlossomSize--Size of the AvatarIt can be either number or string ('small' | 'medium' | 'large')
mode"circle" | "round" | "square"--Control the shape of the Avatar
urlstring--Shorthand for the Source.uri of the image propsHere You can directly pass the url of the image If not provided, it will fallback to showing initials or an icon.
initialsstring--Show initials inside the AvatarIf not provided, it will fallback to showing an icon.
initialStyleStyleProp<TextStyle>--Initials Text style to control the font size etc.
containerStyleStyleProp<ViewStyle>--Container style for the Avatar component
icon(size: number) => ReactNode--Set a custom icon for Avatar
fallbackIcon(size: number) => ReactNode--Set a custom fallback icon for Avatar
fallbackSourceImageSourcePropType--Fallback source for the Avatar
imgComponentComponentType<ImageProps>--Custom image component for Avatar
onPress() => void--On press callback