AvatarHeader — React Native component

Installation

Install just this component (copies the source into your project, no npm dependency)

npx orn-ui add avatar-header

Or install the whole package and import it

pnpm add orn-ui
import { AvatarHeader } from 'orn-ui/avatar-header';

Depends on:core (theme + icons)

Usage

when to use — The header of a profile or a detail screen: avatar, title and one supporting line.
iconName / initials — Initials when there is a name; the icon when there is not.

Demo clip not recorded yet — see MEDIA.md

Variants

With initials

<AvatarHeader initials="JD" title="Jane Doe" subtitle="Customer since 2023" />

With icon

<AvatarHeader iconName="check" title="Order confirmed" subtitle="#A-10492" />

Custom iconColor

<AvatarHeader iconName="info" iconColor="#00cae1" title="Account details" />

Full demo source

const variants: VariantDef[] = [
  { label: 'With initials', content: <AvatarHeader initials="JD" title="Jane Doe" subtitle="Customer since 2023" /> },
  { label: 'With icon', content: <AvatarHeader iconName="check" title="Order confirmed" subtitle="#A-10492" /> },
  { label: 'Custom iconColor', content: <AvatarHeader iconName="info" iconColor="#00cae1" title="Account details" /> },
];
return <VariantList variants={variants} />;

Props

Name	Type	Default	Description
`iconName?`	`IconName`	—	Icon shown inside the circle. If omitted, `initials` are used.
`iconColor?`	`string`	—	—
`initials?`	`string`	—	Short text (e.g. 2 letters) shown when `iconName` is not passed.
`title`	`string`	—	—
`subtitle?`	`ReactNode`	—	—
`style?`	`StyleProp<ViewStyle>`	—	—