Activity 08: Data Cards

Learn to display large datasets efficiently with FlatList, search, and pull-to-refresh.

🚀 Quick Start

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

# 2. Start Expo
npx expo start

# 3. Scan QR code with Expo Go app

📋 Your Tasks

Complete these 3 TODOs in screens/BrowseScreen.js:

✅ TODO #1: FlatList Implementation (25 min)

Replace ScrollView with FlatList for efficient rendering of large datasets.

Key Concepts:

• renderItem: Function that renders each item
• keyExtractor: Returns unique key for each item
• numColumns={2}: Creates 2-column grid layout
• ListEmptyComponent: Shows when no data

✅ TODO #2: Search Implementation (25 min)

Add real-time search filtering using the pre-built filterByQuery() helper.

Key Concepts:

• Filter data based on search query
• Update filteredData state
• Show all items when search is empty
• Display "No results" message

✅ TODO #3: Pull-to-Refresh (25 min)

Add pull-to-refresh functionality using RefreshControl.

Key Concepts:

• refreshing state controls spinner
• Async onRefresh function
• Simulate API call with timeout
• Re-apply search filter after refresh

📁 File Structure

activity-08-data-cards/
├── App.js                      # Main entry (100% complete)
├── screens/
│   └── BrowseScreen.js         # YOUR WORK HERE (40% complete)
├── components/                 # All 100% complete - Use as is
│   ├── DataCard.js            # Product card component
│   ├── SearchBar.js           # Search input
│   └── EmptyState.js          # No results message
├── data/
│   └── sampleData.js          # 24 sample products
├── utils/
│   └── searchHelpers.js       # Filter functions
└── styles/
    └── colors.js              # Design system

🎯 What's Pre-Built (65-70%)

✅ DataCard component with professional styling ✅ SearchBar with clear button ✅ EmptyState for no results ✅ 24 sample products with emoji images ✅ Search helper functions ✅ Complete design system

📝 What You'll Build (30-35%)

• FlatList rendering with 2-column grid
• Real-time search filtering
• Pull-to-refresh functionality

🧪 Testing Your Work

After each TODO:

TODO #1:

• Products display in 2-column grid
• Smooth scrolling through all items
• Empty state shows when data is empty

TODO #2:

• Search filters as you type
• Clearing search shows all items
• "No results" message for no matches

TODO #3:

• Pull down shows refresh spinner
• Data refreshes after ~1.5 seconds
• Search still works after refresh

🔧 Troubleshooting

Metro bundler error:

npx expo start --clear

Module not found:

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

App not loading on phone:

• Ensure phone and computer on same WiFi
• Check firewall settings
• Try web version: Press w in terminal

📚 Resources

• FlatList Docs
• RefreshControl Docs
• Activity Guide

📤 Submission

When complete:

1. Take screenshots of: grid view, search results, refresh action
2. Export code (optional)
3. Submit via Activity Form

Tech Stack: React 19.0.0 | React Native 0.79.5 | Expo SDK ~53.0.0