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

Run the following command:

npx gluestack-ui add avatar

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.

Examples

The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.

Avatar with letters

An Avatar component with text displays a stylized representation of a user or entity alongside accompanying text, providing a visual and textual identification within a user interface.
<VStack space="2xl">
<HStack space="md">
<Avatar bgColor="$indigo600">
<AvatarFallbackText>Ronald Richards</AvatarFallbackText>
<AvatarBadge $dark-borderColor="$black" />
</Avatar>
<VStack>
<Heading size="sm">Ronald Richards</Heading>
<Text size="sm">Nursing Assistant</Text>
</VStack>
</HStack>
<HStack space="md">
<Avatar bgColor="$orange600">
<AvatarFallbackText>Arlene McCoy</AvatarFallbackText>
</Avatar>
<VStack>
<Heading size="sm">Arlene McCoy</Heading>
<Text size="sm">Marketing Coordinator</Text>
</VStack>
</HStack>
</VStack>

Avatar with Icon

An Avatar component with an icon combines a graphical symbol or icon with a user or entity representation, providing a visually appealing and easily recognizable identification within a user interface.
<VStack space="2xl">
<HStack space="md">
<Avatar bgColor="$indigo600">
{/* User is imported from 'lucide-react-native' */}
<Icon as={User} color="white" size="lg" />
</Avatar>
<VStack>
<Heading size="sm">Ronald Richards</Heading>
<Text size="sm">Nursing Assistant</Text>
</VStack>
</HStack>
<HStack space="md">
<Avatar bgColor="$pink600">
{/* User is imported from 'lucide-react-native' */}
<Icon as={User} color="white" size="lg" />
</Avatar>
<VStack>
<Heading size="sm">Kevin James</Heading>
<Text size="sm">Web Designer</Text>
</VStack>
</HStack>
</VStack>

Avatar with Image

An Avatar component with an image incorporates a user or entity representation using a profile picture or image, adding a personalized touch and visual identification within a user interface.
<VStack space="2xl">
<HStack space="md">
<Avatar>
<AvatarFallbackText>SS</AvatarFallbackText>
<AvatarImage
source={{
uri: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60",
}}
/>
</Avatar>
<VStack>
<Heading size="sm">Ronald Richards</Heading>
<Text size="sm">Nursing Assistant</Text>
</VStack>
</HStack>
<HStack space="md">
<Avatar>
<AvatarFallbackText>SS</AvatarFallbackText>
<AvatarImage
source={{
uri: "https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60",
}}
/>
</Avatar>
<VStack>
<Heading size="sm">Arlene McCoy</Heading>
<Text size="sm">Marketing Coordinator</Text>
</VStack>
</HStack>
</VStack>

Avatar Group

The avatar group allows users to group avatars and display them in a horizontal or vertical row for better visual representation and functionality.
To reverse the order of avatars in case of multiple avatars use flexDirection="row" in <AvatarGroup>
function App() {
const avatars = [
{
src: "https://example.com.jpg",
alt: "Sandeep Srivastva",
color: "$emerald600",
},
{ src: "https://example.com.jpg", alt: "Arjun Kapoor", color: "$cyan600" },
{
src: "https://example.com.jpg",
alt: "Ritik Sharma ",
color: "$indigo600",
},
{ src: "https://example.com.jpg", alt: "Akhil Sharma", color: "$gray600" },
{ src: "https://example.com.jpg", alt: "Rahul Sharma ", color: "$red400" },
]
const extraAvatars = avatars.slice(3)
const remainingCount = extraAvatars.length
return (
<AvatarGroup>
{avatars.slice(0, 3).map((avatar