Masonry/Pinterest columns using React Native

Question

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

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.