react-native-simple-masonry-list

A simple masonry list implementation for react native. It uses the item's height to place items. If the item has a vertical margin then the margin value must be added to the height value.

Placement problem

If the user does not provide height values then the items will be placed just left to right and top to bottom by order. It may cause unbalanced column height and if it has more items, the height imbalance increases the probability. The below example show this. So it is recommended to fill the height of all items.

Installation

npm install react-native-simple-masonry-list

Usage

It requires data and renderItem props like FlatList.

import MasonryList from 'react-native-simple-masonry-list';

// ...

<MasonryList
  data={images}
  renderItem={({ item }) => <SomeComponent> ...</SomeComponent>}
  style={{ flex: 1 }}
/>;

Example

See example. This example code get unsplash random images using unsplash getting random photo api. It gets random 30 images from Unsplash API. The MasonryList split these images into 2 (or 3) columns in order. The previous image is placed higher regardless of the column, and the image of the same vertical offset is aligned from left to right.

If you want to run the example you must create env.json file to example folder and provide Unsplash access key.

Props

The props of the MasonryList extend the props of ScrollView. It is wrapped with a ScrollView container and all props values are used in the container except below values.

| | necessary | types | default | info | | --------------- | --------- | ---------------------------------------------------------------------------------------------- | --------- | --------------------------------- | | data | V | Array<T extends {height?: number}> | | Item list to display. | | renderItem | V | ({item: <T extends {height?: number}>, index: number, columnIndex: number}) => React.ReactNode | | render function of the item. | | columnCount | | number | 2 | Column count of the list | | columnViewStyle | | ViewStyle | (columnIndex: number) => ViewStyle | undefined | The style of each colum container |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

Next TODO

It uses ScrollView internally. So, it renders all items even if it has a huge count of items. So it may occur performance issue.

In this example, you can see that adding more items takes up more time and memory when rendering.

License

MIT