Building with Lego bricks
An app screen isn't one solid slab — it's a button here, a list there, a header on top, each a reusable piece snapped together. UI components are those Lego bricks, so you build one nice button and reuse it everywhere.
Apps are trees of components
Modern app UIs are built from components — self-contained, reusable pieces like a button, a list item, or a header. You compose small components into bigger ones, forming a tree. Declarative UI means you describe what the screen should look like for a given state, and the framework figures out how to draw it.
<Screen>
<Header title="Inbox" />
<MessageList messages={inbox} />
</Screen> Lab · Decompose a screen
- Picture a chat screen: header, message bubbles, and a text input.
- List the components you'd create.
- Decide which ones repeat (and so should be reusable).
What you should see: A Header, a reusable MessageBubble (used many times), and an InputBar — composing small reusable parts into a full screen.