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.

Standalone

Chase Bank

•••• 4821

row.tsx

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

Example

Stacked in a managed list, 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	-