Implement FlatList virtualization for course/quiz lists (1000+ items)

[RUKAYAT-CODER]

Background

Course and quiz lists currently render all items in memory, causing severe frame drops with 100+ items. React Native's FlatList with virtualization renders only visible items, reducing memory usage by 80%+ and maintaining 60fps scrolling even with thousands of items.

Description

The course list and quiz screens currently render all items in the DOM, causing performance degradation when displaying large lists (100+ items). Implement React Native's FlatList with proper getItemLayout and maxToRenderPerBatch settings.

Current Behavior

All list items rendered. Frame drops to 15-20fps with 100+ items. Memory spike during scroll.

Expected Behavior

Only visible items + buffer rendered. Smooth 60fps scrolling with 1000+ items. Memory stable during scroll.

Impact

🎬 Maintain 60fps during scroll even with 1000+ items
💾 Memory usage reduced by 70-80%
📱 Better performance on low-end devices

Acceptance Criteria

• Identify all list components (course list, quiz list, search results)
• Replace ScrollView with FlatList for large lists
• Implement getItemLayout for efficient layout pre-calculation
• Set maxToRenderPerBatch to 10-15 (tuned value)
• Measure: achieve 60fps on scroll with 1000+ items
• Memory usage during list scrolling reduced by 70%+
• Add performance tests measuring frame rate
• Document best practices for list rendering in code comments

Implementation Hints

Convert ScrollView-based lists to FlatList. Key props: keyExtractor, getItemLayout, maxToRenderPerBatch, updateCellsBatchingPeriod. Use React Profiler to verify.

Performance Metrics

Before:

• fps: 15-20
• memory: 300 MB
• itemsRendered: 100+ (all)

After (Target):

• fps: 60
• memory: 80 MB (-73%)
• itemsRendered: 15-20 (visible + buffer)

Related Issues

• Implement Push Notifications System #5
• Implement Mobile Authentication Flow #6
• Implement Mobile Video Player #7

[Cjay-Cyber-2]

@Cjay-Cyber-2 has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

Hey, I would love to apply for this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Cjay-Cyber-2 to this issue.

[drips-wave]

Congratulations, @Cjay-Cyber-2! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 2, 2026.

🧑‍💻 @Cjay-Cyber-2: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊