Render two items (images) side by side in a list view in react native
<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>