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​

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

Props​

PropData TypeDefault ValueDescription
ExtendsPartial<ImageProps>--Inherits properties from Partial<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.
icon(size: number) => ReactNode--Set a custom icon for Avatar
onPress() => void--On press callback