Chapter 03 — Core Components

Chapter 03 — Core Components

Hey everyone! Welcome back to Namaste React Native!

On the web you have <div>, <p>, <img>. In React Native, none of those exist. Instead you compose your UI from a set of core components that map to real native widgets. Learn these handful of building blocks and you can build any screen.

What we will cover:

• View — the container
• Text — all text lives here
• Image — local & remote
• ScrollView — scrollable content
• TextInput, Button, Pressable
• SafeAreaView — dodging notches
• The web → React Native mental map
• Interview Questions

---

1. The Web → React Native Mental Map

Web (HTML)	React Native	Notes
<div>	<View>	The container / box
<p> <span> <h1>	<Text>	ALL text must be inside <Text>
<img>	<Image>	Needs explicit width/height
scroll (automatic)	<ScrollView> / <FlatList>	Scrolling is opt-in
<input>	<TextInput>	onChangeText, not onChange
<button>	<Button> / <Pressable>	onPress, not onClick

---

2. View — The Container

View is the <div> of React Native — a box that holds other components and can be styled and laid out with Flexbox.

import { View } from 'react-native';

<View style={{ padding: 20, backgroundColor: '#eee' }}>
    {/* other components go inside */}
</View>

---

3. Text — All Text Lives Here

The #1 beginner error: putting raw text outside a <Text>. In React Native, every piece of text MUST be inside a <Text> component, or the app crashes.

✗ WRONG — crashes!
<View>Hello</View>

✔ CORRECT
<View>
    <Text>Hello</Text>
</View>

Unlike the web, <Text> can nest for styling, and it's the only place text can go.

<Text style={{ fontSize: 18 }}>
    Hello <Text style={{ fontWeight: 'bold' }}>World</Text>!
</Text>

---

4. Image — Local & Remote

import { Image } from 'react-native';

// Local image (bundled with the app)
<Image source={require('./assets/logo.png')} />

// Remote image — MUST give width & height!
<Image
    source={{ uri: 'https://example.com/pic.jpg' }}
    style={{ width: 100, height: 100 }}
/>

Gotcha: remote images have no size by default — you must set width and height in the style, or they won't show.

---

5. ScrollView — Scrollable Content

A plain View does NOT scroll. If content overflows the screen, you wrap it in a ScrollView.

import { ScrollView } from 'react-native';

<ScrollView>
    <Text>Lots</Text>
    <Text>of</Text>
    <Text>content...</Text>
</ScrollView>

Important: ScrollView renders ALL its children at once. Great for small content, bad for long lists — for those we use FlatList (Chapter 06), which only renders what's visible.

---

6. TextInput, Button, Pressable

import { TextInput, Button, Pressable, Text } from 'react-native';

// Text input — note onChangeText (gives you the string directly)
<TextInput
    placeholder="Type here"
    value={text}
    onChangeText={setText}
    style={{ borderWidth: 1, padding: 8 }}
/>

// Simple button
<Button title="Press Me" onPress={() => alert('Hi!')} />

// Pressable — fully customizable button (the modern choice)
<Pressable onPress={handlePress} style={{ padding: 12 }}>
    <Text>Custom Button</Text>
</Pressable>

---

7. SafeAreaView — Dodging Notches

Modern phones have notches, rounded corners, and status bars. SafeAreaView keeps your content inside the safe, visible area.

import { SafeAreaView } from 'react-native';

<SafeAreaView style={{ flex: 1 }}>
    {/* your screen content, safe from the notch */}
</SafeAreaView>

   Without SafeAreaView:        With SafeAreaView:
   ┌──────────────┐             ┌──────────────┐
   │▓▓ notch ▓▓Text│ ← hidden!  │▓▓ notch ▓▓   │
   │              │             │  Text        │ ← safe
   └──────────────┘             └──────────────┘

---

Interview Questions — Quick Fire!

Q: What are the core components in React Native?

"The essential building blocks that map to native widgets: View (a container like div), Text (for all text), Image, ScrollView and FlatList for scrolling, TextInput for input, and Pressable/Button for touch. There's no div, span, or img — you compose UI from these primitives."

Q: Why must text be wrapped in a Text component?

"Because React Native maps text to a native text-rendering view, and it can only render strings inside a Text component. Putting raw text directly in a View throws an error. Text components can also nest for inline styling."

Q: What's the difference between ScrollView and FlatList?

"ScrollView renders all of its children at once, which is fine for small, known content but wastes memory for long lists. FlatList is virtualized — it only renders items currently on screen and recycles them — so it's the right choice for long or dynamic lists."

Q: Why doesn't a remote Image show up sometimes?

"Remote images loaded via a uri have no intrinsic dimensions in React Native, so you must give the Image an explicit width and height in its style. Without that, it renders with zero size and appears invisible."

Q: What is SafeAreaView for?

"It insets your content so it doesn't get hidden behind notches, the status bar, or rounded corners on modern devices. You wrap your screen in it to keep everything within the safe, visible area."

---

Quick Recap

Concept	Key Takeaway
View	The container — like div.
Text	ALL text must live inside it.
Image	Remote images need width/height.
ScrollView	Scroll small content; renders all children.
TextInput/Pressable	onChangeText / onPress (not web events).
SafeAreaView	Avoid notches & status bar.

What's Next?

Chapter 04: Styling & Flexbox — there are no CSS files here. Styles are JavaScript objects, and Flexbox works a little differently than on the web (the default direction will surprise you!).

Keep coding, keep shipping! See you in the next one!