@lewisf/masonry-list
v0.4.2
Published
[![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
Downloads
7
Maintainers
Readme
@appandflow/masonry-list
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.
Installation
yarn add @appandflow/masonry-list
Usage
import MasonryList from '@appandflow/masonry-list';
Props
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.
Example
Play with on Expo
Take a look at example folder
TODO
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.