Activity 01: Hello Mobile World - Complete Solution

This is the 100% complete Template Solution for Activity 01. All TODO markers have been implemented with professional examples suitable for classroom demonstration.

For Teachers

See TEACHER_INSTRUCTIONS.mdx for complete guide including:

• How to launch and demo the app
• Key teaching points for each concept
• Common student questions and answers
• Troubleshooting tips
• Class activity flow (30-minute lesson plan)

What's Been Completed

This solution demonstrates all 5 TODOs from the student template:

✅ TODO #1: Custom Welcome Message

• Changed from "Welcome to React Native!" to "Welcome to Mobile Development!"
• Shows professional, engaging text appropriate for classroom

✅ TODO #2: Custom Color Theme

• Primary color: Teal (#4ECDC4) - Modern and energetic
• Background: Light gray (#F7F7F7) - Easy on eyes
• Text: Dark blue-gray (#2C3E50) - Professional
• All TODO comments removed

✅ TODO #3: Custom Image

• Using web image: https://picsum.photos/200/200?random=1
• Demonstrates proper web image syntax with {{ uri: '...' }}
• Image loads reliably and professionally

✅ TODO #4: Additional Text Components

• First subtitle: "Building amazing apps with React Native and Expo"
• Second subtitle: "Let's create something incredible together! 🚀"
• Shows how to add multiple Text components

✅ TODO #5: Hot Reload Testing

• Solution is fully functional and responds to hot reload
• All changes update automatically when files are saved
• No errors or warnings in console

Quick Start

For Teachers - Demo in Class

# Navigate to solution folder
cd "Template Solution/activity-01-hello-mobile-world"

# Install dependencies (first time only)
npm install --legacy-peer-deps

# Start Expo
npx expo start

# Press 'w' for web browser (best for projection)
# Or scan QR code with Expo Go app on phone

For Students - Reference Only

This is a completed solution showing what the final app should look like. Students should work on the Template version (70% complete) located in the Templates/ folder.

File Structure

activity-01-hello-mobile-world/
├── App.js                      # ✅ All TODOs completed
├── styles/
│   └── colors.js               # ✅ Custom theme applied
├── components/
│   └── WelcomeCard.js          # ✅ Working component
├── TEACHER_INSTRUCTIONS.mdx    # ✅ Complete teaching guide
├── README.md                   # This file
├── package.json                # React 19.0.0, Expo 53
└── app.json                    # Expo configuration

What Students Learn

By studying this solution, students see:

1. Component Structure: How View, Text, and Image components nest
2. Styling System: How StyleSheet and color constants work
3. Hot Reload: Changes update automatically on save
4. Image Handling: Web images using {{ uri: '...' }} syntax
5. Color Theming: Centralized colors applied throughout app

Key Differences from Template

Expected Output

When running this solution, you should see:

1. Title: "Welcome to Mobile Development!" (teal color)
2. WelcomeCard: White card with emoji, description, badge
3. Image: Random professional photo (200x200, rounded corners)
4. Subtitle 1: "Building amazing apps with React Native and Expo"
5. Subtitle 2: "Let's create something incredible together! 🚀"

Color Scheme:

• Primary (teal): #4ECDC4
• Background (light gray): #F7F7F7
• Text (dark blue-gray): #2C3E50

No Errors: Terminal should show "Bundling complete" with no red errors

Testing Checklist

Verify the solution works by checking:

• App launches without errors
• All text displays correctly with teal accent color
• Image loads and displays (rounded corners)
• WelcomeCard shows with proper styling
• Hot reload works (change text, save, see update)
• No red error screens in app
• No console errors in terminal
• Colors consistent throughout app

Comparison with Student Work

Use this solution to:

1. Demonstrate what fully completed Activity 01 looks like
2. Explain each implementation choice to students
3. Compare with student submissions to assess completeness
4. Troubleshoot by comparing working code to student code
5. Inspire students with professional examples

Common Teaching Points

Show students how:

• ✅ Text components require <Text> wrapper
• ✅ Images use {{ uri: '...' }} for web sources
• ✅ StyleSheet organizes all styles in one place
• ✅ Color constants make theme changes easy
• ✅ Hot reload speeds up development significantly

Point out best practices:

• Meaningful, engaging text (not just "Hello World")
• Professional color choices (not random/bright)
• Clean code structure (no TODOs left)
• Consistent styling throughout app
• Proper syntax and formatting

Extension Ideas

After showing this solution, challenge students to:

Beginner

• Use different color theme
• Add third subtitle text
• Change image to local asset
• Adjust font sizes

Intermediate

• Create second WelcomeCard
• Add border to image
• Change layout spacing
• Use custom emoji icons

Advanced

• Rearrange elements vertically
• Create custom component
• Add flexDirection: 'row' layout
• Implement dark mode colors

Related Activities

This solution connects to:

• Activity 02: Button Counter (adds interactivity)
• Activity 03: Todo List (manages state)
• Project 01: Creative Studio (combines concepts)

Technical Specifications

React: 19.0.0 React Native: 0.79.5 Expo SDK: 53.0.0 Node: 18+ recommended Platform: iOS, Android, Web

Resources

For Teachers:

• TEACHER_INSTRUCTIONS.mdx (complete teaching guide)
• Student template in Templates/activity-01-hello-mobile-world

For Students:

• React Native Documentation
• Expo Documentation
• Coolors.co - Color palette tool

Support

Issues with solution?

1. Check TEACHER_INSTRUCTIONS.mdx troubleshooting section
2. Run npx expo start --clear to clear cache
3. Verify npm install --legacy-peer-deps completed
4. Check terminal for specific error messages

Status: 100% Complete ✅ Last Updated: October 2024 Purpose: Teacher demonstration and student reference

This solution is for educational purposes. Students should complete the Template version themselves to maximize learning.