Article From:https://segmentfault.com/q/1010000011698386
Question:

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!
demo:

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

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

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)

Similar Posts:

Leave a Reply

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