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

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

• What did you learn?
• Feedback 🙏
• https://galaxies.dev/workshop-feedback