Images in the masonry grid are oddly rendered
See original GitHub issueI’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!
Issue Analytics
- State:
- Created 5 years ago
- Comments:5 (2 by maintainers)
Top 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 | WordPress.org
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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.I wanted to see if this was still a problem when the image heights are all the same. Unfortunately it is still an issue.