Git Product home page Git Product logo

react-native-sdk-admob's Introduction

react-native-sdk-admob

Getting started

$ npm install git+https://github.com/iChonal/react-native-sdk-admob.git --save

or

$ yarn add https://github.com/iChonal/react-native-sdk-admob.git

iOS

Installation

  • Automatic (using cocoapods)

$ react-native link react-native-sdk-admob

or

add pod 'react-native-sdk-admob', :path => '../node_modules/react-native-sdk-admob' to your Podfile

then run $ pod install

  • Manual

    1. install AdMob Sdk for iOS, see Google AdMob
    2. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
    3. Go to node_modulesreact-native-sdk-admob and add RNSdkAdmob.xcodeproj
    4. In XCode, in the project navigator, select your project. Add libRNSdkAdmob.a to your project's Build PhasesLink Binary With Libraries

Configuration

add AdUnitId to Info.plist file

  • banner
    <key>GADBannerAdUnitId</key>
    <string>"YOUR_ADMOB_BANNER_ADUNIT_ID"</string>
  • Interstitial
    <key>GADInterstitialAdUnitId</key>
    <string>"YOUR_ADMOB_INTERSTITIAL_ADUNIT_ID"</string>
  • Rewarded Video
    <key>GADRewardedAdUnitId</key>
    <string>"YOUR_ADMOB_REWARDED_ADUNIT_ID"</string>

Initialization

Before loading ads, apps should initialize the Mobile Ads SDK by calling the configureWithApplicationID: class method in GADMobileAds, and passing it their AdMob App ID. This only needs to be done once, ideally at app launch. You can find the App ID for your app in the AdMob UI.

Here's an example of how to call the configureWithApplicationID: method in your AppDelegate:

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

  // Initialize Google Mobile Ads SDK
  // Sample AdMob app ID: ca-app-pub-3940256099942544~1458002511
  [GADMobileAds configureWithApplicationID:@"YOUR_ADMOB_APP_ID"];
  return YES;
}

Android

Installation

  • Automatic

$ react-native link react-native-sdk-admob

  • Manual
  1. Append the following lines to android/settings.gradle:

    include ':react-native-sdk-admob'
    project(':react-native-sdk-admob').projectDir = new File(rootProject.projectDir,  '../node_modules/react-native-sdk-admob/android')
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:

      implementation project(':react-native-sdk-admob')
  3. Open up android/app/src/main/java/[...]/MainApplication.java

    • Add import io.github.ichonal.sdkadmob.RNSdkAdmobPackage; to the imports at the top of the file
    • Add new RNSdkAdmobPackage() to the list returned by the getPackages() method

Configuration

  • AppId

Add your AdMob App ID to your app's AndroidManifest.xml file by adding the <meta-data> tag shown below. You can find your App ID in the AdMob UI. For android:value insert your own AdMob App ID in quotes, as shown below.

<manifest>
    <application>
        <!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="[ADMOB_APP_ID]"/>
    </application>
</manifest>

Important: This step is required as of Google Mobile Ads SDK version 17.0.0. Failure to add this <meta-data> tag results in a crash with the message: "The Google Mobile Ads SDK was initialized incorrectly."

  • AdUnitId: Banner
<meta-data
      android:name="io.github.ichonal.sdkadmob.GADBANNER_ID"
      android:value="[ADMOB_BANNER_ADUNIT_ID]"/>
  • AdUnitId: Interstitial
<meta-data
      android:name="io.github.ichonal.sdkadmob.GADINTERSTITIAL_ID"
      android:value="[ADMOB_INTERSTITIAL_ADUNIT_ID]"/>
  • AdUnitId: Rewarded Video
<meta-data
      android:name="io.github.ichonal.sdkadmob.GADREWARDED_ID"
      android:value="[ADMOB_REWARDED_ADUNIT_ID]"/>

Initialization

Before loading ads, have your app initialize the Mobile Ads SDK by calling MobileAds.initialize() with your AdMob App ID. This needs to be done only once, ideally at app launch.

Here's an example of how to call the initialize() method in an Activity:

package ...
import ...
import com.google.android.gms.ads.MobileAds;

public class MainActivity extends AppCompatActivity {
    ...
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713
        MobileAds.initialize(this, "YOUR_ADMOB_APP_ID");
    }
    ...
}

Usage

import {
    GADBanner,
    GADInterstitial,
    GADRewarded,
} from 'react-native-sdk-admob';

DOC

GADBanner

GADInterstitial

GADRewarded

ACKNOWLEDGEMENT

react-native-sdk-admob's People

Contributors

cubesugar avatar

Stargazers

Miguel avatar kabueye avatar arpu avatar yinz avatar  avatar gaoyang avatar  avatar

Watchers

James Cloos avatar  avatar

Forkers

joycastle

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.