title: React Native SectionList with columns
body: <p>I am trying to get a section list shown up having multiple columns.
  Since section list have that feature not out of the box, I thought it might be a good idea to render a flatlist for every section item.. but I do not get it to work.</p>
  <pre><code>import React, { Component } from 'react';
  import { StyleSheet, View, Text } from 'react-native';
  
  import { FlatList } from &quot;react-native&quot;;
  import { SectionList } from &quot;react-native&quot;;
  
  
  
  
  class Account extends Component {
  
  
    data2 =
    [
      {
        id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
        title: 'First Item',
      },
      {
        id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
        title: 'Second Item',
      },
      {
        id: '58694a0f-3da1-471f-bd96-145571e29d72',
        title: 'Third Item',
      },
    ];
  
    data3 =
    [
      {
        id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28adfba',
        title: '22--First Item',
      },
      {
        id: '3ac68afc-c605-48d3-a4f8-fbd91adafa97f63',
        title: '22--Second Item',
      },
      {
        id: '58694a0f-3da1-471f-bd96-145571efadfee29d72',
        title: '22--Third Item',
      },
    ];
  
    data4 = ['a', 'b', 'c']
  
    data = [
      {sectionTitle: 'test-title-alpha', data: [this.data2]},
      {sectionTitle: 'test-title-beta', data: [this.data3]},
    ];
  
  
    _renderItem = ({item}) =&gt; {
      console.log('render-item', item);
        return (
            &lt;Text&gt;item: {item}&lt;/Text&gt;
        )
    }
  
    _renderSectionHeader = ({item}) =&gt; {
      console.log('section-header', item);
        return (
            &lt;Text&gt;section header: {item}&lt;/Text&gt;
        )
    }
  
    _renderSectionListItem = ({item}) =&gt; {
      console.log('section-list-item', item);
        return (
            &lt;FlatList
                data={item}
                numColumns={3}
                renderItem={this._renderItem}
                //keyExtractor={item =&gt; item.id}
            /&gt;
        )
    }
  
    render () {
      console.log('render', this.data);
      console.log(this.data[0].sectionTitle);
      return (
          &lt;SectionList
              sections={this.data}
              renderSectionHeader={this._renderSectionHeader}
              renderItem={this._renderSectionListItem}
              //keyExtractor={item =&gt; item.id}
          /&gt;
      )
    }
  }
  
  export default Account;
  </code></pre>
  <p>using data4 seems to proceed, using data2 or data3 seems not.</p>
  <p>Anybody see my failure(s)?</p>
  <p>Final output should be somethink near to:</p>
  <pre><code>first-section-title
  item1.id                    item2.id                    item3.id
  item1.title                 item2.title                 item3.title
  item1.whatever              item2.whatever              item3.whatever  
  
  second-section-title
  item4.id                    item5.id                    item6.id
  item4.title                 item5.title                 item6.title
  item4.whatever              item5.whatever              item6.whatever  
  
  ...
  </code></pre>
  <p>(grid view, with x items per row)</p>
  <p>from source</p>
  <pre><code> data = [
      {
          sectionTitle: 'first-section-title',
          data: [
              [
                  {
                    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
                    title: 'First Item',
                  },
                  {
                    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
                    title: 'Second Item',
                  },
                  {
                    id: '58694a0f-3da1-471f-bd96-145571e29d72',
                    title: 'Third Item',
                  },
                  {
                    id: '58694a0f-3da1-471f-bd96-145571e29d43',
                    title: 'and so on',
                  },
                ]
              ]
      },
      {
          sectionTitle: 'second-section-title',
          data: [
              [
                  {
                    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
                    title: '5 Item',
                  },
                  {
                    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
                    title: '6 Item',
                  },
                ]
              ]
      },
    ];
  </code></pre>