Repository navigation
feat: add NaiveList, a minimal virtualized list - #1
Merged
Merged
Conversation
Renders only items within one viewport of the visible area inside a vertical ScrollView, with spacer views for the rest. Item heights are measured via onLayout and cached by index. API is data + renderItem. Replaces the template multiply() export. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QF2dLjvFKnpAYNPcoNDHLg
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QF2dLjvFKnpAYNPcoNDHLg
The last step of a drag scroll is reported only by onScrollEndDrag, not onScroll, so the render window lagged behind where scrolling stopped. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QF2dLjvFKnpAYNPcoNDHLg
Adds @testing-library/react-native v14 and test-renderer, and covers renderItem args, windowing, scrolling, measured sizes and empty data. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QF2dLjvFKnpAYNPcoNDHLg
Extract computeRenderWindow, RenderWindow and DEFAULT_ITEM_SIZE into renderWindow.ts and colocate tests with the component. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QF2dLjvFKnpAYNPcoNDHLg
Readability and clear core virtualization ideas take priority over performance, for both human contributors and agents. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QF2dLjvFKnpAYNPcoNDHLg
Binary search, memoization and better structure are preferred, as long as each technique is extracted into a well-named function so the code stays easy to follow. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QF2dLjvFKnpAYNPcoNDHLg
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QF2dLjvFKnpAYNPcoNDHLg
This was referenced Oct 4, 2026
Covers the spacer + render window idea step by step, known flaws, and which FlatList features are and aren't implemented. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QF2dLjvFKnpAYNPcoNDHLg
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds
NaiveList, the simplest possible virtualized list. Its API is only the core props:dataandrenderItem({ item, index }).ScrollViewtracks the scroll offset (onScroll, throttled to 16 ms) and the viewport height (onLayout).computeRenderWindowrenders the items that overlap the viewport plus one viewport of buffer above and below. A top and a bottom spacer view stand in for everything else.ViewwhoseonLayoutcaches its height by index. A changed height triggers a re-render. Unmeasured items count as 50 px.keyExtractoris needed.Known limitations (by design)
Other changes
multiplyexport.NaiveList.yarn.lock.Testing
yarn typecheck,yarn lintandyarn testpass.computeRenderWindowonly. There is no React test renderer in the dev dependencies, so the component itself is untested.