Version: 3.0.0-next.36

Avatar

Avatar component is used to represent a user and it can display a profile picture, initials or a fallback icon.

Import#

NativeBase exports 3 avatar-related components:

  • Avatar: An image that represents the user.
  • Avatar.Badge: A wrapper that displays its content on the bottom right corner of the avatar.
  • Avatar.Group: A wrapper to stack multiple avatars together.
import { Avatar } from 'native-base';

Examples#

Basic#

Sizes#

Fallbacks#

Avatar Badge#

Avatar Group#

Props#

Avatar#

NameTypeDescriptionDefault
size2xl, xl, lg, md, sm, xsThe size of the avatar.md
sourceImageSourcePropTypeThe image source of the avatar.-
_textTextPropsText styling for fallback Text.-

Avatar composes the Box component.

Avatar.Group#

NameTypeDescriptionDefault
maxnumberThe max number of avatar.-
spacingnumberThe distance each avatar.-4

Avatar.Badge#

Avatar.Badge composes the Box component.