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

user_8545437 0
Viewed 12950

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',
  },
react-native css
3 Answers

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>
      )}
    />
user_78224490

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

user_54614000

The steps that I followed to resolve this :

I) set justifyContent: 'space-between'

if you set justifyContent: 'space-around' then if there is only one item then there will be space around the item which aligns the item to center so set the justifyContent to space-between.

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

Now if you see too much space between the items then you can set the marginHorizontal according to your need which will reduce the spacing between the items

II) set marginHorizontal: hp('5%') // set according to your requirement.

contentContainerStyle={{ marginHorizontal: hp('5%') }}

This is my final code for resolving this issue :

 <FlatList
      data={DATA}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      numColumns={2}
      ListHeaderComponent={<Header name={props?.categoryData?.name} />}
      columnWrapperStyle={{ justifyContent: 'space-between' }}
      contentContainerStyle={{ marginHorizontal: hp('5%') }}
    />
user_139835840
Related