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.

If you are working on a React Native Application, you might have felt limited when it comes to displaying ads that look beautiful and match the app design. Not just displaying ads but making them look as good as your app design (Not the old banner and interstitials).

This library aims to solve that problem by providing complete support for Admob Native Ads which is dead simple and easy to use. Now you can create your own ads from ground up using custom React Native Views.

? Features

  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

? Try out the example app!

To run the example app clone the project 
git clone https://github.com/ammarahm-ed/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

? Installation Guide 

npm install react-native-admob-native-ads --save

or if you use yarn:

yarn add react-native-admob-native-ads

iOS Setup

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.

Android Setup

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

Basic Usage Example

This example demonstrates creation of a simple Banner Ad. For complete usage, see the example project. 
import NativeAdView, {
  CallToActionView,
  IconView,
  HeadlineView,
  TaglineView,
  AdvertiserView,
  AdBadge,
} from "react-native-admob-native-ads";

return (
  <>
    <View
      style={{
        flex: 1,
      }}
    >
      <NativeAdView
        style={{
          width: "95%",
          alignSelf: "center",
          height: 100,
        }}
        adUnitID="ca-app-pub-3940256099942544/2247696110" // TEST adUnitID
      >
        <View
          style={{
            height: 100,
            width: "100%",
            backgroundColor: "white",
          }}
        >
          <AdBadge />
          <View
            style={{
              height: 100,
              width: "100%",
              flexDirection: "row",
              justifyContent: "flex-start",
              alignItems: "center",
              paddingHorizontal: 10,
            }}
          >
            <IconView
              style={{
                width: 60,
                height: 60,
              }}
            />
            <View
              style={{
                width: "65%",
                maxWidth: "65%",
                paddingHorizontal: 6,
              }}
            >
              <HeadlineView
                style={{
                  fontWeight: "bold",
                  fontSize: 13,
                }}
              />
              <TaglineView
                numberOfLines={1}
                style={{
                  fontSize: 11,
                }}
              />
              <AdvertiserView
                style={{
                  fontSize: 10,
                  color: "gray",
                }}
              />
            </View>

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

? Reference

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.

import NativeAdView from "react-native-admob-native-ads";

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

Props

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

Set testDevices during testing ads or during development.

Type Required Platform
Array<string> 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

Events

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.

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

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

props

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.

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

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

props

Inherits all the props from Text Component.

TaglineView

Renders the description for the ad recieved from server.

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

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

props

Inherits all the props from Text Component.

AdvertiserView

Renders the advertiser name for the ad recieved from server.

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

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

props

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.

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

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

props

Inherits all the props from Text Component.

PriceView

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

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

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

props

Inherits all the props from Text Component.

StarRatingView

Renders the star rating if the ad is for an app on Google Playstore or AppStore.

import { StarRatingView } from "react-native-admob-native-ads";

<StarRatingView
  maxStars={5} // Always keep it to 5
/>;

props

Inherits all the props from react-native-star-rating library.

Note: Do not set the rating prop. This is handled automatically.

ImageView

Renders an Image for the ad recieved from server.

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

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

props

Inherits all the props from Image Component.

MediaView

Renders the MediaView used for displaying video & image both.

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

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

props

style:ViewStyle

Style the outer MediaView Component.

CallToActionView

Renders a CallToAction Button

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

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

props

allCaps

Type Required Platform
boolean no All

Whether all text should be in capital letters

props

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

GitHub