Ad images not always displayed in a FlatList

[Bamatthieu]

Hello !

This is the first time I've added ads to a React Native mobile application. I use “react-native-google-mobile-ads” to display classic ads and “react-native-admob-native-ads” for native ads. The problem concerns the use of native ads in a FlatList. I've also noticed that sometimes native video ads are being displayed where I've entered a Google Ad Mob key for native image ads.

Has anyone ever encountered these problems? If so, how can I solve it?

Dependencies
"react": "18.2.0"
"expo": "~51.0.37"
"react-native-admob-native-ads": "^0.7.6"
"react-native-google-mobile-ads": "^14.2.5"

Initialize ads

import { AdManager } from 'react-native-admob-native-ads';

AdManager.registerRepository({
    name: 'imageAd',
    adUnitId: NATIVE_AD_ID,
    numOfAds: 5,
    requestNonPersonalizedAdsOnly: false,
    videoOptions: { muted: false },
    expirationPeriod: 3600000
    mediationEnabled: false,
  }).then((result) => {
    console.log('Repository #1 registered');
  });

  AdManager.registerRepository({
    name: 'videoAd',
    adUnitId: NATIVE_VIDEO_AD_ID,
    numOfAds: 5,
    requestNonPersonalizedAdsOnly: false,
    videoOptions: { muted: false },
    expirationPeriod: 3600000,
    mediationEnabled: false,
  }).then((result) => {
    console.log('Repository #2 registered');
  });

Native Ad Component

import React, { useRef, useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
import NativeAdView, {
    AdBadge,
    HeadlineView,
    TaglineView,
    AdvertiserView,
    PriceView,
    StoreView,
    StarRatingView,
    NativeMediaView,
    ImageView,
    IconView,
    CallToActionView,
} from 'react-native-admob-native-ads';

const NativeAdComponent = ({ index }) => {
    const nativeAdViewRef = useRef();

    useEffect(() => {
        const loadAd = async () => {
            try {
                await nativeAdViewRef.current?.loadAd();
            } catch (error) {
                console.warn(error);
            }
        };

        loadAd();
    }, []);

    return (
        <NativeAdView
            ref={nativeAdViewRef}
            repository="imageAd"
            style={styles.nativeAdView}
        >
            <View style={styles.adContainer}>
                <AdBadge
                    style={{
                        width: 25,
                        height: 20,
                        backgroundColor: 'gray',
                        borderWidth: 0
                    }}
                    textStyle={{
                        fontSize: 9,
                        color: COLORS.white
                    }}
                />

                <View style={styles.adSubContainer}>
                    <NativeMediaView style={styles.media} />

                    <View style={styles.contentSection}>
                        <View style={styles.headerSection}>
                            <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1, overflow: 'hidden' }}>
                                <IconView style={styles.icon} />
                                <HeadlineView style={styles.headline} />
                            </View>
                            <StarRatingView style={styles.starRating} />
                        </View>

                        <TaglineView style={styles.tagline} />

                        <View style={styles.advertiserInfo}>
                            <View>
                                <AdvertiserView style={styles.advertiser} />
                                <PriceView style={styles.price} />
                                <StoreView style={styles.store} />
                            </View>
                            <CallToActionView style={styles.ctaButton} textStyle={styles.ctaText} />
                        </View>

                    </View>
                </View>
            </View>
        </NativeAdView>
    );
};

const styles = StyleSheet.create({
    ...
});

export default React.memo(NativeAdComponent);

Usage in a FlatList

// home.jsx
const renderItem = ({ item, index }) => {
    return (
      <ListItem
        item={item}
        index={index}
        navigation={navigation}
      />
    )
};

<FlatList
    data={data}
    ...
    renderItem={renderItem}
/>


// ListItem.jsx
const ListItem = React.memo({ ... }) => {
    // List item logic
    return (
      <>

          <View>
               {/* Render list item */}
          </View>
        
          {
              ((index + 1) % 10 === 0) && <NativeAdComponent key={`ad-${index}`} index={index} />
          }

      </>
    )
}

As you can see, sometimes (about 1 out of 2 times), the ad image doesn't appear. Also, when I refresh my page, some ad images disappear :

The expected result is :

[ChristopherBanas]

+1

[Hari-betaflux]

+1