Remove only first and last separator on react native flatlist

Question

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!

Answer 1

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}
          />