Patterns · Pages
Activity
ActivityPageActivityList
Transactions grouped by day, with refresh, load more and row actions.
Web
Live, at a real viewport width. Switch to Phone to see the responsive layout.
Usage
import { ActivityPage } from '@nexub/patterns';
<ActivityPage transactions={txs} onSelect={open} onRefresh={refetch} refreshing={loading} hasMore onLoadMore={next} />On iOS & Android: ActivityList
@nexub/react-native/patternsAlpha
import { ActivityList } from '@nexub/react-native/patterns';
<ActivityList transactions={txs} onPress={open} onRefresh={refetch} refreshing={loading} />Web vs mobile
Same tokens and prop names. Where the platforms differ:
| Web | iOS & Android | |
|---|---|---|
| Refresh | A Refresh button. | Pull to refresh. |
| Paging | Load more. | Infinite scroll (onEndReached). |
| Row actions | rowActions renders buttons or a menu. | Swipe actions, also accessibility actions. |
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.
ActivityList props
| Prop | Type | Default | Description |
|---|---|---|---|
| transactionsrequired | Transaction[] | — | — |
| onPress | (t: Transaction) => void | — | — |
| onRefresh | () => void | — | — |
| refreshing | boolean | false | — |
| onEndReached | () => void | — | — |
| actions | (t: Transaction) => SwipeAction[] | — | Swipe actions per row (also accessibility actions). |
| header | React.ReactElement | — | — |
| empty | React.ReactElement | — | — |