壁紙の段組みギャラリーにネイティブ広告を差し込む — 広告セルの寿命をプールで設計する

// adPool.ts — リストより長生きする単一のプール
import { NativeAd, TestIds } from 'react-native-google-mobile-ads';
 
const UNIT_ID = __DEV__ ? TestIds.NATIVE : 'YOUR_AD_UNIT_ID';
const POOL_SIZE = 3;      // 同時に保持する広告の上限
const MAX_AGE_MS = 55 * 60 * 1000; // AdMob の広告は1時間で失効する前提で余裕を持たせる
 
type PooledAd = { ad: NativeAd; createdAt: number; lentTo: string | null };
 
let pool: PooledAd[] = [];
let loading = 0;
 
async function fill() {
  // 空き枠のぶんだけ、重複せずに読み込む
  const want = POOL_SIZE - pool.length - loading;
  for (let i = 0; i < want; i++) {
    loading++;
    try {
      const ad = await NativeAd.createForAdRequest(UNIT_ID);
      pool.push({ ad, createdAt: Date.now(), lentTo: null });
    } catch (e) {
      // 在庫切れ（no-fill）は例外ではなく日常。黙って諦めて次の機会に回す
    } finally {
      loading--;
    }
  }
}
 
export function acquire(key: string): NativeAd | null {
  // すでにこのキーに貸している広告があれば、同じものを返す（再マウントで別広告に化けない）
  const already = pool.find((p) => p.lentTo === key);
  if (already) return already.ad;
 
  const free = pool.find((p) => p.lentTo === null);
  if (!free) {
    void fill();
    return null;
  }
  free.lentTo = key;
  void fill();
  return free.ad;
}
 
export function release(key: string) {
  const p = pool.find((x) => x.lentTo === key);
  if (p) p.lentTo = null; // 破棄はしない。返却するだけ
}
 
export function sweep() {
  // 貸出中でなく、古くなったものだけを破棄する
  const now = Date.now();
  const [keep, drop] = partition(
    pool,
    (p) => p.lentTo !== null || now - p.createdAt < MAX_AGE_MS,
  );
  drop.forEach((p) => p.ad.destroy());
  pool = keep;
  void fill();
}
 
function partition<T>(xs: T[], f: (x: T) => boolean): [T[], T[]] {
  const a: T[] = [], b: T[] = [];
  xs.forEach((x) => (f(x) ? a : b).push(x));
  return [a, b];
}

// NativeAdCell.tsx
import { useEffect, useState } from 'react';
import { NativeAdView, NativeAsset, NativeAssetType } from 'react-native-google-mobile-ads';
import { acquire, release } from './adPool';
 
export function NativeAdCell({ slotKey, height }: { slotKey: string; height: number }) {
  const [ad, setAd] = useState(() => acquire(slotKey));
 
  useEffect(() => {
    if (!ad) {
      // 借りられなかった場合だけ、一度だけ再挑戦する。ループにはしない
      const t = setTimeout(() => setAd(acquire(slotKey)), 800);
      return () => clearTimeout(t);
    }
    return () => release(slotKey); // アンマウント時は「返す」だけ
  }, [ad, slotKey]);
 
  if (!ad) return <View style={{ height }} />; // 空白は空白のまま。段は崩さない
 
  return (
    <NativeAdView nativeAd={ad} style={{ height }}>
      <NativeAsset assetType={NativeAssetType.HEADLINE}>
        <Text numberOfLines={2} style={styles.headline} />
      </NativeAsset>
      <NativeAsset assetType={NativeAssetType.ADVERTISER}>
        <Text style={styles.advertiser} />
      </NativeAsset>
      <Text style={styles.badge}>広告</Text>
    </NativeAdView>
  );
}

// 広告の枠は「常に同じ大きさの穴」として先に確保しておく
const AD_CELL_HEIGHT = 240;
const AD_EVERY = 12; // 12枚に1枚
 
function buildSlots(wallpapers: Wallpaper[]): GridItem[] {
  const out: GridItem[] = [];
  wallpapers.forEach((w, i) => {
    out.push({ type: 'wallpaper', wallpaper: w, height: estimateHeight(w) });
    // 先頭には入れない。最初のスクロールで広告に出会わせない
    if (i > 0 && (i + 1) % AD_EVERY === 0) {
      out.push({ type: 'ad', key: `ad-${Math.floor(i / AD_EVERY)}`, height: AD_CELL_HEIGHT });
    }
  });
  return out;
}

<FlashList
  data={slots}
  getItemType={(item) => item.type}  // 広告と壁紙で再利用プールを分ける
  overrideItemLayout={(layout, item) => { layout.size = item.height; }}
  renderItem={renderItem}
/>

const scrolling = useRef(false);
 
<FlashList
  onScrollBeginDrag={() => { scrolling.current = true; setPoolPaused(true); }}
  onMomentumScrollEnd={() => {
    scrolling.current = false;
    // 指を離してから 200 ms 待ってから補充を再開する
    setTimeout(() => { if (!scrolling.current) setPoolPaused(false); }, 200);
  }}
/>