(React-Native) FlatList show special Card when scrolling X amount of times-CodePudding

Hey I have a FlatList with Cards Items. And I want to achieve this scenario.

Scenario:

When Scrolling for example through 5 items in the Flatlist I want to show a feedback card instead of an item Card

How Can this by Implemented ?

CodePudding user response：

In the renderItem method, you can access the index of the current card.

My suggestion would be rendering the feedback card right after every 5th item card.

A rough example will look like this (Not tested yet)

const SampleApp = () => {
  const renderItem = ({ item, index }) => {
    return (
      <>
        <ItemCard item={item} />
        {(index > 0 && index % 5 === 0) ? <FeedbackCard /> : null}
      </>
    );
  };

  return <FlatList data={DATA} renderItem={renderItem} />;
};

CodePudding user response：

You can try following - track onScroll event for FlatList, check if you passed enough offset for 5 Rows, compute target row position and insert feedback card there in FlatList data.