[Question/Bug] Only last Ad is visible

[sufyan297]

First of all, i appreciate your work @ammarahm-ed :)

I don't know this issue is related to your lib or admob it self, i am posting it here so maybe someone can help.

So i am trying to show multiple ads in one screen, i have created a component and call same component several times.

something like this
<View style={{ flex: 1, justifyContent: 'center' }}> <AdCard /> <AdCard /> <AdCard /> <AdCard /> </View>
Picture:

As you can see all the 4 ads are loaded (the info icon top right corner) i can click it, it redirects me to particular ad. But only the last one is visible.

P.S i am using v0.2.0

[ammarahm-ed]

You cannot show multiple ads at the same time, its not allowed by Admob. At one time, only one ad should be visible in one screen. Showing multiple ads will ban your admob account.

If you still want to do this. Wrap NativeAdView inside <AdWrap/>Component in a <View/> and it will work.

Note: I release 0.2.1 just now so update to that version.

[sufyan297]

Hello @ammarahm-ed
I have wrapped NativeAdView inside View as you shown in your example, but still it's not showing. Also updated to 0.2.1 as you suggested

You can look at my code below

import React from 'react';
import NativeAdView, {
    CallToActionView,
    IconView,
    HeadlineView,
    TaglineView,
    AdvertiserView,
    MediaView,
    AdBadge
} from 'react-native-admob-native-ads';
import { View } from 'react-native';
import { FONT_FAMILY, MAIN_COLOR } from '../../config/globals';
export default class AdCard extends React.Component {
    render() {
        return (
            <View style={{ flex: 1 }}>
                <NativeAdView
                    style={{
                        width: "100%",
                        alignSelf: "center",
                        height: 85
                    }}
                    adUnitID="ca-app-pub-3940256099942544/2247696110" // TEST adUnitID
                >
                    <View
                        style={{
                            height: 85,
                            width: "100%",
                            backgroundColor: "white",
                        }}
                    >
                        <View style={{ marginLeft: 10, marginBottom: 8, marginTop: 5 }}>
                            <AdBadge
                                style={{ width: 20 }}
                                textStyle={{ textAlign: 'center' }}
                            />
                        </View>
                        <View
                            style={{
                                height: 85,
                                width: "100%",
                                flexDirection: "row",
                                justifyContent: "flex-start",
                                alignItems: "center",
                                paddingHorizontal: 10,
                            }}
                        >
                            <IconView
                                style={{
                                    paddingTop: 20,
                                    width: 60,
                                    height: 60,
                                }}
                            />
                            <View
                                style={{
                                    width: "65%",
                                    maxWidth: "65%",
                                    paddingHorizontal: 6,
                                    marginLeft: 8
                                }}
                            >
                                <HeadlineView
                                    style={{
                                        fontSize: 18,
                                        fontFamily: FONT_FAMILY,
                                        color: '#2b2c30'
                                    }}
                                    textBreakStrategy={'balanced'}
                                />
                                <TaglineView
                                    numberOfLines={1}
                                    style={{
                                        fontSize: 13,
                                        fontFamily: FONT_FAMILY,
                                        color: "#707070"
                                    }}
                                />
                                <AdvertiserView
                                    style={{
                                        fontSize: 10,
                                        color: "#707070",
                                        fontFamily: FONT_FAMILY
                                    }}
                                />
                            </View>
                            <CallToActionView
                                style={{
                                    height: 45,
                                    paddingHorizontal: 12,
                                    justifyContent: "center",
                                    alignItems: "center",
                                    borderRadius: 5,
                                    elevation: 1,
                                    borderWidth: 3,
                                    backgroundColor: MAIN_COLOR,
                                    borderColor: MAIN_COLOR
                                }}
                                textStyle={{ color: 'white', fontSize: 14, fontFamily: FONT_FAMILY }}
                            />
                        </View>
                    </View>
                </NativeAdView>
            </View>
        )
    }
}

I am displaying Ad inside SectionList, my initial loading items is 50 and has placed ads after 10 items

[ammarahm-ed]

You cannot load all the ads at once in a section list. You have to load them when user reaches that index, not before, so at one time, there is only one ad showing in the whole list. I think since we are not preloading the ads, each ad is requested from the server so the previous ad request is destroyed or something. But let me look into this and see what we can do.

[ammarahm-ed]

Okay now I have fixed this issue, but still I would suggest you render one ad in the screen at one time.

1. Update version to 0.2.2

Then do something like this in your AdCard Component:

import React from 'react';
import NativeAdView, {
    CallToActionView,
    IconView,
    HeadlineView,
    TaglineView,
    AdvertiserView,
    MediaView,
    AdBadge
} from 'react-native-admob-native-ads';
import { View } from 'react-native';
import { FONT_FAMILY, MAIN_COLOR } from '../../config/globals';
export default class AdCard extends React.Component {
    render() {
        return (
            <View style={{ flex: 1 }}>
                <NativeAdView
                    style={{
                        width: "100%",
                        alignSelf: "center",
                        height: 85
                    }}
                   delayAdLoading={props.delayAdloading} // here
                    adUnitID="ca-app-pub-3940256099942544/2247696110" // TEST adUnitID
                >
                    <View
                        style={{
                            height: 85,
                            width: "100%",
                            backgroundColor: "white",
                        }}
                    >
                        <View style={{ marginLeft: 10, marginBottom: 8, marginTop: 5 }}>
                            <AdBadge
                                style={{ width: 20 }}
                                textStyle={{ textAlign: 'center' }}
                            />
                        </View>
                        <View
                            style={{
                                height: 85,
                                width: "100%",
                                flexDirection: "row",
                                justifyContent: "flex-start",
                                alignItems: "center",
                                paddingHorizontal: 10,
                            }}
                        >
                            <IconView
                                style={{
                                    paddingTop: 20,
                                    width: 60,
                                    height: 60,
                                }}
                            />
                            <View
                                style={{
                                    width: "65%",
                                    maxWidth: "65%",
                                    paddingHorizontal: 6,
                                    marginLeft: 8
                                }}
                            >
                                <HeadlineView
                                    style={{
                                        fontSize: 18,
                                        fontFamily: FONT_FAMILY,
                                        color: '#2b2c30'
                                    }}
                                    textBreakStrategy={'balanced'}
                                />
                                <TaglineView
                                    numberOfLines={1}
                                    style={{
                                        fontSize: 13,
                                        fontFamily: FONT_FAMILY,
                                        color: "#707070"
                                    }}
                                />
                                <AdvertiserView
                                    style={{
                                        fontSize: 10,
                                        color: "#707070",
                                        fontFamily: FONT_FAMILY
                                    }}
                                />
                            </View>
                            <CallToActionView
                                style={{
                                    height: 45,
                                    paddingHorizontal: 12,
                                    justifyContent: "center",
                                    alignItems: "center",
                                    borderRadius: 5,
                                    elevation: 1,
                                    borderWidth: 3,
                                    backgroundColor: MAIN_COLOR,
                                    borderColor: MAIN_COLOR
                                }}
                                textStyle={{ color: 'white', fontSize: 14, fontFamily: FONT_FAMILY }}
                            />
                        </View>
                    </View>
                </NativeAdView>
            </View>
        )
    }
}

And in your list

<AdCard
delayAdLoading={delayTime} /// this should be incremental, meaning for first ad, 0, then 2000, then 4000 and so on, so ads will be loaded in a queue and rendered properly in the list. The increment can be set to anything, where ever you get no rendering issues.
/>

I have tested this and it is working. I am able to render multiple ads together even without wrapping them in a <View/> as I suggested before.

[sufyan297]

Thank you so much @ammarahm-ed appreciate your help 👍

[ammarahm-ed]

@sufyan297 Glad that I could be of help. Tell me if you face any other issue so we can fix it ASAP. When I add, ad preloading, you should update, so ads will load without delay. maybe in a week or two.