title: React Native FlatList - Variable columns
body: <p>I am developing a infinitely scrolling list of products which contain different types of products. A product can be featured or not featured. When a product is featured, we have a product card design that takes up the full width of the phone, otherwise the design calls for a 2 column row</p>
  
  <p>The data looks something like this:</p>
  
  <pre><code>[
    {
      "type": "featured-product",
      "name": "Product",
      "description: "yadda yadda"
    },
    {
      "type": "product",
      "name": "Another Product",
      "description: "yadda yadda"
    },
    {
      "type": "product",
      "name": "And Another Product",
      "description: "yadda yadda"
    },
    {
      "type": "product",
      "name": "One more Product",
      "description: "yadda yadda"
    }
    {
      "type": "product",
      "name": "Yet another",
      "description: "yadda yadda"
    },
    {
      "type": "featured-product",
      "name": "This one's Featured though",
      "description: "yadda yadda"
    }
  ]
  </code></pre>
  
  <p>For example, the list would look something like this:</p>
  
  <pre><code>--------------
  |            |
  |  Featured  |
  |            |
  --------------
  |     ||     |
  | Not || Not |
  |     ||     |
  --------------
  |     ||     |
  | Not || Not |
  |     ||     |
  --------------
  |            |
  |  Featured  |
  |            |
  --------------
  |     ||     |
  | Not || Not |
  |     ||     |
  --------------
  |     ||     |
  | Not || Not |
  |     ||     |
  --------------
  </code></pre>
  
  <p>However, with the <a href="https://facebook.github.io/react-native/docs/flatlist.html" rel="nofollow noreferrer"><code>FlatList</code></a> component, I'm not having luck achieving this design's layout. </p>
  
  <ul>
  <li>Adding styles to each respective item <code>flex: 1</code> on full width and <code>flex: 0.5</code> on double column doesn't allow for wrapping columns and always displays a single column row</li>
  <li>Setting the <code>numColumns</code> prop to 2 displays the products somewhat properly, but causes issues with the full width featured item.</li>
  <li>Thought about chunking the items by 2 and having them represent one item, but that's proving to require much more overhead while using Flow</li>
  </ul>
  
  <p>I was venturing down the path of using a FlatList for the performance benefits, but I'm starting to think it might not be suited for the layout that I require.</p>
  
  <p>Has anyone solved this before?</p>