Core Components and the View Hierarchy

A web developer moving to React Native for the first time typically reaches for a `<div>` and finds it doesn't exist, then reaches for a `<span>` and finds that doesn't exist either, and the natural conclusion — "this is React, just missing some tags" — is exactly the assumption that causes the most friction in the first week. There is no generic block-level container and no implicit inline text rendering, because React Native has no DOM underneath it to fall back on; every screen has to be built from a genuinely different, smaller set of primitives that map directly onto native views.

Without understanding that smaller primitive set and, specifically, that raw text can only ever live inside a `<Text>` component, a developer hits a wall of confusing runtime errors — "Text strings must be rendered within a <Text> component" being the most common one — that look like framework bugs but are actually the framework correctly enforcing a real constraint: native platforms don't have a concept of freely-floating text sitting inside an arbitrary container the way HTML does. This lesson builds the mental model of what the core components actually are, how they nest, and why the nesting rules are stricter than what web development trained you to expect.

Analogy🏏Cricket

🏏 Think of it like cricket: A commentator moving from football to cricket commentary for the first time instinctively reaches for football's vocabulary — calling an over a "set," a wicket a "goal," a boundary a "score" — and every single one of those substitutions is subtly wrong in a way that confuses listeners who actually know the sport, because cricket has its own precise vocabulary that doesn't map one-to-one onto football's, however superficially similar the two commentary jobs look from the outside. A commentator who instead learns cricket's actual vocabulary from scratch — recognizing that "a maiden over" and "a duck" and "silly point" are not football concepts wearing new names but genuinely specific cricket ideas — communicates clearly to an audience that knows the sport, while the football-vocabulary commentator sounds subtly, persistently off in a way that undermines their credibility on every single call. Just as cricket's vocabulary has to be learned on its own terms rather than mapped from football's, React Native's component vocabulary — View, Text, Image, ScrollView — has to be learned on its own terms rather than mapped from HTML's div, span, and img. Just as "a maiden over" isn't a renamed football concept, a React Native `<Text>` component isn't a renamed `<span>` — it enforces a real constraint, that raw text can only live inside it, which has no equivalent restriction in HTML at all. The insight is that a new domain's vocabulary deserves to be learned as what it actually is, not translated from a superficially similar domain, because the translation itself is where the persistent, subtle errors come from.