Profile
Account profile for any app: a centred header (avatar, name, badge, email · phone, Edit profile), a highlights strip, then iOS-style grouped rows for personal details, account, preferences and support, and a sign-out button. Monochrome by default; sections rise in smoothly and respect Reduce Motion.
Installation
Copies the screen into src/components/blocks along with every component it uses.
Props
| Prop | Type | Default |
|---|---|---|
| user Who the account belongs to. subtitle is a muted line (e.g. 'Member since 2023'); badge shows a chip next to the name (e.g. 'Pro'). | { name, email?, phone?, avatar?, subtitle?, badge? } | Aarav Mehta |
| stats Highlights strip under the header. Pass [] to hide. | { label, value, onPress? }[] | Orders / Wishlist / Reviews |
| details “Personal details” rows (name, email and phone already show in the header). Empty value shows a muted “Add”. Pass [] to hide. | { key, label, value?, icon? }[] | Date of birth, Address |
| sections Grouped rows below the details. destructive rows are red with no chevron. | { title?, items: { key, label, value?, icon?, badge?, destructive?, onPress? }[] }[] | Account, Preferences, Support |
| title Header title. | string | 'Profile' |
| onEditProfile Shows a small 'Edit profile' pill under the contact details. | () => void | — |
| onAvatarPress Makes the avatar pressable and adds a camera badge. | () => void | — |
| onRowPress Any detail or section row was pressed (after the item's own onPress). | (key: string) => void | — |
| onSignOut The destructive 'Sign out' row at the end was pressed. | () => void | — |
| onBack Shows a back button in the header. | () => void | — |
| accent Badge chip and pressed-state tint. Everything else stays monochrome. | string | theme accent |
| style Root style. | StyleProp<ViewStyle> | — |
Source
Did you like the content?