Avatar

The Avatar component is a versatile UI element representing a user with profile pictures, initials, or a fallback icon. It adds a personal touch to the user interface, making it more engaging.
Installation
API Reference
This is an illustration of Avatar component.
size
<Avatar size="md">
<AvatarFallbackText>Sandeep Srivastava</AvatarFallbackText>
</Avatar>

Installation

Step 1: Install the following dependencies:

npm i @gluestack-ui/avatar

Step 2: Copy and paste the following code into your project.

import { createAvatar } from "@gluestack-ui/avatar"
import { styled } from "@gluestack-style/react"
import { View, Text, Image } from "react-native"
const StyledRoot = styled(
View,
{
borderRadius: "$full",
justifyContent: "center",
alignItems: "center",
position: "relative",
bg: "$primary600",
variants: {
size: {
xs: {
w: "$6",
h: "$6",
_badge: {
w: "$2",
h: "$2",
},
_image: {
w: "$full",
h: "$full",
},
_text: {
props: { size: "2xs" },
},
},
sm: {
w: "$8",
h: "$8",
_badge: {
w: "$2",
h: "$2",
},
_image: {
w: "$full",
h: "$full",
},
_text: {
props: { size: "xs" },
},
},
md: {
w: "$12",
h: "$12",
_badge: {
w: "$3",
h: "$3",
},
_image: {
w: "$full",
h: "$full",
},
_text: {
props: { size: "md" },
},
},
lg: {
w: "$16",
h: "$16",
_badge: {
w: "$4",
h: "$4",
},
_image: {
w: "$full",
h: "$full",
},
_text: {
props: { size: "xl" },
},
},
xl: {
w: "$24",
h: "$24",
_badge: {
w: "$6",
h: "$6",
},
_image: {
w: "$full",
h: "$full",
},
_text: {
props: { size: "3xl" },
},
},
"2xl": {
w: "$32",
h: "$32",
_badge: {
w: "$8",
h: "$8",
},
_image: {
w: "$full",
h: "$full",
},
_text: {
props: { size: "5xl" },
},
},
},
},
defaultProps: {
size: "md",
},
},
{
descendantStyle: ["_badge", "_text", "_image"],
ancestorStyle: ["_avatar"],
}
)
const StyledBadge = styled(
View,
{
w: "$5",
h: "$5",
bg: "$success500",
borderRadius: "$full",
position: "absolute",
right: 0,
bottom: 0,
borderColor: "white",
borderWidth: 2,
},
{
ancestorStyle: ["_badge"],
}
)
const StyledGroup = styled(
View,
{
flexDirection: "row-reverse",
position: "relative",
_avatar: {
ml: -10,
},
},
{
descendantStyle: ["_avatar"],
}
)
const StyledImage = styled(
Image,
{ w: "$full", h: "$full", borderRadius: "$full", position: "absolute" },
{
ancestorStyle: ["_image"],
}
)
const StyledFallbackText = styled(
Text,
{
color: "$text0",
fontWeight: "$semibold",
props: {
size: "xl",
},
overflow: "hidden",
textTransform: "uppercase",
_web: {
cursor: "default",
},
},
{
ancestorStyle: ["_text"],
} as const
)
const AccessbileAvatar = createAvatar({
Root: StyledRoot,
Badge: StyledBadge,
Group: StyledGroup,
Image: StyledImage,
FallbackText: StyledFallbackText,
})
export const Avatar = AccessbileAvatar
export const AvatarBadge = AccessbileAvatar.Badge
export const AvatarGroup = AccessbileAvatar.Group
export const AvatarImage = AccessbileAvatar.Image
export const AvatarFallbackText = AccessbileAvatar.FallbackText

Step 3: Update the import paths to match your project setup.

API Reference

Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

Avatar

It inherits all the properties of React Native's View component.

AvatarGroup

It also inherits all the properties of React Native's View component.

AvatarImage

It inherits all the properties of React Native's Image component.

AvatarFallbackText

It inherits all the properties of React Native's Text component.

AvatarBadge

It inherits all the properties of React Native's View component.

Features

  • Returns a fallback to FallbackText if given an invalid image source.
Edit this page on GitHub