Lesson 1 established that React Native renders to native views, not HTML. This lesson is the concrete, practical consequence: every <div>, <span>, and <p> this curriculum's own React domain used constantly has a direct, specific React Native replacement — and the mapping is close enough to memorize in one sitting.
2 min read
// React (web) // React Native
<div>...</div> <View>...</View>
<span>text</span> <Text>text</Text>
<p>text</p> <Text>text</Text>
<img src="..." /> <Image source={{ uri: "..." }} />
<input value={v} onChange={f} /> <TextInput value={v} onChangeText={f} />
<button onClick={f}>...</button> <Pressable onPress={f}>...</Pressable><View> is the direct, structural replacement for <div> — a plain container with no inherent visual styling, used for layout exactly the way a <div> is. <Text> is the one genuinely different rule worth calling out explicitly: every single piece of visible text in React Native must be wrapped in a <Text> component — there's no equivalent of a bare text node rendering directly inside a <View> the way plain text renders directly inside a <div> on the web; React Native's native rendering layer requires text to be explicitly declared as text.
ScrollView: the direct, naive replacement — and its real limit<ScrollView> wraps content that's taller than the screen and makes it scrollable — the straightforward mapping for "a page with more content than fits." The catch, covered in full in lesson 4: ScrollView renders every single child immediately, all at once, whether it's currently visible on screen or not — completely fine for a short, bounded list, and a real, serious performance problem for anything long or dynamically-sized, which is exactly why FlatList exists as a genuinely different component, not just a styled variant of ScrollView.
Pressable: replacing both <button> and "clickable div"Web development often reaches for either a semantic <button> or a <div onClick={...}> depending on styling convenience — React Native collapses this into one component, Pressable, used for any tappable element regardless of whether it looks like a "button" visually. Pressable also exposes states a web onClick handler doesn't surface as directly — onPressIn, onPressOut, and a pressed state usable for visual feedback — because touch interaction genuinely has more distinguishable phases than a mouse click does.
HTML has semantic elements (<nav>, <article>, <table>) with no direct React Native equivalent at all — React Native's core component set is deliberately small, covering the genuinely common structural and interactive primitives (container, text, image, input, scrollable area, pressable) rather than HTML's much larger semantic vocabulary. Anything more specific (a table-like grid, a navigation bar) is built by composing View and Text together, or reached for via a community library — there's no <Table> waiting to be discovered, because the platform was never designed around HTML's document-semantics model in the first place.
Check your understanding
A quick comprehension check — not tracked, not graded, just for you.
1. What happens if you try to render bare text directly inside a <View> without wrapping it in <Text>?
2. What is the real limitation of ScrollView that this domain's own FlatList lesson addresses?
3. What does Pressable replace from web development, and what does it expose that a web onClick doesn't?
Mobile Development