[![npm (scoped)](https://img.shields.io/npm/v/@appandflow/masonry-list.svg)](https://www.npmjs.com/package/@appandflow/masonry-list) [![Travis branch](https://img.shields.io/travis/AppAndFlow/react-native-masonry-list/master.svg)](https://travis-ci.org/Ap


164120.4.04 years ago4 years agoMinified + gzip package size for @appandflow/masonry-list in KB



npm (scoped) Travis branch

Allows creating masonry style list layouts in a performant way.

This component leverages FlatList to render performant masonry layout lists. The main caveat right now is that it doesn't support measuring cells (yet) so you need to be able to provide the dimensions.


yarn add @appandflow/masonry-list


import MasonryList from '@appandflow/masonry-list';


This component supports most of the props of FlatList plus a few extras one:

getHeightForItem: ({ item: any, index: number }) => number,

Returns the height for a specific item. Note that this it not optional for now.

numColumns: number

The number of columns.

renderItem: ({ item: any, index: number, column: number }) => ?ReactElement<*>,

Same as renderItem from FlatList but also gets passed the column index.


Play with on Expo

Take a look at example folder


  • Support measuring items automatically and get rid of getHeightForItem.

  • Implement onEndReached in a way that it isn't called multiple times.

  • Support FooterComponent.

  • Long term, could probably be implemented without using multiple VirtualizedList to make it more performant and less hacky.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.