Activity 05: Screen Navigator - Discovery Challenge

A React Native app demonstrating React Navigation with stack and tab navigation patterns.

📱 Tech Stack

• React: 19.0.0
• React Native: 0.79.5
• Expo SDK: ~54.0.0
• React Navigation: 6.x
  • Stack Navigator
  • Bottom Tabs Navigator

🚀 Getting Started

Prerequisites

• Node.js 18+ installed
• Expo Go app on your phone (iOS/Android)
• OR iOS Simulator (Mac only) / Android Emulator

Installation

# Install dependencies
npm install --legacy-peer-deps

# Start development server
npx expo start

Testing Options

• Phone: Scan QR code with Expo Go app
• Web: Press w in terminal
• iOS: Press i (requires Xcode)
• Android: Press a (requires Android Studio)

📝 Activity TODOs

This template is 65-70% complete. Complete the following TODOs:

TODO #1: Stack Navigator Setup (App.js)

• Add DetailScreen to HomeStack
• Configure screen options

TODO #2A: Navigation with Parameters (HomeScreen.js)

• Implement goToDetail function
• Pass item data to DetailScreen

TODO #2B: Access Route Parameters (DetailScreen.js)

• Extract item from route.params
• Display item information

TODO #3A: Build SettingsScreen (SettingsScreen.js)

• Create complete Settings screen from scratch
• Add switches for notifications and dark mode
• Display app information

TODO #3B-D: Add Settings to Navigation (App.js)

• Import SettingsScreen
• Configure Settings tab icon
• Add Settings screen to tab navigator

📁 File Structure

activity-05-screen-navigator/
├── App.js                    # Navigation container (60% complete)
├── app.json                  # Expo config (100% complete)
├── package.json              # Dependencies (100% complete)
├── screens/
│   ├── HomeScreen.js         # Home screen (80% complete)
│   ├── DetailScreen.js       # Detail view (40% complete)
│   └── SettingsScreen.js     # Settings (0% complete - you build!)
└── components/
    └── NavigationCard.js     # Reusable card (100% complete)

✅ Success Criteria

Your completed app should:

• ✓ Navigate from Home to Detail screen with data
• ✓ Display passed parameters on Detail screen
• ✓ Show Settings tab in bottom tab bar
• ✓ Toggle switches on Settings screen
• ✓ Navigate between tabs smoothly
• ✓ Show no errors in console

🎯 Learning Objectives

• Understand stack vs tab navigation patterns
• Pass data between screens using route parameters
• Build nested navigation structures
• Create reusable navigation components
• Follow professional touch target standards (44-48px)

📚 Key Concepts

Stack Navigation: Screens stack on top of each other (drill-down pattern) Tab Navigation: Bottom tabs for switching between app sections Route Parameters: Pass dynamic data between screens Navigation Container: Root wrapper for all navigators

🐛 Troubleshooting

"Network error": Ensure phone and computer on same WiFi "Metro bundler failed": Run npx expo start --clear "Module not found": Re-run npm install --legacy-peer-deps Navigation not working: Check screen names match in navigator and navigate calls

📖 Documentation

• React Navigation Docs
• Stack Navigator
• Bottom Tabs
• Passing Parameters

📤 Submission

1. Complete all TODOs
2. Test on device/simulator
3. Take screenshots (Home, Detail, Settings)
4. Submit via Activity Form

M1: Mobile Foundations | Activity 05 | React Navigation Fundamentals