Bank Accounts Screen

import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Glass, Icon, Text } from "@lumioui/ui";
import { BrandMark, LumioMark, Mount, Press, brandKey } from "../shared";

export interface BankAccount {
  id: string;
  bank: string;
  /** "Checking •• 4821" */
  kind: string;
  balance: string;
  /** Monogram disc color. */
  color: string;
  /** Monogram letter color — pairs with `color` (defaults to white). */
  textColor?: string;
  primary?: boolean;
}

export interface BankAccountsScreenProps {
  accounts?: BankAccount[];
  onAccountPress?: (id: string) => void;
  onLinkAccount?: () => void;
  onBack?: () => void;
}

const DEFAULT_ACCOUNTS: BankAccount[] = [
  { id: "a1", bank: "Chase", kind: "Checking •••• 4821", balance: "$6,240.12", color: "#117ACA", primary: true },
  { id: "a2", bank: "Amex", kind: "Savings •••• 0937", balance: "$12,480.00", color: "#2E77BC" },
  { id: "a3", bank: "Wells Fargo", kind: "Currency •••• 5502", balance: "$2,108.44", color: "#D71E28" },
  { id: "a4", bank: "Venmo", kind: "Current •••• 7703", balance: "$843.90", color: "#3D95CE" },
  { id: "a5", bank: "Wise", kind: "Spaces •••• 1284", balance: "$350.00", color: "#9FE870" },
];

/** Rough luminance check for the fallback tile's initial. */
function isLight(hex: string) {
  const c = hex.replace("#", "");
  return (
    0.299 * parseInt(c.slice(0, 2), 16) +
      0.587 * parseInt(c.slice(2, 4), 16) +
      0.114 * parseInt(c.slice(4, 6), 16) >
    150
  );
}

/** Bank accounts — linked accounts with balances + link flow. */
export function BankAccountsScreen({
  accounts = DEFAULT_ACCOUNTS,
  onAccountPress,
  onLinkAccount,
  onBack,
}: BankAccountsScreenProps) {
  const insets = useSafeAreaInsets();
  // Sum the demo balances so the hero matches the list.
  const total = `$${accounts
    .reduce((s, a) => s + (parseFloat(a.balance.replace(/[^0-9.]/g, "")) || 0), 0)
    .toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;

  return (
    <SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
      <View pointerEvents="box-none" className="absolute inset-x-4 z-10" style={{ top: insets.top + 8 }}>
        <View className="flex-row items-center justify-between">
          <Glass interactive effect="regular" className="h-11 w-11 items-center justify-center rounded-full">
            <Press
              haptic="light"
              onPress={() => onBack?.()}
              accessibilityRole="button"
              accessibilityLabel="Go back"
              className="h-9 w-9 items-center justify-center"
            >
              <Icon name="chevron-left" size="md" color="foreground" />
            </Press>
          </Glass>
          <View className="h-11 w-11" />
        </View>
        <View pointerEvents="none" className="absolute inset-0 items-center justify-center">
          <View className="h-11 flex-row items-center justify-center gap-2 rounded-full pl-3.5 pr-5">
            <Glass effect="regular" className="absolute inset-0 rounded-full" />
            <LumioMark size={18} />
            <Text accessibilityRole="header" className="text-sm font-bold tracking-tight">
              Linked accounts
            </Text>
          </View>
        </View>
      </View>

      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingTop: insets.top + 60, paddingBottom: insets.bottom + 32 }}
      >
        {/* Total across institutions — the number the list can't say. */}
        <Mount className="mx-4 mb-4 rounded-3xl bg-white p-5 dark:bg-[#1A1A20]">
          <Text variant="small" className="text-muted-foreground">
            Total balance
          </Text>
          <Text className="text-3xl font-bold tracking-tight">
            {total}
          </Text>
          {/* Freshness — balances always timestamp themselves. */}
          <View className="mt-1 flex-row items-center gap-1.5">
            <View className="h-1.5 w-1.5 rounded-full bg-success" />
            <Text variant="muted" className="text-xs">
              Synced just now
            </Text>
          </View>
        </Mount>

        {/* Mini bank cards — each institution gets its own card with a
            monogram tile, not a row in a shared list. */}
        <Mount delay={60} className="gap-3 px-6">
          {accounts.map((a) => (
            <Press
              key={a.id}
              haptic="light"
              pressedScale={0.98}
              onPress={() => onAccountPress?.(a.id)}
              accessibilityRole="button"
              accessibilityLabel={`${a.bank}, ${a.kind}, balance ${a.balance}${a.primary ? ", primary account" : ""}`}
              className="flex-row items-center gap-3.5 rounded-2xl bg-white p-4 dark:bg-[#1A1A20]">
              {/* Real bank mark when we draw it; the brand-color initial
                  tile otherwise (the Revolut fallback idiom). */}
              {(() => {
                const mark = brandKey(a.bank);
                return mark ? (
                  <BrandMark brand={mark} size={44} />
                ) : (
                  <View
                    className="h-11 w-11 items-center justify-center rounded-xl"
                    style={{ backgroundColor: a.color }}
                    accessibilityElementsHidden
                    importantForAccessibility="no"
                  >
                    <Text
                      className="text-base font-bold"
                      // Wise lime + similar light brands need dark ink.
                      style={{ color: isLight(a.color) ? "#10200A" : "#FFF" }}
                    >
                      {a.bank[0]}
                    </Text>
                  </View>
                );
              })()}
              <View className="flex-1">
                <View className="flex-row items-center gap-2">
                  <Text className="font-semibold">{a.bank}</Text>
                  {a.primary ? (
                    <View className="rounded-full bg-success/15 px-1.5 py-0.5">
                      <Text className="text-[10px] font-semibold text-success">Primary</Text>
                    </View>
                  ) : null}
                </View>
                <Text variant="small" className="text-muted-foreground">
                  {a.kind}
                </Text>
              </View>
              <View className="items-end gap-0.5">
                <Text className="font-semibold tabular-nums">{a.balance}</Text>
                <Icon name="chevron-right" size="sm" color="mutedForeground" />
              </View>
            </Press>
          ))}
        </Mount>

        <Mount delay={120} className="mt-4 px-4">
          <Button
            tone="inverse"
            haptic="light"
            onPress={() => onLinkAccount?.()}
            accessibilityLabel="Link a bank account"
            className="w-full bg-[#1B1B26]"
          >
            <Icon name="plus" size="sm" color="#FFFFFF" />
            <Text className="ml-1.5">Link account</Text>
          </Button>
          <Text variant="muted" className="mt-4 text-center text-xs">
            Balances refresh each time you open the app
          </Text>
        </Mount>
      </ScrollView>
    </SafeAreaView>
  );
}
BankAccountsScreen.displayName = "BankAccountsScreen";

Recreate the "Bank Accounts Screen" screen in React Native using LumioUI.

Goal: Linked bank accounts and balances Match the reference implementation's layout, behavior, and motion exactly — this is a production screen, not a mockup.

## Setup

Fastest path — install the screen plus its component deps:

```bash
npx lumioui add finance-bank-accounts
```

Or pull just the components: `npx lumioui add button icon list text`

Native packages:
- @lumioui/ui@latest
- react-native-safe-area-context@*
- @lumioui/core@latest
- react-native-reanimated@*
- react-native-svg@*
- nativewind@*

Stack assumptions: Expo SDK 54 / RN 0.81, Reanimated 4, NativeWind v4, TypeScript strict, Expo Go compatible.

## Components — how, where, when

### `button` — Tactile pill button with press spring, ink wash and async loading.
- `<Button>` ×1

### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×3

### `list` — Settings-style rows with separators and press feedback.
- imported but not rendered directly — likely used through a sibling or as a utility

### `text` — Themed type scale from caption to display.
- `<Text>` ×11

## Conventions (non-negotiable)

- Styling via NativeWind `className` with semantic tokens only: `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-secondary`, `bg-muted`, `text-muted-foreground`, `bg-accent`, `bg-destructive`, `border-border`. Hard-coded colors only inside media overlays (`text-white`, `bg-black/N`).
- Motion via the token presets from `@lumioui/core` (`spring.press`, `spring.surface`, `spring.glide`, `timing.fast`, `timing.slow`, …) — no bespoke spring configs or durations.
- Gate transform motion behind `useReducedMotion()`; keep opacity/color feedback, drop travel and overshoot.
- Haptics via `useHaptic()`: `light` on press, `selection` on toggle/select, `warning` on invalid input. Never import expo-haptics directly.
- Press feedback via `usePressAnimation()` (~0.97 scale), not `activeOpacity` tricks.
- a11y: `accessibilityRole` + `accessibilityLabel` on every control, touch targets ≥44pt.
- Entrance choreography: staggered `Mount` wrappers (delay 0/60/120…) so regions land in sequence instead of popping in at once.
- Wrap the screen in `SafeAreaView`; keep dark mode working via the semantic tokens.

## Deliverable

One file: `screens/finance/bank-accounts.tsx` exporting BankAccountsScreen. Preserve the props interface — the host app wires the callbacks (navigation, submit handlers) through them.

## Reference implementation

The LumioUI source for this screen — reproduce it faithfully:

```tsx
import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Glass, Icon, Text } from "@lumioui/ui";
import { BrandMark, LumioMark, Mount, Press, brandKey } from "../shared";

export interface BankAccount {
  id: string;
  bank: string;
  /** "Checking •• 4821" */
  kind: string;
  balance: string;
  /** Monogram disc color. */
  color: string;
  /** Monogram letter color — pairs with `color` (defaults to white). */
  textColor?: string;
  primary?: boolean;
}

export interface BankAccountsScreenProps {
  accounts?: BankAccount[];
  onAccountPress?: (id: string) => void;
  onLinkAccount?: () => void;
  onBack?: () => void;
}

const DEFAULT_ACCOUNTS: BankAccount[] = [
  { id: "a1", bank: "Chase", kind: "Checking •••• 4821", balance: "$6,240.12", color: "#117ACA", primary: true },
  { id: "a2", bank: "Amex", kind: "Savings •••• 0937", balance: "$12,480.00", color: "#2E77BC" },
  { id: "a3", bank: "Wells Fargo", kind: "Currency •••• 5502", balance: "$2,108.44", color: "#D71E28" },
  { id: "a4", bank: "Venmo", kind: "Current •••• 7703", balance: "$843.90", color: "#3D95CE" },
  { id: "a5", bank: "Wise", kind: "Spaces •••• 1284", balance: "$350.00", color: "#9FE870" },
];

/** Rough luminance check for the fallback tile's initial. */
function isLight(hex: string) {
  const c = hex.replace("#", "");
  return (
    0.299 * parseInt(c.slice(0, 2), 16) +
      0.587 * parseInt(c.slice(2, 4), 16) +
      0.114 * parseInt(c.slice(4, 6), 16) >
    150
  );
}

/** Bank accounts — linked accounts with balances + link flow. */
export function BankAccountsScreen({
  accounts = DEFAULT_ACCOUNTS,
  onAccountPress,
  onLinkAccount,
  onBack,
}: BankAccountsScreenProps) {
  const insets = useSafeAreaInsets();
  // Sum the demo balances so the hero matches the list.
  const total = `$${accounts
    .reduce((s, a) => s + (parseFloat(a.balance.replace(/[^0-9.]/g, "")) || 0), 0)
    .toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;

  return (
    <SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
      <View pointerEvents="box-none" className="absolute inset-x-4 z-10" style={{ top: insets.top + 8 }}>
        <View className="flex-row items-center justify-between">
          <Glass interactive effect="regular" className="h-11 w-11 items-center justify-center rounded-full">
            <Press
              haptic="light"
              onPress={() => onBack?.()}
              accessibilityRole="button"
              accessibilityLabel="Go back"
              className="h-9 w-9 items-center justify-center"
            >
              <Icon name="chevron-left" size="md" color="foreground" />
            </Press>
          </Glass>
          <View className="h-11 w-11" />
        </View>
        <View pointerEvents="none" className="absolute inset-0 items-center justify-center">
          <View className="h-11 flex-row items-center justify-center gap-2 rounded-full pl-3.5 pr-5">
            <Glass effect="regular" className="absolute inset-0 rounded-full" />
            <LumioMark size={18} />
            <Text accessibilityRole="header" className="text-sm font-bold tracking-tight">
              Linked accounts
            </Text>
          </View>
        </View>
      </View>

      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingTop: insets.top + 60, paddingBottom: insets.bottom + 32 }}
      >
        {/* Total across institutions — the number the list can't say. */}
        <Mount className="mx-4 mb-4 rounded-3xl bg-white p-5 dark:bg-[#1A1A20]">
          <Text variant="small" className="text-muted-foreground">
            Total balance
          </Text>
          <Text className="text-3xl font-bold tracking-tight">
            {total}
          </Text>
          {/* Freshness — balances always timestamp themselves. */}
          <View className="mt-1 flex-row items-center gap-1.5">
            <View className="h-1.5 w-1.5 rounded-full bg-success" />
            <Text variant="muted" className="text-xs">
              Synced just now
            </Text>
          </View>
        </Mount>

        {/* Mini bank cards — each institution gets its own card with a
            monogram tile, not a row in a shared list. */}
        <Mount delay={60} className="gap-3 px-6">
          {accounts.map((a) => (
            <Press
              key={a.id}
              haptic="light"
              pressedScale={0.98}
              onPress={() => onAccountPress?.(a.id)}
              accessibilityRole="button"
              accessibilityLabel={`${a.bank}, ${a.kind}, balance ${a.balance}${a.primary ? ", primary account" : ""}`}
              className="flex-row items-center gap-3.5 rounded-2xl bg-white p-4 dark:bg-[#1A1A20]">
              {/* Real bank mark when we draw it; the brand-color initial
                  tile otherwise (the Revolut fallback idiom). */}
              {(() => {
                const mark = brandKey(a.bank);
                return mark ? (
                  <BrandMark brand={mark} size={44} />
                ) : (
                  <View
                    className="h-11 w-11 items-center justify-center rounded-xl"
                    style={{ backgroundColor: a.color }}
                    accessibilityElementsHidden
                    importantForAccessibility="no"
                  >
                    <Text
                      className="text-base font-bold"
                      // Wise lime + similar light brands need dark ink.
                      style={{ color: isLight(a.color) ? "#10200A" : "#FFF" }}
                    >
                      {a.bank[0]}
                    </Text>
                  </View>
                );
              })()}
              <View className="flex-1">
                <View className="flex-row items-center gap-2">
                  <Text className="font-semibold">{a.bank}</Text>
                  {a.primary ? (
                    <View className="rounded-full bg-success/15 px-1.5 py-0.5">
                      <Text className="text-[10px] font-semibold text-success">Primary</Text>
                    </View>
                  ) : null}
                </View>
                <Text variant="small" className="text-muted-foreground">
                  {a.kind}
                </Text>
              </View>
              <View className="items-end gap-0.5">
                <Text className="font-semibold tabular-nums">{a.balance}</Text>
                <Icon name="chevron-right" size="sm" color="mutedForeground" />
              </View>
            </Press>
          ))}
        </Mount>

        <Mount delay={120} className="mt-4 px-4">
          <Button
            tone="inverse"
            haptic="light"
            onPress={() => onLinkAccount?.()}
            accessibilityLabel="Link a bank account"
            className="w-full bg-[#1B1B26]"
          >
            <Icon name="plus" size="sm" color="#FFFFFF" />
            <Text className="ml-1.5">Link account</Text>
          </Button>
          <Text variant="muted" className="mt-4 text-center text-xs">
            Balances refresh each time you open the app
          </Text>
        </Mount>
      </ScrollView>
    </SafeAreaView>
  );
}
BankAccountsScreen.displayName = "BankAccountsScreen";
```

Screen: https://lumioui.dev/screens/finance-bank-accounts