Wallet home screen

Installation

$ npx shadcn@latest add @goodui-native-pro/wallet-home-screen

Then run npx expo install --fix so react-native-svg match your Expo SDK. Files land in components/goodui-native/wallet-home-screen.

Pro screens install from the license-gated @goodui-native-pro registry. Setup: Pro access.

• •Wrap the app in GestureHandlerRootView and ThemeProvider.

Usage

// app/(tabs)/index.tsx
import { Stack, router } from "expo-router";
import { WalletHomeScreen } from "@/components/goodui-native/wallet-home-screen/wallet-home-screen";
import { useAccounts } from "@/lib/bank";

export default function HomeRoute() {
  const { user, cards, transactions, refetch, unread } = useAccounts(); // your data source
  return (
    <>
      <Stack.Screen options={{ headerShown: false }} />
      <WalletHomeScreen
        userName={user.firstName}
        avatar={user.photoUrl}
        cards={cards} // [{ id, name, last4, balance, currency: "EUR", spending: [daily totals] }]
        transactions={transactions} // newest first, amount negative for spending, cardId to filter
        onRefresh={refetch} // return the promise; new balances roll in when it resolves
        onQuickAction={(action, card) => router.push(`/${action}?card=${card.id}`)}
        onTransactionPress={(t) => router.push(`/transaction/${t.id}`)}
        onSeeAllTransactions={() => router.push("/transactions")}
        onNotificationsPress={() => router.push("/notifications")}
        notificationCount={unread}
        onProfilePress={() => router.push("/profile")}
      />
    </>
  );
}

When to use

Examples

<WalletHomeScreen />

<WalletHomeScreen cards={cards} transactions={transactions} balanceHidden={hidden} onBalanceHiddenChange={setHidden} onRefresh={refetch} />

API reference

Motion and haptics

• •Swiping the card carousel rolls the balance and the month total to the new card's values, morphs the sparkline into the new card's spending and swaps the transaction list.
• •Pull to refresh: the drop stretches, snaps round past the threshold, spins while onRefresh runs, and when new cards arrive the balance digits roll in the direction of the change.
• •Scrubbing the sparkline rolls the total to that day's amount and the label switches to 'Spent on <date>'.
• •Reduced motion: digits change in place, the carousel settles on a short timing curve instead of a spring, the sparkline changes at once without drawing or morphing (each component's own reduced-motion branch).

• •Haptic: select when a swipe settles on another card (Carousel)
• •Haptic: tap when the pull passes the threshold (PullToRefresh)
• •Haptic: select on the eye toggle, tap on quick actions and the bell (IconButton)
• •Haptic: select for each day the sparkline scrub crosses (Sparkline)

• •Gestures, the roll and the sparkline animate on the UI thread; React renders on card changes, scrubbed day changes, refreshes and the eye toggle.
• •The transaction list is limited by transactionLimit (6) and rendered in a ScrollView; page the full history on its own screen.

Accessibility

• •The greeting name is a header; the avatar and bell are buttons with labels ('Notifications, 3 new').
• •The eye is a button labelled 'Hide amounts' or 'Show amounts'; toggling it announces 'Amounts hidden' or 'Amounts shown'. Hidden amounts are read as 'Balance hidden'.
• •The card carousel is one adjustable element: swipe up or down (arrow keys on the web) to change card; its value reads 'Card 2 of 3, Savings card ending 0019'.
• •Quick actions are icon buttons named by their visible label; the label under each is hidden from screen readers so it is not read twice.
• •Each transaction row is read as 'Merchant, signed amount, category, date or status'. The balance and totals are read as plain numbers (rolling-number).
• •Pull to refresh has a Refresh button for screen readers on every platform.

Notes for AI

Related