title: How to give a SectionList a flexDirection of 'row' in React Native
body: <p>I would like to get a SectionList with a flexDirection of row working, this is the code I have atm:</p>
  
  <pre><code>const { width, height } = Dimensions.get('window');
  // Amount of posters in a row
  const columns = 3;
  
  class Posters extends Component {
    _renderItems = ({ item, index }) =&gt; {
      return (
        &lt;TouchableOpacity
          style={styles.container}
          onPress={() =&gt; this._getMovieInfo(item.hasPerformances[0].filmId)}
          key={index}
        &gt;
          &lt;View style={styles.imageContainer}&gt;
            &lt;Image source={{ uri: item.posterUrl }} style={styles.image} /&gt;
          &lt;/View&gt;
          &lt;Text style={styles.title} numberOfLines={1}&gt;{item.title}&lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
      );
    }
  
    _getMovieInfo(url) {
      this.props.movieDataChanged(url);
      this.props.popupChanged(true);
    }
  
    _renderSections(array) {
      return (
        &lt;SectionList
          style={{ alignSelf: 'flex-start', flexDirection: 'row' }}
          renderItem={this._renderItems}
          renderSectionHeader={({ section: { name } }) =&gt; (
            &lt;View style={{ width, maringBottom: 8 }}&gt;
              &lt;Text style={styles.releaseStyle}&gt;{name}&lt;/Text&gt;
            &lt;/View&gt;
          )}
          sections={array}
          keyExtractor={(item, index) =&gt; item + index}
        /&gt;
      );
    }
  
    render() {
      return (
        &lt;View style={{ flexDirection: 'row', flexWrap: 'wrap' }}&gt;
          {
            this.props.posterData
              ? this._renderSections(this.props.posterData)
              : &lt;View style={styles.loadingStyle}&gt;&lt;ActivityIndicator size="small" color={colors.typography} /&gt;&lt;/View&gt;
          }
        &lt;/View&gt;
      );
    }
  }
  
  export default connect(null, { movieDataChanged, popupChanged })(Posters);
  </code></pre>
  
  <p>it works and looks like this<a href="https://i.stack.imgur.com/89Sf9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/89Sf9.png" alt="SectionList"></a></p>
  
  <p>however I would like to display the covers next to each other like in a grid. I got this working bevor with a map method however I would like to change this because of performance issues an lazy loading, can someone help pls ?</p>