react-native-admob-native-ads icon indicating copy to clipboard operation
react-native-admob-native-ads copied to clipboard

[IOS] Multiple ads on 1 screen

Open luongminh2410dev opened this issue 3 years ago • 13 comments

I use 2 NativeAdView at top and bottom on 1 screen, so if it show the same ads -> NativeMediaView of top-ads return blank.

I check firebase-analyst and only see bottom-ads be counted

Android working perfectly

My code: - Ads repository init (on loading screen)

await AdManager.registerRepository({
    name: 'top_detail_admob',
    adUnitId: rn_admob_detail_top,
    expirationPeriod: 2 * 60 * 60 * 1000,
    adChoicesPlacement: 'topRight',
    numOfAds: 3,
})
await AdManager.registerRepository({
    name: 'bottom_detail_admob',
    adUnitId: rn_admob_detail_bottom,
    expirationPeriod: 2 * 60 * 60 * 1000,
    adChoicesPlacement: 'topRight',
    numOfAds: 3,
})

- Ads component

const NativeAdvanceAds = (props) => {
    const { repository } = props;
    const [visible, setVisible] = useState(true);
    const [adContent, setAdContent] = useState(null);
    const refNativeAdView = useRef();
    const AD_MEDIA_WIDTH = Metrics.DEVICE_WIDTH - Metrics.HOME_MARGIN_ITEM * 2;
    const AD_MEDIA_HEIGHT = adContent?.aspectRatio ? AD_MEDIA_WIDTH / adContent.aspectRatio : 0;
    const onFailed = message => {
        console.log(message)
        setVisible(false)
    }
    const onNativeAdLoaded = (content) => {
        setAdContent(content)
    }
    useEffect(() => {
        refNativeAdView.current?.loadAd();
    }, [])
    if (!visible || !repository) return null;
    return (
        <NativeAdView
            ref={refNativeAdView}
            repository={repository}
            onAdFailedToLoad={onFailed}
            onNativeAdLoaded={onNativeAdLoaded}
            refreshInterval={60000 * 2}
            enableTestMode={__DEV__}
            style={styles.admob}>
            {
                !isNullOrEmpty(adContent) &&
                <View style={styles.admob_body}>
                    <View style={styles.admob_content}>
                        <View style={styles.admob_header}>
                            <IconView
                                resizeMode="contain"
                                style={styles.admob_icon}
                            />
                            <View style={styles.admob_header_right}>
                                <HeadlineView style={styles.admob_headerline} />
                                <TaglineView
                                    numberOfLines={2}
                                    style={styles.admob_tagline}
                                />
                                {
                                    adContent?.advertiser ?
                                        <AdvertiserView numberOfLines={1} style={styles.admob_advertiser} />
                                        : null
                                }
                                <View style={styles.admob_store}>
                                    {adContent?.store ? <StoreView style={styles.admob_store_view} /> : null}
                                    {
                                        adContent?.rating != 0 ?
                                            <StarRatingView
                                                starSize={12}
                                                fullStarColor="orange"
                                                emptyStarColor="gray"
                                                style={styles.admob_star_rating}
                                            />
                                            : null
                                    }
                                </View>
                            </View>
                        </View>
                        {
                            adContent?.images ?
                                <NativeMediaView
                                    style={[styles.media_view, {
                                        width: AD_MEDIA_WIDTH,
                                        height: AD_MEDIA_HEIGHT
                                    }]}
                                    muted
                                />
                                : null
                        }
                        {
                            adContent?.callToAction ?
                                <CallToActionView
                                    style={styles.action_view}
                                    buttonAndroidStyle={styles.action_view_android}
                                    allCaps
                                    textStyle={styles.action_view_txt}
                                />
                                : null
                        }
                    </View>
                    <AdBadge
                        style={styles.admob_badge}
                        textStyle={styles.admob_badge_txt}
                    />
                </View>
            }
        </NativeAdView>
    )
}

luongminh2410dev avatar Aug 12 '22 09:08 luongminh2410dev

we're running into this as well.

dorthwein avatar Aug 15 '22 18:08 dorthwein

we're running into this as well.

how did you decide?

ameerarx avatar Oct 13 '22 12:10 ameerarx

you can create a ref for NativeAdvanceAds and call loadAd again for this.

anhvd-iKong avatar Nov 10 '22 07:11 anhvd-iKong

You can reproduce this by simply changing media to true in the example app list view:

line 23 of /example/src/list.js <AdView loadOnMount={false} index={index} type="image" media={true} />

Not sure why this is happening, but its a real problem on iOS...

ajpaulingalls avatar Dec 07 '22 00:12 ajpaulingalls

I think the core issue is having 2 ads displaying with the same adUnit but loading at different times. Obviously a work around would be different ad units but that problematic.

dorthwein avatar Dec 08 '22 16:12 dorthwein

I think the core issue is having 2 ads displaying with the same adUnit but loading at different times. Obviously a work around would be different ad units but that problematic.

My experience happens even if the ad units are different...

ajpaulingalls avatar Dec 08 '22 17:12 ajpaulingalls

how was this fixed?

retireearly avatar May 04 '23 02:05 retireearly

Any update on this ? how can I fix this ?

yaminichhabra avatar Jul 25 '23 01:07 yaminichhabra

still no solution for this?

absolutezero13 avatar Sep 26 '23 07:09 absolutezero13

+1 for the issue, on android ads video not showing player when test single video ad, on the ios, the List ads is not work well, it crash sometime when i first build app and it maybe can not disply ads media. Please check image below. I just try to run your example on git.

Screenshot 2024-01-28 at 12 20 24 ![Simulator Screenshot - iPhone 15 - 2024-01-28 at 12 21 02](https://github.com/ammarahm-ed/react-native-admob-native-ads/assets/101504153/78263ec4-6e62-4ae7-b609-8829ed4ea960)

ducpt-bili avatar Jan 28 '24 05:01 ducpt-bili

I just foundout NativeMediaView is the problem, but right now i don't have time to invest on the issue. I decide to just using ImageView on my app to display ads with image. Not using video ad yet for the above issue.

ducpt-bili avatar Jan 28 '24 05:01 ducpt-bili