Comments (6)
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.
from react-native-admob-native-ads.
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
from react-native-admob-native-ads.
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.
from react-native-admob-native-ads.
Okay now I have fixed this issue, but still I would suggest you render one ad in the screen at one time.
- 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.
from react-native-admob-native-ads.
Thank you so much @ammarahm-ed appreciate your help 👍
from react-native-admob-native-ads.
@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.
from react-native-admob-native-ads.
Related Issues (20)
- Clicking on the Ad shows different Ad detail
- Clicking on the Ad shows different Ad detail
- Clicking on the Ad shows different Ad detail HOT 4
- I have added adchoicesPlacement but adchoices icon is not showing HOT 2
- I use NativeMediaView on iOS, but "Asset uses ImageView, not MediaView" is showing. HOT 13
- Invalid template ID: -1 affecting 40% of android user base HOT 5
- Getting template ID error... {"code": 0, "domain": "com.google.android.gms.ads", "message": "Invalid template ID: -1"} HOT 4
- [Question] Requested size
- NEED AN URGENT UPDATE (NOT WORKING)
- how to close native ad or render another ad?
- Adbadge, Headline, CallToActionView etc are showing in IOS but not showing in android HOT 1
- Successfully patched Failure to build "no visible @interface for 'GADRequestConfiguration' declares the selector 'tagForChildDirectedTreatment:'" HOT 3
- ERROR Ad failed to load {"code": 0, "domain": "com.google.android.gms.ads", "message": "Internal error."} HOT 5
- The Components Are Not Appearing
- "code": 0, "domain": "com.google.android.gms.ads", "message": "Internal error." HOT 3
- NativeAdView is not loading properly.
- Please Update NPM package with latest version HOT 2
- Component 'RNGADNativeView' re-registered bubbling event 'topAdLoaded' as a direct event
- Expo EAS Build Not Working
- requestNonPersonalizedAdsOnly HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-admob-native-ads.