rslabdocs

Avatar

An image with an initials fallback, and a status dot that pulses gently when online.

ReanimatedNativeWindSource

Prerequisites

Just Reanimated for the status dot's pulse.


npx expo install react-native-reanimated

Install


npx @rslab/cli add avatar

Usage


import { Avatar } from '@/components/ui/Avatar';



<Avatar source={{ uri: 'https://i.pravatar.cc/150?img=12' }} name="Rayan Selmi" />

<Avatar name="Maya Chen" size={56} status="online" />

<Avatar name="Jon Doe" status="busy" />

Omit source (or let it fail to load) and the circle falls back to up to two initials derived from name.

Props

PropTypeDefault
source?
{ uri: string }
-

A remote image; omit to always show initials.

name?
string
-

Used to derive up to 2 initials for the fallback circle.

size?
number
40

Pixel diameter. The circle, initials font size, and status dot all scale off this one value.

status?
'online''offline''away''busy'
-

Omit for no badge.

className?
string
-

Extend or override the outer circle's wrapper.

See exactly how this works with an RSLAB subscription.

Get Pro

On this page