FlatList using 2 columns. I have an odd number of items to display. How do I get the last item to align left?
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>
)}
/>
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