Masonry fails to render all columns (except the last) on reload on Android only

[maboelsoud]

Expected Behavior

the expected behaviour should be that the masonry is rendered correctly

Current Behavior

when you refresh the app, the masonry fails to render all but the last column

Possible Solution

inspecting the code, it seems that all the bricks are given a width and height of 'Nan', but only the bricks in the last column get called with "_setParentDimensions" in Mansonry.js.

Steps to Reproduce

Link to the expo repo: https://snack.expo.io/BJITHeTm7 Make sure the preview is activated and the phone used for the preview is an android.

1. click "tap to play", the masonry should behave as expected
2. go in the code, just press space at an empty area in the code to trigger a refresh
3. look at the phone preview, the masonry should look buggy

   Context (Environment)

Detailed Description

Possible Implementation

[Dhanraj-bidchat]

Did you resolved it ? I am also facing the same issue

[novalain]

Any progress on this? Having troubles with this issue as well

[vijaychouhan-rails]

temporary solution

constructor(props) {
    super(props);
    this.state = {
      data,
      columns: 3,
    };
  }

componentDidMount() {
    setTimeout(() => {
      this.setState({ columns: 2, padding: 5 });
    }, 500);

  }

[Jose4gg]

The same thing happens to me but @vijaychouhan-rails solutions do not work for me :/, any help?

[pramodxyle]

See the same issue on iOS. Need help ! Setting the columns to 3 and then back to 2 is not the correct way to handle this...

[borgogelli]

+1