A memory minded implementation of the React Native's ListView
We often cover UI and aesthetic Components to get your Apps up running.
This time we don't have much to show, really, but just to plug Shaheen Ghiassy's work regarding ListView's performances.
He has then provided his own SGListView
, with a lovely API, so much that's just a droping for ListView
itself.
react-native-sglistview on GitHub (npm)
The Problem
The React Native team has done a tremendous job building a robust platform. One oversight, is the memory performance of their ListView implementation. When scrolling down long lists, the memory footprint increases linearly and will eventually exhaust all available memory. On a device as memory-constrained as a mobile device, this behavior can be a deal breaker for many.
The Solution
SGListView resolves React Native's ListView memory problem by controlling what's being drawn to the screen and what's kept in memory. When cells are scrolled off screen, SGListView intelligently flushes their internal view and only retains the cell's rendered bounding box - resulting in huge memory gains.
Usage
SGListView was designed to be a developer-friendly drop-in replacement for ListView. Simply import the package and change the
ListView
references in the render methods toSGListView
. Nothing else. No fuss, no muss.
Import SGListView
var SGListView = require('react-native-sglistview');
Change references from ListView
to SGListView
.
From:
<ListView ... />
To:
<SGListView ... />
Done.