Skip to content

feat: virtualize LessonCarousel and QuizCarousel with FlatList#451

Merged
RUKAYAT-CODER merged 2 commits into
rinafcode:mainfrom
DeePrincipal-dev-lang:feat/virtualized-carousel
May 28, 2026
Merged

feat: virtualize LessonCarousel and QuizCarousel with FlatList#451
RUKAYAT-CODER merged 2 commits into
rinafcode:mainfrom
DeePrincipal-dev-lang:feat/virtualized-carousel

Conversation

@DeePrincipal-dev-lang
Copy link
Copy Markdown

feat: Virtualized gallery/carousel for efficient memory usage

Replaces the eager-rendering ScrollView in LessonCarousel and QuizCarousel with
a virtualized FlatList, so only the visible item plus one buffer on each side
is kept in memory at any time.

Changes

  • LessonCarousel — swap horizontal ScrollView → FlatList with windowSize=3,
    maxToRenderPerBatch=1, initialNumToRender=1, removeClippedSubviews, and
    getItemLayout for O(1) scroll-to-index
  • QuizCarousel — same treatment; removed scroll-timeout workaround no longer
    needed with FlatList
  • 20 new tests covering windowing props, scroll callbacks, empty states, and
    1000+ item scale

Impact

  • Memory footprint reduced 80%+ for large galleries (3 items rendered vs. all
    N)
  • Smooth navigation maintained via snapToInterval + onMomentumScrollEnd
  • Scales to 1000+ items with no layout measurement overhead

Testing

All 20 carousel tests pass. Verified getItemLayout returns correct offsets at
index 999 without iteration.
closes #389

- Replace horizontal ScrollView with FlatList in both carousels
- Set windowSize=3, maxToRenderPerBatch=1, initialNumToRender=1
- Add removeClippedSubviews to unmount off-screen items
- Add getItemLayout for O(1) scroll-to-index
- Add 20 tests covering windowing props, scroll callbacks, and 1000+ item scale
@drips-wave
Copy link
Copy Markdown

drips-wave Bot commented May 28, 2026

@DeePrincipal-dev-lang Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@RUKAYAT-CODER RUKAYAT-CODER merged commit 61de083 into rinafcode:main May 28, 2026
0 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Implement efficient image gallery/carousel with virtualization

2 participants