How to give a SectionList a flexDirection of 'row' in React Native

Question

I would like to get a SectionList with a flexDirection of row working, this is the code I have atm:

const { width, height } = Dimensions.get('window');
// Amount of posters in a row
const columns = 3;

class Posters extends Component {
  _renderItems = ({ item, index }) => {
    return (
      <TouchableOpacity
        style={styles.container}
        onPress={() => this._getMovieInfo(item.hasPerformances[0].filmId)}
        key={index}
      >
        <View style={styles.imageContainer}>
          <Image source={{ uri: item.posterUrl }} style={styles.image} />
        </View>
        <Text style={styles.title} numberOfLines={1}>{item.title}</Text>
      </TouchableOpacity>
    );
  }

  _getMovieInfo(url) {
    this.props.movieDataChanged(url);
    this.props.popupChanged(true);
  }

  _renderSections(array) {
    return (
      <SectionList
        style={{ alignSelf: 'flex-start', flexDirection: 'row' }}
        renderItem={this._renderItems}
        renderSectionHeader={({ section: { name } }) => (
          <View style={{ width, maringBottom: 8 }}>
            <Text style={styles.releaseStyle}>{name}</Text>
          </View>
        )}
        sections={array}
        keyExtractor={(item, index) => item + index}
      />
    );
  }

  render() {
    return (
      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
        {
          this.props.posterData
            ? this._renderSections(this.props.posterData)
            : <View style={styles.loadingStyle}><ActivityIndicator size="small" color={colors.typography} /></View>
        }
      </View>
    );
  }
}

export default connect(null, { movieDataChanged, popupChanged })(Posters);

it works and looks like this

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 ?

Answer 1

You can add this to <SectionList>

contentContainerStyle={{
            flexDirection: 'row',
            flexWrap: 'wrap',
          }}