Profile Settings
Profile Header
Displays the signed-in user’s avatar, name, email, and membership date. All data is synced automatically from Account Settings - there is nothing to configure here except layout and colors.
Place it above Account Settings for a complete profile page. Drop it anywhere you want to greet the signed-in user by name.
Avatar left with text to the right, or avatar centred above the text.
Builder canvas shows prop defaults - no real user needed to design the screen.
Four things worth knowing
BuilderProfileHeader reads the user’s live profile from the same backend source as Account Settings. It does not manage uploads or edits - that all happens inside Account Settings. The header simply reflects the current state of the profile.
Avatar, name, and email
Renders the user’s profile picture, display name, and email address. Each element can be individually toggled off via a boolean prop.
Subtitle - “Member since”
Instead of a static label, the subtitle shows when the user created their account - e.g. Member since Apr 2024. Updates automatically from the profile’s memberSince field. No manual configuration required.
Avatar managed by Account Settings
The avatar is uploaded and managed inside Account Settings. Profile Header picks up the same URL automatically via the profile subscription - there is no separate photo picker here.
Display-only - no navigation to wire
The header is read-only. Navigation to the settings screen belongs in the app’s navigation structure. Add Account Settings on the same or a linked screen so the user has a way to edit their details.
Find it, drop it, edit the schedule
Where to find itAdd it to any screen
- Component picker → Profile Settings → Profile Header.
- Place it at the top of your settings or profile screen.
- Display-only - no navigation props to wire up.
Before you publishThree things to check
- Add Account Settings on the same screen or a linked screen so users can edit their details.
- Choose Horizontal for most screens; use Vertical for centered hero-style headers.
- Adjust
nameColor,emailColor, andsubtitleColorto match your brand palette.
Layout, visibility, and colors
Every prop below is set directly in the property panel. The defaults are designed to work out of the box - only adjust what you need.
| Prop | Default | Description |
|---|---|---|
layout | ’horizontal’ | horizontal - avatar on the left, text to the right. vertical - avatar centred above the text. |
showAvatar | true | Show or hide the avatar circle. |
showEmail | true | Show or hide the email line. |
showSubtitle | true | Show or hide the “Member since” line. |
backgroundColor | #FFFFFF | Background of the header card. |
nameColor | #1a1a1a | User name text color. |
emailColor | #666666 | Email text color. |
subtitleColor | #007AFF | ”Member since” text color. |
Make it yours
The following props were intentionally removed from the builder editor. They are fixed by design - adjusting them per-placement would create inconsistency across screens.
| Removed prop | Why |
|---|---|
avatarUrl / avatar upload | Avatar is managed in Account Settings. The header listens to the same profile subscription - no separate upload needed. |
| Avatar size, name font size, email font size | Fixed defaults look correct across all screen sizes. Not meant to be configured per-placement. |
showVerifiedBadge | Verified state is determined by the account, not something a builder should manually toggle per-screen. |
| Subtitle icon | Removed to keep the header clean. The “Member since” label provides enough context without an icon. |
| Settings button | Navigation to the settings screen belongs in the app’s navigation structure, not in the header widget. |
Common mistakes to avoid
It updates when Account Settings saves
Profile Header subscribes to profile change events. Users will see their updated name, photo, or subtitle reflected here immediately after saving in Account Settings - no reload needed.
Canvas shows fallback data, not real profiles
On the builder canvas the component shows placeholder values. Switch to preview mode or deploy to see live profile data pulled from the backend.
Always pair with Account Settings
Profile Header is display-only. Without Account Settings on the same or a linked screen, users have no way to update their name, avatar, or email.
Vertical layout for hero screens
Use vertical for full-width profile hero areas. Stick with horizontal for standard list-style settings screens where vertical space is limited.