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.

A simple and robust library for creating & displaying Admob Native Advanced Ads in your React Native App using Native Views.

If you are working on a React Native Application, you might feel limited when it comes to displaying ads that look beautiful and match your app's look and feel. Usually when you show ads in your app, they are loaded inside a WebView and that is why you cannot modify them except changing the width and height in some cases.

How is this library different?

We on the other hand do not load ads in a WebView. We use a more complex, Native Advanced ad format to display ads. We request Admob servers to send us the ad information such as images, headlines, videos etc. Then we send this information over the bridge to React Native and render it in React Native's View and Text components execpt a few exceptions where we use our own custom components.

Can I design the ads myself?

Yes absolutely you can! There are no limitations. You can design ads that look just like your App's design and colors.

I need other ad formats too, which library do you recommend?

There are a bunch of projects trying to figure out showing ads on react-native. Most are not maintained properly. I would recommend that you use react-native-admob/admob by @wjaykim. Banners, Interstitials, AdOpen and Rewarded, Rewarded Interstital ads are supported.

Features

1. Admob Native Advanced Ads format
2. Cross Platform (iOS and Android)
3. Identical Working on both platforms
4. You can create your ads from ground up as you desire, no limits.
5. No need to manage any .xml or .xib layout files!
6. AutoRefresh ad at specific intervals
7. Support for Video Ads
8. Ad Mediation (Especially Facebook Ads Mediation(Video & Banners))
9. Ad Targeting
10. Typescript definitions

Installation

• Installation Guide

Links

• Documentation

Old documentation

If you are looking for the documentation for version 0.3.9 and below, head here

Sponsor this project

It costs me alot of time to keep the library updated and address all the bugs & issues. If this library has helped you support me on patreon.

Contact & support

• Add a ⭐️ star on GitHub to support the project!
• Create a GitHub issue for bug reports, feature requests, or questions
• Follow @ammarahm-ed for announcements

Contribute

That is awesome news! There is alot happening at a very fast pace in this library right now. Every little help is precious. You can contribute in many ways:

• Suggest code improvements on native iOS and Android
• If you have suggestion or idea you want to discuss, open an issue.
• Open an issue if you want to make a pull request, and tell me what you want to improve or add so we can discuss
• I am always open to new ideas

License

This library is licensed under the MIT license.

Copyright © Ammar Ahmed (@ammarahm-ed)

react-native-admob-native-ads's Issues

[Network Mediation] Logging impressions on FB audience network

I have followed the Google's guide to integrate Facebook Audience Network.

I am receiving ads from fb but no impressions or clicks are logged when the ads appear on a Flatlist.

According to this the FB Audience SDK is responsible for reporting the impressions.

There is an open issue in this library for this issue and according to this comment, a NativeAdLayout wrapper is responsible for this.

Does anybody have any idea on how this issue can be solved in react-native-admob-native-ads?

@ammarahm-ed thank you once again for this great library!

Problem with test banner add initialization.

Hello,

I wanted to give your module a try starting with a simple banner in the application. I wanted to add a simple banner to my RN app using test banner adUnitId, which according to AdMob documentation is ca-app-pub-3940256099942544/6300978111 (https://developers.google.com/admob/android/test-ads).

The problem is, that nothing was displayed, to I added onAdFailedToLoad callback with a simple logger, and what I have is:

{"error": {"message": "Internal error, an invalid response was received from the ad server."}}

Any idea what seems to be the problem? My module version is latest 0.2.6.

Get Website Url on onUnifiedNativeAdLoaded

I really loved what you have made till now.
Just one Question:
Is there any way i can get the Website url when the ad is loaded?

Actually i am having my own viewComponent, so i kind of need the url.
Would be great if i could get that

Add workaround to fix view drawing issue on Android

[Android] ImageView is working, but MediaView is not working.

Fist, Thanks for making a great library!

I have an issue to display MediaView on Android. If I use MediaView on Android, the image or video is not shown up.
However, If I use ImageView, the image is shown up.

I don't have any trouble with iOS.

I used the code below with styled-componets.

const AdvertisementImage = Styled(MediaView)`
  flex: 1;
  width: 100%;
  height: 209px;
  background-color: #FFFFFF;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-color: #EEEEEE;
`;
...

<Container>
    <AdsContainer
      onAdLoaded={this.onAdLoaded}
      onAdFailedToLoad={this.onAdFailedToLoad}
      adUnitID={adUnitID}
      enableTestMode={__DEV__}
      delayAdLoading={showDelay ? 3000 : 0}>
      <AdsContents>
        <Header>
          {isLoaded ? (
            <AdvertiserImage />
          ) : (
            <AuthorImage source={require('~/Assets/Images/author.png')} />
          )}
          <AdvertiserInfoContainer>
            {isLoaded ? <AdvertiserName numberOfLines={1} /> : <AuthorName />}
            {isLoaded ? <PublishedDate>Sponsor</PublishedDate> : <PublishedDatePlaceholder />}
          </AdvertiserInfoContainer>
        </Header>
        <AdsImageContainer>
          {isLoaded ? <AdvertisementImage /> : <MainImage />}
        </AdsImageContainer>
        <Content>
          {isLoaded ? <AdvertiserDescription numberOfLines={2} /> : <PostDescription />}
        </Content>
      </AdsContents>
    </AdsContainer>
</Container>

not working with expo

hey,
I have been looking for such a library for long time.
so, first of all thanks for your great work.

issue is this library is not working with expo.
will you explain how can we use it in expo app.

Override Pressing Action

Awesome work on this library @ammarahm-ed! I was looking for a library just like this one recently, and this was super convenient. I can think of a bunch of other features that would be great additions. I'm happy to help where I can.

My Ask:
I'm trying to override the link redirect that happens when the <NativeAdView/> component is pressed (assuming this component is responsible for handling the "press" action). I'd like to open the link in WebView rather than redirect the user off of the app. I was reading the code at the native iOS layer and the JS layer, but couldn't figure out how to override that behavior.

Any ideas?

P.S. I'm coming from a Typescript background, and noticed there were some improvements that can be made with the index.d.ts file. For now, I just patched my local version of the file using patch-package, but I'm happy to make a PR if that's welcome.

Thanks!

Style props in Wrapper

@ammarahm-ed Thank you so much for this package. I am testing it now and it's fantastic!

I am trying to put the IconView and the HeadlineView in the same row, but it doesn't work. It seems that the wrapper inside the UnifiedAdView is not getting any style props.

Can't use with typescript

When I want to use a NativeAdView in a component inside a tsx file, I get the error: "'NativeAdView' cannot be used as a JSX component". if I convert the tsx to js then it works fine.

Ensure each NativeAdView Registers its own Event Listener

How is the height decided?

Hi,

How is the height of the ad unit determined? If I place the unit in a View with flex:1, the unit is shifted such that the top of the View is aligned with the middle of the unit. The result is the unit overflowing out of the top of its parent View, which is a problem.

Am I missing something? Should we set a constant height on the parent View? How should we pick the correct height value?

Thanks for your work on this library, it looks promising.
Cheers!

Preloading ads

Is their some way to preload native ads?
It would be nice if the ad could directly show up when switching screens.

Enable donations

I find this library so useful that I would be happy to donate for supporting the project because it's really useful for me. I also believe that is is very much needed by the community too as it is the only project in react-native that supports native ads.

Can we have multiple instance of ads inside flat list ?

I have a flat list, where I'm rendering three instance of ads on current, previous, and next items of a flat list.
Which is making my flatlist performance slow.
Is it ideal to have multiple instances of ads in list?

[BUG] Tried to register two views with the same name

I run into this bug, Tried to register two views with the same name GestureHandlerRootView. Run crazy about it because nothing seemed to get rid of it.

Until i found in some forums that maybe there was two instances of 'react-native-gesture-handler'.

I ran find . -name react-native-gesture-handler, and i saw this.

./node_modules/react-native-admob-native-ads/node_modules/react-native-gesture-handler
./node_modules/react-native-gesture-handler

Since i'm using react-native-gesture-handler already it crashes with the one that you have. I deleted it and everything was back to normal, perhaps there's a more elegant solution ?

OS: iOS & Android
Release: Last one

[Question/Bug] Only last Ad is visible

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

Installation guide wrong package

Thank you so much for this library.
Unfortunately I don't know how to send a pull request but the installation guide seems wrong. It refers to react-native-action-sheet

[Question]Portraits or Landscape ads

Is there any way to know ads are portraits or landscape ads?
I have looked on official docs from AdMob for Native ads haven't found anything related to it.
Reason - I want to set the height of mediaview component according to landscape/portrait ads

Force Close Fresh Install

i have 2 new projects with 0.62.2 and 0.61.5, both results is force close.

• npx react-native init abc
• install react-native-admob-native-ads --save
• add AndroidManifest
• npx react-native run-android ( force close before starting splashscreen )

am i missing something?

[Network Mediation][Android] Multiple things do not work

When using FB audience, onUnifiedNativeAdLoaded is never called. No children Views work apart from MediaView.

The issue appear on Android. On iOS everything works fine. Tested on both simulator and real devices.

white space when it doesn't return ads

Hi, I have tried the library and the ads appear with my id correctly, but sometimes when it doesn't return an ad it render a blank space with the same widht and height that the ad. How could I make sure that if there is no ad, it doesn't render that space? Thanks in advance.

Android styling not working on v0.2.9

I'm having a problem of android not rendering the children of NativeAdView properly. I saw an older issue that had the same problem and it said was fixed in v0.2.4, but I'm still getting the issue. Any help?

The left is iOS 13.4.1 and the right is API 29 for Android.

The pink is the CallToActionView. If that wasn't there you'd see the HeadlineView and TaglineView but they are on top of each other and can't be styled properly.

Tried to register two views with the same name GestureHandlerRootView

My project already have "react-native-gesture-handler": "^1.5.6",
"react": "16.8.6",
"react-native": "0.60.5",

and when i installed react-native-admob-native-ads i get the following error

D8: Cannot fit requested classes in a single dex file (# methods: 72226 > 65536)

Getting the following error with Android:

D8: Cannot fit requested classes in a single dex file (# methods: 72226 > 65536)

does admob require adBadge for video ads

hi, please does google admob native ads require adBadge for video ads

Full screen ads

Firstly, thank you for this awesome lib,

I just wondering is there a way to make a full-screen Ads?

Something like this ?

What I tried,
I make a full screen Modal "rn-modal"
And give it a screen width/height but the Ad does not cover all-screen "modal".

Invariant Violation: requireNativeComponent: "MediaView" was not found in the UIManager

I am getting this error
"react": "16.8.6",
"react-native": "0.60.5",

Invariant Violation: Invariant Violation: Invariant Violation: requireNativeComponent: "MediaView" was not found in the UIManager

Android style is broken with call to action button covering everything

I am on the latest library.
This is what I get

but when I remove some line in code for style, hit save, re-add the line and hit save, it shows exactly like on iOS:

Tried adding another view inside NativeAdView with flexDirection: 'row', but it didn't help.

There is similar issue that got marked as "resolved/closed" but tried its solution and no luck. There is something broken in Android styling or hierarchy on native side I guess.

Here is the code:

       (
		<View style={{ height: 100 }}>
			<NativeAdView
				adUnitID={AD_UNIT_ID}
				// enableTestMode={__DEV__}
				style={styles.ad}
			>
				<View style={[styles.adImageContainer, { height: 100, aspectRatio: 1 }]}>
					<ImageView
						style={{
							height: '100%',
							width: '100%',
						}}
					/>
					<AdBadge style={styles.adBadge} textStyle={styles.adBadgeText} />
				</View>
				<View style={styles.adInfoColumn}>
					<HeadlineView style={styles.adTitle} numberOfLines={2} />
					<TaglineView style={styles.adDescription} numberOfLines={4} />
					<CallToActionView
						style={styles.adCallToActionButton}
						textStyle={styles.adCallToActionButtonText}
					/>
				</View>
			</NativeAdView>
		</View>
	)



        ad: {
		alignItems: 'center',
		flexDirection: 'row',
	},
	adImageContainer: {
		borderRadius: 12,
		marginRight: 20,
		overflow: 'hidden',
	},
	adBadge: {
		width: 26,
		height: 16,
		borderRadius: 8,
		backgroundColor: 'white',
		borderWidth: 0,
		justifyContent: 'center',
		alignItems: 'center',
		position: 'absolute',
		top: 4,
		left: 4,
	},
	adBadgeText: {
		color: 'lightblue',
		fontSize: 12,
                 fontWeight: 'bold',
	},
	adInfoColumn: {
		flex: 1,
	},
	adTitle: {
		color: 'white',
		fontSize: 13,
		marginBottom: 6,
	},
	adDescription: {
		color: 'white',
		fontSize: 12,
	},
	adCallToActionButton: {
		height: 34,
		backgroundColor: 'lightblue',
		justifyContent: 'center',
		alignItems: 'center',
		borderRadius: 34 / 2,
		marginTop: 22,
		alignSelf: 'flex-start',
		paddingHorizontal: 26,
	},
	adCallToActionButtonText: {
		color: 'white',
		fontSize: 14,
	},

ANDROID: error: { message: 'The ad request was successful, but no ad was returned due to lack of ad inventory.'

Hi,
just installed your demo app on ANDROID and get this when the app finish loading (it triggers the 'onAdFailedToLoad'):
error:` { message: 'The ad request was successful, but no ad was returned due to lack of ad inventory.'

I was using your lib in my project and had that problem, so I downloaded your demo app to verify what I was doing wrong, but get the same problem on the demo app too...

Since 'adUnitID' is set to a demo ID (ca-app-pub-3940256099942544/1044960115), it should always return a content to display no ?

Tried with the adUnitID "ca-app-pub-3940256099942544/2247696110" and get same result or the ad only shows the mediaView content with no IconView, HeadlineView, TaglineView, AdvertiserView or CallToActionView text content...

Any idea what is happening ?

Thanks !

Android setup

Do we need to complete all the steps mentioned in the Android setup guide or just add the AdMob App ID to AndroidManifest.xml?

Any plans to make it further customizable?

First of all congratulations for this packagee. It was something that was really missing from the community and I believe there will be great interest in it.

I wanted to ask you if you have any plans to make it further customizable in order to be able to adapt the ad to the app design, something like this.
By the way react-native-fbads doesn't seem to be maintenained

Roadmap

So finally it is here, proper Admob Native ads support for React Native. Still there are somethings that need to be done. I will make sure that I can support this long term however I would love if you would like to contribute to any part of this library.

• Complete Ad Creation and Customization Support
• Ad Preloading: WIP ad-preloading-patch branch
• Built-in ready-to-use customizable templates for NativeAdInterstital, NativeAdBanner and NativeAdMedium.

Native Ad Custom Style Functionality?

Hi @ammarahm-ed

Awesome job with the easy implementation! But, the native ad template does not match my app. Can you add customization functionality like https://github.com/callstack/react-native-fbads so that there is further customization available.

Thanks in Advance.

European User Consent

Under the Google EU User Consent Policy, you must make certain disclosures to your users in the European Economic Area (EEA) and obtain their consent to use cookies or other local storage, where legally required, and to use personal data (such as AdID) to serve ads. This policy reflects the requirements of the EU ePrivacy Directive and the General Data Protection Regulation (GDPR).

React-native-firebase has implemented a way of doing this.

Is there a way to integrate this library with react-native-firebase or find another of implementing the user consent?

this lib does not work with expo

I tried to run it on expo, but it gives below error on adroid phone with expo client.

_> [01:59:51] requireNativeComponent: "RNGADNativeView" was not found in the UIManager.

• node_modules\react-native\Libraries\ReactNative\getNativeComponentAttributes.js:30:4 in getNativeComponentAttributes
• node_modules\react-native\Libraries\Renderer\shims\ReactNativeViewConfigRegistry.js:102:25 in exports.get_

I see that this view is included in the src folder of this repo, but somehow it doesn't findt it,

Incompatible issue

Incompatible issue with Gradle 7.0

testDevices should not be a prop

As described in https://developers.google.com/admob/android/test-ads, the process of setting test device ids can be done only once, and after that all the ads, no matter if native, or banner, or other types, will be test ads. However, in this package the NativeAdView components have a testDevices prop, with the default of empty array. So I need to set the prop everywhere in the code I need an ad, instead of calling a function just once, e.g. in App.js or index.js. This is a bit inefficient and causes problems when using this package alongside other AdMob related react native packages.

I suggest to remove testDevices prop from NativeAdView and instead expose a function like the following, not only to fix the mentioned problems, but also to have full support of RequestConfiguration.Builder:

@ReactMethod
// This is just a pseudocode for java without type validation and all the necessary castings: 
public void setRequestConfiguration(ReadableMap config) {
	RequestConfiguration configuration = new RequestConfiguration.Builder();
	if (config.hasKey("maxAdContentRating")) {
		configuration.setMaxAdContentRating(config.getString("maxAdContentRating"));
	}
	if (config.hasKey("tagForChildDirectedTreatment")) {
		configuration.setTagForChildDirectedTreatment(config.getInt("tagForChildDirectedTreatment"));
	}
	if (config.hasKey("tagForUnderAgeOfConsent")) {
		configuration.setTagForUnderAgeOfConsent(config.getInt("TagForUnderAgeOfConsent"));
	}
	if (config.hasKey("testDeviceIds")) {
		configuration.setTestDeviceIds(config.getArray("testDeviceIds"));
	}

	MobileAds.setRequestConfiguration(configuration.build());
}

Ads not showing on feed

I am trying to make 3 news and 1 advertising cycle in FlatList, but it gets broken when I put 2 ads in a row. Only 1 ad is working properly

if i render 1 ad item:

if i render 2 ad item: (overlaps and empty)

Ad impressions and clicks

Hi! I am experiencing a strange issue. onImpression is called when user click ads and return back from the link and onClick is not called when user click ads

Could this tiny "i" in the corner be styled?

Is it possible to style this? or move it around?

[Bug] Few Ads are not clickable in List

Hello @ammarahm-ed ,

I am displaying Ads in List, now all ads are displaying correctly. But the problem is few ads are not clickable and it is acting weirdly like first Ad displayed is not clickable then second Ad is clickable then 3rd is not clickable and so on idk what's happening

I have made an separate Repository, Please have a look into it.
https://github.com/sufyan297/react-native-test-native-ad

Hi, am getting an error that says invariant violation View config not found for name mediaview

Hi, thanks for the great project, but am getting an error that says invariant violation iew config not found for name mediaview and Nativeadview.

Can this package support React Native 0.55.4 ?

Hi, im using react native 0.55.4, can this package support it?

NativeAd crashes on release-build <java.lang.NullPointerException>

The module crashes on release-build
Platform: Android 4.4

Samsung Galaxy S3 Neo (s3ve3g), 1536MB RAM, Android 4.4
Report 1

java.lang.NullPointerException:
at android.util.Log.println_native (Native Method)
at android.util.Log.d (Log.java:158)
at com.ammarahmed.rnadmob.nativeads.i.b
at com.ammarahmed.rnadmob.nativeads.i.a
at com.ammarahmed.rnadmob.nativeads.e.a
at com.google.android.gms.internal.ads.Eb.a
at com.google.android.gms.internal.ads.nb.a
at com.google.android.gms.internal.ads.Sca.onTransact
at android.os.Binder.transact (Binder.java:361)
at ez.b (com.google.android.gms.policy_ads_fdr_dynamite@[email protected]:2)
at com.google.android.gms.ads.internal.formats.client.au.a (com.google.android.gms.policy_ads_fdr_dynamite@[email protected])
at com.google.android.gms.ads.nonagon.ad.nativead.ac.run (com.google.android.gms.policy_ads_fdr_dynamite@[email protected]:6)
at android.os.Handler.handleCallback (Handler.java:733)
at android.os.Handler.dispatchMessage (Handler.java:95)
at pg.a (com.google.android.gms.policy_ads_fdr_dynamite@[email protected])
at com.google.android.gms.ads.internal.util.f.a (com.google.android.gms.policy_ads_fdr_dynamite@[email protected]:1)
at pg.dispatchMessage (com.google.android.gms.policy_ads_fdr_dynamite@[email protected])
at android.os.Looper.loop (Looper.java:136)
at android.app.ActivityThread.main (ActivityThread.java:5476)
at java.lang.reflect.Method.invokeNative (Native Method)
at java.lang.reflect.Method.invoke (Method.java:515)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run (ZygoteInit.java:1283)
at com.android.internal.os.ZygoteInit.main (ZygoteInit.java:1099)
at dalvik.system.NativeStart.main (Native Method)

Ad not showing.

Hi,
I have installed the library as per instructions. But the ad view is showing a purple block only. I tried to swap ids but the result is same

Here I just need some advice am I doing it right. Or what's wrong with it.

Task :app:mergeDexDebug FAILED

after install this library
i'm not able to run app on android [react-native run-android]
Task :app:mergeDexDebug FAILED

showing this can anyone please help me

Performance issue

First, thank you for your great work!!!!!
I'm very happy to use your libraray. This library is what I'm looking for.

I'm using your library for my new developing android app.
I'm using 'FlatList' and using 'renderItem' for rendering NativeAdView.
NativeAdView is top of the list items. total 13 items are rendered.

But the performance is not good as I expected.

So I tested some cases.
all the results are actual device in debug mode. just after load native ad, no interaction.

device profile : samsung galaxy m20 ( Android 9)
react native : 0.61.5
library version : 0.2.6

1. Not render NativeAd
   UI : 60 / JS: 60

2. NativeAdView without any children

<NativeAdView
     adUnitID="ca-app-pub-3940256099942544/2247696110" // TEST adUnitID
 />

UI : 8~35 / JS: 30-35

3. NativeAdView with children

<NativeAdView
    adUnitID="ca-app-pub-3940256099942544/2247696110" // TEST adUnitID
>
    <View style={themeStyle.bg}>
         <AdBadge />
          <View>
            <IconView />
            <View>
              <HeadlineView />
              <TaglineView numberOfLines={1} />
              <AdvertiserView />
            </View>
            <CallToActionView />
        </View>
    </View>
</NativeAdView>

UI : 5 ~ 17 / JS: 8 ~ 20

4. only NativeAdView at App.jsx(root file)
   UI : 5 ~ 15 / JS : 9 ~ 12

When using release mode the performance is little bit better but not good. (I guess it's not over 30fps)

did you have any performance when testing on android devices?

error when I try to launch the example with react-native run-android

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details.
Error: spawn ./gradlew ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:264:19)
at onErrorNT (internal/child_process.js:456:16)
at processTicksAndRejections (internal/process/task_queues.js:80:21)

MediaView and CallToActionView are not clickable

Hello!

Thank you for the awesome package.
It works but in my case, MediaView and CallToActionView are not clickable.
I've copied a sample code but there is no action when I click on the image or action button.
Have I missed something or this is the bug?

Thank you!

--
Regards, Dmitry

Video ads are not working (tried the example app)

In your example i switched ad unit id to video ads, I have added the MediView from react-native-admob-native-ads, but with test ad unit id, i always get the this error message "The ad request was successful, but no ad was returned due to lack of ad inventory."

here is my code

import React from 'react';
import { View, Platform } from 'react-native';
import NativeAdView, {
  CallToActionView,
  MediaView,
  IconView,
  HeadlineView,
  TaglineView,
  AdvertiserView,
} from 'react-native-admob-native-ads';

const NATIVE_AD_ID =
  Platform.OS === 'ios'
    ? 'ca-app-pub-3940256099942544/3986624511'
    : 'ca-app-pub-3940256099942544/2247696110';

const NATIVE_AD_VIDEO_ID =
  Platform.OS === 'ios'
    ? 'ca-app-pub-3940256099942544/2521693316'
    : 'ca-app-pub-3940256099942544/1044960115';

const App = () => {
  const _onAdFailedToLoad = event => {
    console.log(event.nativeEvent);
  };

  const _onAdLoaded = () => {
    console.log('Ad has loaded');
  };

  return (
    <View
      style={{
        height: '100%',
        width: '100%',
        justifyContent: 'center',
      }}>
      <View>
        <NativeAdView
          onAdLoaded={_onAdLoaded}
          onAdFailedToLoad={_onAdFailedToLoad}
          onUnifiedNativeAdLoaded={() => { }}
          style={{
            width: '95%',
            alignSelf: 'center',
            height: 400,
          }}
          adUnitID={NATIVE_AD_VIDEO_ID} // REPLACE WITH NATIVE_AD_VIDEO_ID for video ads.
        >
          <View
            style={{
              height: 400,
              width: '100%',
              backgroundColor: 'white',
            }}>
            <MediaView
              style={{
                backgroundColor:'red',
                width: "100%",
                height: 250,
              }}
            />

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

export default App;