title: Display images in FlatList
body: <p>I'm trying to render images in grid view using <code>FlatList</code>but have faced with the next issue:</p>
  
  <p>My code snippet:</p>
  
  <pre><code>...
  renderItem = ({item}) =&gt; {
          return (
          &lt;Image source = {{uri: item.photoUrl[0].photoUrl}} style = {{margin: 1,
                                                                      height: Dimensions.get('window').width / 3,
                                                                      width: Dimensions.get('window').width / 3,
                                                                      resizeMode: 'cover'}}
          /&gt;
      )
  }
  
  render() {
      if(this.props.viewOption === 'grid') {
          return &lt;FlatList
                      data = {this.state.photosKeysArray}
                      keyExtractor={(item, index) =&gt; item.id}
                      numColumns = {3}
                      renderItem={this.renderItem}
                  /&gt;
      } ...
  </code></pre>
  
  <p>Problem is that FlatList should calculate width of <code>item</code> by itself according to <code>numColumns</code>, right? So in <code>Image</code> I should specify only height. Since I want to render square images, I assign to height a value equals to <code>Dimensions.get('window').width/3</code>, where <code>3</code> is value of <code>numColumns</code>.</p>
  
  <p>After that FlatList renders blank spaces instead of images.</p>
  
  <p>If I add <code>width</code> property to <code>Image</code> (like in my code snippet) and define it as height (square image, remember?) then FlatList renders 3 columns with square images but they are show like on my sketch (two full images and the last column is cut):</p>
  
  <p><a href="https://i.stack.imgur.com/IRAxu.png" rel="noreferrer"><img src="https://i.stack.imgur.com/IRAxu.png" alt="enter image description here"></a></p>
  
  <p>How to show three full columns?</p>