FlatList using 2 columns. I have an odd number of items to display. How do I get the last item to align left?

Question

so I have a FlatList component that is rendering an odd number of items. The FlatList has 2 columns and I'm using 'space-around' for the column wrapper. This works fine when the number of items is even but when it's odd, the final item in this list will align center.

So if the final row has one item, how do I have that item align to the left (flex-start)?

          <FlatList
            columnWrapperStyle={ styles.columnWrapper }
            data={ inStockItems }
            keyExtractor={ item => item.itemId }
            horizontal={ false }
            numColumns={ 2 }
            renderItem={ ({ item }) => (
              <ItemContainer
                // style={ styles.userStoreItem }
                item={ item }
                navigate={ this.props.navigation }
                { ...this.props }
                admin
              />
            ) }
          />

styles.columnWrapper: {
    justifyContent: 'space-around',
  },

Answer 1

You can just add flex: 0.5 to item container:

 <FlatList
      columnWrapperStyle={{justifyContent:'space-between', }}
      data={[{key: 'a'}, {key: 'b'}, {key: 'c'}]}
      keyExtractor={item => item.itemId}
      horizontal={false}
      numColumns={2}
      renderItem={({ item, index }) => (
        <View style={{backgroundColor:'red', flex: 0.5, margin: 4}}>{/*Here*/}
          <Text>{index}</Text>
        </View>
      )}
    />