Dashboard
A finance / analytics home screen: a collapsing “Overview” large title with bell and avatar, time-of-day greeting, Day / Week / Month switcher, a revenue area chart that rises in on every period change and scrubs under your finger while the headline number rolls, KPI tiles with sparklines, springy quick actions and recent transactions — plus skeleton loading and pull-to-refresh.
Installation
Copies the screen into src/components/blocks along with every component it uses.
Props
| Prop | Type | Default |
|---|---|---|
| data Everything the screen shows. KPIs: { id, label, value, format?: 'money' | 'count' | 'percent', delta?, trend?, invert? }. Transactions: { id, title, subtitle?, amount (signed), category?, pending? }. | { userName?, avatar?, periods: Record<'day' | 'week' | 'month', { revenue, delta, series, labels?, kpis }>, transactions } | sample merchant |
| currency Symbol placed before money values. | string | '₹' |
| formatMoney Custom money formatter (overrides currency), e.g. Intl.NumberFormat or en-IN grouping. | (value: number) => string | — |
| title Large title. | string | 'Overview' |
| defaultPeriod / period Uncontrolled initial period, or controlled period. | 'day' | 'week' | 'month' | 'week' |
| onPeriodChange Segmented control changed. | (period) => void | — |
| loading Shows skeleton placeholders for the chart, KPIs, actions and transactions. | boolean | false |
| onRefresh Enables pull-to-refresh; a returned promise keeps the spinner until it settles. | () => void | Promise | — |
| refreshing Controlled refreshing flag. | boolean | — |
| quickActions Round shortcut buttons under the KPIs. | { id, label, icon: 'send' | 'request' | 'topup' | 'cards' | 'more' }[] | Send · Request · Top up · Cards |
| onQuickAction A quick action was tapped. | (action) => void | — |
| onSelectTransaction Makes transaction rows pressable. | (transaction) => void | — |
| onSeeAllTransactions Shows a “See all” link beside the section heading. | () => void | — |
| onSelectKpi Makes KPI tiles pressable. | (kpi) => void | — |
| onPressAvatar / onPressNotifications Header avatar and bell. | () => void | — |
| notificationBadge Red dot on the bell. | boolean | number | — |
| accent Chart, quick action and refresh colour. | string | theme accent |
| style Root style. | StyleProp<ViewStyle> | — |
Source
Did you like the content?