MediaObject

Image or icon paired with text content. The fundamental building block for list items, notifications, and comment layouts.
RC
Rachel Chen
Engineering Lead
Reviewed the latest pull request and left comments on the auth middleware changes.
iOS
RC
Rachel Chen
Engineering Lead
Reviewed the latest pull request and left comments on the auth middleware changes.
Android
RC
Rachel Chen
Engineering Lead
Reviewed the latest pull request and left comments on the auth middleware changes.
Web
tsx
<MediaObject
avatar="RC"
title="Rachel Chen"
description="Engineering Lead"
body="Reviewed the latest pull request and left comments on the auth middleware changes."
bordered
/>

Props

Prop
Description
title
string
Primary line: the bold heading (e.g. a person's name).
description
string
Secondary line: muted supporting text under the title (e.g. a role or email).
body
ReactNode
Optional longer body paragraph rendered below the description.
meta
string
Trailing metadata text pinned to the right (e.g. "2h ago", "admin").
avatar
string
Initials for the leading avatar (e.g. "RC"); rendered as <Avatar>{avatar}</Avatar>.
src
string | number
Photo for the leading avatar (a URI string or a bundled `require(...)` image); takes precedence over initials.
icon
ReactNode
A leading icon glyph rendered in a tinted square box (stands in for an SVG icon).
action
ReactNode
A trailing action node (e.g. a <Button>), pinned to the right edge.
onPress
() => void
Make the whole row a tappable target (navigate to a detail, select a row). When set, the row renders as a Pressable with a button role and a pressed affordance, so you never hand-roll a Pressable for a tappable media row.
center
boolean
Alignment (pick one; default top-aligns with items-start).
start
boolean
Alignment (pick one; default top-aligns with items-start).
reversed
boolean
Direction (pick one; default leads with the media on the left).
leading
boolean
Direction (pick one; default leads with the media on the left).
bordered
boolean
Surface.
compact
boolean
Menu-header density: a smaller leading avatar (28px) and title/description type stepped down one size, for a compact identity row (e.g. a menu or dropdown header). Backward-compatible; without it the row keeps its default 40px avatar and type.
truncate
boolean
Layout.
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Do & Don’t

Avatar

Don’t
Rachel Chen
Engineering Lead
Reviewed the latest pull request and left comments on the auth middleware changes. Need to discuss the token rotation approach before merging.
Centering the avatar against a multi-line body leaves it floating beside the middle of the text.
Do
Rachel Chen
Engineering Lead
Reviewed the latest pull request and left comments on the auth middleware changes. Need to discuss the token rotation approach before merging.
Top-align with start so the avatar anchors to the first line of the title.

Icon

Don’t
Security first
End-to-end encryption with automatic key rotation.
An oversized icon box throws off the optical balance with the two-line text.
Do
Security first
End-to-end encryption with automatic key rotation.
Keep the lead icon box compact with an 18px glyph so it reads as a tidy lead affordance.

Action

Don’t
Ada Lovelace
ada.lovelace@analytical-engine.example.com
Without truncation a long email wraps and pushes the trailing button out of alignment.
Do
Ada Lovelace
ada.lovelace@analytical-engine.example.com
Pass truncate so long text clips in place and the trailing action stays pinned right.
← GridList
PhoneInput →