0

I am trying to create a custom seperator component for FlatList such that it changes color based on a prop. that's passed to it.

Here's my Seperator component :

ItemSeparator = (seperatorColor) => (
    <View style={{height: 0.5, width: '100%', backgroundColor: seperatorColor?seperatorColor:'black'}}/>
);

Here's the usage :

        <FlatList
          data = {array}
          keyExtractor = { (item) => { return item}}
          ItemSeparatorComponent={ItemSeparator('black')}
          ListHeaderComponent={ItemSeparator}
          ListFooterComponent={ItemSeparator} />

This gives this error : enter image description here

However, if i don't pass the argument it works fine:

        <FlatList
          data = {array}
          keyExtractor = { (item) => { return item}}
          ItemSeparatorComponent={ItemSeparator}
          ListHeaderComponent={ItemSeparator}
          ListFooterComponent={ItemSeparator} />

Whats the right way to pass this property? And why is above not working?

nikel
  • 3,402
  • 11
  • 45
  • 71
  • in keyextractor just return id except whole item – Mayank Pandav Feb 10 '20 at 08:08
  • 1
    `ItemSeparatorComponent={() => ItemSeparator('black')}` – Milore Feb 10 '20 at 08:11
  • @Milore : Thanks, that works. Do you know why ItemSeperator('black') does not work? I believe when we say ItemSeparatorComponent={ItemSeparator} , the curly braces indicate that we are trying to point to a JS function named ItemSeperator. Then {ItemSeperator('black')} should call that function with an argument. Why does that not work? – nikel Feb 10 '20 at 08:22
  • Please, take a look at [this answer](https://stackoverflow.com/a/48700540/7581249) – Milore Feb 10 '20 at 08:46

0 Answers0