Free through lesson 3

React Native & Expo for Beginners

From creating a project with Expo to core components and styles, Flexbox and FlatList, Expo Router, the camera, location and notifications, storage, testing, and release builds. Over 30 lessons, you'll get to the point where "with the React you already know, you can build a memo app that runs on iOS and Android, and produce a build of it." All code and output were actually run on Expo SDK 57.0.24 / React Native 0.86.3 / React 19.2.3.

Start from lesson 1 Unlock every course

Curriculum

The 30 lessons are split into 6 chapters. We recommend going in order from chapter 1, but feel free to dip into whatever interests you. Note: JSX can't run in the browser here, so try it in the Expo project you create in lesson 2. Prerequisites are the basics of React (required) and TypeScript (recommended). Chapters 1-3 can be done with just the web and a simulator.

Chapter 1 — How It Differs from React on the Web (lessons 1–5)

Bring your React knowledge over as-is and switch only the render target to native. You'll create a project with Expo, run it on iOS, Android, and the web, and learn how to write components and styles in a world without the DOM.

1

What Is React Native? (A Map for People Who Know React)

It's the same React, with the render target switched from the DOM to native views. First, sort out react-dom vs. react-native, what Expo handles, and when to pick Flutter.

Free
2

Creating and Running a Project with Expo

Scaffold with create-expo-app and run the same code on the web, the iOS Simulator, and the Android Emulator. We also look at the real bundle times and logs from each.

Free
3

Life Without the DOM (No div, No CSS Files)

Sort out what you can and can't use in a world with no window, no document, and no CSS selectors. Plus the most common pitfall: text must always go inside Text.

Free
4

Core Components (View, Text, Image, ScrollView, Pressable)

Learn React Native's built-in components by mapping them to web tags. Includes when to use ScrollView vs. FlatList, and why Pressable beats the Touchable components.

🔒 Basic
5

StyleSheet and Applying Styles

What StyleSheet.create means, defaults that differ from CSS, and what unitless numbers refer to. We also check how dp relates to pixels, measured on a real device.

🔒 Basic

Chapter 2 — Building Screens (lessons 6–11)

Use Flexbox, virtualized lists, images, safe areas, and platform branching to build screens that feel like a real app. At the end, you'll build a memo list where you can add and delete items.

6

Building Layouts with Flexbox

What flex: 1 means, why you space things with gap instead of margin, and how to fix overflow and squashing. Learn the pattern for filling the screen first.

🔒 Basic
7

Showing Lists with FlatList (What Is Virtualization?)

Render 1,000 items with ScrollView and FlatList and count how many rows actually get created. Covers the roles of keyExtractor, getItemLayout, and ListEmptyComponent.

🔒 Basic
8

Showing Images (Image and expo-image)

require vs. uri, how @2x and @3x get picked, and when to use each resizeMode. If you need caching and a placeholder, switch to expo-image.

🔒 Basic
9

Safe Areas and the Status Bar

How to add padding so the notch and home bar don't hide content. Compare measured useSafeAreaInsets values on iOS and Android, and decide where SafeAreaView is OK to use.

🔒 Basic
10

Changing Behavior by Platform

Platform.OS and Platform.select, and splitting files into .ios.tsx / .android.tsx. Where it's fine to branch, and where you shouldn't.

🔒 Basic
11

[Practice] Building the Memo List Screen

Combine the pieces from lessons 1-10 into a memo list with add, delete, and an empty state. Rows become stateless components, and display data is built outside the screen.

🔒 Basic

Chapter 3 — Navigation (lessons 12–17)

With Expo Router, a file's location becomes the screen's address. You'll work through stacks, tabs, parameters, and deep links, and finish the skeleton of an app that goes from a list to a detail screen.

12

Expo Router (Files Become Screens)

How file names in the app directory become URLs. Learn to read _layout, groups, dynamic segments, and +not-found, and confirm that types are generated automatically.

🔒 Basic
13

Stacking Screens with Stack

The role of the Stack in _layout.tsx, showing and hiding the header, and per-screen titles. Also how going back differs between iOS and Android.

🔒 Basic
14

Adding Tabs (Groups and Nested Layouts)

Build tabs with a (tabs) group and a Tabs layout, then stack a detail screen on top of them. Each tab gets its own history, and that has pitfalls.

🔒 Basic
15

Passing Values to Screens and Receiving Them

Dynamic segments and useLocalSearchParams. Every value you pass becomes a string, and there's a line between what you should and shouldn't pass.

🔒 Basic
16

Deep Links and Schemes

Open a screen from outside with memoapp://. What the scheme setting becomes on iOS and Android, real output of Linking.createURL and parse, and opening links from an emulator.

🔒 Basic
17

[Practice] Connecting the List to a Detail Screen

Route chapter 2's memo list through Expo Router so tapping a row opens its detail. The detail screen refetches data by id and handles the not-found case.

🔒 Basic

Chapter 4 — Using Device Features (lessons 18–23)

Get a handle on permissions, the camera, location, notifications, and storage by actually running them. Everything is built assuming it may be "denied or fail," and at the end you'll save a memo with a photo and a location attached.

18

Asking for Permissions (Declaring and Requesting Are Different)

See what app.json text becomes in Info.plist and AndroidManifest, and branch on status, granted, and canAskAgain. Plus how to change device state from adb to test.

🔒 Basic
19

Working with the Camera and Photos

Taking a photo with CameraView vs. picking one with ImagePicker. How to handle permissions with hooks, and how much you can test on a simulator.

🔒 Basic
20

Getting the Location

Foreground and background permissions are separate, accuracy trades off against wait time, and the pattern of showing the last known location first. Measured by moving the emulator.

🔒 Basic
21

Sending Notifications

Scheduling and canceling local notifications, POST_NOTIFICATIONS on Android 13+, and opening a screen when a notification is tapped. Also how this differs from push.

🔒 Basic
22

Saving on the Device (AsyncStorage, SecureStore, SQLite)

Compare three storage options using real output from writing and reading. What to store where, key design, and SQLite transactions.

🔒 Basic
23

[Practice] Saving a Memo with a Photo and Location

Tie lessons 18-22 together. Build permissions, photos, location, and storage so things keep going even on failure, then read the saved data back to verify it.

🔒 Basic

Chapter 5 — Finishing Touches (lessons 24–27)

Decide where state lives, connect to an API, and count re-renders to reduce them. With type checking, tests, and logs, you'll also learn an order for isolating a problem layer by layer.

24

State Management (Context, External Stores, Server State)

Sort state that spans screens by kind and decide where it lives. The limits of Context, a small useSyncExternalStore store, and why not to mix in server state.

🔒 Basic
25

Connecting to an API (Loading, Failure, Refetching)

fetch works as-is. Timeouts and aborts, folding failures into types, and how localhost during development looks from an emulator.

🔒 Basic
26

Reducing Re-renders (Count Them to Be Sure)

Count how many times a child re-renders when its parent updates, and compare with memo. What helps in lists first, and the rule of not touching anything before measuring.

🔒 Basic
27

Debugging Tools and What to Do When You're Stuck

The dev menu, logs, error screens, type checking, and tests. Sort out what each one tells you, and set an order for isolating the cause layer by layer.

🔒 Basic

Chapter 6 — Shipping (lessons 28–30)

Use prebuild and release builds to measure the size of the files that actually come out. You'll line up icons and versions, and finally sum up the differences from Flutter with numbers.

28

Build Types and Paths to Shipping (Local and EAS Build)

What it means to own ios/ and android/ via prebuild, debug vs. release, and measured build sizes. What EAS Build takes on, and what this course didn't run.

🔒 Basic
29

Icons, Splash Screen, App Name, and Version

How one spot in app.json produces assets for both OSes. Android adaptive icons, splash settings, and the difference between version and build number.

🔒 Basic
30

[Practice] What to Prepare Before the Store, and How It Compares to Flutter

List what to check before submitting, and honestly mark what this course could measure. Finally, sum up how to choose between Flutter and React Native, with numbers.

🔒 Basic

Once you finish all 30 lessons, look at things from the native side with Swift for Beginners or Kotlin & Android Intro Course, try the other from-scratch path with Dart & Flutter for Beginners, or design the APIs your app talks to in API Design for Beginners. A membership unlocks every course.