Activity 07: Fetch Weather - Discovery Challenge

A weather app template for learning API integration with React Native and Expo SDK 54.

📚 Learning Objectives

• Make API calls with fetch() to retrieve real-time data
• Handle loading and error states for better user experience
• Transform API responses into usable data formats

🚀 Quick Start

Prerequisites

• Node.js installed
• Expo Go app on your phone (iOS/Android)
• Code editor (VS Code recommended)

Installation

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

# Start development server
npx expo start

Testing

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

📁 Project Structure

activity-07-fetch-weather/
├── App.js                      # Main app (55% pre-built)
├── app.json                    # Expo configuration
├── package.json                # Dependencies
├── services/
│   └── WeatherAPI.js           # API service (0% complete) ← TODO #1
├── components/
│   ├── WeatherCard.js          # Weather display (100% complete)
│   ├── LoadingSpinner.js       # Loading UI (100% complete)
│   └── ErrorMessage.js         # Error UI (100% complete)
└── README.md                   # This file

✅ Your Tasks (30-35% to complete)

TODO #1: Implement API Fetch (30 min)

File: services/WeatherAPI.js

Implement the fetchWeather() and transformResponse() methods:

1. Build URL with city, API key, and units
2. Make fetch request with await
3. Check response status
4. Parse JSON
5. Transform data to simpler format

TODO #2: Handle Loading State (25 min)

File: App.js

Add loading state management in loadWeather():

1. Set loading to true before fetch
2. Clear previous error
3. Set loading to false in finally block

TODO #3: Handle Error State (35 min)

File: App.js

Add error handling in loadWeather():

1. Catch errors in catch block
2. Set user-friendly error messages
3. Log errors for debugging

🎯 Success Criteria

Your completed app should:

• ✅ Fetch weather data for valid cities
• ✅ Show loading spinner while fetching
• ✅ Display weather card with temperature and conditions
• ✅ Show helpful error messages for invalid cities
• ✅ Allow retry on errors

🔧 Tech Stack

• React: 19.0.0
• React Native: 0.79.5
• Expo SDK: ~54.0.0
• API: OpenWeather API (demo mode)

📖 Related Documentation

• Activity Instructions
• Concept 07: API Integration Basics
• Fetch API Docs

🆘 Troubleshooting

Installation fails?

rm -rf node_modules package-lock.json
npm install --legacy-peer-deps

Metro bundler issues?

npx expo start --clear

Network error in app?

• Ensure phone and computer on same WiFi
• Check internet connection
• Try restarting Expo server

📝 Notes

• This template follows 65-70% pre-built methodology
• Focus on TODO markers - don't modify pre-built components
• Professional touch targets (44-48px minimum)
• Uses OpenWeather API in demo mode (no key required)

M1: Mobile Foundations | React Native & Expo SDK 54 | Telebort