Student starter code (30% baseline)
index.html- Main HTML pagescript.js- JavaScript logicstyles.css- Styling and layoutpackage.json- Dependenciessetup.sh- Setup scriptREADME.md- Instructions (below)💡 Download the ZIP, extract it, and follow the instructions below to get started!
This template demonstrates performance optimization techniques for React Native apps. You'll learn to optimize images, tune FlatList performance, and use React memoization to create a smooth, production-ready list experience.
Completion: 65-70% pre-built with 7 TODO markers
npm install --legacy-peer-deps
Why --legacy-peer-deps?
React 19.0.0 is new and some packages haven't updated their peer dependency requirements yet. This flag tells npm to proceed anyway.
npx expo start
w in terminali (Mac only)aactivity-10-optimized-list/
├── App.js ✅ 100% Complete - Navigation setup
├── app.json ✅ 100% Complete - Expo config
├── package.json ✅ 100% Complete - Dependencies
├── .gitignore ✅ 100% Complete - Git ignore rules
│
├── screens/
│ ├── UnoptimizedList.js ✅ 100% Complete - Slow demo (compare against this)
│ └── OptimizedList.js ⚠️ 35% Complete - YOU'LL COMPLETE THIS
│
├── components/
│ ├── HeavyCard.js ✅ 100% Complete - Unoptimized (for comparison)
│ └── OptimizedCard.js ⚠️ 40% Complete - YOU'LL COMPLETE THIS
│
├── utils/
│ ├── ImageOptimizer.js ✅ 100% Complete - Ready to use
│ └── PerformanceMonitor.js ✅ 100% Complete - Ready to use
│
├── hooks/
│ └── useOptimizedData.js ⚠️ 30% Complete - YOU'LL COMPLETE THIS
│
└── data/
└── mockData.js ✅ 100% Complete - 1000+ test items
File: utils/ImageOptimizer.js
Compresses and resizes images for optimal mobile performance.
import { ImageOptimizer } from '../utils/ImageOptimizer';
// Optimize image for list rendering
const optimizedUri = await ImageOptimizer.optimizeForList(imageUri, 400);
// Create thumbnail
const thumbnail = await ImageOptimizer.createThumbnail(imageUri);
// Optimize for full screen
const fullScreen = await ImageOptimizer.optimizeForFullScreen(imageUri);
File: utils/PerformanceMonitor.js
Tracks component render counts and execution timing.
import { PerformanceMonitor } from '../utils/PerformanceMonitor';
// Start timing
PerformanceMonitor.startTimer('myOperation');
// End timing
PerformanceMonitor.endTimer('myOperation'); // Logs duration
// Track render count
PerformanceMonitor.logRenderCount('MyComponent');
File: screens/UnoptimizedList.js
Intentionally slow implementation showing performance problems:
Use this as a baseline for comparison!
File: data/mockData.js
Pre-generated dataset with 1000+ items:
File: screens/OptimizedList.js (lines ~30-45)
Use ImageOptimizer to compress and resize images asynchronously.
File: screens/OptimizedList.js (lines ~70-85)
Add advanced FlatList props: removeClippedSubviews, maxToRenderPerBatch, windowSize, etc.
File: components/OptimizedCard.js (lines ~15-20)
Wrap component with React.memo to prevent unnecessary re-renders.
File: screens/OptimizedList.js (lines ~25-30)
Cache processed data to avoid recomputation on every render.
File: hooks/useOptimizedData.js (lines ~10-40)
Build reusable custom hook for data optimization pattern.
File: screens/OptimizedList.js (lines ~50-55)
Enable FlatList virtualization with pre-calculated item positions.
File: screens/OptimizedList.js (lines ~20-25)
Use PerformanceMonitor to track and log optimization gains.
Your completed activity should demonstrate:
npx expo start
# Clear cache and reinstall
rm -rf node_modules package-lock.json
npm install --legacy-peer-deps
# Clear Metro cache
npx expo start --clear
After completing this activity, you'll be able to:
Activity 10 | M1: Mobile Foundations | React Native & Expo SDK 54