Using React Native’s ListView with Immutable Data

ImmutableJS (by Facebook) is a great library with a friendly API, based on a lot of good functional programming concepts. It helps improve both the efficiency and readability of your code.

Unfortunately, React Native’s ListView doesn’t support Immutable data out of the box — it’s up to the user to create wrappers and handle state changes on their own if they want to use the two together. It’s possible, but it’s not simple.

To solve this problem, I wrote a drop-in replacement (really just a simple adapter) that handles creating an efficient dataSource behind the scenes — all you need to do is pass in your raw Immutable data.

Let’s go through an example:

The screenshot above shows two different lists. The first uses this data:

Immutable.fromJS({
  'Section A': [
    'foo',
    'bar',
  ],
  'Section B': [
    'fizz',
    'buzz',
  ],
})

And the second list is even simpler:

Immutable.Range(1, 100)

To render a list, you pass your data to the component like so:

<ImmutableListView
  immutableData={this.state.listData}
  renderRow={this.renderRow}
/>

And that’s it! No more mucking with dataSource, no trying to create your own version of rowHasChanged or calling cloneWithRows every time your state changes. It just works.

It supports the same props as regular ListView, and of course it also works with section headers.

Check out the full guide on GitHub, including a working example app: https://github.com/cooperka/react-native-immutable-list-view.

Happy coding!

If you found this useful, please help by tapping the 👏 button as many times as you’d like so others can find it too. Thank you!