Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Latest commit 0858210 Oct 26, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
flow-typed/npm
scripts
src
.babelrc
.eslintrc
.flowconfig
.gitignore
.travis.yml
LICENSE.md
README.md
package.json
yarn.lock

README.md

@appandflow/masonry-list

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.

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.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.