Patterns · Pages
Transaction detail
TransactionDetailPageTransactionDetail
One transaction: the amount, who and when, the details as rows, and follow-up actions.
Web
Live, at a real viewport width. Switch to Phone to see the responsive layout.
Usage
import { TransactionDetailPage } from '@nexub/patterns';
<TransactionDetailPage transaction={tx} rows={[{ label: 'Reference', value: tx.ref }]} footer={<Button variant="tonal">Split bill</Button>} onBack={back} />On iOS & Android: TransactionDetail
@nexub/react-native/patternsAlpha
import { TransactionDetail } from '@nexub/react-native/patterns';
<TransactionDetail transaction={tx} rows={rows} actions={<Button variant="tonal">Split bill</Button>} />Web vs mobile
Same tokens and prop names. Where the platforms differ:
| Web | iOS & Android | |
|---|---|---|
| Back | onBack renders a back link. | The native stack header handles back. |
Interactive preview of @nexub/react-native rendered for the web. Native chrome (switches, pickers, Liquid Glass) looks like the platform on a device.
On device
iPhone (iOS simulator)
Pixel (Android emulator)
Screenshots from the latest CI run of the showcase app; the live frame renders the same code for the web.
TransactionDetail props
| Prop | Type | Default | Description |
|---|---|---|---|
| transactionrequired | Transaction | — | — |
| rows | ReviewRow[] | [] | Extra rows: reference, account, category… |
| actions | React.ReactNode | — | — |