add

Summary

One screen, three fields, Save. The most repeated action in the product.

Raw wireframe

• .context/designs/mobile/add/add.html

Why it is drawn this way

Amount first, then what it was for, then who with. You open this screen holding a bill, and the number is the one thing you cannot guess later: the description can be edited, the people can be changed, the amount is the fact you are recording. It also means the keyboard that opens on mount is the numeric one you were always going to need.

"With" sits under them because it is the field most often already correct — it arrives pre-set from wherever you tapped Add.

"Just me" is the default, and it is a real expense. This is what makes Aakalan an expense tracker rather than only a bill splitter: same screen, same categories, same monthly insights. It is not a group of one, so everything about other people simply disappears when it is selected.

The system keyboard, not a bespoke keypad. The description needs the system keyboard anyway, so a custom keypad would swap input methods mid-task.

The category is guessed from what you typed, never picked. See categories.

Save is a sticky footer, not a header button. It lived top-right on the reasoning that the form should never need scrolling past to reach it — right requirement, and a footer serves it better: outside the scroll container AND reachable one-handed, which the far corner of a 6.7" phone is not.

The receipt row is visible on free with a Pro mark, never hidden. A feature nobody can see is a feature nobody buys, and hiding it would make the row appear out of nowhere the moment somebody subscribes. See pro-never-gates-the-core-loop.

The tab bar is drawn. Add is a tab route ((tabs)/add), so the navigator renders AppTabBar beneath it — the X in the header and the bar at the foot are both real, and earlier wireframes drew only the X.

Related

• with-sheet
• add-with-person
• add-with-group
• categories

Sources

• src/app/(tabs)/add.tsx
• src/app/(tabs)/_layout.tsx