How do you evenly distribute columns in a FlatList?

Question

I have a grid-like FlatList that is 3x3. I want the 3 columns to be distributed evenly based on the container (screen) width. In a normal view this would be accomplished by justifyContent: 'space-between', but this doesn't do anything when used through contentContainerStyle.

<FlatList
  contentContainerStyle={{ justifyContent: 'space-between' }}
  horizontal={false}
  scrollEnabled={false}
  numColumns={3}
  data={this.props.icons}
  extraData={this.props.selectedIcon}
  renderItem={this.renderItem}
  keyExtractor={this.keyExtractor}
/>

As you can see the icons are all pushed to the left.

Answer 1

I solved this by passing a "columnWrapperStyle" to the FlatList:

<FlatList
    data={array}
    renderItem={this.renderItem}
    numColumns={10}
    columnWrapperStyle={style.row}
/>

const style = StyleSheet.create({
  row: {
    flex: 1,
    justifyContent: "space-around"
  }
});