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 watched your Expo. It is as below.

 1   2   3   4 
---------------
 5   6   7   8 

I assume you want as below.

 1 | 2 | 3 | 4 
---+---+---+---
 5 | 6 | 7 | 8 

To do this, It is not possible with ItemSeparatorComponent only. as Hazim Ali says, use different style per index.

renderItem={({ item, index }) => (
        <Text style={[styles.text, index % 4 !== 0 && {borderLeftWidth: 1, borderLeftColor: 'red'}]}>{item}</Text>
    )}

This is the complete example.

--

But the separator only appear between rows, not between columns

As far as I read the source code, when numColumns > 2, there is no itemseparator between columns. Itemseparator is only between row and row.

Here is example. When numColumns is set 4, four items are grouped to one cell. And one itemSeparator is put between cells.

 1   2   3   4  <- cell1
--------------- <- itemSeparator
 5   6   7   8  <- cell2

Answer 3

You can add a View wrapper around your Text component and apply borderRight style to the View component, see example here:　https://snack.expo.io/HJx68bKvb, try run in the Android emulator on Expo, the Expo's iOS emulator for some reason is not showing the border correctly, but is working on my local emulator.

You can play around with padding on View component and Text component to get the desired border position.

Answer 4

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>
    )
  }

Answer 5

You can provide a margin for each item and a negative margin for the container. This is a very common trick for CSS flex layout.

  renderItem = (sale) => {
    const {item, index} = sale;
    return (
      <View style={{flex:1, backgroundColor:'#f00', margin:20}}>  ### LOOK AT HERE ###
      </View>
    )
  };

  render() {
    return (
    <View style={{flex:1,}} >
      <FlatList
        style={{ margin:-20}}   ### LOOK AT HERE ###
        data={this.state.sales}
        numColumns={2}
        renderItem={this.renderItem}
      />
    </View>
    )
  }

Click here to see my work

Answer 6

Sorry, I also did not find a way to add a column separator using properties in the flatlist component. So I just added the view outside the text component in the render item like this:

export default class App extends Component {

 render() {
  return (
   <View style={styles.view}>
    <FlatList
      data={['1', '2', '3', '4', '5', '6', '7', '8']}
      numColumns={4}
      renderItem={({ item }) => (
        <View style={styles.separator}>
          <Text style={styles.text}>{item}</Text>
        </View>
      )}
    />
   </View>
  );
 }
}

const styles = StyleSheet.create({
 view: {
  paddingTop: 30,
 },
 text: {
  flex: 1,
  fontSize: 40,
  textAlign: 'center'
 },
 separator: {
  flex: 1, 
  borderWidth: 1, 
  borderColor: 'red'
 },
});

And this is the result:

I hope this is can help you. :)