Masonry/Pinterest columns using React Native

Question

Is there some way to use flexbox in React Native to achieve a Masonry / Pinterest style columns?

Terra

Answer 1

In React Native, remote images aren't resized upon load (see "Why not automatically resize everything"). This would seem to limit using flexbox for this, since remote images would have a size of 0x0 by default and they don't have aspect ratio maintained if you set width or height, like they would on the web.

Fortunately there's lots of discussion in this github pull request which led to some excellent work by @paramaggarwal to produce code that looks like this:

<View aspectRatio={1}>
  <View style={{flexDirection: 'row', flex: 1}}>
    <Image
      style={{flex: 1}}
      source={{uri: "http://edibleapple.com/wp-content/uploads/2009/11/steve-jobs-bill-gates-1991.jpg"}}
    />
    <Image
      style={{flex: 2}}
      source={{uri: "http://edibleapple.com/wp-content/uploads/2009/11/steve-jobs-bill-gates-1991.jpg"}}
    />
  </View>
  <View style={{flexDirection: 'row', flex: 1}}>
    <Image
      style={{flex: 3}}
      source={{uri: "http://edibleapple.com/wp-content/uploads/2009/11/steve-jobs-bill-gates-1991.jpg"}}
    />
    <Image
      style={{flex: 2}}
      source={{uri: "http://edibleapple.com/wp-content/uploads/2009/11/steve-jobs-bill-gates-1991.jpg"}}
    />
  </View>
</View>

And enables layouts like this:

While that's not exactly the layout you need, I'm pretty sure that this change will allow flexbox to be used in a more "web-like" way with regard to images. According to the github, the PR was ready to be merged as of yesterday (3rd Jul) so hopefully it won't be too long till we see it in a release.

Tish

Amazing reply. Just what I needed and perfect explanation. Well, we have to wait until that's done but that is promising, indeed. Many thanks. :) – Terra

No problem, I couldn't believe that when I looked into it the potential fix had gone in only yesterday! Talk about good timing! – Tish

Yes, it is. I suppose it's one of the most demanded features. It's pretty hard to work with images in react-native right now. – Terra

Just noticed: the PR hasn't actually merged, but it is ready to merge and all the comments seem positive, so hopefully it won't be long. – Tish

I wouldn't conflate the problem of making a nice looking Pinterest-style layout with getting flexbox to understand image sizes from the URL... If you look at the Pinterest app, the layout is computed with the correctly-sized placeholders way before the image data is actually loaded! This means that the image's width and height (or the aspect ratio) was retrieved independently from the image itself. A robust solution should let every item size itself based on that information. Masonry / Pinterest merely confines these items to rows / columns, each with a fixed height / width. – Alcohol

Fair enough, in which case the question becomes "can you tell me how to rewrite Masonry for React Native" which is way out of scope – Tish

Answer 2

I guess theres no way to tackle this until react-native returns width/height for network images. Also flex doesnt seem to wrap child elements with different heights properly. Theres space above/below smallers cells.

You can still achieve a pinterest result, if you were to user two columns side by side and apply arbitrary height to child elements. Would only work for single orientation and with set number of columns.

just for fun : https://github.com/antigirl/ReactNativeFakeMasonary

Lunde