Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Images in the masonry grid are oddly rendered

See original GitHub issue

I’ve included some examples of what I mean below:

screenshot 2018-06-27 22 50 46 screenshot 2018-06-27 22 51 09 screenshot 2018-06-27 22 51 34 screenshot 2018-06-27 22 51 56

As you can see, sometimes certain columns grow faster than others leaving large patchy areas. This is the code snippet I’m using for the above examples:

import * as React from 'react';
import _ from 'lodash';
import {
} from 'native-base';
import Masonry from 'react-native-masonry';

export default class PhotoGalleryComponent extends React.Component {
  state = { bricks: [] };

  BATCH_SIZE = 20;
  PHOTO_IDS = [...];
  index = 0;

  constructor(props) {

    const timer = setInterval(() => {
      if (this.PHOTO_IDS.length === 0) {
      } else {
        const photoIds = this.PHOTO_IDS.splice(0, this.BATCH_SIZE);
        const photoUrls =, (photoId) => {
          this.index += 1;
          return {
            data: { i: this.i },
            uri: `${photoId}?width=220`,
            renderHeader: (data) => {
              return (
                <View style={{
                  position: 'absolute',
                  top: 0,
                  zIndex: 100000,
                  <Text style={{ fontSize: 12 }}>{data.i}</Text>
        this.setState((prevState) => {
          return { bricks: [...prevState.bricks, ...photoUrls] };
    }, 3000);

  render() {
    return (
        <Header title="Photo Gallery" />
        <Footer navigation={this.props.navigation} />
  • Every 3 seconds it tries add 20 images into this.state.bricks
  • During testing I had about 1.2k images in total
  • Initially columns would grow fairly equally but as more images are added, it starts to diverge and you end up in situations like the above

React Native: 0.55.4 React Native Masonry: 0.5.0-alpha.1

Any idea what might be wrong? I’m hoping there’s a temporary workaround. Thanks!

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

brh55commented, Jul 3, 2018

If you have all image heights the same, you should just use a standard flatlist, there should be plenty of components available that will accomplished a grid effect.

The issue with masonry is it balances the grid using the component state. When each image is asynchronously resolved, it places the image within a column and then updates the state, but react setStates is also asynchronous and will sometimes batch the state changes into one (for performance reasons). Hence why placements may be off as it’s using an older state. Redux would probably solve this issue, but I’m not too keen on rewriting this as I’m not using the component myself for any production apps any longer.

davidvuongcommented, Jul 3, 2018

I wanted to see if this was still a problem when the image heights are all the same. Unfortunately it is still an issue.


    height: 180,
Read more comments on GitHub >

github_iconTop Results From Across the Web

How to dynamically render a masonry layout of images ...
So masonry with columns you can literally render images with 100% width, and it will look like the reference image. Display grid with...
Read more >
Layouts radomly not working |
When I added a grid gallery the masonry worked again. ... I also test change the gallery type in gutenberg and it renders...
Read more >
React Masonry Layout has bugs rendering images with fade ...
Every picture is an Enlarger component which will zoom in when you click on it. And they are designed to show up sequentially...
Read more >
Webflow Masonry grid ( #Pinterest), no Custom Code required
I want to have a masonry layout in my collection list. Every collection item consists of a div with video module and tekst...
Read more >
CSS masonry with flexbox, :nth-child(), and order | Tobias Ahlin
This will create a masonry layout with items rendered as columns but ordered ... order but with weird and unexpected gaps all over...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found