How to monetize your #ReactNative app via #admob?

You can integrate Google admob (adsense for mobile apps) on your React Native apps via Google admob plugin. I gonna share how to install it on Android and display banners of different sizes.

1. npm i --save react-native-admob@next (This version is still beta as of Jan 2018)
   npm i react-native-admob -S (This is the version 1 as of Jan 2018)
2. react-native link
3. Turn off your adblock for the next step if you have it on.
4. Create an account on Google AdMob. Link your app for an app ID and create some banner IDs. Note that you can only link your app once and thus don't link to the wrong app, else, you will have to relink and have to include a different app ID in your app code.
   
   
   
5. Follow the example code below. Check out the admob example on its GitHub repo too.
   use this adUnitID 'ca-app-pub-3940256099942544/6300978111' to see the test banners
   !use your own adUnitID in production!
   !don't include testDevices prop in production!

import {
  AdMobBanner, 
} from 'react-native-admob'

// Display a banner
<AdMobBanner
  adSize="fullBanner"
  adUnitID="your-admob-unit-id" 
  testDevices={[AdMobBanner.simulatorId]} 
  onAdFailedToLoad={error => console.error(error)}
/>

Android

On Android, you have to include the following steps to make sure it works on production.

1. At project level build.gradle, include the following line.
   maven {

       url "https://maven.google.com"

   }

   

   Project level build.gradle to add admob

2. At app level build.gradle, add this line to tell Gradle to pull in the latest version of the Mobile Ads SDK
   compile "com.google.android.gms:play-services-ads:11.8.0"

   

   App level build.gradle to add admob

3. To initialize the Mobile Ads SDK. For this step, you need your Admob App ID from admob.
   Include the following lines in your MainActivity.java located at src/main/java/MainActivity
   
   import com.google.android.gms.ads.MobileAds;
   
   MobileAds.initialize(this, "YOUR_ADMOB_APP_ID");

MainActivity to add admob

To read detailed instructions, you can check out this Android document.

Note

If everything works after the above steps, that is great. If you have other plugins that use Google service, you may have to do some configuration.
1)

Make sure all the Google Service of these plugins are at the same version.
To view them easily, open up your Android directory using Android Studio.
Open up build.gradle of the plugins and look for red wavy underlines.

Set Google Service version to the same. Which version to choose depends on the minimum version that is required.

2)

Error retrieving parent for item: No resource found that matches the given name 'android:TextAppearance.Material.Widget.Button.Borderless.Colored’

If you see the above error message, make sure your compileSdkVersion match the support library version. Refer to these two stackoverflow posts: first post and second post out For examples:

compileSdkVersion 23

buildToolsVersion “23.0.2"

compile 'com.android.support:appcompat-v7:23.0.1’

compileSdkVersion 25

buildToolsVersion “25.0.2"

compile 'com.android.support:appcompat-v7:25.3.1'

3) 

Clean and rebuild your project on Android Studio. It works if it can build.

4)

You may need to clear cache.

npm start -- --reset-cache

yarn start -- --reset-cache

5)

Check that if you use the right adUnitID if you see the following error.

Internal error, an invalid response was received from the ad server

6)

To have a whole page of ads, you can do so. Not sure if your app will be allowed on app store. >_<

render() {

  return (

    <ScrollView style={styles.container}>

      <Text>banner</Text>

      <AdMobBanner

        adSize='banner'

        adUnitID='ca-app-pub-3940256099942544/6300978111'

        testDevices={[AdMobBanner.simulatorId]}

        onAdFailedToLoad={error => console.error(error)}

      />

      <Text>largeBanner</Text>

      <AdMobBanner

        adSize='largeBanner'

        adUnitID='ca-app-pub-3940256099942544/6300978111'

        testDevices={[AdMobBanner.simulatorId]}

        onAdFailedToLoad={error => console.error(error)}

      />

      <Text>mediumRectangle</Text>

      <AdMobBanner

        adSize='mediumRectangle'

        adUnitID='ca-app-pub-3940256099942544/6300978111'

        testDevices={[AdMobBanner.simulatorId]}

        onAdFailedToLoad={error => console.error(error)}

      />

      <Text>fullBanner</Text>

      <AdMobBanner

        adSize='fullBanner'

        adUnitID='ca-app-pub-3940256099942544/6300978111'

        testDevices={[AdMobBanner.simulatorId]}

        onAdFailedToLoad={error => console.error(error)}

      />

      <Text>smartBannerPortrait</Text>

      <AdMobBanner

        adSize='smartBannerPortrait'

        adUnitID='ca-app-pub-3940256099942544/6300978111'

        testDevices={[AdMobBanner.simulatorId]}

        onAdFailedToLoad={error => console.error(error)}

      />

    </ScrollView>

  );

}

Thank you for reading!

Jun