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

Issue

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',
  },

Solution

You need to change columnWrapperStyle

columnWrapperStyle={{justifyContent:'space-between'}}

you can also use alignItems:'flex-start'

Demo

let width = Dimensions.get('screen').width/2 - 8

return (
  <View style={{ flex: 1.0 }}>
    <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', width:width, height:width, margin: 4}}>
          <Text>{index}</Text>
        </View>
      )}
    />
  </View>
);

FlatList Image

Answered By - Harshal Valanda