Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 6 · 2 / 10View, Text and Image
Phase 6React Native with Expo
10 topics · 6–8 wks
  1. 1Your first Expo app
  2. 2View, Text and Image
  3. 3Pressable and TextInput
  4. 4Styling and flexbox on mobile
  5. 5Lists with FlatList
  6. 6Safe areas and the keyboard
  7. 7Screens and navigation
  8. 8Tabs
  9. 9Saving data on the phone
  10. 10Calling an API
JourneyPhase 6View, Text and Image
01 / 09Overview

View, Text and Image

You'll learn the three building blocks of every phone screen, a box, words and a picture, and how they nest.

Why it mattersEvery screen in your habit tracker is made of View, Text and Image placed inside each other.
about 75 min·needs: Your first Expo app
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Video
Complete React Native tutorial #2: Text, View and Image componentsYouTube · Net Ninja · 8 min · English
MMamun's noteWatch 0:00–4:04 for Text and View, then 10:11–13:13 for Image with a picture from the assets folder. The middle part on styling comes back in the styling topic. He uses an Expo Router project; the screen code is the same in Snack.
Docs
Imagereactnative.dev · official docs · 10 min · English
MMamun's noteRead the first example and the note under it, which says pictures from the internet need a width and height. Change the example's size and watch it update. You can skip the long list of props.
DocsOptional
Textreactnative.dev · official docs · 10 min · English
MMamun's noteRead "Nested text" and "Containers" only. They explain why words can't sit straight inside a View, and how Text inside Text lets you make one word bold.
VideoOptional
React Native crash course 2026YouTube · Traversy Media · 5 min · English
MMamun's noteWatch 23:59–28:25, "Native components". Brad walks through the core components page and says when you'd use View, Text, ScrollView and Pressable. Stop at "Styling".
03 / 09

Explanation

You want the top of your habit tracker to show a small logo, the title "My habits" and a line that says "3 habits today". On the web you would reach for <div>, <h1>, <p> and <img>. On a phone you have three building blocks instead.

Think of a tiffin carrier. The carrier and its boxes hold things and decide where they sit. That is a View. The label you write on a box is Text. A photo stuck on the lid is an Image. Boxes can sit inside boxes, which is called nesting.

<View>
  <Image source={{ uri: "https://reactnative.dev/img/tiny_logo.png" }} style={{ width: 48, height: 48 }} />
  <Text>My habits</Text>
  <Text>3 habits today</Text>
</View>
  • View is a box. It draws nothing by itself until you give it a style, like a background colour.
  • Text is the only place words can go. Text inside Text is fine: <Text>Streak: <Text>5 days</Text></Text>.
  • Image needs a source. A picture from the internet is { uri: "https://..." }. A picture in your project is require("./assets/logo.png").

People often put words straight inside a View. On a phone that is a red error screen: "Text strings must be rendered within a <Text> component". Wrap the words in <Text>. The other common one: an Image from the internet with no width and height shows nothing at all. React Native can't know its size before it downloads, so you must give one.

Expo also has its own expo-image package, which the official tutorial uses. It works the same way, with a source and a size, and adds extras like caching. Start with the core Image.

When you read a screen, read the JSX like an outline: every View is a box, and what's inside it is indented one step. Then find every word and check it sits inside a Text.

Words to recognise
Imagesourceurinesting
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

src/app/index.jsx5 notes
import { Image, Text, View } from "react-native";
Mentor note · line 1
All three building blocks come from react-native. Forget one here and you get "is not defined".
2
3export default function HomeScreen() {
4 return (
<View style={{ flex: 1, padding: 16, backgroundColor: "#0B0B0D" }}>
6 <Image
source={{ uri: "https://reactnative.dev/img/tiny_logo.png" }}
style={{ width: 48, height: 48 }}
9 />
10 <Text style={{ color: "white", fontSize: 28 }}>My habits</Text>
11 <Text style={{ color: "gray" }}>
You have <Text style={{ fontWeight: "bold" }}>3 habits</Text> today
13 </Text>
14 </View>
15 );
16}
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1export default function App() {
2  return (
3    <View style={{ flex: 1, justifyContent: "center" }}>
4      <Text>Drink water</Text>
5      Read 10 pages
6    </View>
7  );
8}
9// You open this app on your phone in Expo Go.
What appears on screen?
DrillBuild the header of your habit tracker2 / 2
This is the top of your habit tracker. Add a line under the title that says your streak, with only the number in bold. Then make the logo bigger.
1import { Image, StyleSheet, Text, View } from "react-native";
2 
3export default function App() {
4  return (
5    <View style={styles.screen}>
6      <View style={styles.header}>

Runs in the browser. Choose “My Device” in Snack to try it on your phone with Expo Go.

Working whenA new line under the title says "Streak: 5 days".Only the number 5 is bold, and it stays on the same line as the other words.The logo is 80 by 80.
Check each goal yourself, then mark it.
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3What is a View for?
  2. 2 / 3<Image source={{ uri: "https://example.com/cat.png" }} /> shows nothing. What is the most likely fix?
  3. 3 / 3How do you show a picture saved in your project at assets/logo.png?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with View, Text and Image?

09 / 09

Done

You can now
Read a screen's JSX and sketch which boxes, words and pictures appear, in what order.
Next: Pressable and TextInput Back to Phase 6
On this page
  1. 01View, Text and Image
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 6React Native with Expo
10 topics · 6–8 wks
  1. 1Your first Expo app
  2. 2View, Text and Image
  3. 3Pressable and TextInput
  4. 4Styling and flexbox on mobile
  5. 5Lists with FlatList
  6. 6Safe areas and the keyboard
  7. 7Screens and navigation
  8. 8Tabs
  9. 9Saving data on the phone
  10. 10Calling an API
JourneyPhase 6View, Text and Image
01 / 09Overview

View, Text and Image

You'll learn the three building blocks of every phone screen, a box, words and a picture, and how they nest.

Why it mattersEvery screen in your habit tracker is made of View, Text and Image placed inside each other.
about 75 min·needs: Your first Expo app
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Video
Complete React Native tutorial #2: Text, View and Image componentsYouTube · Net Ninja · 8 min · English
MMamun's noteWatch 0:00–4:04 for Text and View, then 10:11–13:13 for Image with a picture from the assets folder. The middle part on styling comes back in the styling topic. He uses an Expo Router project; the screen code is the same in Snack.
Docs
Imagereactnative.dev · official docs · 10 min · English
MMamun's noteRead the first example and the note under it, which says pictures from the internet need a width and height. Change the example's size and watch it update. You can skip the long list of props.
DocsOptional
Textreactnative.dev · official docs · 10 min · English
MMamun's noteRead "Nested text" and "Containers" only. They explain why words can't sit straight inside a View, and how Text inside Text lets you make one word bold.
VideoOptional
React Native crash course 2026YouTube · Traversy Media · 5 min · English
MMamun's noteWatch 23:59–28:25, "Native components". Brad walks through the core components page and says when you'd use View, Text, ScrollView and Pressable. Stop at "Styling".
03 / 09

Explanation

You want the top of your habit tracker to show a small logo, the title "My habits" and a line that says "3 habits today". On the web you would reach for <div>, <h1>, <p> and <img>. On a phone you have three building blocks instead.

Think of a tiffin carrier. The carrier and its boxes hold things and decide where they sit. That is a View. The label you write on a box is Text. A photo stuck on the lid is an Image. Boxes can sit inside boxes, which is called nesting.

<View>
  <Image source={{ uri: "https://reactnative.dev/img/tiny_logo.png" }} style={{ width: 48, height: 48 }} />
  <Text>My habits</Text>
  <Text>3 habits today</Text>
</View>
  • View is a box. It draws nothing by itself until you give it a style, like a background colour.
  • Text is the only place words can go. Text inside Text is fine: <Text>Streak: <Text>5 days</Text></Text>.
  • Image needs a source. A picture from the internet is { uri: "https://..." }. A picture in your project is require("./assets/logo.png").

People often put words straight inside a View. On a phone that is a red error screen: "Text strings must be rendered within a <Text> component". Wrap the words in <Text>. The other common one: an Image from the internet with no width and height shows nothing at all. React Native can't know its size before it downloads, so you must give one.

Expo also has its own expo-image package, which the official tutorial uses. It works the same way, with a source and a size, and adds extras like caching. Start with the core Image.

When you read a screen, read the JSX like an outline: every View is a box, and what's inside it is indented one step. Then find every word and check it sits inside a Text.

Words to recognise
Imagesourceurinesting
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

src/app/index.jsx5 notes
import { Image, Text, View } from "react-native";
Mentor note · line 1
All three building blocks come from react-native. Forget one here and you get "is not defined".
2
3export default function HomeScreen() {
4 return (
<View style={{ flex: 1, padding: 16, backgroundColor: "#0B0B0D" }}>
6 <Image
source={{ uri: "https://reactnative.dev/img/tiny_logo.png" }}
style={{ width: 48, height: 48 }}
9 />
10 <Text style={{ color: "white", fontSize: 28 }}>My habits</Text>
11 <Text style={{ color: "gray" }}>
You have <Text style={{ fontWeight: "bold" }}>3 habits</Text> today
13 </Text>
14 </View>
15 );
16}
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1export default function App() {
2  return (
3    <View style={{ flex: 1, justifyContent: "center" }}>
4      <Text>Drink water</Text>
5      Read 10 pages
6    </View>
7  );
8}
9// You open this app on your phone in Expo Go.
What appears on screen?
DrillBuild the header of your habit tracker2 / 2
This is the top of your habit tracker. Add a line under the title that says your streak, with only the number in bold. Then make the logo bigger.
1import { Image, StyleSheet, Text, View } from "react-native";
2 
3export default function App() {
4  return (
5    <View style={styles.screen}>
6      <View style={styles.header}>

Runs in the browser. Choose “My Device” in Snack to try it on your phone with Expo Go.

Working whenA new line under the title says "Streak: 5 days".Only the number 5 is bold, and it stays on the same line as the other words.The logo is 80 by 80.
Check each goal yourself, then mark it.
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3What is a View for?
  2. 2 / 3<Image source={{ uri: "https://example.com/cat.png" }} /> shows nothing. What is the most likely fix?
  3. 3 / 3How do you show a picture saved in your project at assets/logo.png?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with View, Text and Image?

09 / 09

Done

You can now
Read a screen's JSX and sketch which boxes, words and pictures appear, in what order.
Next: Pressable and TextInput Back to Phase 6
On this page
  1. 01View, Text and Image
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read

You want the top of your habit tracker to show a small logo, the title "My habits" and a line that says "3 habits today". On the web you would reach for <div>, <h1>, <p> and <img>. On a phone you have three building blocks instead.

Think of a tiffin carrier. The carrier and its boxes hold things and decide where they sit. That is a View. The label you write on a box is Text. A photo stuck on the lid is an Image. Boxes can sit inside boxes, which is called nesting.

<View>
  <Image source={{ uri: "https://reactnative.dev/img/tiny_logo.png" }} style={{ width: 48, height: 48 }} />
  <Text>My habits</Text>
  <Text>3 habits today</Text>
</View>
  • View is a box. It draws nothing by itself until you give it a style, like a background colour.
  • Text is the only place words can go. Text inside Text is fine: <Text>Streak: <Text>5 days</Text></Text>.
  • Image needs a source. A picture from the internet is { uri: "https://..." }. A picture in your project is require("./assets/logo.png").

People often put words straight inside a View. On a phone that is a red error screen: "Text strings must be rendered within a <Text> component". Wrap the words in <Text>. The other common one: an Image from the internet with no width and height shows nothing at all. React Native can't know its size before it downloads, so you must give one.

Expo also has its own expo-image package, which the official tutorial uses. It works the same way, with a source and a size, and adds extras like caching. Start with the core Image.

When you read a screen, read the JSX like an outline: every View is a box, and what's inside it is indented one step. Then find every word and check it sits inside a Text.

Words to recognise
Imagesourceurinesting

You want the top of your habit tracker to show a small logo, the title "My habits" and a line that says "3 habits today". On the web you would reach for <div>, <h1>, <p> and <img>. On a phone you have three building blocks instead.

Think of a tiffin carrier. The carrier and its boxes hold things and decide where they sit. That is a View. The label you write on a box is Text. A photo stuck on the lid is an Image. Boxes can sit inside boxes, which is called nesting.

<View>
  <Image source={{ uri: "https://reactnative.dev/img/tiny_logo.png" }} style={{ width: 48, height: 48 }} />
  <Text>My habits</Text>
  <Text>3 habits today</Text>
</View>
  • View is a box. It draws nothing by itself until you give it a style, like a background colour.
  • Text is the only place words can go. Text inside Text is fine: <Text>Streak: <Text>5 days</Text></Text>.
  • Image needs a source. A picture from the internet is { uri: "https://..." }. A picture in your project is require("./assets/logo.png").

People often put words straight inside a View. On a phone that is a red error screen: "Text strings must be rendered within a <Text> component". Wrap the words in <Text>. The other common one: an Image from the internet with no width and height shows nothing at all. React Native can't know its size before it downloads, so you must give one.

Expo also has its own expo-image package, which the official tutorial uses. It works the same way, with a source and a size, and adds extras like caching. Start with the core Image.

When you read a screen, read the JSX like an outline: every View is a box, and what's inside it is indented one step. Then find every word and check it sits inside a Text.

Words to recognise
Imagesourceurinesting