React Native FlatList separator between columns

Question

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

View on expo

Answer 1

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.

Answer 2

I am bit to the party but I ran into same problem and solved this problem by using this renderRow code. I have 2 columns in grid view. Please change column length by replacing X in index % X === 0 and index <= Y where Y is columns-1

renderRow({ item, index }) {     return (       <View style={[styles.GridViewContainer,                      index % 2 === 0 ? {                       borderLeftWidth: 1, borderLeftColor: 'black',                       borderRightWidth: 1, borderRightColor: 'black',}                        :                        {borderRightWidth: 1, borderRightColor: 'black'}                        ,{borderBottomWidth: 1, borderBottomColor: 'black'}                       ,index <= 1 && {borderTopWidth: 1, borderBottomColor: 'black'}                     ]}       >        ... render item code ...         </View>     )   }