Article From:

When FlatList is set up<FlatList horizontal={true}/>When you add a split line component, if the height is not set, the split line does not show:

When the height is set, the dividing line is displayed below the data:

I don’t know what’s going on!

let data = [];
for (let i = 0; i < 100; i++) {
  data.push({key: i, num: i});
    return(<View style={{height: 50, width: 2, backgroundColor: 'black'}}/>)

render() {
    return (
      <View style={{height: 50, backgroundColor: 'lightgreen'}}>
          renderItem={({item}) =>
            <Text style={{fontSize: 20, textAlign: 'center'}}>{item.num}</Text>

Answer 0:

I made a issue on GitHub.
FlatList when set horizontal={true} ,ItemSeparatorComponent can’t be shown correctly #16518
Hey, this is really a bug!
Someone has mentioned PR, and will fix this problem in the next version. (v0.50)

Leave a Reply

Your email address will not be published. Required fields are marked *