CODEWITHSUNDEEP
javascriptreact-native
konicakoala
konicakoala

Reputation: 120

Remove only first and last separator on react native flatlist

I'm trying to display a flatlist with a header component, but can't seem to remove the first and last separators.

This is how I'm currently rendering the items.

renderSeparator = () => (
    <Separator
        marginTop="$unitOne"
        marginBottom="$unitOne"
    />
)

render() {
    const { newsData } = this.props;
    return (
        <Container>
          {newsData.length > 0
            ? (
              <FlatList
                data={newsData}
                renderItem={({ item }) => (
                  item.featured === null && this.renderNews(item)
                )}
                keyExtractor={item => item.id.toString()}
                style={styles.container}
                ItemSeparatorComponent={this.renderSeparator}
                ListHeaderComponent={this.renderFeaturedNews}
              />
            )
            : <Placeholder />
          }
        </Container>
    );
}

Any help is much appreciated. Thanks!

Upvotes: 2

Views: 6063

Answers (2)

Rotem
Rotem

Reputation: 2356

Don't know what was the situation with FlatList when this question was asked but right now ItemSeparatorComponenet won't be generated for last and first.

Rendered in between each item, but not at the top or bottom

Read more here

Upvotes: 3

sdkcy
sdkcy

Reputation: 3548

I think that will work for you;

          <FlatList
            data={newsData}
            renderItem={({ item, index }) => (
              item.featured === null && this.renderNews(item)
            )}
            keyExtractor={item => item.id.toString()}
            style={styles.container}
            ItemSeparatorComponent={(index===0 || index === newsData.length - 1) ? null : this.renderSeparator}
            ListHeaderComponent={this.renderFeaturedNews}
          />

Upvotes: 7

Related Questions