Dynamically changing number of columns in React Native Flat List : <p>I have a <code>FlatList</code> where I want to change the number of columns based on orientation. However, I get the red screen when I do this. As per the red screen error message, I'm not quite sure how I should be changing the key prop. Any help is appreciated.</p>

<pre><code>      // dynamically changing number of columns
      const numCols = orientation === constants.PORTRAIT ? 3 : 8

      &lt;FlatList
        keyExtractor={(_, i) =&gt; i}
        numColumns={numCols} // assigning the number of columns
        horizontal={false}
        renderItem={({ item }) =&gt; &lt;ListItem imageUrl={item.url} /&gt;}
      /&gt;}
</code></pre>

<p><a href="https://i.stack.imgur.com/bcmS1.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bcmS1.png" alt="red screen of death"></a></p>
