masonry-react-native

A simple React Native implementation of Masonry layout, using ScrollView.

Features

• allows rendering any type of content inside a View.
• calculates each column's height and adds a new View to the smallest column, so no space will be wasted.
• can be used with LayoutAnimation for a nicer render animation.
• API similar with FlatList

Usage

Install

Using Node Package Manager (npm):

$ npm install masonry-react-native

Import

import Masonry from 'masonry-react-native';

Render

<Masonry
	data={[
		{id: 0, text: 'Text 0'},
		{id: 1, text: 'Text 1'},
		{id: 2, text: 'Text 2'},
	]}
	numberOfColumns={3}
	keyExtractor={({id}) => id}
	renderItem={({item}) => (
		<Text>{item.text}</Text>
	)}
/>

API

|Props|Type|Description|Default| |-----|-----|-----|-----| | numberOfColumns | number | number of columns | 2 | | data | array | list of items | [] | | keyExtractor | func | extracts unique id | | | ListHeaderComponen | element | element to be rendered in the list header | | | renderItem | func | element to be rendered inside the list | | | ...rest | object | the rest of props are passed to ScrollView | |

Authors

• Andrew - iAndrew25

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details