v0.5.0 Release Candidate

[brh55]

Current Release: v0.5.0-alpha.1
Released as alpha as it fixes major bugs in v0.4.0 and is stable enough. Once everything has properly been vetted, we will release as stable.

Tasks

• Add priority arrangement (Add props to define priority arrangement #5)
• Fix duplicated images (Duplicate images loaded #81, The layout is broken -- kind of #41, Layout Issues When Dynamically Adding Data #61)
• Add Infinite Loading (Add lazy loading functionality #87)
• Pass key properties
• Finish testing
• Update readme documentation

Bugs

Please post any bugs and issues on here

[ahmedjamshed]

Duplicate image issue has been resolved in v0.5.0, but other two issues still persist. Although, single column render issue is not consistent on ios but it is consistent on android. I am attaching an image as a reference. Is there any quick fix for this? and the second issue is left biased render as you can see in ios simulator.

[brh55]

@ahmedjamshed what are "other two issues" exactly?

[ahmedjamshed]

Issues still persist are

1. left biased rendering as you can see on ios simulator
2. Single column rendering on Android and sometimes on ios as well, when images are cached

[brh55]

1. Left bias is default behavior, it will load based on what is resolved first. But with v0.5.0, not documented yet, you can use priority='balance', and it will do best effort to balance columns based on current state.

[brh55]

2. Not entirely sure, I haven't done any testing on android. I would believe it has to do with some intermediate state changes during image fetching.

[ahmedjamshed]

Can I improve that by returning false in shouldcomponentupdate until images are fully loaded? I can check that with fast image. or can you suggest any another solution ?

[brh55]

@ahmedjamshed The problem is bricks are resolved async so you'll probably run into issues there. Considering using redux to manage the async state, or migrate data.task to the new version which supports task cancellation and cancelled any unresolved bricks in component state.

[srameshr]

@brh55 Also support infinite loading

[brh55]

@srameshr My apologize, I was referring to lazy loading, but in actuality I mistaken it with infinite loading. Optimized loading is already handled with flatlist.

You can use onEndReached and a onEndReachedThreshold

[sashabratchikov]

@brh55

When I pass some navigation action as an onPress handler to bricks all my bricks suddenly disappear.

I think this is caused by resolveBricks called with an empty bricks array here:
https://github.com/brh55/react-native-masonry/blob/v0.5.0/components/Masonry.js#L102

In my case, the data is not changing after onPress so brickDiff is an empty array (and appendedData is true):

so resolveBricks is called like this:

		if (appendedData) {
			const offSet = this.props.bricks.length;
			this.setState({
				_uniqueCount
			}, this.resolveBricks({...nextProps, bricks:[]}, offSet));
		}

[dkt201474]

Hi @brh55 great project.

You might want to consider https://github.com/Flipkart/recyclerlistview as a replacement of ListView to improve performance

[lc3t35]

Hi, any plan to releasing this new version ?