title: 2 column Flatlist component not distributing columns properly
body: <p>I have a flatlist component that is 2 rows but the columns don't distribute properly. I'm having trouble styling it to achieve this.
  My Flatlist:</p>
  <pre><code>&lt;FlatList
          contentContainerStyle={styles.list}
          numColumns={2}
          data={this.props.route.params.data}
          keyExtractor={(item, index) =&gt; item.id}
          renderItem={({item}) =&gt; (
            &lt;TouchableOpacity
              style={styles.view}
              onPress={() =&gt;
                item.subcategories
                  ? this.props.navigation.navigate('Browse', {
                      screen: 'Subcategories',
                      params: {data: item.subcategories},
                    })
                  : this.props.navigation.navigate('Browse', {
                      screen: 'Products',
                      params: {id: item.id},
                    })
              }
              underlayColor=&quot;grey&quot;&gt;
              &lt;View style={styles.view}&gt;
                &lt;Text style={styles.title}&gt;{item.title}&lt;/Text&gt;
              &lt;/View&gt;
            &lt;/TouchableOpacity&gt;
          )}
        /&gt;
  </code></pre>
  <p>Style:</p>
  <pre><code>const styles = StyleSheet.create({
    container: {
      flex: 1,
      marginTop: StatusBar.currentHeight || 0,
    },
    list: {
      flexDirection: 'column',
    },
    view: {
      backgroundColor: 'grey',
      alignItems: 'center',
      justifyContent: 'center',
      alignContent: 'stretch',
      margin: 1,
    },
    item: {
      backgroundColor: '#f9c2ff',
      padding: 20,
      marginVertical: 8,
      marginHorizontal: 2,
    },
    title: {
      textAlign: 'center',
      fontSize: 20,
      padding: 5,
      width: '100%',
    },
  });
  </code></pre>
  <p>What it looks like:</p>
  <p><a href="https://i.stack.imgur.com/DGmEy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DGmEy.png" alt="enter image description here" /></a></p>
  <p>I know I can set the width to a number, but I want it to dynamically change with screen size.</p>