Activity 06: Save My Data - Discovery Challenge

Learn AsyncStorage to persist data locally so your app remembers information between sessions.

🚀 Quick Start

One. Install Dependencies

npm install --legacy-peer-deps

2. Start Development Server

npx expo start

3. Open on Device

• Phone: Scan QR code with Expo Go app
• Web: Press w in terminal
• iOS Simulator: Press i (Mac only)
• Android Emulator: Press a

📁 Project Structure

activity-06-save-my-data/
├── App.js                      # Main entry point (✅ Complete)
├── screens/
│   └── NotesScreen.js          # Notes app (⏳ 60% complete - YOUR WORK)
├── components/
│   └── NoteCard.js             # Note display (✅ Complete)
└── utils/
    └── StorageService.js       # Storage helper (✅ Complete)

✅ What's Pre-Built (60%)

• StorageService: Complete AsyncStorage wrapper with error handling
• NoteCard Component: Professional note display with delete button
• UI Framework: Styled FlatList, input, and empty states
• State Management: React hooks for notes, loading, and input

📝 Your Tasks (40%)

TODO #1: Load Notes on App Start (20 min)

File: screens/NotesScreen.js (lines ~40-60)

• Implement loadNotes() function
• Use StorageService.load(NOTES_KEY)
• Call from useEffect on mount

TODO #2: Save Notes to Storage (25 min)

File: screens/NotesScreen.js (lines ~80-100)

• Implement saveNotes() function
• Use StorageService.save(NOTES_KEY, notes)
• Call after adding new note

TODO #3: Delete Note and Update Storage (30 min)

File: screens/NotesScreen.js (lines ~120-150)

• Implement deleteNote() function
• Show confirmation Alert
• Filter out deleted note and save

🎯 Success Criteria

• App loads saved notes on startup
• Adding notes persists them to storage
• Notes survive app restart
• Delete confirmation works
• Deleted notes removed from storage

📚 Key Concepts

• AsyncStorage: Local key-value storage for React Native
• useEffect: Run code when component mounts
• Optimistic Updates: Update UI first, persist second
• Error Handling: Always wrap storage operations in try-catch

🔧 Technical Stack

• React: 19.0.0
• React Native: 0.79.5
• Expo SDK: ~54.0.0
• AsyncStorage: 2.1.2

📖 Full Instructions

See Activity 06 lesson document for:

• Detailed step-by-step instructions
• Code examples and hints
• Troubleshooting guide
• Extension challenges
• Submission requirements

💡 Common Issues

Notes don't persist: Check that you're calling saveNotes() after state updates

Loading errors: Ensure loadNotes() is called in useEffect with empty dependency array

Delete not working: Verify Alert.alert confirmation dialog implementation

🎓 Learning Outcomes

By completing this activity, you will:

• Master AsyncStorage for local data persistence
• Understand useEffect for data loading patterns
• Implement CRUD operations with optimistic updates
• Handle async errors gracefully

Activity 06 | M1: Mobile Foundations | React Native & Expo SDK 54