Profile App Bar

Good morningLena Moreau

Balance$4,820+2.1%

Spent$612−4%

The home of an app: who’s signed in on the left, notifications and menu on the right. The notifications button carries a counter.

Installation

npx axiom add profile-app-bar

pnpm dlx axiom add profile-app-bar

yarn dlx axiom add profile-app-bar

bun x axiom add profile-app-bar

Also copies: app-bar, avatar, icon-button, tappable, title, text and their dependencies. The file lands in components/compositions/profile-app-bar.tsx. It brings no tokens of its own.

Usage

import { ProfileAppBar } from "@/components/compositions/profile-app-bar";

<ProfileAppBar
	name={user.firstName}
	avatar={{ uri: user.avatarUrl }}
	greeting={greetingFor(new Date())}
	onProfilePress={() => router.push("/account")}
>
	<IconButton
		icon="notification"
		badge={unreadCount}
		accessibilityLabel="Notifications"
		onPress={() => router.push("/notifications")}
	/>
	<IconButton icon="menu" accessibilityLabel="Menu" onPress={openMenu} />
</ProfileAppBar>;

The actions are the bar’s children: write the buttons you need, as many as fit. icon takes a name from your icon registry: add notification and menu to icons.tsx first. The greeting is yours to compute, in the user’s language: the bar only shows it.

Props

Prop	Type	Default	Description
`name`	`string`	—	The signed-in user. Gives the avatar its initials when there is no photo.
`avatar`	`ImageSourcePropType`	—	The photo, in an `sm` Avatar.
`greeting`	`string`	—	Small line above the name: `"Good morning"`.
`onProfilePress`	`() => void`	—	Makes the avatar and the name one pressable, to open the profile or an account switcher.
`profileLabel`	`string`	`"Profile"`	Read before the name when pressable: “Profile, Lena Moreau”.
`children`	`ReactNode`	—	Buttons at the end, such as notifications or a menu. Rendered as written.
`bordered`	`boolean`	`false`	Hairline under the bar.
`safeArea`	`boolean`	`true`	Adds the top safe-area inset. `false` inside Scaffold.
`style`	`StyleProp<ViewStyle>`	—	Styles for the bar.

Accessibility

The avatar, the greeting and the name are one element. Pressable, it’s a button: “Profile, Lena Moreau”. Otherwise it reads “Good morning, Lena Moreau”. An action with a counter reads it after its label: “Notifications, 3”.

Built with

AppBar: the bar, its safe area and its slots.
Avatar: the photo or the initials.
Title and Text: the name and the greeting.
Tappable: the pressable identity.
IconButton and Badge: the actions and their counters.

Used in

No block uses Profile App Bar yet.

Search App Bar
Stats Card: the cards under the bar in the preview.
Compositions