ammarahm-ed / react-native-admob-native-ads

A simple and robust library for creating & displaying Admob Native Advanced Ads in your React Native App using Native Views.
https://ammarahm-ed.github.io/react-native-admob-native-ads/docs/introduction/
MIT License
384 stars 130 forks source link

[IOS] Multiple ads on 1 screen #301

Open luongminh2410dev opened 1 year ago

luongminh2410dev commented 1 year ago

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>
    )
}
dorthwein commented 1 year ago

we're running into this as well.

ameerarx commented 1 year ago

we're running into this as well.

how did you decide?

anhvd-iKong commented 1 year ago

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

ajpaulingalls commented 1 year ago

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...

dorthwein commented 1 year ago

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.

ajpaulingalls commented 1 year ago

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...

retireearly commented 1 year ago

how was this fixed?

yaminichhabra commented 11 months ago

Any update on this ? how can I fix this ?

absolutezero13 commented 9 months ago

still no solution for this?

ducpt-bili commented 5 months ago

+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

ducpt-bili commented 5 months ago

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.