ItemSeparatorComponent - Call back for each row

Question

How do I make ItemSeparatorComponent prop of FlatList get called for each row, so that one can customize for each row. Something similar of what renderSeparator prop of deprecated ListView.

Answer 1

I had the same requirement, turns out you can pass a function as well:

renderSeparator = ({leadingItem, section})=>{
  if (section.noSeparator || !leadingItem.noSeparator)
    return null;
  return <Separator />;
};

render(){
  return <SectionList
      renderSectionHeader={this.renderSectionHeader}
      sections={this.sections}
      renderItem={this.renderItem}
      ItemSeparatorComponent={this.renderSeparator}
  />;
}