Implement AdMob in React Native with Firebase
Tags: reactnative, admob, firebase
Published: 2020-04-14 03:04:21

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en" ><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="be83" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><blockquote name="bc7a" class="graf graf--blockquote graf-after--figure">This post is done on a special request from one of our thousands readers. If you have more requests, let me know in the comments</blockquote><p name="64d4" class="graf graf--p graf-after--blockquote">In this post, you will learn how to implement <strong class="markup--strong markup--p-strong">AdMob functionality, </strong>i.e. Google advertisements, in React Native apps. We will implement this in a simple React Native app and test on iOS simulator.</p><p name="e799" class="graf graf--p graf-after--p">As we all know, advertisements are the major source of income for all tech giants like Google, Facebook, Twitter etc. Google ads are one of the most popular ads out there, and the mobile version of Google ads is what they call AdMob.</p><figure tabindex="0" contenteditable="false" name="5414" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 342px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 48.9%;"></div><img class="graf-image" data-image-id="1*aD95WfvKex9OdEP0B6GWqg.jpeg" data-width="1024" data-height="501" alt="An example of Google AdMob ad. The ad is prompting user to install certain app" src="https://cdn-images-1.medium.com/max/800/1*aD95WfvKex9OdEP0B6GWqg.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">An example of Google AdMob ad. The ad is prompting user to install certain&nbsp;app</figcaption></figure><h4 name="6b38" class="graf graf--h4 graf-after--figure">Type of AdMob&nbsp;ads</h4><p name="97fe" class="graf graf--p graf-after--h4"><strong class="markup--strong markup--p-strong">Banner</strong>: A basic ad format that appears at the top &amp; bottom of the device screen.</p><p name="a0fe" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Interstitial</strong>: Full-page ads appear at natural breaks &amp; transitions, such as level completion. Supports video content.</p><p name="e668" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Rewarded</strong>: Full page Ads reward users for watching short videos and interacting with playable ads and surveys. Good for monetizing free-to-play users. Supports video content.</p><p name="35ce" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Native</strong>: Customizable ad format that matches the look &amp; feel of your app. Ads appear inline with app content. Supports video content. For now, Native ads are only possible in Native apps, not in hybrid apps like the ones based on Ionic or React Native.</p><p name="f894" class="graf graf--p graf-after--p">Let us look at the underlying frameworks for this post. <strong class="markup--strong markup--p-strong">If you are conversant with React Native and Firebase, skip these sections and go to the code segment of the post.</strong></p><h3 name="b6ca" class="graf graf--h3 graf-after--p">What is React-Native</h3><p name="0fc5" class="graf graf--p graf-after--h3">Before we move into the blog, let’s first clarify what framework we are using. We are using React Native, which is one among many hybrid app frameworks available. The closest rivals of React Native are Flutter and Ionic.</p><p name="e27d" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">TLDR;</strong>&#8202;—&#8202;React Native (RN) apps are more “native” than web-view apps made by Cordova / Ionic. React Native crates actual Java and Swift codes for apps, unlike the web-view apps which essentially run in a&nbsp;… web-view.</p><p name="d619" class="graf graf--p graf-after--p">React Native is a JavaScript framework for writing natively rendering mobile applications. It’ is based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. Because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.</p><p name="de54" class="graf graf--p graf-after--p">React Native applications render using real mobile UI components, <em class="markup--em markup--p-em">not</em> web-views, and will look and feel like any other native mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location. <a href="http://bit.ly/1YipO7A"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">Facebook</a>, <a href="http://bit.ly/1PPEiZH"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">Palantir</a>, <a href="http://bit.ly/1PPEjNg"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">TaskRabbit</a> etc are already using it in production for user-facing applications.</p><h3 name="2afa" class="graf graf--h3 graf-after--p">What is&nbsp;Firebase</h3><p name="0089" class="graf graf--p graf-after--h3">If you don’t know much about Firebase&nbsp;… you need to catch up with latest tech news. Firebase is the popular stuff in the market today. One can use Firebase to create quick mobile app back-ends, with a ton of built-in and ready-to-integrate features.</p><p name="17b0" class="graf graf--p graf-after--p">Some of the quick integrations available with Firebase are</p><ul class="postList"><li name="ea04" class="graf graf--li graf-after--p">Email Authentication</li><li name="9a39" class="graf graf--li graf-after--li">Social logins</li><li name="3453" class="graf graf--li graf-after--li">Real-time database</li><li name="196a" class="graf graf--li graf-after--li">Analytics</li><li name="c42f" class="graf graf--li graf-after--li">Crashlytics</li><li name="3f0f" class="graf graf--li graf-after--li">Push notifications</li><li name="fe08" class="graf graf--li graf-after--li">In-app messages</li><li name="a7e6" class="graf graf--li graf-after--li">Remote config</li></ul><p name="074f" class="graf graf--p graf-after--li">and much more. Firebase is quickly growing to become the most popular mobile app back-end platform.</p><h3 name="e4be" class="graf graf--h3 graf-after--p">So, why use AdMob with Firebase&nbsp;?</h3><p name="0714" class="graf graf--p graf-after--h3">Umm, well it’s not really necessary to use Firebase for AdMob. You can integrate AdMob in your app independent of Firebase. I am using Firebase connected AdMob for two reasons</p><ul class="postList"><li name="c7d5" class="graf graf--li graf-after--p">I have been using Invertase React Native Firebase plugin for quite some time. They have great documentations and so, I have trust in their products. Their AdMob dependency, in-turn, depends on React-Native Firebase. Hence.</li><li name="6c87" class="graf graf--li graf-after--li">With Firebase and AdMob connected, you can view great insights about your AdMob campaign. For explanation refer to the video <a href="https://youtu.be/EPKmYheOmiw"  class="markup--anchor markup--li-anchor"    target="_blank">here</a>.</li></ul><p name="cba7" class="graf graf--p graf-after--li">As an alternative, you can use other React-Native AdMob dependencies for showing ads in your React Native app. I will probably cover one of those in my blogs later.</p><p name="23c6" class="graf graf--p graf-after--p">Enough of story-telling, let’s dive into&#8202;—&#8202;how to implement AdMob in React Native apps</p><h3 name="a3b0" class="graf graf--h3 graf-after--p">Post structure</h3><p name="3480" class="graf graf--p graf-after--h3">We will go in a step-by-step manner to explore the AdMob feature implementation. This is my break-down of the blog</p><p name="1a45" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">STEPS</strong></p><ol class="postList"><li name="6b47" class="graf graf--li graf-after--p">Create a Firebase project and get required information</li><li name="c394" class="graf graf--li graf-after--li">Create a simple React Native app</li><li name="d628" class="graf graf--li graf-after--li">Setup your AdMob account</li><li name="e24a" class="graf graf--li graf-after--li">Setup AdMob dependency</li><li name="ab56" class="graf graf--li graf-after--li">Implement different types of Ads in your RN App</li><li name="3666" class="graf graf--li graf-after--li">Build the app on iOS device and test</li></ol><p name="08cb" class="graf graf--p graf-after--li">So let’s dive right in!</p><figure tabindex="0" contenteditable="false" name="8ea5" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 182.9%;"></div><img class="graf-image" data-image-id="1*ERffcqfeSC19qC5l50L94w.gif" data-width="350" data-height="640" src="https://cdn-images-1.medium.com/max/800/1*ERffcqfeSC19qC5l50L94w.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">I made you laugh&nbsp;… didn’t I&nbsp;?&nbsp;😆</figcaption></figure><h3 name="5996" class="graf graf--h3 graf-after--figure">Step 1&#8202;—&#8202;Create Firebase&nbsp;project</h3><p name="5f83" class="graf graf--p graf-after--h3">For Admob implementation, all we need from Firebase project is&#8202;—&#8202;<code class="markup--code markup--p-code">GoogleService-Info.plist</code> file (for iOS) or <code class="markup--code markup--p-code">google-services.json</code> file for Android</p><p name="23ac" class="graf graf--p graf-after--p">Follow these steps</p><ul class="postList"><li name="a7b4" class="graf graf--li graf-after--p">Login into <a href="http://console.firebase.google.com"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Firebase Console</a></li><li name="4103" class="graf graf--li graf-after--li">Create Firebase Project</li><li name="2a0c" class="graf graf--li graf-after--li">Add an iOS app (or an Android app), register the Bundle ID, and give your app a name</li><li name="1234" class="graf graf--li graf-after--li">Download <code class="markup--code markup--li-code">GoogleService-Info.plist</code>&nbsp;. We’ll need this file later in the project</li></ul><p name="f4ed" class="graf graf--p graf-after--li">Follow <a href="https://youtu.be/6juww5Lmvgo"  class="markup--anchor markup--p-anchor"    target="_blank">this</a> video for the above steps if you need.</p><h3 name="f56c" class="graf graf--h3 graf-after--p">Step 2&#8202;—&#8202;Create basic React Native&nbsp;app</h3><p name="9b4d" class="graf graf--p graf-after--h3">First, make sure you have all pre-requisites to create a react-native app as per the <a href="https://facebook.github.io/react-native/docs/getting-started.html"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">official documentation</a>.</p><blockquote name="5518" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">At the time of this post, I have React-Native version 0.62 &amp; node 12.14.0</em></strong></blockquote><p name="f921" class="graf graf--p graf-after--blockquote">Create a blank react-native app</p><pre name="b6c0" class="graf graf--pre graf-after--p">$ react-native init AdMob</pre><p name="4f66" class="graf graf--p graf-after--pre">This will create a basic React-native app which you can run in a device or simulator. (either Android or iOS)</p><p name="7bb3" class="graf graf--p graf-after--p is-selected">We’ll create a simple page with few buttons that will trigger Ads. While banner ad generally doesn’t need a trigger, interstitial ads and reward ads need a trigger. These triggers are generally completion of a level in a game app etc. My basic UI for the ad page looks like this</p><figure tabindex="0" contenteditable="false" name="248c" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 337px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 178%;"></div><img class="graf-image" data-image-id="1*8m4Hiq2RE02Q3oAEDUG2uw.png" data-width="337" data-height="600" alt="Basic UI for AdMob implementation in React Native&#8202;—&#8202;iOS" src="https://cdn-images-1.medium.com/max/800/1*8m4Hiq2RE02Q3oAEDUG2uw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Basic UI for AdMob implementation in React Native&#8202;—&#8202;iOS</figcaption></figure><h3 name="b55b" class="graf graf--h3 graf-after--figure">Step 3— Setup your Admob&nbsp;account</h3><ul class="postList"><li name="2f65" class="graf graf--li graf-after--h3">Signup then Sign in to your AdMob account at <a href="https://apps.admob.com/?utm_source=internal%26utm_medium=et%26utm_campaign=helpcentrecontextualopt%26utm_term=http://goo.gl/6Xkfcf%26subid=ww-ww-et-amhelpv4"  class="markup--anchor markup--li-anchor" rel="noopener noreferrer noopener"    target="_blank">https://apps.admob.com</a>.</li><li name="3f16" class="graf graf--li graf-after--li">Click <strong class="markup--strong markup--li-strong">Apps</strong> in the sidebar.</li><li name="63c6" class="graf graf--li graf-after--li">Click <strong class="markup--strong markup--li-strong">Add app</strong> to add a new app or click <strong class="markup--strong markup--li-strong">View all apps</strong> to search a list of all of the apps you’ve added to AdMob.</li><li name="f52c" class="graf graf--li graf-after--li">In the <strong class="markup--strong markup--li-strong">App Settings </strong>options, you can see your <strong class="markup--strong markup--li-strong">App ID</strong>. This is the ID you will need to connect your app to Google AdMob in your React Native app.</li></ul><figure tabindex="0" contenteditable="false" name="9df2" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 341px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 48.8%;"></div><img class="graf-image" data-image-id="1*JoDnyDkki68npDr77EitSw.png" data-width="1103" data-height="538" alt="Note down your App ID from App Setting in Google AdMob" src="https://cdn-images-1.medium.com/max/800/1*JoDnyDkki68npDr77EitSw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Note down your App ID from App Setting in Google&nbsp;AdMob</figcaption></figure><ul class="postList"><li name="4bc8" class="graf graf--li graf-after--figure">In the <strong class="markup--strong markup--li-strong">Ad Units </strong>section, you can add multiple types of Ad units. For more details on adding Ad Units, check out the following detailed step-by-step instructions for</li></ul><p name="2c44" class="graf graf--p graf-after--li">— <a href="https://support.google.com/admob/answer/7311346?hl=en"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Banner Ads</a></p><p name="a79f" class="graf graf--p graf-after--p">—<a href="https://support.google.com/admob/answer/7311435?hl=en%26ref_topic=7382891"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"> Interstitial Ads</a></p><p name="aded" class="graf graf--p graf-after--p">— <a href="https://support.google.com/admob/answer/7311747?hl=en%26ref_topic=7382891"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Reward Ads</a></p><p name="2327" class="graf graf--p graf-after--p">AdMob has a ton of other settings for how, when and where your ads should show up, but all that for later. In this post, we’ll limit the discussion to <strong class="markup--strong markup--p-strong">“How to display basic ad units in a React Native app”</strong></p><h3 name="7b1a" class="graf graf--h3 graf-after--p">Step 4&#8202;—&#8202;Install AdMob dependency and implement</h3><p name="e185" class="graf graf--p graf-after--h3">For this post, as I explained earlier, we are using AdMob with Firebase. The dependency we are using for this is <a href="https://invertase.io/oss/react-native-firebase/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">React-Native Firebase</a>. This main dependency contains several service modules, AdMob is one of them.</p><h4 name="7a8e" class="graf graf--h4 graf-after--p">4.1 Install React-Native Firebase for&nbsp;iOS</h4><p name="2697" class="graf graf--p graf-after--h4">In your existing React Native app, add the main dependency using</p><pre name="a657" class="graf graf--pre graf-after--p"><strong class="markup--strong markup--pre-strong">$ yarn add @react-native-firebase/app<br></strong><code class="markup--code markup--pre-code"># For iOS</code> <br><code class="markup--code markup--pre-code"><strong class="markup--strong markup--pre-strong">cd ios &amp;&amp; pod install</strong></code><strong class="markup--strong markup--pre-strong"> </strong></pre><h4 name="fe49" class="graf graf--h4 graf-after--pre">4.2 Import Firebase config file in&nbsp;Xcode</h4><p name="3f34" class="graf graf--p graf-after--h4">Next, open the project (<code class="markup--code markup--p-code">/ios/{projectName}.xcworkspace</code>) in Xcode editor. Add your <code class="markup--code markup--p-code">GoogleService-Info.plist</code> file to the project by right clicking on the project name and “Add files” to the project, as demonstrated below. Ensure the ‘Copy items if needed’ checkbox is enabled.</p><figure tabindex="0" contenteditable="false" name="52a6" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 415px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 59.3%;"></div><img class="graf-image" data-image-id="1*gGBtQtlVgvtETCZbiXxg4g.png" data-width="984" data-height="584" src="https://cdn-images-1.medium.com/max/800/1*gGBtQtlVgvtETCZbiXxg4g.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="69e4" class="graf graf--h4 graf-after--figure">4.3 Initialize Firebase in&nbsp;Xcode</h4><p name="8626" class="graf graf--p graf-after--h4">Open the AppDelegate file within your project <code class="markup--code markup--p-code">/ios/{projectName}/AppDelegate.m</code>. At the top of the file import the Firebase module:</p><pre name="39f2" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">#import &lt;Firebase.h&gt;</code></pre><p name="8296" class="graf graf--p graf-after--pre">Within the <code class="markup--code markup--p-code">didFinishLaunchingWithOptions</code> method, add the <code class="markup--code markup--p-code">configure</code> method:</p><pre name="958c" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code u-paddingRight0 u-marginRight0">- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {<br><strong class="markup--strong markup--pre-strong">if ([FIRApp defaultApp] == nil) {<br>  [FIRApp configure];<br>}</strong></code><strong class="markup--strong markup--pre-strong"> </strong><br>....</pre><p name="ae68" class="graf graf--p graf-after--pre">Rebuild your project by running commands</p><pre name="fda0" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">$ cd ios/<br>$ pod install --repo-update</code></pre><h4 name="3717" class="graf graf--h4 graf-after--pre">4.4 Install AdMob dependency</h4><p name="0da5" class="graf graf--p graf-after--h4">Install the module using</p><pre name="938d" class="graf graf--pre graf-after--p">$ yarn add @react-native-firebase/admob<br><code class="markup--code markup--pre-code"># For iOS<br>cd ios/ &amp;&amp; pod install</code></pre><p name="3534" class="graf graf--p graf-after--pre">Once completed, re-run your project in iOS device using</p><pre name="06b2" class="graf graf--pre graf-after--p">$ react-native run-ios</pre><p name="31bb" class="graf graf--p graf-after--pre">or run using Xcode.</p><p name="2818" class="graf graf--p graf-after--p">The above steps often lead to some small mistake. If the app doesn’t start up fine, check these</p><ul class="postList"><li name="2b9a" class="graf graf--li graf-after--p">Clean your project and build again</li><li name="4f73" class="graf graf--li graf-after--li">Make sure you have latest CocoaPods version</li><li name="4953" class="graf graf--li graf-after--li">Make sure your PodFile mentions the dependency as</li></ul><pre name="2743" class="graf graf--pre graf-after--li">pod ‘RNFBAdMob’, :path =&gt; ‘../node_modules/@react-native-firebase/admob’</pre><h4 name="1d55" class="graf graf--h4 graf-after--pre">4.5 <strong class="markup--strong markup--h4-strong">Adding your AdMob App&nbsp;ID</strong></h4><p name="30d3" class="graf graf--p graf-after--h4">The AdMob module needs to be hooked up to your own Google AdMob account using the App ID we noted down in <strong class="markup--strong markup--p-strong">Step 3</strong></p><p name="2966" class="graf graf--p graf-after--p">Add the ID to your root level <code class="markup--code markup--p-code">firebase.json</code> file (create one) under the <code class="markup--code markup--p-code">react-native</code> object like following</p><pre name="107b" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">{<br>"react-native": {<br>  "admob_android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",<br>  "admob_ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"</code> <br> <code class="markup--code markup--pre-code">}<br>}</code></pre><p name="72d0" class="graf graf--p graf-after--pre">Rebuild your application for the changes to take effect.</p><h3 name="de7b" class="graf graf--h3 graf-after--p">Step 5&#8202;—&#8202;Implement different types of Ads in the&nbsp;app</h3><p name="5f19" class="graf graf--p graf-after--h3">Once everything is setup, let us implement different types of Ads in the app.</p><h4 name="180e" class="graf graf--h4 graf-after--p">Banner Ad</h4><p name="2870" class="graf graf--p graf-after--h4">Banner ads are implemented as a <code class="markup--code markup--p-code">&lt;BannerAd&gt;</code> tag itself. You can place it in your React Native app just like any other tag. Make sure you import the dependency</p><pre name="bf27" class="graf graf--pre graf-after--p">import { TestIds, BannerAd, BannerAdSize} from '@react-native-firebase/admob';</pre><p name="426b" class="graf graf--p graf-after--pre">I imported the Banner ad at the bottom of the page, in a <code class="markup--code markup--p-code">View</code> positioned <code class="markup--code markup--p-code">absolute</code> as follows</p><pre name="6e4c" class="graf graf--pre graf-after--p">&lt;<strong class="markup--strong markup--pre-strong">BannerAd</strong><br> unitId={TestIds.BANNER}<br> size={BannerAdSize.SMART_BANNER}<br> requestOptions=`{{<br> requestNonPersonalizedAdsOnly: true,}}`<br> onAdLoaded={() =&gt; {<br> console.log('Advert loaded');}}<br> onAdFailedToLoad={(error) =&gt; {<br> console.error('Advert failed to load: ', error);}}<br>/&gt;</pre><p name="cdac" class="graf graf--p graf-after--pre">Here, I have used a test ID <code class="markup--code markup--p-code">TestIds.BANNER</code>&nbsp;. This uses a default test ID provided by AdMob. You will replace this with your production Ad unit ID when you release the app</p><blockquote name="0368" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">DO NOT use the test ID in your production app, and DO NOT use your production Ad Unit ID while developing the app</strong></blockquote><p name="ab11" class="graf graf--p graf-after--blockquote">The resulting ad looks like this</p><figure tabindex="0" contenteditable="false" name="2a56" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 337px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 178%;"></div><img class="graf-image" data-image-id="1*D7RwqLBPwxWjaDlgDoSfaQ.png" data-width="337" data-height="600" alt="AdMob Banner Ad in React Native app" src="https://cdn-images-1.medium.com/max/800/1*D7RwqLBPwxWjaDlgDoSfaQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">AdMob Banner Ad in React Native&nbsp;app</figcaption></figure><h4 name="a420" class="graf graf--h4 graf-after--figure">Interstitial Ad</h4><p name="67f8" class="graf graf--p graf-after--h4">Interstitial Ads work on a trigger. Because these are full page ads, they are not always visible as Banner Ads.</p><p name="a374" class="graf graf--p graf-after--p">To implement interstitial ads, import the required dependency and follow the code below</p><figure tabindex="0" contenteditable="false" name="5b39" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/rathoreabhijeet/33281210e4cfb1d6cd262f1027ee572d.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Interstitial Admob Ads in react native app</figcaption></figure><p name="5504" class="graf graf--p graf-after--figure">Again, <code class="markup--code markup--p-code">TestIds.INTERSTITIAL</code> is a test ID. Replace it with production Ad ID when releasing the app.</p><p name="4f3b" class="graf graf--p graf-after--p"><code class="markup--code markup--p-code">.load()</code> method loads the ad. This ad takes some time in loading. That is why&nbsp;<code class="markup--code markup--p-code">.show()</code> is called on the <code class="markup--code markup--p-code">LOADED</code> event. If you call the&nbsp;<code class="markup--code markup--p-code">.show()</code> method immediately after&nbsp;<code class="markup--code markup--p-code">.load()</code> the app with crash.</p><p name="33b7" class="graf graf--p graf-after--p">Finally&nbsp;<code class="markup--code markup--p-code">.show()</code> shows the ad on full screen, like following</p><figure tabindex="0" contenteditable="false" name="da39" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 337px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 178%;"></div><img class="graf-image" data-image-id="1*UWEB_sg7FfKntt8d5xmfZQ.png" data-width="337" data-height="600" alt="Admob interstitial ad in React Native app" src="https://cdn-images-1.medium.com/max/800/1*UWEB_sg7FfKntt8d5xmfZQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Admob interstitial ad in React Native&nbsp;app</figcaption></figure><h4 name="3425" class="graf graf--h4 graf-after--figure">Reward Ad</h4><p name="146c" class="graf graf--p graf-after--h4">Again, reward Ads are similar to interstitial ads in the trigger mechanism. To implement, import the required dependency and follow the code below</p><figure tabindex="0" contenteditable="false" name="f8bf" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/rathoreabhijeet/eaec0f0f0d1ac130c41d932a12a60886.js %}</div></div></figure><p name="e470" class="graf graf--p graf-after--figure">Again, <code class="markup--code markup--p-code">TestIds.REWARDED</code> is a test ID. Replace it with production Ad ID when releasing the app.</p><p name="9255" class="graf graf--p graf-after--p"><code class="markup--code markup--p-code">.load()</code> method loads the ad. This ad takes some time in loading. That is why&nbsp;<code class="markup--code markup--p-code">.show()</code> is called on the <code class="markup--code markup--p-code">LOADED</code> event. If you call the&nbsp;<code class="markup--code markup--p-code">.show()</code> method immediately after&nbsp;<code class="markup--code markup--p-code">.load()</code> the app with crash.</p><p name="c515" class="graf graf--p graf-after--p">Reward Ads also have a&nbsp;<code class="markup--code markup--p-code">.EARNED_REWARD</code> event, which is called when the reward ad throws a callback (generally when user has seen the required length of the ad). After this callback, you can provide user with the reward.</p><p name="e6db" class="graf graf--p graf-after--p">Finally&nbsp;<code class="markup--code markup--p-code">.show()</code> shows the ad on full screen. The reward ad will look like this</p><figure tabindex="0" contenteditable="false" name="59bb" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 376px; max-height: 670px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 178.2%;"></div><img class="graf-image" data-image-id="1*96WzM5SBJ8a4GDQQCQte-g.gif" data-width="376" data-height="670" alt="Admob reward ads in React native app" src="https://cdn-images-1.medium.com/max/800/1*96WzM5SBJ8a4GDQQCQte-g.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Admob reward ads in React native&nbsp;app</figcaption></figure><h3 name="1f83" class="graf graf--h3 graf-after--figure">Step 6: Testing the app on a&nbsp;device</h3><p name="838b" class="graf graf--p graf-after--h3">To run the iOS app, you should specify simulator</p><pre name="b815" class="graf graf--pre graf-after--p">$ react-native run-ios --simulator=”iPhone X”</pre><p name="9a4b" class="graf graf--p graf-after--pre">To run Android app, you should start emulator first (or connect a device), either via Android Studio or <code class="markup--code markup--p-code">adb</code>&nbsp;, then call</p><pre name="9e48" class="graf graf--pre graf-after--p">$ react-native run-android</pre><p name="4c18" class="graf graf--p graf-after--pre">Tada&nbsp;! You have learnt how to implement AdMob ads in your React Native app. 🎉</p><h3 name="7a48" class="graf graf--h3 graf-after--p">Conclusion</h3><p name="7b07" class="graf graf--p graf-after--h3">In this blog, we learned how to implement Google AdMob functionality in React Native app. AdMob functionality is a must for an app where user wants to earn some revenue from ad clicks. This comes in handy when your app has a large number of users, and you do not charge users for anything in the app. So ads become your direct revenue source. You can also combine the interstitial ads and rewards ads with in-app rewards like a level up in a game, extra lives etc.</p><blockquote name="d788" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">Complete source code of this tutorial is available in the </em></strong><a href="https://github.com/rathoreabhijeet/react-native-admob"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">react-native-admob</em></strong></a></blockquote><h3 name="84b4" class="graf graf--h3 graf-after--blockquote">Next Steps</h3><p name="aae2" class="graf graf--p graf-after--h3">Now that you have learnt about setting up AdMob in React Native apps, here are some other topics you can look into</p><ul class="postList"><li name="39b9" class="graf graf--li graf-after--p">Firebase&#8202;—&#8202;<a href="https://enappd.com/blog/intergrate-firebase-in-react-native-app/73"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Integrate Firebase</a> | <a href="https://enappd.com/blog/firebase-analytics-in-react-native-app/101"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Analytics</a> | <a href="https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Push notifications</a> | <a href="https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Firebase CRUD</a></li><li name="ce44" class="graf graf--li graf-after--li">How To in React Native&#8202;—&#8202;<a href="https://enappd.com/blog/geolocation-geocoding-react-native-apps/84"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">Geolocation</a> | <a href="https://enappd.com/blog/react-native-life-cycle-hooks/79"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">Life cycle hooks</a> | <a href="https://enappd.com/blog/pick-images-from-camera-gallery-in-react-native-app/78"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">Image Picker</a> | <a href="https://enappd.com/blog/redux-in-react-native-app/92"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">Redux implementation</a> | <a href="https://enappd.com/blog/how-to-make-api-calls-in-react-native-apps/125"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Make API calls</a> | <a href="https://enappd.com/blog/navigations-in-react-native-app/124"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Navigation</a> | <a href="https://enappd.com/blog/how-to-translate-in-react-native-app-globalization-internationalization-and-text-to-speech/120"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Translation</a> | <a href="https://enappd.com/blog/react-native-qr-code-scanning-using-react-native-camera/117"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Barcode &amp; QR code scan</a> | <a href="https://enappd.com/blog/send-read-and-delete-sms-in-react-native/107"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Send &amp; Read SMS</a> | <a href="https://enappd.com/blog/google-vision-with-react-native/96"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google Vision</a> | <a href="https://enappd.com/blog/refreshcontrol-pull-to-refresh-in-react-native-apps/130"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Pull to Refresh</a></li><li name="e480" class="graf graf--li graf-after--li">Payments&#8202;—&#8202;<a href="https://enappd.com/blog/implement-apple-pay-in-react-native-apps/93"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Apple Pay</a> | <a href="https://enappd.com/blog/stripe-integration-in-react-native-apps-using-firebase/108"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Stripe payments</a></li><li name="4d3b" class="graf graf--li graf-after--li">Authentication&#8202;—&#8202;<a href="https://enappd.com/blog/google-login-in-react-native-android-apps-with-firebase/90"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">Google Login</a>| <a href="https://enappd.com/blog/facebook-login-in-react-native-apps/89"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">Facebook login</a> | <a href="https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">Phone Auth</a> | <a href="https://enappd.com/blog/twitter-login-in-react-native-apps-using-firebase/95"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter login</a></li><li name="2ccd" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-make-stories-ui-like-instagram-and-whatsapp-in-react-native/123"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Create Instagram / Whatsapp Story Feature in React Native</a></li><li name="01c3" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/react-native-life-cycle-hooks/79"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">React Native life cycle hooks</a> | <a href="https://enappd.com/blog/redux-in-react-native-app/92"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Implement Redux</a> | <a href="https://enappd.com/blog/async-actions-with-redux-thunk-middleware-in-react-native-apps-1/100"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Async actions with Redux</a></li><li name="3172" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/guide-on-react-native-full-app/53"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">Create Awesome Apps in React Native</a> using Full App</li></ul><p name="5017" class="graf graf--p graf-after--li">If you need a base to start your next React Native app, you can make your next awesome app using <a href="https://store.enappd.com/product/react-native-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">React Native Full App</a></p><figure tabindex="0" contenteditable="false" name="a0ad" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 700px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 100%;"></div><img class="graf-image" data-image-id="0*50h94UU2H2pkisje.jpeg" data-width="800" data-height="800" src="https://cdn-images-1.medium.com/max/800/0*50h94UU2H2pkisje.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="0424" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>