React Native Admob

Introduction

Admob is a service that allows you to monetize your app by showing ads to your users. You can choose from various ad formats, such as banner, interstitial, rewarded, native, and more. You can also customize the appearance and behavior of the ads to match your app’s design and user experience.

React Native Admob works by connecting your app with advertisers who want to reach your audience. You get paid when your users view or interact with the ads. You can also track and optimize your ad performance using the Admob dashboard.

What is Admob?

Admob is a mobile advertising platform that was acquired by Google in 2009. It is one of the largest and most popular mobile ad networks in the world, serving over 1 billion users across 200 countries. Admob helps developers monetize their apps by displaying relevant ads to their users.

Admob works by using an SDK (software development kit) that you integrate into your app. The SDK communicates with the Admob servers and requests ads based on your app’s configuration and user’s context. The SDK then displays the ads in your app’s UI (user interface) according to your preferences.

React Native Admob also provides tools and features that help you manage and optimize your ad campaigns. For example, you can use mediation to show ads from multiple sources and increase your fill rate and revenue. You can also use experiments to test different ad settings and see which ones perform better. You can also use reports and analytics to monitor your ad performance and user behavior.

Admob Ad Formats

Admob offers various ad formats that you can choose from depending on your app’s layout, content, and user experience. Here are some of the most common ad formats that Admob supports:

• Banner ads:
  These are rectangular ads that appear at the top or bottom of your app’s screen. They are usually used for displaying text or image ads that are relevant to your app’s content or category. Banner ads are simple to implement and can be shown throughout your app’s lifecycle.
• Interstitial ads:
  These are full-screen ads that cover the entire screen of your app. They are usually used for displaying video or rich media ads that offer a high level of engagement. Interstitial ads are best suited for showing at natural breaks or transitions in your app, such as between levels, after completing a task, or before exiting the app.
• Rewarded ads:
  These are also full-screen ads that offer users an incentive for watching or interacting with them. The incentive can be anything that adds value to your app, such as extra lives, coins, points, etc. Rewarded ads are ideal for games or apps that have a reward-based system or a freemium model.
• Native ads:
  These are ads that blend in with your app’s content and design. They are usually used for displaying sponsored content or products that are relevant to your app’s theme or niche. Native ads allow you to customize the look and feel of the ads to match your app’s style and layout.
• Banner interstitials:
  These are hybrid ads that combine banner and interstitial formats. They are similar to banner ads but expand to full-screen when tapped or clicked by the user. They are useful for showing more information or details about an ad without leaving your app.

Creating an AdMob Account

To use React Native Admob in our app, we need to create an Admob account and register our app with it. To do that, we need to follow these steps:

1. Go to Google Admob and sign in with our Google account
2. Click on the “Get started” button and follow the instructions to create our Admob account
3. Click on the “Apps” tab and then click on the “Add app” button
4. Select whether our app is published on Google Play or App Store or not, and enter our app’s name and platform
5. Click on the “Add app” button and copy the app ID that is generated for our app
6. Click on the “Ad units” tab and then click on the “Create ad unit” button
7. Select the ad format that we want to use in our app, such as banner, interstitial, rewarded, or native
8. Enter a name for our ad unit and configure the settings according to our preferences
9. Click on the “Create ad unit” button and copy the ad unit ID that is generated for our ad unit
10. Repeat the steps 7 to 9 for each ad format that we want to use in our app.

We will need the app ID and the ad unit IDs later when we install and configure the react-native-google-mobile-ads package in our React Native project.

React Native App with AdMob Example

Installation (react-native-google-mobile-ads)

1. Run npm install react-native-google-mobile-ads --save or yarn add react-native-google-mobile-ads to install the package.
2. Run npx pod-install to install the iOS dependencies.
3. Follow the instructions on Developer tools for iOS page to set up your iOS project with Google Mobile Ads SDK.
4. Follow the instructions on Developer tools for Android page to set up your Android project with Google Mobile Ads SDK.
5. Add your Google AdMob app IDs for Android and iOS in your app.json file under the “react-native-google-mobile-ads” key. For example:

6. Rebuild your project with npx pod-install and npx react-native run-ios for iOS, or npx react-native run-android for Android. If you are using Expo, you may need to use npx expo prebuild or npx eas-cli build --profile development.
7. Optionally, configure the outbound requests for your ads, such as child-directed treatment, max ad content rating, or test device IDs. You can do this by calling the setRequestConfiguration method from the AdMob module before loading any ads. For example:

Test Usage

Import the package in your component:

To display a banner ad, use the <AdMobBanner> component with the following props:

1. adUnitId:
   The ad unit ID for this banner ad. You can get it from your Google AdMob dashboard.
2. onAdLoaded:
   A function that is invoked when the ad is successfully loaded.
3. onAdFailedToLoad:
   A function that is invoked when the ad fails to load. It receives an error object as a parameter.
4. onAdOpened:
   A function that is invoked when the user taps on the ad.
5. onAdClosed:
   A function that is invoked when the user returns to the app after tapping on the ad.
6. onAdLeftApplication:
   A function that is invoked when the user leaves the app after tapping on the ad.
7. onSizeChange:
   A function that is invoked when the size of the ad changes. It receives the new width and height as parameters.
8. style:
   An optional style object for customizing the appearance of the banner ad.

For example:

To display an interstitial ad, use the AdMobInterstitial API with the following methods:

1. setAdUnitID(adUnitId):
   Sets the ad unit ID for this interstitial ad. You can get it from your Google AdMob dashboard.
2. setTestDeviceID(testDeviceID):
   Sets an optional test device ID for this interstitial ad. You can get it from your device logs or use ‘EMULATOR’ for emulators.
3. requestAd():
   Requests an interstitial ad from Google AdMob. You should call this method well before you plan to show the ad, such as at app launch or between scenes.
4. showAd():
   Shows the interstitial ad if it is ready. You should check if the ad is ready by using the isReady property or listening to the adLoaded event.
5. isReady:
   A boolean property that indicates whether the interstitial ad is ready to be shown or not.
6. addEventListener(type, handler):
   Adds a listener for an interstitial ad event. The possible types are:
   • adLoaded:
     Fired when the interstitial ad is successfully loaded.
   • adFailedToLoad:
     Fired when the interstitial ad fails to load. The handler receives an error object as a parameter.
   • adOpened:
     Fired when the user taps on the interstitial ad.
   • adClosed:
     Fired when the user returns to the app after tapping on the interstitial ad.
   • adLeftApplication:
     Fired when the user leaves the app after tapping on the interstitial ad.

Displaying Admob Ads in React Native App

To display BannerAd, InterstitialAd, and RewardedAd, you need to import the corresponding components from the package and use them in your app. You also need to provide valid ad unit IDs for each type of ad. For example:

Breaking Down the Code

• The code imports the necessary components from the react-native-google-mobile-ads library and defines three constants for the ad unit IDs.
• It then creates an App component that loads interstitial and rewarded ads when the app mounts using the useEffect hook.
• The component also defines two functions, showInterstitial and showRewarded, that show the interstitial and rewarded ads respectively when the corresponding button is pressed.
• Finally, the component returns a view that displays a banner ad, two buttons to show interstitial and rewarded ads, and a text element that reads “React Native Google Mobile Ads Example”.