Component

Row

A single list line: icon, label, optional sublabel, and a trailing value, chevron, or custom control. The building block of every settings list and detail breakdown in the app.

The primitive

Chase Bank

•••• 4821

row.tsx

<NativeRow
  icon={<Bank size={15} />}
  label="Chase Bank"
  sublabel="•••• 4821"
  chevron
/>

Example

Stacked on the saved-payment-methods screen, each row carrying its own trailing actions, set as default, delete, so none of them need a chevron.

Chase Bank

•••• 4821 · Personal

Ally Bank

•••• 1190

row-example.tsx

<NativeRow
  icon={<Bank size={15} />}
  label="Chase Bank"
  sublabel="•••• 4821 · Personal"
  right={
    <div className="flex items-center gap-0.5">
      <Star size={14} className="fill-foreground/30 text-foreground/30" />
      <button className="p-1.5 text-muted-foreground"><Trash size={14} /></button>
    </div>
  }
/>
<NativeRow
  icon={<Bank size={15} />}
  label="Ally Bank"
  sublabel="•••• 1190"
  right={
    <button className="p-1.5 text-muted-foreground"><Star size={14} /></button>
  }
/>

Capabilities

Prop	Type	Description
icon	React.ReactNode	—
labelrequired	string	—
sublabel	string	—
value	string	—
chevron	boolean	—
to	string	—
onPress	() => void	—
right	React.ReactNode	—
destructive	boolean	—
loading	boolean	—
disabled	boolean	—
className	string	—