manyuanrong/react-native-masonry-layout

An easy to use, pure JS react-native component to render a masonry layout for any item view

Because I no longer do development work related to ReactNative, I have no energy to continue to maintain this project. If there are interested people, I am willing to give the corresponding collaborator permissions

react-native-masonry-layout

An easy to use, pure JS react-native component to render a masonry layout for any item view

中文文档

features

• Full custom item view, Including style definition
• Instead of adding a item per column, the optimal arrangement is automatically determined by the algorithm. Avoid the high gap in each column

Usage

1.Install

npm

$ npm install --save react-native-masonry-layout

yarn

$ yarn add react-native-masonry-layout

2.Import

import Masonry from 'react-native-masonry-layout';

3.Render

<Masonry
  ref="masonry"
  columns={3} // optional - Default: 2
  renderItem={(item)=><View>
    <Text>some text</Text>
  </View>}
/>

Component Props

Props	Type	Description	Default
columns	number	Desired number of columns	2
header	View	Add view in front of the masonry layout	null
footer	View	Add view in behind the masonry layout	null
containerStyle	ViewStyle	Defining the style of the container view	null
renderItem	func	The method used to render each item	null
keyExtractor	func	By default, the list looks for a key prop on each item and uses that for the React key. Alternatively, you can provide a custom keyExtractor prop.	null

Other attributes are the same as ScrollView

Component Methods

addItems

Add Items to the Masonry component。The items height will be automatically calculated, and the item will be rendered one by one, and addItemsWithHeight should be used if it needs to be rendered in bulk

this.refs.masonry.addItems([
	{ key:1, text:"text1" },
	{ key:1, text:"text1" }
]);

addItemsWithHeight

Add items to masonry. Item height will be automatically calculated, but height attribute must be added to every item object data. This attribute is not the actual item rendering height, but a reference value for item assignment algorithm. Unlike addItems, items is rendered in bulk.

this.refs.masonry.addItemsWithHeight([
	{ key:1, text:"text1", height: 210 },
	{ key:1, text:"text1", height: 150 }
]);

clear

Clear the items of masonry.

this.refs.masonry.clear();

react-native-masonry-layout's Issues

How to know If data is available in list ?

I want to set "No data" message when there is no data added to "addItemsWithHeight([])". Is there any solution for this ?

Thanks

White screen after doing masonry.clear and masonry.addItems when all items is not fully rendered

I use this masonry to show my list of search. For my case, If I call a search function that will render 30 items, then I call search function again like:

{
res = getItem();
masonry.clear
masonry.addItems(res)
}

the screen then returns blank screen.

It only worked if all items are rendered, otherwise, it returns a blank screen.

performance issue

when data is large (over 100) the list will become very slow, it seems that FlatList don't recycle the view out of the window

2 masonry components in 1 page

can I use 2 masonry components in 1 page?

because i already try this. and 2nd ref cant be called and i get this error "undefined is not an object(evaluating'this2.refs.mySecondRefName.clear)"

thanks

Not loading bulk data (say 2000) at one go

Hi,

Thanks a lot for this amazing library. It's easy to implement and use.
But I've some time latency issues to load bulk data at one go.

So what I'm doing exactly is:
I've around 2000 data in an array and for each item there is tappable view (TouchableHighlight , like pinterest) so that user can tap any item to see corresponding detail view. see my code below for your reference:

`<TouchableHighlight style = {styles.ingredientItem} key = {item.identifier.toString()} onPress = {() => this.didSelectIngredientCell(item)} underlayColor = 'transparent'>

    <View style = {styles.ingredientCellView}>
      <FastImage style = {styles.ingredientImage}
                  source = {{
                        uri: JSON.stringify(item.imageURLString),
                        headers: { 'atipik-custom-key': Constants.atipikCustomKey },
                        cache: FastImage.cacheControl.cacheOnly }}
                 resizeMode = {FastImage.resizeMode.cover}/>
      <Text style = {styles.ingredientNameText}>{item.name.toUpperCase()}</Text>
      <Text style = {styles.ingredientRestDetailsText}>{item.upn}</Text>
      {(item.typeName != null && item.typeName != '') && <Text style = {styles.ingredientRestDetailsText}>{item.typeName}</Text>}
      {(item.primaryFamily != null && item.primaryFamily.name != '') &&
      <View style = {styles.bgViewForObjects}>
         <View style = {{width: 14, height: 14, borderRadius: 7, backgroundColor: item.primaryFamily.colorString}} />
         <Text style = {styles.ingredientRestDetailsText}>{item.primaryFamily.name.toUpperCase()}</Text>
      </View>}
      {(item.secondaryFamily != null && item.secondaryFamily.name != '') &&
        <View style = {[styles.bgViewForObjects, {paddingTop: 3}]}>
          <View style = {{width: 14, height: 14, borderRadius: 7, backgroundColor: item.secondaryFamily.colorString}} />
          <Text style = {styles.ingredientRestDetailsText}>{item.secondaryFamily.name.toUpperCase()}</Text>
      </View>}
      <Text style = {{paddingBottom: 0}}></Text>
    </View>
  </TouchableHighlight>

`
Now, when i load these 2000 data then it's not loading at one go. Initially it's loading 50-70 data views and then as I scroll, further views are loading but with very normal speed which means it'll take sufficient amount to load all 2000 data which is not acceptable.

Could you please assist me how do i load all 2000 data instantaneously?

thanks & regards

I am getting list on one side (Left side) suddenly.

As I have integrated this lib in my project and it is working fine but somehow suddenly getting list on one side(Left side). I want this in two column as previous. So do you have any solution on this?

Thanks

onEndReached在数据量少时，无法正常触发，请问如何解决

how to perform onPress event on each item

Hi Bro,

Thanks a lot for this amazing component. It really helps me a lot as I've implemented in my project.

Could you please tell me how do I perform onPress event or any select event on each masonary item (cell) to open a new detail view corresponding to that cell data.

Please help me out and give your views on this. I need it to implement urgently.

Thanks a lot in advance and waiting of your response.

Best regards
Kirtish Jain

Drag & Drop Support

Is there any way to drag and drop the cards to different positions?

add item on header

i know it is not a bug..

How can I add banner on the top at your mansory scroll view?
sorry, i am newbie at this.

thanks

Sticky header support?

Hi, is there any way I can add a sticky header like sectionlist -> renderSectionHeader ?

Thanks!

Masonary as an item of SectionList

Hi,

I would like to use masonary as an item of SectionList. However, I need to define listKey={(item, index) => 'A' + index.toString()} to the Column object's Flatlist in order to use it as a child of SectionList. Could you please make a development for it. Because, I don't want to intervene the library in order to get updates.

Thanks