Components
Bar
A settings-style row that navigates on press.
Bar wraps its content in an expo-router Link, which Storybook stubs out (see .storybook/mocks/expo-router.tsx) — pressing a row here goes nowhere.
This example is composed with Storybook args. Open the interactive workbench to change its props and inspect the generated API controls.
Import
import { Bar } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
title | — | "Section item one" | Row label. Bar renders one line — long titles truncate rather than wrap. |
link | — | "/settings/one" | An expo-router Href. The whole row is the link, so Bar cannot be used outside a router (Storybook stubs one). |
startAdornment | — | — | Leading node, usually an Icon. Size it yourself. |
endAdornment | — | — | Trailing node, before the chevron — a count or status, not a second action. |
Examples
With Adornments
<Bar
title="Section item two"
link="/settings/two"
startAdornment={<Icon name="calendar.badge.checkmark" size={22} />}
endAdornment={<Text color="tertiary">12</Text>}
/>Grouped
BarGroup stacks rows into a single bordered card.
<BarGroup>
<Bar
title="Item one"
link="/settings/one"
startAdornment={<Icon name="building.2" size={22} />}
/>
<Bar
title="Item two"
link="/settings/two"
startAdornment={<Icon name="list.bullet" size={22} />}
/>
<Bar
title="Item three"
link="/settings/three"
startAdornment={<Icon name="sun.max.fill" size={22} />}
/>
</BarGroup>