Patterns · Data
ActivityFeed
Since v0.0.1
Chronological list of activity events with avatar, description, and timestamp.
import { ActivityFeed } from '@nexub/patterns';Examples
Default
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| titlerequired | React.ReactNode | — | Activity event title. |
| description | React.ReactNode | — | Supporting description. |
| timestamp | string | — | Time string (e.g. "2 hours ago"). |
| avatar | React.ReactNode | — | Avatar element for the actor. |
On iOS & Android: ActivityList
@nexub/react-native/patternsAlpha
import { ActivityList } from '@nexub/react-native/patterns';
<ActivityList transactions={txs} onPress={openTx} onRefresh={refetch} refreshing={loading} />Web vs mobile
Same tokens and prop names. Where the platforms differ:
| Web | iOS & Android | |
|---|---|---|
| Row actions | Buttons or a menu on each row. | Swipe actions (also accessibility actions) via actions. |
| Loading more | Pagination or a "Load more" button. | Pull to refresh (onRefresh) and onEndReached for infinite scroll. |
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 | — | — |