Version: 3.0.0-next.40

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#

Name Type Description Default
_text ITextProps Text styling for fallback text -
style any Style to be passed in rendered Image component -
source ImageSourcePropType The image source of the avatar. -
size string | number The size of the avatar md
wrapperRef any ref to be attached to Avatar wrapper -

Avatar implements Box

Avatar.Group#

Group implements Box

Avatar.Badge#

Badge implements Box