React Native FlatList with columns, Last item width

Escobar5 picture Escobar5 · Apr 19, 2017 · Viewed 63k times · Source

I'm using a FlatList to show a list of items in two columns

<FlatList style={{margin:5}}
  data={this.state.items}
  numColumns={2}
  keyExtractor={(item, index) => item.id }
  renderItem={(item) => <Card image={item.item.gallery_image_url} text={item.item.name}/> }
/>

The card component is just a view with some styles:

<View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', height: 130}} ></View>

It is working fine, but if the number of items is odd, the last row only contains one item and that item stretches to the full width of the screen.

How can I set the item to the same width of the others?

enter image description here

Answer

Emilius Mfuruki picture Emilius Mfuruki · Nov 6, 2018

for your case use flex: 1/2

therefore: Your item should have flex of 1/(number of columns) if you have 3 columns your item should have flex:1/3