React Native View Architecture

A view is a folder, and each file in it has one job. Where a line of code goes is not a judgement call but a question: does it decide what the user sees, or how it looks?

src/views/productDetail/
├── index.tsx      JSX only: renders what the viewmodel returns
├── styles.ts      styling only: no inline styles anywhere else
├── viewmodel.ts   useViewModel(): state, effects and every decision
└── types.ts       types that belong to this view, only if there are any

• A complete view, file by file: references/example-view.md
• Splitting an existing large component into this shape: references/refactor.md

Before you start