I have a FlatList with multiple columns:
<FlatList
numColumns={4}
ItemSeparatorComponent={this.renderSeparator}
...
</FlatList>
And a line separator:
renderSeparator = () => (
<View
style={{
backgroundColor: 'red',
height: 0.5,
}}
/>
);
But the separator only appear between rows, not between columns (even if i add width: 0.5
you can just add if else condition inside renderItems and check the index modulus to add separator.. I just use this one and everything works great.
something like :-
_renderItem = ({item,index}) => {
return(
<View style={[{ backgroundColor: 'red', flex: 1 }, index%2==0 ? { marginRight: 10 } : { marginLeft: 10 } ]}>
<Text>{item.key}</Text>
</View>
)
}
hope this will help you.