How to layout dynamically sized network images

Question

I'm trying to render a bunch of network images of various sizes (unknown at runtime). In web CSS I can do the following:

div.container {
  display: flex
  flex-wrap: wrap
}

div.container img {
  max-height: 250px;
  max-width: 100%;
  margin: 0 5px 5px 0;
  vertical-align: top;
}

And the images will be laid out nicely.

In React Native, however, <Image /> never tries to set its dimensions to the actual size of the image. It leaves it at 0 by 0 unless you specify something manually. I can't really specify something manually because I do not know the dimensions of the image.

Any ideas of how I can achieve something similar to max-height, max-width for images in React Native?

I looked around a bit and it seems that you can't get the size of remotely loaded images in React Native remotely without manually patching the react-native source like this: https://stackoverflow.com/questions/31654244/react-native-retrieve-actual-image-sizes And without the actual size of the image, it becomes difficult to implement things as max-height and max-width.. — Alexander Kuzmin, Dec 21 '15 at 21:23
7/25/2017 - I'm also searching for a max-width:100% type of solution for responsive images in React-Native. In particular from Networked Images. Latest RN 0.46 doesn't seem to have solution ( https://facebook.github.io/react-native/docs/images.html#network-images ) as network images need a width applied to them. Any updates and latest best practice you've found Andrew? — jpostdesign, Jul 25 '17 at 20:06

Andrew Rasmussen · Accepted Answer · 2015-12-21T21:51:42.410

Instead of the max-height, max-width approach, I found that if you want to display your images as squares with parameter (IMAGE_PER_ROW) then it's possible to do this by measuring the container. This is probably the next best thing.

var IMAGES_PER_ROW = 3;

var Images = React.createClass({
  getInitialState: function() {
    return {
      imageStyle: {},
    };
  },

  onContainerLayout: function(e) {
    var layout = e.nativeEvent.layout;
    var containerWidth = layout.width;
    var imageSize = containerWidth / IMAGES_PER_ROW;
    this.setState({
      imageStyle: {
        width: imageSize,
        height: imageSize,
      },
    });
  },

  renderImages: function() {
    var imageStyle = this.state.imageStyle;

    var images = [];
    for (var i = 0; i < this.props.imageURLs; i++) {
      var imageURL = this.props.imageURLs[i];
      images.push(
        <View key={imageURL} style={imageStyle}>
          <Image source={imageURL} style={[styles.image, imageStyle]} />
        </View>
      );
    }

    return images;
  },

  render: function() {
    return (
      <View onLayout={this.onContainerLayout} style={styles.container}>
        {this.renderImages()}
      </View>
    );
  },
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  image: {
    resizeMode: 'contain', // cover works too, see https://facebook.github.io/react-native/docs/image.html#resizemode
  },
});

How to layout dynamically sized network images

1 Answers1