Avatar | NativeBase

NativeBase

3.4.x

⌘

Hire us

NativeBase

Introduction

Getting Started

Installation

Setup NativeBase Provider

Resources

Contribution

Core Concepts

Utility First

Utility Props Specificity

New

Design Tokens

Pseudo Props: Overview

New

Pseudo Props: Dos & Don'ts

Features

Color mode (Dark Mode)

Theme

Customizing Components

Making components dark mode compatible

Layout

Forms

Data Display

Feedback

Typography

Overlay

Disclosure

Media and Icons

Transition

Others

ReactNative Components

Hooks

Examples

Recipes

Designs

Forms

Layout

Migration

Upgrading to 3.2.0 from 3.x

Components Migration

If you are starting a new project, please try gluestack-ui for better performance and new design.

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.

Copy
import { Avatar } from 'native-base';

Examples

Basic


Playground
const Example = () => {
  return <HStack space={2}>
      <Avatar bg="green.500" source={{
      uri: "https://pbs.twimg.com/profile_images/1188747996843761665/8CiUdKZW_400x400.jpg"
    }}>
        SS
      </Avatar>
      <Avatar bg="cyan.500" source={{
      uri: "https://pbs.twimg.com/profile_images/1177303899243343872/B0sUJIH0_400x400.jpg"
    }}>
        GG
      </Avatar>
      <Avatar bg="indigo.500" source={{
      uri: "https://pbs.twimg.com/profile_images/1352844693151731713/HKO7cnlW_400x400.jpg"
    }}>
        RS
      </Avatar>
      <Avatar bg="amber.500" source={{
      uri: "https://pbs.twimg.com/profile_images/1309797238651060226/18cm6VhQ_400x400.jpg"
    }}>
        AK
      </Avatar>
    </HStack>;
};const Example = () => {
  return <HStack space={2}>
      <Avatar bg="green.500" source={{
      uri: "https://pbs.twimg.com/profile_images/1188747996843761665/8CiUdKZW_400x400.jpg"
    }}>
        SS
      </Avatar>
      <Avatar bg="cyan.500" source={{
      uri: "https://pbs.twimg.com/profile_images/1177303899243343872/B0sUJIH0_400x400.jpg"
    }}>
        GG
      </Avatar>
      <Avatar bg="indigo.500" source={{
      uri: "https://pbs.twimg.com/profile_images/1352844693151731713/HKO7cnlW_400x400.jpg"
    }}>
        RS
      </Avatar>
      <Avatar bg="amber.500" source={{
      uri: "https://pbs.twimg.com/profile_images/1309797238651060226/18cm6VhQ_400x400.jpg"
    }}>
        AK
      </Avatar>
    </HStack>;
};

Sizes


Playground
const Example = () => {
  return <Center>
      <Heading mt={3} mb={8}>
        Sizes
      </Heading>
      <VStack space={2} alignItems={{
      base: "center",
      md: "flex-start"
    }}>
        <Avatar bg="green.500" alignSelf="center" size="xs" source={{
        uri: "https://pbs.twimg.com/profile_images/1188747996843761665/8CiUdKZW_400x400.jpg"
      }}>
          SS
        </Avatar>
        <Avatar bg="cyan.500" alignSelf="center" size="sm" source={{
        uri: "https://pbs.twimg.com/profile_images/929409889788510208/gRr2f7rZ_400x400.jpg"
      }}>
          HS
        </Avatar>
        <Avatar bg="indigo.500" alignSelf="center" size="md" source={{
        uri: "https://pbs.twimg.com/profile_images/1352844693151731713/HKO7cnlW_400x400.jpg"
      }}>
          RS
        </Avatar>
        <Avatar alignSelf="center" bg="amber.500" size="lg" source={{
        uri: "https://pbs.twimg.com/profile_images/1309797238651060226/18cm6VhQ_400x400.jpg"
      }}>
          AK
        </Avatar>
        <Avatar bg="pink.600" alignSelf="center" size="xl" source={{
        uri: "https://pbs.twimg.com/profile_images/1177303899243343872/B0sUJIH0_400x400.jpg"
      }}>
          GG
        </Avatar>
        <Avatar bg="purple.600" alignSelf="center" size="2xl" source={{
        uri: "https://pbs.twimg.com/profile_images/1320985200663293952/lE_Kg6vr_400x400.jpg"
      }}>
          RB
        </Avatar>
      </VStack>
    </Center>;
};const Example = () => {
  return <Center>
      <Heading mt={3} mb={8}>
        Sizes
      </Heading>
      <VStack space={2} alignItems={{
      base: "center",
      md: "flex-start"
    }}>
        <Avatar bg="green.500" alignSelf="center" size="xs" source={{
        uri: "https://pbs.twimg.com/profile_images/1188747996843761665/8CiUdKZW_400x400.jpg"
      }}>
          SS
        </Avatar>
        <Avatar bg="cyan.500" alignSelf="center" size="sm" source={{
        uri: "https://pbs.twimg.com/profile_images/929409889788510208/gRr2f7rZ_400x400.jpg"
      }}>
          HS
        </Avatar>
        <Avatar bg="indigo.500" alignSelf="center" size="md" source={{
        uri: "https://pbs.twimg.com/profile_images/1352844693151731713/HKO7cnlW_400x400.jpg"
      }}>
          RS
        </Avatar>
        <Avatar alignSelf="center" bg="amber.500" size="lg" source={{
        uri: "https://pbs.twimg.com/profile_images/1309797238651060226/18cm6VhQ_400x400.jpg"
      }}>
          AK
        </Avatar>
        <Avatar bg="pink.600" alignSelf="center" size="xl" source={{
        uri: "https://pbs.twimg.com/profile_images/1177303899243343872/B0sUJIH0_400x400.jpg"
      }}>
          GG
        </Avatar>
        <Avatar bg="purple.600" alignSelf="center" size="2xl" source={{
        uri: "https://pbs.twimg.com/profile_images/1320985200663293952/lE_Kg6vr_400x400.jpg"
      }}>
          RB
        </Avatar>
      </VStack>
    </Center>;
};

Fallbacks


Playground
const Example = () => {
  return <HStack mx={{
    base: "auto",
    md: "0"
  }} space={2}>
      <Avatar bg="green.500" mr="1" source={{
      uri: "https://bit.ly/broken-link"
    }}>
        RS
      </Avatar>
      <Avatar bg="amber.500" source={{
      uri: "https://bit.ly/broken-link"
    }}>
        MR
      </Avatar>
      <Avatar bg="lightBlue.400" source={{
      uri: "https://bit.ly/broken-link"
    }}>
        --
      </Avatar>
    </HStack>;
};const Example = () => {
  return <HStack mx={{
    base: "auto",
    md: "0"
  }} space={2}>
      <Avatar bg="green.500" mr="1" source={{
      uri: "https://bit.ly/broken-link"
    }}>
        RS
      </Avatar>
      <Avatar bg="amber.500" source={{
      uri: "https://bit.ly/broken-link"
    }}>
        MR
      </Avatar>
      <Avatar bg="lightBlue.400" source={{
      uri: "https://bit.ly/broken-link"
    }}>
        --
      </Avatar>
    </HStack>;
};

Avatar Badge


Playground
const Example = () => {
  return <HStack mx={{
    base: "auto",
    md: "0"
  }} space={2}>
      <Avatar bg="lightBlue.400" source={{
      uri: "https://alpha.nativebase.io/img/native-base-icon.png"
    }}>
        NB
        <Avatar.Badge bg="green.500" />
      </Avatar>
      <Avatar bg="amber.500" source={{
      uri: "https://alpha.nativebase.io/img/native-base-icon.png"
    }}>
        NB
        <Avatar.Badge bg="green.500" />
      </Avatar>
    </HStack>;
};const Example = () => {
  return <HStack mx={{
    base: "auto",
    md: "0"
  }} space={2}>
      <Avatar bg="lightBlue.400" source={{
      uri: "https://alpha.nativebase.io/img/native-base-icon.png"
    }}>
        NB
        <Avatar.Badge bg="green.500" />
      </Avatar>
      <Avatar bg="amber.500" source={{
      uri: "https://alpha.nativebase.io/img/native-base-icon.png"
    }}>
        NB
        <Avatar.Badge bg="green.500" />
      </Avatar>
    </HStack>;
};

Avatar Group


Playground
const Example = () => {
  return <Avatar.Group size="lg" max={3}>
      <Avatar bg="green.500" source={{
      uri: "https://pbs.twimg.com/profile_images/1369921787568422915/hoyvrUpc_400x400.jpg"
    }}>
        SS
      </Avatar>
      <Avatar bg="lightBlue.500" source={{
      uri: "https://pbs.twimg.com/profile_images/1309797238651060226/18cm6VhQ_400x400.jpg"
    }}>
        AK
      </Avatar>
      <Avatar bg="indigo.500" source={{
      uri: "https://pbs.twimg.com/profile_images/1352844693151731713/HKO7cnlW_400x400.jpg"
    }}>
        RS
      </Avatar>
      <Avatar bg="amber.600" source={{
      uri: "https://pbs.twimg.com/profile_images/1320985200663293952/lE_Kg6vr_400x400.jpg"
    }}>
        MR
      </Avatar>
      <Avatar bg="emerald.600" source={{
      uri: "https://bit.ly/code-beast"
    }}>
        CB
      </Avatar>
      <Avatar bg="blue.600" source={{
      uri: "https://pbs.twimg.com/profile_images/1177303899243343872/B0sUJIH0_400x400.jpg"
    }}>
        GG
      </Avatar>
      <Avatar bg="black.600" source={{
      uri: "https://pbs.twimg.com/profile_images/1352844693151731713/HKO7cnlW_400x400.jpg"
    }}>
        RS
      </Avatar>
      <Avatar bg="blueGray.600" source={{
      uri: "https://pbs.twimg.com/profile_images/1320985200663293952/lE_Kg6vr_400x400.jpg"
    }}>
        MR
      </Avatar>
    </Avatar.Group>;
};const Example = () => {
  return <Avatar.Group size="lg" max={3}>
      <Avatar bg="green.500" source={{
      uri: "https://pbs.twimg.com/profile_images/1369921787568422915/hoyvrUpc_400x400.jpg"
    }}>
        SS
      </Avatar>
      <Avatar bg="lightBlue.500" source={{
      uri: "https://pbs.twimg.com/profile_images/1309797238651060226/18cm6VhQ_400x400.jpg"
    }}>
        AK
      </Avatar>
      <Avatar bg="indigo.500" source={{
      uri: "https://pbs.twimg.com/profile_images/1352844693151731713/HKO7cnlW_400x400.jpg"
    }}>
        RS
      </Avatar>
      <Avatar bg="amber.600" source={{
      uri: "https://pbs.twimg.com/profile_images/1320985200663293952/lE_Kg6vr_400x400.jpg"
    }}>
        MR
      </Avatar>
      <Avatar bg="emerald.600" source={{
      uri: "https://bit.ly/code-beast"
    }}>
        CB
      </Avatar>
      <Avatar bg="blue.600" source={{
      uri: "https://pbs.twimg.com/profile_images/1177303899243343872/B0sUJIH0_400x400.jpg"
    }}>
        GG
      </Avatar>
      <Avatar bg="black.600" source={{
      uri: "https://pbs.twimg.com/profile_images/1352844693151731713/HKO7cnlW_400x400.jpg"
    }}>
        RS
      </Avatar>
      <Avatar bg="blueGray.600" source={{
      uri: "https://pbs.twimg.com/profile_images/1320985200663293952/lE_Kg6vr_400x400.jpg"
    }}>
        MR
      </Avatar>
    </Avatar.Group>;
};

Props

Avatar

Avatar implements

source

The image source of the avatar.

Type:

ImageSourcePropType

size

The size of the avatar

Type: ResponsiveValue<number | "px" | "full" | "sm" | "6" | "2xs" | "8" | "xs" | "12" | "md" | "16" | "xl" | "24" | "32" | "2" | "0.5" | "4" | "3" | "lg" | "1" | "2xl" | "0" | "container" | "3xs" | "1.5" | ... 29 more ... | (string & {})>

Default: md

wrapperRef

ref to be attached to Avatar wrapper

Type: MutableRefObject<any>

Avatar.Group

Group implements