Images rendered have a bias on the left side

[vvavepacket]

Expected Behavior

I expect Masonry to balance the images loaded on the screen. Balance means equal height on all columns.

Current Behavior

For every Masonry component rendered, I observed a bias toward the first column. It tends to load most of the images on the left side/1st column.

Possible Solution

Maybe do some calculation for final rendering to balance the images so that it does not gravitate toward any specific column

Steps to Reproduce

Context (Environment)

Detailed Description

Possible Implementation

[brh55]

It's currently by design, if you have the sorted property, it will load per order. If it's not on, then it's just loading columns as first come first serve. Doesn't take account for any heights

[vvavepacket]

Is there any hack or trick to remove bias?

On Jan 5, 2018 11:45, "Brandon Him" notifications@github.com wrote:

It's currently by design, if you have the sorted property, it will load per order. If it's not on, then it's just loading columns as first come first serve. Doesn't take account for any heights

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/brh55/react-native-masonry/issues/71#issuecomment-355603104, or mute the thread https://github.com/notifications/unsubscribe-auth/AH6U2tPutU1WiAEI7-zuvd5EdI-S_2sLks5tHlGVgaJpZM4RP6Qt .

[brh55]

Not from a user's perspective. Within the codebase, you could put together something that updates the an aggregate of each column height per an image, and inserts it accordingly.

[brh55]

@vvavepacket

Currently have a working implementation within the priority-option branch. But looking to improve on its implementation and test it more thoroughly. Feel free to test it out by setting the priority attribute to "balance",priority={'balance'}.

[alpamys-qanybet]

here what I have done, just downloaded the source code and use it instead of package. and in Masonry.js

// containMatchingUris :: ([brick], [brick]) -> Bool
const containMatchingUris = (r1, r2) => false; //isEqual(r1.map(brick => brick.uri), r2.map(brick => brick.uri));

I found out that during initialization it renders in a normal way, but caching makes it not work on Android, so I just tested to disable cache and it works.

[brh55]

Will be included in v0.5.0.