The layout is broken -- kind of

[srameshr]

Here is a screenshot:

Sometimes the columns are a miss

These quirk happen sometimes on navigation. When I navigate to and fro to this page.

In the below image, data is ordered as 5,4,3,2,1. But the list renders them as below.

<ScrollView style={{ flex: 1, padding: 5 }}>
        <Masonry
          bricks={this.state.contents}
          columns={2}
        />
      </ScrollView>
    );

[brh55]

Are the indexs not inserting into the right columns?

[brh55]

Doesn't currently account for height, this would be something that is added as a functionality in #5

[srameshr]

@brh55 Sometimes it does not insert into the right columns. Sometimes it does. This bug breaks the whole point to Masonry sometimes.

[brh55]

FlatList will not fix this issue, technically #38 should of fixed this

[srameshr]

@brh55 I am using the sorted option. But still this issue exists. All the screenshots i have posted here use the sorted option.

[zanisis]

yes my issue is same. sometimes image not showing . if i close page and come back again my image will be show. i using with react navigation

[srameshr]

@brh55 Any progress on this?

[brh55]

@srameshr Start by removing the scroll view wrapper and flex styles. Probably won't fix the issue, but you shouldn't need that anymore with the latest v0.4.0.

[brh55]

@srameshr is this happening with a nested view within a navigation component, or does it also happen when it is on it's own. I only ask because I don't see these issues with the updated demo).

[srameshr]

@brh55 Yes it happens with the nested view with react native navigation component. My current app does not have a scrollview wrapper.

[srameshr]

@brh55 This issue still exists regardless of any changes to image size.

[brh55]

Yeah this is most likely with the rowHasChanged function, can you try to just return true by default. And see if this fixes the issue

[srameshr]

@brh55 No, its not working and there is a big problem. Since most of the time (not always) it renders only one column regardless of what the column size is, Apple is rejecting my build saying that the app is not optimised to take up the full screen.

This is the screenshot of the app that they sent.

Waiting for this fix, desperately.

[brh55]

Were you having these issues with v0.3.0 or after the flatlist changes?

[srameshr]

I don't remember! I dug through the code and I was not able to figure out exactly where and how the insert into column logic is written. Could you help me out with that, so that I can try to fix it.

[brh55]

Insert into column is at Masonry.js LOC 134. as well as assigning a column number at LOC 12.

[brh55]

@srameshr if you can email me access to your codebase (or a similarly set up codebase with the same issue) it will make it significantly easier for me to narrow down the cause of this issue

[srameshr]

@brh55 Your email?

[brh55]

@srameshr brandonhim@live.com

[srameshr]

@brh55 I dropped you a mail.

[vvavepacket]

hi guys do we have any temporary fixes for this? im encountering the same issue, the settimeout works sometimes but not always

[vvavepacket]

@srameshr do u encounter this issue on both android and ios?

[srameshr]

0.4.4 fixes this.

[jacktator]

Experiencing the same issue with 0.4.7, wrapped in NativeBase 'Content' component.

[brh55]

@jacktator Are you experiencing uneven layouts? If so the current release of masonry only places them where they are initially assigned prior to resolving dimensions. This feature of best effort equally distributed layouts is available in the branch v0.5.0 but it not all additional planned updates have been finished so I haven't released it yet. Feel free to try and test and provide feedback.