title: Render two items (images) side by side in a list view in react native
body: <p>I'm trying to design something like the below screenshot in react native.
  Please note each tile is a Product element fetched from the backend.</p>
  
  <p><a href="https://i.stack.imgur.com/1MHXq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1MHXq.png" alt="Product tiles"></a></p>
  
  <p>But I'm unable to do this using a ListView and its renderRow method which is denying me to use any kind of InfiniteScroll Components.</p>
  
  <p>Currently I'm running a loop with 2 elements at a time and rendering 2 elements inside a scroll view. Below is my Code to explain better.</p>
  
  <pre><code>render() {
      var elem = [];
      for(var i = 0; i &lt; this.state.products.length; i+=2) {
        var prod = this.state.products[i];
        var prod2 = this.state.products[i + 1];
        elem.push(
          &lt;View style={styles.view} key={i} &gt;
            &lt;ProductTile onPressAction={this._pdpPage} prod={prod} index={i} /&gt;
            &lt;ProductTile onPressAction={this._pdpPage} prod={prod2} index={i + 1} /&gt;
          &lt;/View&gt;
        );
      }
      return (
          &lt;ScrollView&gt;
            {elem}
          &lt;/ScrollView&gt;
      )
  }
  </code></pre>
  
  <p>And then based on the index prop I'm aligning the elements on left or right.
  My View style looks like below:</p>
  
  <pre><code>view: {
    flex: 1,
    flexDirection: 'row',
  },
  </code></pre>
  
  <p>Please suggest a better way to do this.</p>
  
  <p>Thanks in advance.</p>