React Native FlatList with columns, Last item width

react-native react-native-flatlist
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

Related questions

How to re-render flatlist?

Unlike ListView we can update this.state.datasource. Is there any method or example to update FlatList or re-render it? My goal is to update the text value when user press button ... renderEntries({ item, index }) { return( <TouchableHighlight onPress={()=> …

Read More
React Native - Use a keyExtractor with FlatList

I have been getting the: "VirtualizedList: missing keys for items, make sure to specify a key property on an item or provide a custom keyExtractor" pretty confusing..., the array i am passing it has a key property defined in each …

Read More
Hide scrollbar in FlatList (React Native) in Android

I am trying to use FlatList (React-native) in my app. I am using it horizontally and can see the scrollbar. There is an option in ScrollView to hide the scrollbar but not in FlatList. Has anyone been able to hide …

Read More