title: React Native Flatlist numColumns is not making multiple columns
body: <p>I have just started to learn React Native, and this is my first project - a news app. However, I have successfully rendered the image and description of the news using React Native Flatlist.</p>
  <p>But when I am using <strong>numColumns</strong> for making two columns, the column number remains the same. But the number of the shown images becomes the half (i.e. from 18 to 9 in my case). And also the description of the image is going under the image of the next news like shown below -</p>
  <p><img src="https://i.stack.imgur.com/2SoxM.jpg" width="250">       <img src="https://i.stack.imgur.com/D3aFp.jpg" width="250"></p>
  <p>My source code looks like below -</p>
  <pre><code>import React, { Component } from 'react'
  import { View, Text, FlatList, TouchableHighlight, SectionList, TouchableOpacity , Image,StyleSheet } from 'react-native'
  import { ScrollView } from 'react-native-gesture-handler';
  import { HomeNewsJSON } from &quot;../../../../assects/JSON/Home&quot;
  
  class HomeNews extends Component {
    constructor(props) {
      super(props);
      this.state = {
        news: &quot;&quot;
      };
    }
  
    componentDidMount() {
      this.getInfo();
    }
  
    getInfo() {
      var data = []
      var jsondata = HomeNewsJSON[&quot;items&quot;]
      // alert(jsondata.length)
      this.setState({
        news: jsondata
      })
    }
    renderImage(item) {
      var a = item;
      return (
          &lt;TouchableOpacity  
                   style={{flex:1/3,
                   aspectRatio:1}}&gt;
                  &lt;Image style={{flex: 1}} resizeMode='cover' source={{ uri:  (a.slice(a.indexOf(&quot;src&quot;) + 5, a.indexOf(&quot;&lt;/a&gt;&quot;) - 3))}}&gt;&lt;/Image&gt;
          &lt;/TouchableOpacity&gt;
      )
  }
    renderPic(data) {
      var a = data;
      return (a.slice(a.indexOf(&quot;src&quot;) + 5, a.indexOf(&quot;&lt;/a&gt;&quot;) - 3));
    }
  
    render() {
      var result = Object.entries(this.state.news);
      console.log(result)
      return (
        &lt;View&gt;
          &lt;FlatList
            contentContainerStyle={{margin:2}}
            style={{borderWidth: 0}}
            horizontal={false}
            numColumns={2}
            keyExtractor={item =&gt; item.findIndex}
            data={result}
            renderItem={({ item }) =&gt; (
              &lt;View&gt;
                {this.renderImage(item[1][&quot;description&quot;])}
                &lt;Text&gt;{item[1][&quot;description&quot;]}&lt;/Text&gt;
              &lt;/View&gt;
            )}
          /&gt;
        &lt;/View&gt;
      )
    }
  }
  
  export default HomeNews
  </code></pre>
  <p>Please, anyone, suggest me a way to fix it. I really appreciate any help you can provide.</p>