This is the pre-release documentation for gluestack-ui with NativeWind (alpha) version. For @gluestack-ui/themed(stable) documentation, refer to the latest release (v1).
This is an illustration of Avatar component.
size
<Avatar size="md" className="bg-primary-600">
<AvatarFallbackText>Sandeep Srivastava</AvatarFallbackText>
</Avatar>

Installation

Run the following command:

npx gluestack-ui add avatar

API Reference

To use this component in your project, include the following import statement in your file.
import {
Avatar,
AvatarBadge,
AvatarFallbackText,
AvatarImage,
} from "@/components/ui/avatar"
IOS: It is highly recommended to use <AvatarFallbackText /> before <AvatarImage /> to avoid indexing issues in IOS.
export default () => (
<AvatarGroup>
<Avatar>
<AvatarFallbackText />
<AvatarImage />
<AvatarBadge />
</Avatar>
</AvatarGroup>
)

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.

Props

Avatar component is created using View component from react-native. It extends all the props supported by React Native View, utility props and the props mentioned below.

Avatar

Name
Value
Default
size
xs | sm | md | lg | xl | 2xl
md

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 className="bg-indigo-600">
<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 className="bg-orange-600">
<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 className="bg-indigo-600">
{/* User is imported from 'lucide-react-native' */}
<Icon as={User} size="lg" />
</Avatar>
<VStack>
<Heading size="sm">Ronald Richards</Heading>
<Text size="sm">Nursing Assistant</Text>
</VStack>
</HStack>
<HStack space="md">
<Avatar className="bg-pink-600">
{/* User is imported from 'lucide-react-native' */}
<Icon as={User} 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",
}}
/>
<AvatarBadge />
</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: "bg-emerald-600",
},
{
src: "https://example.com.jpg",
alt: "Arjun Kapoor",
color: "bg-cyan-600",
},
{
src: "https://example.com.jpg",
alt: "Ritik Sharma ",
color: "bg-indigo-600",
},
{
src: "https://example.com.jpg",
alt: "Akhil Sharma",
color: "bg-gray-600",
},
{
src: "https://example.com.jpg",
alt: "Rahul Sharma ",
color: "bg-red-400",
},
]
const extraAvatars = avatars.slice(3)
const remainingCount = extraAvatars.length
return (
<AvatarGroup>
{avatars.slice(0, 3).map((avatar, index) => {
return (
<Avatar
key={index}
size="lg"
className={"border-2 border-outline-0 " + avatar.color}
>
<AvatarFallbackText>{avatar.alt}</AvatarFallbackText>
</Avatar>
)
})}
<Avatar size="lg">
<AvatarFallbackText>{"+ " + remainingCount + ""}</AvatarFallbackText>
</Avatar>
</AvatarGroup>
)
}

Avatar Group (Without Badge)

An Avatar Group component without badges organizes multiple avatars in a visually cohesive manner, offering a streamlined display of user or entity representations without additional visual indicators or badges within a user interface.
<AvatarGroup>
<Avatar size="md">
<AvatarFallbackText>John Doe</AvatarFallbackText>
<AvatarImage
source={{
uri: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",
}}
/>
</Avatar>
<Avatar size="md">
<AvatarFallbackText>John Doe</AvatarFallbackText>
<AvatarImage
source={{
uri: "https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
}}
/>
</Avatar>
<Avatar size="md">
<AvatarFallbackText>John Doe</AvatarFallbackText>
<AvatarImage
source={{
uri: "https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",
}}
/>
</Avatar>
<Avatar size="md">
<AvatarFallbackText>John Doe</AvatarFallbackText>
<AvatarImage
source={{
uri: "https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
}}
/>
</Avatar>
</AvatarGroup>

Avatar Group (with Badge)

An Avatar Group component with badges presents a collection of avatars with accompanying badges, providing visual indicators or additional information associated with each user or entity representation within a user interface.
<AvatarGroup>
<Avatar size="md">
<AvatarFallbackText>John Doe</AvatarFallbackText>
<AvatarImage
source={{
uri: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",
}}
/>
<AvatarBadge />
</Avatar>
<Avatar size="md">
<AvatarFallbackText>John Doe</AvatarFallbackText>
<AvatarImage
source={{
uri: "https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
}}
/>
<AvatarBadge />
</Avatar>
<Avatar size="md">
<AvatarFallbackText>John Doe</AvatarFallbackText>
<AvatarImage
source={{
uri: "https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",
}}
/>
<AvatarBadge />
</Avatar>
<Avatar size="md">
<AvatarFallbackText>John Doe</AvatarFallbackText>
<AvatarImage
source={{
uri: "https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
}}
/>
<AvatarBadge />
</Avatar>
</AvatarGroup>

Custom

A custom Avatar component with text allows for personalized user or entity representations by combining customized visuals, such as an image or icon, with accompanying text, providing a unique and identifiable presentation within a user interface.
<VStack space="2xl">
<HStack space="md">
<Avatar size="md" className="bg-indigo-300 border-2 border-indigo-600">
{/* User is imported from 'lucide-react-native' */}
<Icon as={User} size="xl" className="text-indigo-600" />
</Avatar>
<VStack>
<Heading size="sm">Ronald Richards</Heading>
<Text size="sm">Nursing Assistant</Text>
</VStack>
</HStack>
<HStack space="md">