Wondering what’s next for npm?Check out our public roadmap! »

    @appandflow/masonry-list

    0.4.0 • Public • Published

    @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.

    Install

    npm i @appandflow/masonry-list

    DownloadsWeekly Downloads

    1,413

    Version

    0.4.0

    License

    MIT

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar