Skip to content
Ritesh FirodiyaGet in touch

Work / Aakalan / Wiki / Surfaces

alerts

Surfacecanonicalverified 2026-10-02

SURFACE.MOBILE.PATTERNS.ALERTS

Summary

The fifteen native dialogs the app raises, with the copy it actually ships.

Raw wireframe

  • .context/designs/mobile/patterns/alerts.html

Why it is drawn this way

Because they were the only user-visible copy in the app that no wireframe held. Eleven Alert.alert calls across settling, the paywall, the account screen, group settings and the expense screen. Four sit on the money path and one confirms an irreversible delete, and a review of the set would never have shown any of them. A dialog being drawn by the OS rather than by us does not make its words less ours.

A pattern page, not fifteen screens. A native alert has no route, no navigation and no layout of ours to get wrong; what needs reviewing is the wording. So the page is the wording, at the size it is read, grouped by where it is raised. Its route is null because no one screen renders it.

The exact strings, not paraphrases. A wireframe that approximates the copy is worse than none here: it reads as approved while differing from what ships. Where a call has two branches — Already recorded versus Nothing left to settle — both are named.

"Did the payment go through?" asks, because nothing else can know. Opening the UPI app is the only thing observable. iOS gives no callback and Android's is unreliable, so the balance moves on the user's word and the body says what that word does. See settling-is-immediate.

Four restore outcomes, four messages. "Nothing to restore" used to be shown for a failure as well, which told a paying customer on a dropped connection that they own nothing. "Couldn't reach the store" exists so that never reads as a no.

Cancelling a purchase raises nothing. A dialog confirming that you meant to tap Cancel is noise, and the absence is drawn as a note rather than left to be discovered in the code.

The destructive button is the only red one. It wears the danger token, not the money-direction rose — see reserved-money-direction.

Related

Sources

  • src/app/settle/[id].tsx
  • src/app/pricing.tsx
  • src/app/account.tsx
  • src/app/expense/[id].tsx
  • src/app/group/[id]/settings.tsx
  • src/components/account/phone-numbers-section.tsx
  • src/components/account/payment-methods-section.tsx

Every project of mine is written down like this.

Read the résumé