Skip to content
Simple and easy to use AdMob Native Ads for react native Android & iOS with styling support!
Objective-C Java JavaScript Ruby Starlark
Branch: master
Clone or download

Latest commit

Latest commit 2f637fa Mar 21, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
android cleanup Mar 20, 2020
example update example app. Mar 20, 2020
ios fix adbadge textColor Mar 20, 2020
.gitignore add gitignore Mar 20, 2020
.npmignore add npmignore & update package.json Mar 20, 2020
LICENSE Initial commit Mar 17, 2020
NativeAdView.js handle height for ad on android Mar 20, 2020
README.md Update README.md Mar 21, 2020
index.d.ts fix definations Mar 20, 2020
index.js implement android native ads Mar 20, 2020
package.json set repo public Mar 20, 2020
react-native-admob-native-ads.podspec update .podspec Mar 20, 2020

README.md

Simple and easy to use AdMob Native Ads for react native Android & iOS with styling support!

While you might have seen native ads on a react-native application, I have tried to take everything to another level so its really really really easy for you guys to get native ads up and running in a few steps with with styling support

iOS

Android

💫 Features

  1. Native Admob Ads
  2. Cross Platform (iOS and Android)
  3. Identical Working on Android and iOS
  4. Style your ads as you wish!
  5. No need to manage .xml or .xib layout files to match ad style to app theme!
  6. Adding styles is as simple as adding styles to any other react-native View
  7. AutoRefresh ad
  8. Multiple Ad Sizes
  9. Support Video Ads & Image 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-actions-sheet --save

or if you use yarn:

yarn add react-native-actions-sheet

iOS

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

Step 2: Add .xib files to your main project:

  1. Open .xcworkspace file inside the ios folder in your project in Xcode.
  2. Select the root folder of your project and right click for the dropdown menu.
  3. Click on Add files to YOUR_PROJECT_NAME
  4. In select file window, go to YOUR_PROJECT/node_modules/react-native-admob-native-ads/ios
  5. Select GADTMediumTemplateView.xib and GADTSmallTemplateView.xib files and add them to your project. Make sure copy items if needed is checked and add groups is selected!

Android

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

Android

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

Usage Example

For complete usage, see the example project.
import React from "react";
import { View } from "react-native";
import NativeAdView from "react-native-admob-native-ads";

const App = () => {
  return (
    <>
      <View
        style={{
          justifyContent: "center",
          flex: 1,
          paddingHorizontal: 10,
          alignItems: "center"
        }}
      >
        <NativeAdView
          adSize="large"
          buttonStyle={{
            borderRadius: 5,
            textColor: "#008BBA", // ALL Colors must always be 6 digit Hex
            backgroundColor: "#ffffff",
            borderWidth: 2,
            borderColor: "#008BBA"
          }}
          headlineTextColor="#000000"
          descriptionTextColor="#a9a9a9"
          advertiserTextColor="#a9a9a9"
          backgroundStyle={{
            borderWidth: 2,
            borderRadius: 10,
            borderColor: "#008BBA",
            backgroundColor: "#ffffff"
          }}
          style={{
            width: "100%"
          }}
          adUnitID="YOUR_NATIVE_AD_ID"
        />
      </View>
    </>
  );
};

export default App;

📃 Reference

Props

adUnitID

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

Type Required Platform
string Yes All

adSize

Select which size of ad you want to display.

Type Required Default Platform
string no "small" All

Android adSizes: "small", "medium" , "large" iOS adSizes: "small" and "medium" only.

testDevices

Set testDevices during testing ads or during development.

Type Required Platform
Array<string> no All

buttonStyle

style the callToAction button in Native ad according to your app look and feel.

Type Required Platform
object no All

The following styles properties are available at the moment.

Name Type Required
backroundColor 6 digit hex color string only Yes
textColor 6 digit hex color string only Yes
borderColor 6 digit hex color string only Yes
borderWidth number Yes
borderRadius number Yes

Note: Currently you will need to set all available properties and give them a valid value. value can't be null

backgroundStyle

Style the background of Native Ad View.

Type Required Platform
object no All

The following styles properties are available at the moment.

Name Type Required
backroundColor 6 digit hex color string only Yes
borderColor 6 digit hex color string only Yes
borderWidth number Yes
borderRadius number Yes

Note: Currently you will need to set all available properties and give them a valid value. value can't be null

headlineTextColor

Set color for the heading text of Ad.

Type Required Platform
6 digit hex color string only no All

descriptionTextColor

Set color for the description text of Ad.

Type Required Platform
6 digit hex color string only no All

advertiserTextColor

Set color for the description text of Ad.

Type Required Platform
6 digit hex color string only no All

ratingBarColor

Set color for the description text of Ad.

Type Required Platform
6 digit hex color string only no Android Only

Events

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

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.

Contributing

There are multiple ways in which you can contribute to this library. Feel free to open an issue if you have an idea in mind or if you have found a bug.

If the templates do not suit your requirments and you decide to make your own templates, feel free to submit them here and I will add them in the library.

Find this library useful? ❤️

Support it by joining stargazers for this repository. ⭐️ and follow me for my next creations!

MIT Licensed

You can’t perform that action at this time.