React native FlatList separator between columns

Question

I have a FlatList with multiple columns:

<FlatList numColumns={4} ItemSeparatorComponent={this.renderSeparator} ... </FlatList> 

And the line separator:

  renderSeparator = () => ( <View style={{ backgroundColor: 'red', height: 0.5, }} /> ); 

But the separator appears only between the rows and not between the columns (even if I add width: 0.5

View at expo

Answer 1

you can simply add an else clause to renderItems and check the index module to add a separator. I just do it and everything works fine.

sort of: -

 _renderItem = ({item,index}) => { return( <View style={[{ backgroundColor: 'red', flex: 1 }, index%2==0 ? { marginRight: 10 } : { marginLeft: 10 } ]}> <Text>{item.key}</Text> </View> ) } 

Hope this helps you.

Answer 2

You can add a presentation wrapper around your text component and apply the borderRight style to the View component, see example here: https://snack.expo.io/HJx68bKvb , try running Expo iOS emulator in Android emulator for some reason doesn't show the border correctly, but works on my local emulator.

You can play with the addition on the component “View component” and “Text” to get the desired position of the border.

Answer 3

Sorry, I also did not find a way to add a column separator using the properties in the flatlist component, so I just added a view outside the text component in the rendering element as follows:

 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 can help you :)

Answer 4

I watched your Expo . This is as shown below.

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

I assume you want as shown below.

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

To do this, this is not possible only with ItemSeparatorComponent . as Hazim Ali says, use different styles for each index.

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

This is a complete example .

-

But a separator appears only between rows, not between columns

As far as I read the source code when numColumns> 2, there is no element separator between the columns. Itemseparator - only between line and line.

Here is an example. When numColumns is set to 4, the four elements are grouped into one cell. And one Separator element is placed between cells.

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

Answer 5

You can specify a margin for each item and a negative margin for the container. This is a very common trick for flexible CSS layouts.

  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.