REACT-NATIVES
WIRED FOR SPEED
react-natives v2.2.0
Theme
Light
Dark
Get Started
Menu
Components
Core Primitives
Avatar
A compound component for displaying user profile images, initials fallback, online badges, and grouped avatar stacks.
Example
Preview
Code
Props
Avatar Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes to apply to the avatar container.
size
'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
'md'
Controls the diameter of the avatar.
AvatarImage Props
Prop
Type
Default
Description
source *
ImageSourcePropType | { uri: string }
—
The image source for the avatar.
alt
string
—
Accessible text describing the avatar image.
className
string
—
NativeWind utility classes for the avatar image.
AvatarFallbackText Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the fallback initials text.
AvatarBadge Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the status badge overlay.
AvatarGroup Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the avatar group container.
max
number
—
Maximum number of avatars to display before showing an overflow indicator.
Usage Guidelines
When to use
Use Avatar to represent a user or entity with a profile photo or initials fallback.
Best practices
•
Provide AvatarFallbackText as a fallback when the image fails to load.
•
Use AvatarGroup with a max prop to prevent overcrowding.
•
Use AvatarBadge to indicate online/offline status.
Accessibility
Avatar images should include an alt prop on AvatarImage. Fallback text is automatically accessible.
Related Components
Image
A styled image component with built-in size presets and border-radius options, requiring an accessible alt label.
Badge
A compound component for displaying short status labels, counts, or tags with semantic color and variant options.
Card
A compound container component with header, body, and footer sections for grouping related content.
React-Natives
A comprehensive React Native component library.
Documentation
Getting Started
Components
Theming
Community
GitHub
Discord
Twitter
Blog
Support
FAQ
Contact
Contributing
License
© 2026 React-Natives. Wired by WireServers-UI.