Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 6 · 1 / 10Your first Expo app
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 6Your first Expo app
01 / 09Overview

Your first Expo app

You'll learn to read a React Native screen and change it in Expo, right in your browser.

Why it mattersEvery app you build from here on starts as a screen like this one.
about 90 min·needs: State with useState
02 / 09

Watch & read

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

Video
How to create your first Expo appYouTube · Expo · 10 min · English
MMamun's noteFrom Expo's own tutorial series, with Beto. Watch 0:00–9:14 to see what a real project on a computer looks like. Don't install anything yet: Snack does the same in your browser. Watch 5:19–6:32 twice, where he scans the QR code and the app opens on his phone. He uses TypeScript (.tsx files); we write plain JavaScript, and the components are the same.
Docs
Core components and native componentsreactnative.dev · official docs · 10 min · English
MMamun's noteRead the table of core components. It shows each one next to what it becomes on Android, on iOS and on the web. View is like a div, Text is like a p. Skip the part about writing your own native components.
ToolOptional
Expo Snacksnack.expo.dev · 10 min · English
MMamun's noteThe playground the drills on this site use. Open a blank one and change the starter code. The preview on the right updates as you type. No account needed to play.
VideoOptional
React Native for Dummies 2026: full beginner crash courseYouTube · Code with Beto · 8 min · English
MMamun's noteWatch 4:20–12:32 only: how React Native turns your JavaScript into real phone screens, and why we use Expo and Expo Go. Stop at "Installing Node.js". We come back to this video when we call an API.
03 / 09

Explanation

React Native is React for phones. You still write components, props and state. The difference is what you return: instead of <div> and <p>, you use phone building blocks like <View> (a box) and <Text> (any words on screen).

Expo is the toolkit that runs your code on a phone without installing Android Studio. Expo Snack runs it in the browser, and the Expo Go app runs it on your own phone when you scan a QR code. Expo Go supports only certain Expo versions; if it says the project is too new, pick an older SDK in Snack's menu at the bottom, or ask Mamun.

Styling looks like CSS but is written as JavaScript objects, and layout uses flexbox, the same flexbox you learned in Phase 1.

Words to recognise
ExpoViewTextStyleSheetexport default
04 / 09

Code tour

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

App.js5 notes
1import { useState } from "react";
import { Pressable, StyleSheet, Text, View } from "react-native";
Mentor note · line 2
Phone building blocks come from the react-native package. There is no <div> or <p> here.
export default function App() {
4 const [count, setCount] = useState(0);
5 return (
<View style={styles.screen}>
7 <Text>Hello, Nusrat</Text>
<Pressable onPress={() => setCount(count + 1)}>
9 <Text>Tapped {count} times</Text>
10 </Pressable>
11 </View>
12 );
13}
const styles = StyleSheet.create({
15 screen: { flex: 1, justifyContent: "center", alignItems: "center" },
16});
05 / 09

Practice

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

DrillPredict1 / 2
1export default function App() {
2  const [count, setCount] = useState(1);
3  return (
4    <View>
5      <Pressable onPress={() => setCount(count + 1)}>
6        <Text>Tapped {count} times</Text>
7      </Pressable>
8    </View>
9  );
10}
11// The app opens. You tap the words twice.
What does the screen say after two taps?
DrillMake it yours2 / 2
Open the Snack and change the screen so it greets you by name, then make the counter go up by 2 on each tap.
1import { useState } from "react";
2import { Pressable, StyleSheet, Text, View } from "react-native";
3 
4export default function App() {
5  const [count, setCount] = useState(0);
6  return (

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

Working whenThe title shows your name.Each tap adds 2: 0, 2, 4…
Check each goal yourself, then mark it.
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3In React Native, which component shows words on screen?
  2. 2 / 3How do you run your Snack on your own phone?
  3. 3 / 3You have const styles = StyleSheet.create({ title: { fontSize: 28 } }). How do you make a <Text> use it?
07 / 09

Explain it back

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

How confident are you with Your first Expo app?

09 / 09

Done

You can now
Read a small React Native screen and change what it shows.
Next: View, Text and Image Back to Phase 6
On this page
  1. 01Your first Expo app
  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 6Your first Expo app
01 / 09Overview

Your first Expo app

You'll learn to read a React Native screen and change it in Expo, right in your browser.

Why it mattersEvery app you build from here on starts as a screen like this one.
about 90 min·needs: State with useState
02 / 09

Watch & read

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

Video
How to create your first Expo appYouTube · Expo · 10 min · English
MMamun's noteFrom Expo's own tutorial series, with Beto. Watch 0:00–9:14 to see what a real project on a computer looks like. Don't install anything yet: Snack does the same in your browser. Watch 5:19–6:32 twice, where he scans the QR code and the app opens on his phone. He uses TypeScript (.tsx files); we write plain JavaScript, and the components are the same.
Docs
Core components and native componentsreactnative.dev · official docs · 10 min · English
MMamun's noteRead the table of core components. It shows each one next to what it becomes on Android, on iOS and on the web. View is like a div, Text is like a p. Skip the part about writing your own native components.
ToolOptional
Expo Snacksnack.expo.dev · 10 min · English
MMamun's noteThe playground the drills on this site use. Open a blank one and change the starter code. The preview on the right updates as you type. No account needed to play.
VideoOptional
React Native for Dummies 2026: full beginner crash courseYouTube · Code with Beto · 8 min · English
MMamun's noteWatch 4:20–12:32 only: how React Native turns your JavaScript into real phone screens, and why we use Expo and Expo Go. Stop at "Installing Node.js". We come back to this video when we call an API.
03 / 09

Explanation

React Native is React for phones. You still write components, props and state. The difference is what you return: instead of <div> and <p>, you use phone building blocks like <View> (a box) and <Text> (any words on screen).

Expo is the toolkit that runs your code on a phone without installing Android Studio. Expo Snack runs it in the browser, and the Expo Go app runs it on your own phone when you scan a QR code. Expo Go supports only certain Expo versions; if it says the project is too new, pick an older SDK in Snack's menu at the bottom, or ask Mamun.

Styling looks like CSS but is written as JavaScript objects, and layout uses flexbox, the same flexbox you learned in Phase 1.

Words to recognise
ExpoViewTextStyleSheetexport default
04 / 09

Code tour

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

App.js5 notes
1import { useState } from "react";
import { Pressable, StyleSheet, Text, View } from "react-native";
Mentor note · line 2
Phone building blocks come from the react-native package. There is no <div> or <p> here.
export default function App() {
4 const [count, setCount] = useState(0);
5 return (
<View style={styles.screen}>
7 <Text>Hello, Nusrat</Text>
<Pressable onPress={() => setCount(count + 1)}>
9 <Text>Tapped {count} times</Text>
10 </Pressable>
11 </View>
12 );
13}
const styles = StyleSheet.create({
15 screen: { flex: 1, justifyContent: "center", alignItems: "center" },
16});
05 / 09

Practice

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

DrillPredict1 / 2
1export default function App() {
2  const [count, setCount] = useState(1);
3  return (
4    <View>
5      <Pressable onPress={() => setCount(count + 1)}>
6        <Text>Tapped {count} times</Text>
7      </Pressable>
8    </View>
9  );
10}
11// The app opens. You tap the words twice.
What does the screen say after two taps?
DrillMake it yours2 / 2
Open the Snack and change the screen so it greets you by name, then make the counter go up by 2 on each tap.
1import { useState } from "react";
2import { Pressable, StyleSheet, Text, View } from "react-native";
3 
4export default function App() {
5  const [count, setCount] = useState(0);
6  return (

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

Working whenThe title shows your name.Each tap adds 2: 0, 2, 4…
Check each goal yourself, then mark it.
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3In React Native, which component shows words on screen?
  2. 2 / 3How do you run your Snack on your own phone?
  3. 3 / 3You have const styles = StyleSheet.create({ title: { fontSize: 28 } }). How do you make a <Text> use it?
07 / 09

Explain it back

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

How confident are you with Your first Expo app?

09 / 09

Done

You can now
Read a small React Native screen and change what it shows.
Next: View, Text and Image Back to Phase 6
On this page
  1. 01Your first Expo app
  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

React Native is React for phones. You still write components, props and state. The difference is what you return: instead of <div> and <p>, you use phone building blocks like <View> (a box) and <Text> (any words on screen).

Expo is the toolkit that runs your code on a phone without installing Android Studio. Expo Snack runs it in the browser, and the Expo Go app runs it on your own phone when you scan a QR code. Expo Go supports only certain Expo versions; if it says the project is too new, pick an older SDK in Snack's menu at the bottom, or ask Mamun.

Styling looks like CSS but is written as JavaScript objects, and layout uses flexbox, the same flexbox you learned in Phase 1.

Words to recognise
ExpoViewTextStyleSheetexport default

React Native is React for phones. You still write components, props and state. The difference is what you return: instead of <div> and <p>, you use phone building blocks like <View> (a box) and <Text> (any words on screen).

Expo is the toolkit that runs your code on a phone without installing Android Studio. Expo Snack runs it in the browser, and the Expo Go app runs it on your own phone when you scan a QR code. Expo Go supports only certain Expo versions; if it says the project is too new, pick an older SDK in Snack's menu at the bottom, or ask Mamun.

Styling looks like CSS but is written as JavaScript objects, and layout uses flexbox, the same flexbox you learned in Phase 1.

Words to recognise
ExpoViewTextStyleSheetexport default