Images in the masonry grid are oddly rendered

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

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 {
  Container,
  Content,
  View,
  Text,
} 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) {
    super(props);

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

  render() {
    return (
      <Container>
        <Header title="Photo Gallery" />
        <Content>
          <Masonry
            columns={4}
            bricks={this.state.bricks}
          />
        </Content>
        <Footer navigation={this.props.navigation} />
      </Container>
    );
  }
}

• 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!

[brh55]

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.

[davidvuong]

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

<Masonry
  columns={3}
  bricks={this.state.images}
  sorted
  priority="balance"
  spacing={1.5}
  imageContainerStyle={{
    height: 180,
  }}
/>