Expo Router

👋 I'm Simon

  • 🏡 Münster, Germany
  • 👩 👧 👦
  • 🏢 Techfluencer
  • 🏋️ Sports addict

What this workshop is

  • Learn how to use the Expo Router
  • Excercises
  • Write Code

What it's not

  • A deep dive into React Native
  • Covering all edge-cases
  • Endless slides

Prerequisites

  • Check out GitHub Repository
  • Install Dependencies in src/basic-app with npm install
  • Start Expo with npx expo

Schedule

  • 🤝 Intro
  • 🚀 Expo Router Basics
  • 🏗️ Stack, Tabs, Drawer
  • 💪 Params & Hooks
  • ☕️ Break
  • 🔥 Expo Web
  • 🌈 Styling
  • 🔗 Deep Linking
  • 🍝 Lunch
  • 🔐 Case Study: Auth
  • 🙋‍♂️ Wrap Up

Emoji

  • Cody Cat 🐱 "Write Code"
  • Betty Beaver 🦫 "Bonus Tasks"
  • Olivia Owl 🦉 "Good to know"
  • Lilly Link 🔗 "Useful docs"

Are you ready?

Routing with Expo Router

Expo Router Basics

  • Every file inside app becomes a page
  • Layouts (_layout) define your page structure
  • Create Expo Router apps with the CLI:

npx create-expo-app myapp -t tabs

Exercise 1: Stack

  • Copy the 1-1/_layout.tsx to your app/ folder

Exercise 2: Tabs

  • Create a tabs folder inside app/
  • Copy the 1-2/_layout.tsx to your app/tabs folder

Exercise 3: Drawer

  • Create a drawer folder inside app/
  • Copy the 1-3/_layout.tsx to your app/drawer folder

Exercise 4: Navigation Params

  • Copy the 1-4/list.tsx and 1-4/[id].tsx to your app/tabs folder

Exercise 5: Nested Layout & Hooks

  • Create a list folder inside app/tabs
  • Copy the 1-5/_layout_.tsx to your app/tabs/list folder

Coffee Break

Universal Apps with Expo Router

Exercise 1: Web Layout

  • Copy the 2-1/_layout.tsx to your app/drawer folder

Exercise 2: Platform-specific Extensions

  • Copy the 2-2/page.web.tsx.tsx to your components/home folder

Alternative Approach

  • Solito + Next.js

Exercise 3: CSS

  • Copy the 2-3/page.web.tsx and 2-3/page.css to your components/home folder

More CSS Styling?

  • Nativewind (Tailwind)
  • Tamagui

Exercise 4: HTML Head

  • Copy the 2-4/+html.tsx and 2-4/[...unmatched].tsx to your app/ folder

Exercise 5: Static Export

  • Copy the 2-5/[id].tsx to your app/drawer/list folder

Exercise 6: Deep Links

Deep Linking

  • Android: App Links
  • iOS: Universal Links
  • Also possible: Apple Handoff

Lunch Break

Case Study: Auth

  • Login/Register
  • Protected Routes (Tabs)

Exercise 1: Login Stack

  • Copy the 3-1/_layout_.tsx to your app/ folder

Exercise 2: Protected Routes

  • Copy the 3-2/_layout_.tsx to your app/ folder
  • Copy the 3-2/(authenticated).tsx to your app/ folder

Exercise 3: Nested Tabs

  • Copy the 3-3/(tabs) folder to your app/(authenticated) folder

Exercise 4: Additional Drawer

  • Copy the 3-4/_layout_.tsx to your app/(authenticated) folder

Wrap Up

Made with Slides.com