1. Admob Native Ads
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

To run the example app clone the project

git clone https://github.com/mrousavy/react-native-admob-native-ads.git

then run yarn or npm install in the example folder and finally to run the example app:

react-native run-android

``sh
npm i react-native-gesture-handler
npm i react-native-admob-native-ads-mrousavy
`

Don't forget to setup react-native-gesture-handler!

$3

Follow the guide to add Google Mobile Ads SDK to your Xcode project. Also don't forget to update your info.plist file to add AppID.

$3

Add your AdMob App ID to AndroidManifest.xml, as described in the Google Mobile Ads SDK documentation.

This example demonstrates creation of a simple Banner Ad. For complete usage, see the example project.

`jsx
import NativeAdView, {
CallToActionView,
IconView,
HeadlineView,
TaglineView,
AdvertiserView,
AdBadge,
} from "react-native-admob-native-ads-mrousavy";

return (
<>
style={{
flex: 1,
}}
>
style={{
width: "95%",
alignSelf: "center",
height: 100,
}}
adUnitID="ca-app-pub-3940256099942544/2247696110" // TEST adUnitID
>
style={{
height: 100,
width: "100%",
}}
>

style={{
height: 100,
width: "100%",
flexDirection: "row",
justifyContent: "flex-start",
alignItems: "center",
paddingHorizontal: 10,
}}
>
style={{
width: 60,
height: 60,
}}
/>
style={{
width: "65%",
maxWidth: "65%",
paddingHorizontal: 6,
}}
>
style={{
fontWeight: "bold",
fontSize: 13,
}}
/>
numberOfLines={1}
style={{
fontSize: 11,
}}
/>
style={{
fontSize: 10,
color: "gray",
}}
/>


style={{
height: 45,
paddingHorizontal: 12,
backgroundColor: "purple",
justifyContent: "center",
alignItems: "center",
borderRadius: 5,
elevation: 10,
}}
textStyle={{ color: "white", fontSize: 14 }}
/>





);
`

AdManager

AdManager allows you to configure your ads globally when the app starts

`jsx
import { AdManager } from "react-native-admob-native-ads-mrousavy";
`

$3

Configure your Ad Requests during App Startup. You need to pass a single object as an argument with atleast one of the following properties

| Name | Type | Required |
| ---------------------------- | ------------------------------------------ | -------- |
| testDeviceIds | Array | no |
| maxAdContentRating | AdManager.MAX_AD_CONTENT_RATING | no |
| tagForChildDirectedTreatment | AdManager.TAG_FOR_CHILD_DIRECTED_TREATMENT | no |
| tagForUnderAgeConsent | AdManager.TAG_FOR_UNDER_AGE_CONSENT | no |

`js
const config = {
testDeviceIds: ["YOUR_TEST_DEVICE_ID"],
maxAdContetRating: 'MA',
tagForChildDirectedTreatment: false,
tagForUnderAgeConsent: false
};

AdManager.setRequestConfiguration(config);
`

$3

Check if the current device is registered as a test device to show test ads.

`js
AdManager.isTestDevice().then((result) => console.log(result));
`

return: boolean

$3

| Name | Description |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| G | "General audiences." Content suitable for all audiences, including families and children. |
| MA | "Mature audiences." Content suitable only for mature audiences; includes topics such as alcohol, gambling, sexual content, and weapons. |
| PG | "Parental guidance." Content suitable for most audiences with parental guidance, including topics like non-realistic, cartoonish violence. |
| T | "Teen." Content suitable for teen and older audiences, including topics such as general health, social networks, scary imagery, and fight sports. |
| UNSPECIFIED | Set default value to "" |

$3

| Name | Description |
| ----- | ----------- |
| TRUE | Enabled |
| FALSE | Disabled |

$3

| Name | Description |
| ----- | ----------- |
| TRUE | Enabled |
| FALSE | Disabled |

#

NativeAdView

NativeAdView will wrap all your views related to the ad and provides a context through which all the Views get their respective information and load it automatically. It has the following properties to it.

`jsx
import NativeAdView from "react-native-admob-native-ads-mrousavy";

style={{
width: "95%",
alignSelf: "center",
height: 100, // Height should be provided.
}}
adUnitID="ca-app-pub-3940256099942544/2247696110" // TEST adUnitID
>
style={{
height: 100, // could be '100%' too.
width: "100%",
backgroundColor: "white",
}}
>
// Everything else

;
`

$3

#### style:ViewStyle

Style your NativeAdView. Always give a width and height value.

#### adUnitID

Set Ad Unit ID for Native Advanced Ads that you created on your AdMob account.

| Type | Required | Platform |
| -------- | -------- | -------- |
| string | Yes | All |

#

#### testDevices (Deprecated, Use AdManager)

Set testDevices during testing ads or during development.

| Type | Required | Platform |
| --------------- | -------- | -------- |
| Array | no | All |

#

#### enableTestMode

Setting this to true will load a placeholder ad (Not from Admob server) incase you have no internet etc so you can design your ad as you want to with ease. Remember to set the adUnitID to null when using this so the placeholder ad is not replaced by a real ad.

| Type | Required | Platform |
| --------- | -------- | -------- |
| boolean | no | All |

#

#### delayAdLoading

Delay ad loading and rendering by the specified time in milliseconds. This is a workaround to fix rendering of multiple ads in the same screen. For example in a list. So what you should do is incrementally increase the delay from first and to the last. However it is suggested to you should always render only one ad, in one screen at one time.

| Type | Required | Default | Platform |
| -------- | -------- | ------- | -------- |
| number | no | 0 ms | All |

#

#### refreshInterval

Time in ms after which a new ad should be requested from the server.

| Type | Required | Default | Platform |
| -------- | -------- | ------------------- | -------- |
| number | no | 60000 ms (1 minute) | All |

#

#### adChoicesPlacement

Placement of AdChoicesView in any of the 4 corners of the ad

import AdOptions then pass the value from there. AdOptions.adChoicesPlacement

AdOptions.adChoicesPlacement

| Name | Description |
| ------------ | --------------------------------------------- |
| TOP_LEFT | Show AdChoices on top right side of the Ad |
| TOP_RIGHT | Show AdChoices on top lef side of the Ad |
| BOTTOM_LEFT | Show AdChoices on bottom right side of the Ad |
| BOTTOM_RIGHT | Show AdChoices on bottom left side of the Ad |

#

#### requestNonPersonalizedAdsOnly

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

You can use library such as: https://github.com/birgernass/react-native-ad-consent
to obtain the consent or if you are using rn-firebase you can obtain the consent from
there and then pass the consent to this library. If user has selected
non-personalized-ads then pass true and non-personalized ads will be shown to the user.

| Type | Required | Platform |
| --------- | -------- | -------- |
| boolean | no | All |

#

$3

All events are available through props.The following event are available on both Android and iOS:

#### onUnifiedNativeAdLoaded

This event return a data object which contains all the images and text etc. related to the ad incase you need it. Usually you wont need this because everything is loaded automatically.

#### onAdFailedToLoad

Called when ad has failed to load and returns reason due to which ad was not loaded.

#### onAdLoaded

Called when ad has successfully loaded without any errors.

#### onAdOpened

Called when ad is opened.

#### onAdClosed

Called when ad is closed.

#### onAdLeftApplication

Called when ad is loaded but user has left the application

#### onAdImpression

User impression has been recorded

#### onAdClicked

User has clicked on the ad.

Children Views

The children views render different data recieved in the Ad from the server. All the values etc are assigned automatically, all you need to do is style the according to your design.

Note: Do not set nativeID and onLayout prop on any of the Children views as these are used to register the views on Native iOS and Android.

AdBadge

Renders a small {Ad} badge on top-left corner of your ad showing the user that this is an Ad.

`jsx
import { AdBadge } from "react-native-admob-native-ads-mrousavy";

style={{
width: 15,
height: 15,
borderWidth: 1,
borderRadius: 2,
borderColor: "green",
}}
textStyle={{
fontSize: 9,
color: "green",
}}
/>;
`

$3

#### style:ViewStyle

Style the outer View Component.

#### textStyle:TextStyle

Style the inner Text Component

#### allCaps

| Type | Required | Platform |
| --------- | -------- | -------- |
| boolean | no | All |

Whether all text should be in capital letters

HeadlineView

Renders the headline or title for the ad recieved from server.

`jsx
import { HeadlineView } from "react-native-admob-native-ads-mrousavy";

style={{
fontWeight: "bold",
fontSize: 13,
}}
/>;
`

$3

Inherits all the props from Text Component.

TaglineView

Renders the description for the ad recieved from server.

`jsx
import { TaglineView } from "react-native-admob-native-ads-mrousavy";

style={{
fontWeight: "bold",
fontSize: 12,
}}
/>;
`

$3

Inherits all the props from Text Component.

AdvertiserView

Renders the advertiser name for the ad recieved from server.

`jsx
import { AdvertiserView } from "react-native-admob-native-ads-mrousavy";

style={{
fontWeight: "bold",
fontSize: 10,
}}
/>;
`

$3

Inherits all the props from Text Component.

#### allCaps

| Type | Required | Platform |
| --------- | -------- | -------- |
| boolean | no | All |

Whether all text should be in capital letters

StoreView

Renders the name of the store (Google Playstore / AppStore) if the ad is for an app.

`jsx
import { StoreView } from "react-native-admob-native-ads-mrousavy";

style={{
fontWeight: "bold",
fontSize: 10,
}}
/>;
`

$3

Inherits all the props from Text Component.

PriceView

Renders the price if the ad is from a paid service/app.

`jsx
import { PriceView } from "react-native-admob-native-ads-mrousavy";

style={{
fontWeight: "bold",
fontSize: 10,
}}
/>;
`

$3

Inherits all the props from Text Component.

ImageView

Renders an Image for the ad recieved from server.

`jsx
import { ImageView } from "react-native-admob-native-ads-mrousavy";

style={{
width: "100%",
height: 250,
}}
/>;
`

$3

Inherits all the props from Image Component.

MediaView

Renders the MediaView used for displaying video & image both.

`jsx
import { MediaView } from "react-native-admob-native-ads-mrousavy";

style={{
width: "100%",
height: 250,
}}
/>;
`

$3

#### style:ViewStyle

Style the outer MediaView Component.

CallToActionView

Renders a CallToAction Button

`jsx
import { CallToActionView } from "react-native-admob-native-ads-mrousavy";

style={{
height: 45,
paddingHorizontal: 12,
backgroundColor: "purple",
justifyContent: "center",
alignItems: "center",
borderRadius: 5,
elevation: 10,
}}
textStyle={{ color: "white", fontSize: 14 }}
/>;
`

$3

#### style:ViewStyle

Style the outer View Component.

#### textStyle:TextStyle

Style the inner Text Component

#### allowFontScaling

All font scaling on text

#### allCaps

| Type | Required | Platform |
| --------- | -------- | -------- |
| boolean` | no | All |

Whether all text should be in capital letters

Buy me a coffee

It costs me alot of time to keep the library updated and address all the bugs & issues. If this library has helped you buy me a coffee.

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

I want to 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)
Copyright © Marc Rousavy (@mrousavy)