title: React Native - Horizontal scroll with columns
body: <p>I'm trying to implement the following <a href="https://imgur.com/a/qi5TauI" rel="nofollow noreferrer">view</a> where each column is limited to 4 rows of song details in a horizontal FlatList. I have managed to create each row with song details + purchase button in a <a href="http://blob:https://imgur.com/559107e5-1840-4d0e-84b2-5860017f5d69" rel="nofollow noreferrer">single component</a>.</p>
  
  <p>However, I'm struggling to limit each column to just 4 row of results.  I'm currently rendering each component with a map function:</p>
  
  <pre><code>renderBestOfTheWeek = (items) =&gt; {
    return (
      &lt;View&gt;
        {items.map((item, index) =&gt; &lt;SongItemHorizontalScroll item={item} key={index} /&gt;)}
      &lt;/View&gt;
    )
  }
  
  render() {
    return (
      &lt;FlatList
        data={this.state.bestOfTheWeek}
        horizontal={true}
        renderItem={this.renderBestOfTheWeek}
      /&gt;
    )
  }
  </code></pre>
  
  <p><code>SongItemHorizontalScroll</code> component:</p>
  
  <pre><code>   &lt;View style={containerStyle}&gt;
        &lt;Image
          source={{ uri: thumbnail_image }}
          style={albumImageStyle}
        /&gt;
        &lt;View style={songDetailButtonContainer}&gt;
          &lt;View style={songInfoStyle}&gt;
            &lt;Text
              style={{ fontSize: 12, lineHeight: 14, width: 160 }}
              numberOfLines={1}&gt;
              {title}
            &lt;/Text&gt;
            &lt;Text
              style={{ color: '#666', fontSize: 12, lineHeight: 14, width: 160 }} numberOfLines={1}
            &gt;{artist} - {album}&lt;/Text&gt;
          &lt;/View&gt;
          &lt;Button onPress={() =&gt; Linking.openURL(url)} price={price} /&gt;
        &lt;/View&gt;
      &lt;/View&gt;
  </code></pre>
  
  <p>My data have been structured as such and is currently stored in state.</p>
  
  <pre><code>0: (4) [{…}, {…}, {…}, {…}]
  1: (4) [{…}, {…}, {…}, {…}]
  2: (4) [{…}, {…}, {…}, {…}]
  3: (4) [{…}, {…}, {…}, {…}]
  </code></pre>
  
  <p>However I'm receiving the following error message (<strong>TypeError: items.map is not a function</strong>).</p>
  
  <p>Where did I go wrong and what would be the proper method of achieving this?</p>