Showing different component after every certain number of items in FlatList

Question

I am using FlatList to show my card components in my app.

And I want to show another component (like an ads or an announcement component) after certain numbers of cards in the list.

As an illustration, it should look like as below;

1. card item
2. card item
3. card item
4. card item

-COMPONENT-

5. card item
6. card item
7. card item
8. card item

-COMPONENT-

...continues...

..

Answer 1

Final Output:

Here is how you can do it:

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default function App() {
  const [primary, setPrimary] = useState(data1);
  const [secondary, setSecondary] = useState(data2);
  const [final, setFinal] = useState();
/*
we are using this driver function to create the new array, 
that we will use for as final list for rendering it on FlatList
*/
  const driverFunction = () => {
    let solution = [];
    let j = 0;
    for (let i = 0; i < data1.length; i++) {
      if ((solution.length + 1) % 5 == 0) {
        solution.push(data2[j]);
        solution.push(data1[i]);
        j++;
      } else {
        solution.push(data1[i]);
      }
    }
    setFinal(solution);
  };

  useEffect(() => {
    driverFunction();
  }, []);

  return (
    <View style={styles.container}>
      <FlatList
        keyExtractor={(item) => item}
        data={final}
        renderItem={({ item, index }) => (
          <Card
            style={{
              marginBottom: 5,
              padding: 10,
              backgroundColor: (index + 1) % 5 === 0 ? 'teal' : 'white',
            }}>
            <Text>{item}</Text>
          </Card>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

// this is the primary data that we will use.
const data1 = [
  '1',
  '2',
  '3',
  '4',
  '5',
  '6',
  '7',
  '8',
  '9',
  '10',
  '11',
  '12',
  '13',
  '14',
  '15',
  '16',
  '17',
  '18',
  '19',
  '20',
  '21',
  '22',
  '23',
  '24',
  '25',
  '26',
  '27',
  '28',
  '29',
  '30',
  '31',
  '32',
  '33',
  '34',
];

// this array is used for inserting it after certain interval, in this case 5.
const data2 = [
  'Listone',
  'Listtwo',
  'Listthree',
  'Listfour',
  'ListFive',
  'ListSix',
];

You can find the working demo here : Expo Snack

Answer 2

You can try SectionList nd pass the data accordingly.

  <SectionList
  sections={DATA}
  keyExtractor={(item, index) => item + index}
  renderItem={({ item }) => <Item title={item} />}
  renderSectionHeader={({ section: { title } }) => (
    <Text style={styles.header}>{title}</Text>
  )}
/>

I hope that will work otherwise You can render data on some condition basis in flatlist.

renderItem={(item, index)=>{{index/5 ==0 ? return Your view : retrurn your second view.}}

Answer 3

There is no such functionality in built into FlatList. However, one way of doing this would be to add the ads to the data that is passed into the FlatList and modify the renderItem function to also be able to render them.

({item}) => {
  if (item.isAdd) {
    // renderAdd
  } else {
    // renderContent
  }
}