Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 6 · 7 / 10Screens and navigation
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 6Screens and navigation
01 / 10Overview

Screens and navigation

You'll learn how Expo Router turns files into screens, and how a stack opens a screen and goes back.

Why it mattersTapping a habit to see its details, and coming back, is the most common move in any app.
about 2 h·needs: Lists with FlatList, Pressable and TextInput
02 / 10

Watch & read

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

Docs
Expo tutorial: add navigationdocs.expo.dev · official tutorial · 20 min · English
MMamun's noteRead from "Expo Router basics" to the end of "Add a not-found route". It adds an about screen to the stack and opens it with a Link. Stop at "Add a bottom tab navigator"; that is the next topic. The tutorial uses .tsx files; write .jsx and leave out the types.
Video
Using a stack navigator with Expo RouterYouTube · Expo · 8 min · English
MMamun's noteWatch 0:00–7:58. It pushes screens on a stack, goes back, compares push, replace and navigate, passes a name to the next screen, then makes a dynamic route with [id]. Skip nested dynamic routes and screen options for now. At 4:04 you hear that the router is built on React Navigation; since SDK 56 Expo Router no longer depends on it, but the ideas are the same.
DocsOptional
Navigating between pages in Expo Routerdocs.expo.dev · official docs · 10 min · English
MMamun's noteThe reference for this topic. Read "Native navigation basics with useRouter", "Links and buttons" and "Dynamic routes and URL parameters". Skip everything from Redirects down.
VideoOptional
React Native crash course 2026YouTube · Traversy Media · 5 min · English
MMamun's noteWatch 36:03–40:40. Brad adds a meals screen as a new file, lists it in the Stack, links to it, and sets each screen's header title. Good to see the whole loop once more in a real project.
03 / 10

See it step by step

A stack of screens. Push puts one on top, back takes the top one off.

stack
"/ Home"
on top"Home"
ScreenMy habits Drink water Add a habit
src/app/index.jsx
1export default function HomeScreen() {
2 const router = useRouter();
3 return (
4 <View>
5 <Pressable onPress={() => router.push("/habit/h1")}>
6 <Text>Drink water</Text>
7 </Pressable>
8 <Pressable onPress={() => router.push("/add")}>
9 <Text>Add a habit</Text>
10 </Pressable>
11 </View>
12 );
13}
The app opens. Expo Router finds src/app/index.jsx for the route "/" and puts it on the stack. It is the only screen.
Step 1 / 6
04 / 10

Explanation

So far your app has one screen. Now you want to tap "Drink water" and open a screen just for that habit, with a Back arrow to return. Expo Router does this with files: every file in the src/app folder is a screen. (Older projects and many videos keep it in app/ at the top; it works the same way.)

src/app/_layout.jsx      the frame around every screen
src/app/index.jsx        "/"            the home screen
src/app/add.jsx          "/add"
src/app/habit/[id].jsx   "/habit/h1", "/habit/h2", ...

The address of a screen is called a route. index.jsx is /. A name in square brackets, like [id], is a blank to fill in, so one file works for every habit.

_layout.jsx decides how screens are arranged. return <Stack /> makes a stack. Think of a pile of exam papers on the teacher's desk. A new screen is put on top (push). Back takes the top one off (pop), and you see the one underneath again. The Stack gives every screen a header with a Back arrow for free.

<Link href="/habit/h1">Drink water</Link>
 
const router = useRouter();
<Pressable onPress={() => router.push("/add")}><Text>Add a habit</Text></Pressable>
  • Link is tappable text that opens a route, like <a href> on the web.
  • router.push("/add") does the same from your own code, for example after a check. router.back() closes the top screen. You'll also see router.navigate, which goes back to a screen if it is already in the pile instead of adding a copy.
  • On the habit screen, useLocalSearchParams() reads the blank: const { id } = useLocalSearchParams(); gives "h1".

People often forget that the folder decides the route. router.push("/habits/h1") when the folder is habit opens Expo Router's "page not found" screen. Check the path against the file names. Another one: Link wraps its children in Text. To make a whole card tappable, use <Link href="..." asChild> with a Pressable inside.

When you read an Expo Router project, start with the file list in src/app, then open each _layout.jsx to see which screens are in a Stack. Then every Link and router.push is just "put this route on top".

Words to recognise
Expo Routerroute_layoutStackLinkrouter.pushrouter.backuseLocalSearchParams
05 / 10

Code tour

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

src/app/habit/[id].jsx5 notes
import { Stack, useLocalSearchParams, useRouter } from "expo-router";
Mentor note · line 1
Everything for moving between screens comes from expo-router.
2import { Pressable, Text, View } from "react-native";
3import { findHabit } from "../../habits";
4
5export default function HabitScreen() {
const { id } = useLocalSearchParams();
7 const router = useRouter();
const habit = findHabit(id);
9 return (
10 <View style={{ flex: 1, padding: 16, gap: 12 }}>
<Stack.Screen options={{ title: habit.name }} />
12 <Text>Streak: {habit.streak} days</Text>
<Pressable onPress={() => router.back()}><Text>Done</Text></Pressable>
14 </View>
15 );
16}
06 / 10

Practice

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

DrillPredict1 / 2
1// src/app/index.jsx (Home)
2<Pressable onPress={() => router.push("/habit/h1")}>
3  <Text>Drink water</Text>
4</Pressable>
5 
6// src/app/habit/[id].jsx (Habit)
7<Pressable onPress={() => router.push("/edit/h1")}>
8  <Text>Edit</Text>
9</Pressable>
10 
11// src/app/edit/[id].jsx (Edit)
12<Pressable onPress={() => router.back()}>
13  <Text>Save</Text>
14</Pressable>
15 
16// The app opens on Home. You tap "Drink water", then "Edit", then "Save".
Where does Back take you?
DrillOpen a habit's own screen2 / 2
A Snack is one file, so it can't use Expo Router's folders. This one uses React Navigation's stack, which has the same idea: push a screen, go back. Make tapping a habit open its own screen, and add a Done button there.
1import { NavigationContainer } from "@react-navigation/native";
2import { createNativeStackNavigator } from "@react-navigation/native-stack";
3import { Pressable, StyleSheet, Text, View } from "react-native";
4 
5const Stack = createNativeStackNavigator();
6const habits = [

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

Working whenTapping a habit opens a screen with its name, and the Back arrow returns to the list.The habit screen also shows "Streak: 5 days" (the right number for each habit).A Done button on the habit screen goes back, using navigation.goBack(). Add navigation next to route in HabitScreen's props.
Check each goal yourself, then mark it.
07 / 10

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3Which file does Expo Router open for the route /habit/h7?
  2. 2 / 3Your stack is Home, then Habit. You call router.push("/add"), then router.back(). Which screen is showing?
  3. 3 / 3What does return <Stack /> in src/app/_layout.jsx do?
08 / 10

Explain it back

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

How confident are you with Screens and navigation?

10 / 10

Done

You can now
Read a project's src/app folder and its Link and router.push calls, and say which screen opens and where Back goes.
Next: Tabs Back to Phase 6
On this page
  1. 01Screens and navigation
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Practice
  7. 07Quick check
  8. 08Explain it back
  9. 09Confidence
  10. 10Done
Up next · 02 / 10Watch & 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 6Screens and navigation
01 / 10Overview

Screens and navigation

You'll learn how Expo Router turns files into screens, and how a stack opens a screen and goes back.

Why it mattersTapping a habit to see its details, and coming back, is the most common move in any app.
about 2 h·needs: Lists with FlatList, Pressable and TextInput
02 / 10

Watch & read

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

Docs
Expo tutorial: add navigationdocs.expo.dev · official tutorial · 20 min · English
MMamun's noteRead from "Expo Router basics" to the end of "Add a not-found route". It adds an about screen to the stack and opens it with a Link. Stop at "Add a bottom tab navigator"; that is the next topic. The tutorial uses .tsx files; write .jsx and leave out the types.
Video
Using a stack navigator with Expo RouterYouTube · Expo · 8 min · English
MMamun's noteWatch 0:00–7:58. It pushes screens on a stack, goes back, compares push, replace and navigate, passes a name to the next screen, then makes a dynamic route with [id]. Skip nested dynamic routes and screen options for now. At 4:04 you hear that the router is built on React Navigation; since SDK 56 Expo Router no longer depends on it, but the ideas are the same.
DocsOptional
Navigating between pages in Expo Routerdocs.expo.dev · official docs · 10 min · English
MMamun's noteThe reference for this topic. Read "Native navigation basics with useRouter", "Links and buttons" and "Dynamic routes and URL parameters". Skip everything from Redirects down.
VideoOptional
React Native crash course 2026YouTube · Traversy Media · 5 min · English
MMamun's noteWatch 36:03–40:40. Brad adds a meals screen as a new file, lists it in the Stack, links to it, and sets each screen's header title. Good to see the whole loop once more in a real project.
03 / 10

See it step by step

A stack of screens. Push puts one on top, back takes the top one off.

stack
"/ Home"
on top"Home"
ScreenMy habits Drink water Add a habit
src/app/index.jsx
1export default function HomeScreen() {
2 const router = useRouter();
3 return (
4 <View>
5 <Pressable onPress={() => router.push("/habit/h1")}>
6 <Text>Drink water</Text>
7 </Pressable>
8 <Pressable onPress={() => router.push("/add")}>
9 <Text>Add a habit</Text>
10 </Pressable>
11 </View>
12 );
13}
The app opens. Expo Router finds src/app/index.jsx for the route "/" and puts it on the stack. It is the only screen.
Step 1 / 6
04 / 10

Explanation

So far your app has one screen. Now you want to tap "Drink water" and open a screen just for that habit, with a Back arrow to return. Expo Router does this with files: every file in the src/app folder is a screen. (Older projects and many videos keep it in app/ at the top; it works the same way.)

src/app/_layout.jsx      the frame around every screen
src/app/index.jsx        "/"            the home screen
src/app/add.jsx          "/add"
src/app/habit/[id].jsx   "/habit/h1", "/habit/h2", ...

The address of a screen is called a route. index.jsx is /. A name in square brackets, like [id], is a blank to fill in, so one file works for every habit.

_layout.jsx decides how screens are arranged. return <Stack /> makes a stack. Think of a pile of exam papers on the teacher's desk. A new screen is put on top (push). Back takes the top one off (pop), and you see the one underneath again. The Stack gives every screen a header with a Back arrow for free.

<Link href="/habit/h1">Drink water</Link>
 
const router = useRouter();
<Pressable onPress={() => router.push("/add")}><Text>Add a habit</Text></Pressable>
  • Link is tappable text that opens a route, like <a href> on the web.
  • router.push("/add") does the same from your own code, for example after a check. router.back() closes the top screen. You'll also see router.navigate, which goes back to a screen if it is already in the pile instead of adding a copy.
  • On the habit screen, useLocalSearchParams() reads the blank: const { id } = useLocalSearchParams(); gives "h1".

People often forget that the folder decides the route. router.push("/habits/h1") when the folder is habit opens Expo Router's "page not found" screen. Check the path against the file names. Another one: Link wraps its children in Text. To make a whole card tappable, use <Link href="..." asChild> with a Pressable inside.

When you read an Expo Router project, start with the file list in src/app, then open each _layout.jsx to see which screens are in a Stack. Then every Link and router.push is just "put this route on top".

Words to recognise
Expo Routerroute_layoutStackLinkrouter.pushrouter.backuseLocalSearchParams
05 / 10

Code tour

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

src/app/habit/[id].jsx5 notes
import { Stack, useLocalSearchParams, useRouter } from "expo-router";
Mentor note · line 1
Everything for moving between screens comes from expo-router.
2import { Pressable, Text, View } from "react-native";
3import { findHabit } from "../../habits";
4
5export default function HabitScreen() {
const { id } = useLocalSearchParams();
7 const router = useRouter();
const habit = findHabit(id);
9 return (
10 <View style={{ flex: 1, padding: 16, gap: 12 }}>
<Stack.Screen options={{ title: habit.name }} />
12 <Text>Streak: {habit.streak} days</Text>
<Pressable onPress={() => router.back()}><Text>Done</Text></Pressable>
14 </View>
15 );
16}
06 / 10

Practice

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

DrillPredict1 / 2
1// src/app/index.jsx (Home)
2<Pressable onPress={() => router.push("/habit/h1")}>
3  <Text>Drink water</Text>
4</Pressable>
5 
6// src/app/habit/[id].jsx (Habit)
7<Pressable onPress={() => router.push("/edit/h1")}>
8  <Text>Edit</Text>
9</Pressable>
10 
11// src/app/edit/[id].jsx (Edit)
12<Pressable onPress={() => router.back()}>
13  <Text>Save</Text>
14</Pressable>
15 
16// The app opens on Home. You tap "Drink water", then "Edit", then "Save".
Where does Back take you?
DrillOpen a habit's own screen2 / 2
A Snack is one file, so it can't use Expo Router's folders. This one uses React Navigation's stack, which has the same idea: push a screen, go back. Make tapping a habit open its own screen, and add a Done button there.
1import { NavigationContainer } from "@react-navigation/native";
2import { createNativeStackNavigator } from "@react-navigation/native-stack";
3import { Pressable, StyleSheet, Text, View } from "react-native";
4 
5const Stack = createNativeStackNavigator();
6const habits = [

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

Working whenTapping a habit opens a screen with its name, and the Back arrow returns to the list.The habit screen also shows "Streak: 5 days" (the right number for each habit).A Done button on the habit screen goes back, using navigation.goBack(). Add navigation next to route in HabitScreen's props.
Check each goal yourself, then mark it.
07 / 10

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3Which file does Expo Router open for the route /habit/h7?
  2. 2 / 3Your stack is Home, then Habit. You call router.push("/add"), then router.back(). Which screen is showing?
  3. 3 / 3What does return <Stack /> in src/app/_layout.jsx do?
08 / 10

Explain it back

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

How confident are you with Screens and navigation?

10 / 10

Done

You can now
Read a project's src/app folder and its Link and router.push calls, and say which screen opens and where Back goes.
Next: Tabs Back to Phase 6
On this page
  1. 01Screens and navigation
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Practice
  7. 07Quick check
  8. 08Explain it back
  9. 09Confidence
  10. 10Done
Up next · 02 / 10Watch & read

So far your app has one screen. Now you want to tap "Drink water" and open a screen just for that habit, with a Back arrow to return. Expo Router does this with files: every file in the src/app folder is a screen. (Older projects and many videos keep it in app/ at the top; it works the same way.)

src/app/_layout.jsx      the frame around every screen
src/app/index.jsx        "/"            the home screen
src/app/add.jsx          "/add"
src/app/habit/[id].jsx   "/habit/h1", "/habit/h2", ...

The address of a screen is called a route. index.jsx is /. A name in square brackets, like [id], is a blank to fill in, so one file works for every habit.

_layout.jsx decides how screens are arranged. return <Stack /> makes a stack. Think of a pile of exam papers on the teacher's desk. A new screen is put on top (push). Back takes the top one off (pop), and you see the one underneath again. The Stack gives every screen a header with a Back arrow for free.

<Link href="/habit/h1">Drink water</Link>
 
const router = useRouter();
<Pressable onPress={() => router.push("/add")}><Text>Add a habit</Text></Pressable>
  • Link is tappable text that opens a route, like <a href> on the web.
  • router.push("/add") does the same from your own code, for example after a check. router.back() closes the top screen. You'll also see router.navigate, which goes back to a screen if it is already in the pile instead of adding a copy.
  • On the habit screen, useLocalSearchParams() reads the blank: const { id } = useLocalSearchParams(); gives "h1".

People often forget that the folder decides the route. router.push("/habits/h1") when the folder is habit opens Expo Router's "page not found" screen. Check the path against the file names. Another one: Link wraps its children in Text. To make a whole card tappable, use <Link href="..." asChild> with a Pressable inside.

When you read an Expo Router project, start with the file list in src/app, then open each _layout.jsx to see which screens are in a Stack. Then every Link and router.push is just "put this route on top".

Words to recognise
Expo Routerroute_layoutStackLinkrouter.pushrouter.backuseLocalSearchParams

So far your app has one screen. Now you want to tap "Drink water" and open a screen just for that habit, with a Back arrow to return. Expo Router does this with files: every file in the src/app folder is a screen. (Older projects and many videos keep it in app/ at the top; it works the same way.)

src/app/_layout.jsx      the frame around every screen
src/app/index.jsx        "/"            the home screen
src/app/add.jsx          "/add"
src/app/habit/[id].jsx   "/habit/h1", "/habit/h2", ...

The address of a screen is called a route. index.jsx is /. A name in square brackets, like [id], is a blank to fill in, so one file works for every habit.

_layout.jsx decides how screens are arranged. return <Stack /> makes a stack. Think of a pile of exam papers on the teacher's desk. A new screen is put on top (push). Back takes the top one off (pop), and you see the one underneath again. The Stack gives every screen a header with a Back arrow for free.

<Link href="/habit/h1">Drink water</Link>
 
const router = useRouter();
<Pressable onPress={() => router.push("/add")}><Text>Add a habit</Text></Pressable>
  • Link is tappable text that opens a route, like <a href> on the web.
  • router.push("/add") does the same from your own code, for example after a check. router.back() closes the top screen. You'll also see router.navigate, which goes back to a screen if it is already in the pile instead of adding a copy.
  • On the habit screen, useLocalSearchParams() reads the blank: const { id } = useLocalSearchParams(); gives "h1".

People often forget that the folder decides the route. router.push("/habits/h1") when the folder is habit opens Expo Router's "page not found" screen. Check the path against the file names. Another one: Link wraps its children in Text. To make a whole card tappable, use <Link href="..." asChild> with a Pressable inside.

When you read an Expo Router project, start with the file list in src/app, then open each _layout.jsx to see which screens are in a Stack. Then every Link and router.push is just "put this route on top".

Words to recognise
Expo Routerroute_layoutStackLinkrouter.pushrouter.backuseLocalSearchParams