Transaction detail screen

Installation

$ npx shadcn@latest add @goodui-native-pro/transaction-detail-screen

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

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

• •Wrap the app in GestureHandlerRootView and ThemeProvider (the sheets render in its overlay layer).

Usage

// app/transaction/[id].tsx
import { Stack, router, useLocalSearchParams } from "expo-router";
import * as Clipboard from "expo-clipboard";
import { TransactionDetailScreen } from "@/components/goodui-native/transaction-detail-screen/transaction-detail-screen";
import { api, useTransaction } from "@/lib/bank";

export default function TransactionRoute() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const { transaction, hasReceipt } = useTransaction(id);
  return (
    <>
      <Stack.Screen options={{ headerShown: false }} />
      <TransactionDetailScreen
        transaction={transaction} // { merchant, amount: -46.5, currency: "EUR", date, status, category, card, reference }
        onCategoryChange={(category) => api.recategorize(id, category)} // rejects: the chip goes back
        onSplit={(people, share) => api.requestSplit(id, people, share)}
        hasReceipt={hasReceipt}
        onReceiptPress={() => (hasReceipt ? router.push(`/receipt/${id}`) : api.attachReceipt(id))}
        onReport={(reason) => api.openDispute(id, reason.key)} // resolve with the case number
        onCopyReference={(ref) => Clipboard.setStringAsync(ref)}
        onBack={() => router.back()}
      />
    </>
  );
}

When to use

Examples

<TransactionDetailScreen onBack={() => router.back()} />

<TransactionDetailScreen
  transaction={{
    id: "tx_19", merchant: "Blue Bottle Coffee", amount: -6.72, currency: "EUR", date: "2026-10-30T08:14:00Z",
    status: "pending", category: "Eating out", card: { name: "Travel", last4: "7731" }, reference: "US44 0021 77",
    original: { amount: 7.25, currency: "USD", rate: 0.9269 },
  }}
/>

API reference

Motion and haptics

• •Split sheet: the stepper's value rolls and each person's share rolls in the direction of the change; the request button gathers into a spinner and opens into 'Requests sent', then the sheet closes and a footer under Details keeps the result.
• •Report a problem: the banner slides down and pushes the content, then crossfades from sending to sent or error.
• •The category chip and action sheets use their own springs; buttons press on touch down.
• •Reduced motion: digits change in place, sheets fade, the banner fades with an instant height change, buttons crossfade their states.

• •Haptic: select on each step of the people stepper, warning at 2 and 12 (QuantityStepper)
• •Haptic: tap on Split, Attach receipt and the split request; success or error when its promise settles (Button)
• •Haptic: tap when a category or report reason is chosen (ActionSheet)
• •Haptic: success or error when an async Banner action settles (Try again)

• •A static ScrollView; sheets mount only while open, and every animation runs on the UI thread inside the kit components.

Accessibility

• •'Transaction' is the header; Back is a labelled icon button.
• •The status badge is read by its label (Completed, Pending, Declined, Refunded); a declined amount adds 'not charged' on native.
• •The category chip is a button read as '<category>, category. Change' and opens an action sheet; the change is announced, and so is a rollback when onCategoryChange rejects.
• •Detail rows are read as one element each on native ('Paid with, Everyday •••• 4242'); the reference row has the hint 'Long press to copy' when onCopyReference is set.
• •The split sheet's stepper is adjustable ('People, including you'); the share is plain text that updates with it.
• •The report outcome appears in a banner that is announced, not only in a toast.

Notes for AI

Related