React Native 주기적으로 특정 View Inject하기

FlatList를 이용해서 주기적으로 Admob 광고를 노출하고 싶을 때 등에서 사용할 수 있다.

import React from 'react';
import {
  FlatList,
  FlatListProps,
  ListRenderItem,
  ListRenderItemInfo,
} from 'react-native';

interface PeriodicViewInjectingFlatListProps<ItemT>
  extends FlatListProps<ItemT> {
  interval: number;
  renderInjectedView: () => React.ReactElement | null;
}

function PeriodicViewInjectingFlatList<ItemT>({
  interval,
  renderInjectedView,
  data,
  renderItem,
  ...flatListProps
}: PeriodicViewInjectingFlatListProps<ItemT>) {
  const renderModifiedItem: ListRenderItem<ItemT> | null = ({
    item,
    index,
  }) => {
    const inject = (index + 1) % interval === 0;
    const injectedView = inject ? renderInjectedView() : null;
    const renderedItem = renderItem?.({
      item,
      index,
    } as ListRenderItemInfo<ItemT>);

    const bothExist = injectedView && renderedItem;

    return (
      <>
        {renderedItem}
        {bothExist && flatListProps.ItemSeparatorComponent && (
          <flatListProps.ItemSeparatorComponent />
        )}
        {injectedView}
      </>
    );
  };

  return (
    <FlatList {...flatListProps} data={data} renderItem={renderModifiedItem} />
  );
}

export default PeriodicViewInjectingFlatList;

사용 예시

<PeriodicViewInjectingFlatList
  interval={5}
  data={posts || []}
  renderInjectedView={() => <AdView />}
  renderItem={({ item, index }) => (
    <RenderItem
      item={item}
      postType={postType}
      boards={boards}
      my={item.userId === credential?.id}
      />
  )}
  ListHeaderComponent={ListHeader}
  ItemSeparatorComponent={ItemSeparator}/>