How To Implement Admob On React Native

After working hard and making an amazing phone application and help others to solve a problem or even for fun, sometimes you need to earn money to cover the app expenses. In the market there’s many option for monetization. The most known ones are Admob and Facebook Ads, but for this article we will focus on Admob from Google.

Setting up Admob Account

Before to start showing ads on your app, you have to create an account from this link on Google AdMob services.

After you created your account successfully, now is time to start the journey for showing ads. First of all, we need to create an App name and choose which platform to serve ads on, IOS or Android

Now we named the app on admob and we choose the platform as IOS, once you click on add it will create an Id for the app.

After create ad unit, is time to show ads but there’s diffrent kind of ads available to you, in this article we will implement Banner Interstital

Let’s create an Id for Banner Ads to display it on our app.

We have to copy this Ids to use later on on our app. We will do the same steps for Interstital 789

Creat React Native Expo

Let’s create an React Native app and install Admob module expo install expo-ads-admob

It’s time to jump to code and have fun. First of all we have to add code to our app.json under ios section.

”config”: {
“googleMobileAdsAppId”: “ca-app-pub-5745605476395920~3413016307”
}

bannerSize option to display the size of the ads that will fit your design and device, for more sizes check the image under,

adUnitID : is your banner id that created it earlier, replace it with your Id

onDidFailToReceiveAdWithError : Function to handle Errors of the banner ads

Now it’s time to see our ads.

After we displayed Banner ad let’s try with InterstitalAds

So the code above will display ads any time to click on the button, let’s see how it looks like as result.

Et voila!!, our ads works perfectly, I hope you like this article, Next time we will implement Facebook ads