LayoutReact Native

List row

Compose a flexible native row with leading identity, content, and trailing actions.

Public APILumenListRowReact Native

Native example

Use List row

Use for repeated rows with a stable leading/content/trailing structure. Continue using native collection components for scrolling, selection, and navigation.

View verified React Native runtime capture

List row rendered in the Expo web renderer Lumen playground — Verified runtime captureExpo web renderer

<LumenListRow
  leading={<LumenAvatar fallback="SM" />}
  trailing={<LumenBadge>Admin</LumenBadge>}
>
  <LumenText variant="label">Santiago</LumenText>
</LumenListRow>

Reference

Public API

The primary shared and platform-specific options exposed by LumenListRow.

API	Values or type	Default	Description
leading	`ReactNode`	`undefined`	Provides identity or a leading visual.
children	`ReactNode`	`Required`	Provides the primary row content.
trailing	`ReactNode`	`undefined`	Provides status or compact actions.

Native behavior

Design and accessibility

When to use it

Use for repeated rows with a stable leading/content/trailing structure. Continue using native collection components for scrolling, selection, and navigation.

Accessibility

Leading identity, main content, and trailing actions remain contained while interactive descendants keep their own semantics.

Shared component

Available on other platforms

Apple / SwiftUI Android / Compose