REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

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