react-native-simple-masonry-list v0.1.3
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-listUsage
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