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.


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 to SGListView. Nothing else. No fuss, no muss.

Import SGListView

var SGListView = require('react-native-sglistview');  

Change references from ListView to SGListView.


<ListView ... />  


<SGListView ... />