react-native-google-mobile-ads 4.2.0 → 5.1.0

package/RNGoogleMobileAds.podspec

@@ -1,7 +1,8 @@
 require 'json'
 package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
 
-google_ads_sdk_version = package['sdkVersions']['ios']['googleAds']
+google_mobile_ads_sdk_version = package['sdkVersions']['ios']['googleMobileAds']
+google_ump_sdk_version = package['sdkVersions']['ios']['googleUmp']
 
 Pod::Spec.new do |s|
   s.name                = "RNGoogleMobileAds"
@@ -18,24 +19,30 @@ Pod::Spec.new do |s|
   s.social_media_url    = 'http://twitter.com/invertaseio'
   s.ios.deployment_target = "10.0"
   s.source_files        = 'ios/**/*.{h,m}'
+  s.frameworks          = "AppTrackingTransparency"
 
   # React Native dependencies
   s.dependency          'React-Core'
 
   # Other dependencies
-  s.dependency          'PersonalizedAdConsent', '~> 1.0.5'
+  if defined?($RNGoogleUmpSDKVersion)
+    Pod::UI.puts "#{s.name}: Using user specified Google UMP SDK version '#{$RNGoogleUmpSDKVersion}'"
+    google_ump_sdk_version = $RNGoogleUmpSDKVersion
+  end
+
+  s.dependency          'GoogleUserMessagingPlatform', google_ump_sdk_version
 
-  if defined?($RNGoogleAdsSDKVersion)
-    Pod::UI.puts "#{s.name}: Using user specified Google Mobile-Ads SDK version '#{$RNGoogleAdsSDKVersion}'"
-    google_ads_sdk_version = $RNGoogleAdsSDKVersion
+  if defined?($RNGoogleMobileAdsSDKVersion)
+    Pod::UI.puts "#{s.name}: Using user specified Google Mobile-Ads SDK version '#{$RNGoogleMobileAdsSDKVersion}'"
+    google_mobile_ads_sdk_version = $RNGoogleMobileAdsSDKVersion
   end
 
   # AdMob dependencies
-  s.dependency          'Google-Mobile-Ads-SDK', google_ads_sdk_version
+  s.dependency          'Google-Mobile-Ads-SDK', google_mobile_ads_sdk_version
 
-  if defined?($RNGoogleAdsAsStaticFramework)
-    Pod::UI.puts "#{s.name}: Using overridden static_framework value of '#{$RNGoogleAdsAsStaticFramework}'"
-    s.static_framework = $RNGoogleAdsAsStaticFramework
+  if defined?($RNGoogleMobileAdsAsStaticFramework)
+    Pod::UI.puts "#{s.name}: Using overridden static_framework value of '#{$RNGoogleMobileAdsAsStaticFramework}'"
+    s.static_framework = $RNGoogleMobileAdsAsStaticFramework
   else
     s.static_framework = false
   end

package/__tests__/consent.test.ts

@@ -2,23 +2,31 @@ import { AdsConsent } from '../src';
 
 describe('Google Mobile Ads AdsConsent', function () {
   describe('requestInfoUpdate', function () {
-    it('throws if publisherIds is not an array', function () {
+    it('throws if options are not an object', function () {
       // @ts-ignore
-      expect(() => AdsConsent.requestInfoUpdate('pub-123')).toThrowError(
-        "AdsConsent.requestInfoUpdate(*) 'publisherIds' expected an array of string values.",
+      expect(() => AdsConsent.requestInfoUpdate('123')).toThrowError(
+        "AdsConsent.requestInfoUpdate(*) 'options' expected an object value.",
       );
     });
 
-    it('throws if publisherIds is empty array', function () {
-      expect(() => AdsConsent.requestInfoUpdate([])).toThrowError(
-        "AdsConsent.requestInfoUpdate(*) 'publisherIds' list of publisher IDs cannot be empty.",
+    it('throws if options.debugGeography is not a valid value.', function () {
+      // @ts-ignore
+      expect(() => AdsConsent.requestInfoUpdate({ debugGeography: -1 })).toThrowError(
+        "AdsConsent.requestInfoUpdate(*) 'options.debugGeography' expected one of AdsConsentDebugGeography.DISABLED, AdsConsentDebugGeography.EEA or AdsConsentDebugGeography.NOT_EEA.",
+      );
+    });
+
+    it('throws if options.tagForUnderAgeOfConsent is not a boolean.', function () {
+      // @ts-ignore
+      expect(() => AdsConsent.requestInfoUpdate({ tagForUnderAgeOfConsent: '123' })).toThrowError(
+        "AdsConsent.requestInfoUpdate(*) 'options.tagForUnderAgeOfConsent' expected a boolean value.",
       );
     });
 
-    it('throws if publisherIds contains non-string values', function () {
+    it('throws if options.testDeviceIdentifiers is not an array', function () {
       // @ts-ignore
-      expect(() => AdsConsent.requestInfoUpdate(['foo', 123])).toThrowError(
-        "AdsConsent.requestInfoUpdate(*) 'publisherIds[1]' expected a string value.",
+      expect(() => AdsConsent.requestInfoUpdate({ testDeviceIdentifiers: '123' })).toThrowError(
+        "AdsConsent.requestInfoUpdate(*) 'options.testDeviceIdentifiers' expected an array of string values.",
       );
     });
   });

package/android/build.gradle

@@ -22,6 +22,7 @@ plugins {
 
 def packageJson = PackageJson.getForProject(project)
 def googleMobileAdsVersion = packageJson['sdkVersions']['android']['googleMobileAds']
+def googleUmpVersion = packageJson['sdkVersions']['android']['googleUmp']
 def jsonMinSdk = packageJson['sdkVersions']['android']['minSdk']
 def jsonTargetSdk = packageJson['sdkVersions']['android']['targetSdk']
 def jsonCompileSdk = packageJson['sdkVersions']['android']['compileSdk']
@@ -44,7 +45,7 @@ project.ext {
       ],
 
       ads     : [
-        consent: "1.0.6"
+        consent: googleUmpVersion,
       ],
     ],
   ])
@@ -88,8 +89,8 @@ repositories {
 }
 
 dependencies {
-  implementation("com.google.android.gms:play-services-ads:20.5.0") { force = true; }
-  implementation "com.google.android.ads.consent:consent-library:${ReactNative.ext.getVersion("ads", "consent")}"
+  implementation("com.google.android.gms:play-services-ads:${googleMobileAdsVersion}") { force = true; }
+  api "com.google.android.ump:user-messaging-platform:${googleUmpVersion}"
 }
 
 ReactNative.shared.applyPackageVersion()

package/android/src/main/java/io/invertase/googlemobileads/ReactNativeGoogleMobileAdsConsentModule.java

@@ -16,211 +16,154 @@ package io.invertase.googlemobileads;
  * limitations under the License.
  *
  */
-
+import android.content.SharedPreferences;
+import android.preference.PreferenceManager;
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.Promise;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
-import com.facebook.react.bridge.WritableArray;
 import com.facebook.react.bridge.WritableMap;
-import com.google.ads.consent.AdProvider;
-import com.google.ads.consent.ConsentForm;
-import com.google.ads.consent.ConsentFormListener;
-import com.google.ads.consent.ConsentInfoUpdateListener;
-import com.google.ads.consent.ConsentInformation;
-import com.google.ads.consent.ConsentStatus;
-import com.google.ads.consent.DebugGeography;
+import com.google.android.ump.ConsentDebugSettings;
+import com.google.android.ump.ConsentInformation;
+import com.google.android.ump.ConsentRequestParameters;
+import com.google.android.ump.UserMessagingPlatform;
 import io.invertase.googlemobileads.common.ReactNativeModule;
-import java.net.MalformedURLException;
-import java.net.URL;
-import java.util.List;
+import javax.annotation.Nonnull;
 
 public class ReactNativeGoogleMobileAdsConsentModule extends ReactNativeModule {
+
   private static final String TAG = "RNGoogleMobileAdsConsentModule";
   private ConsentInformation consentInformation;
-  private ConsentForm consentForm;
 
   public ReactNativeGoogleMobileAdsConsentModule(ReactApplicationContext reactContext) {
     super(reactContext, TAG);
-    consentInformation = ConsentInformation.getInstance(reactContext);
+    consentInformation = UserMessagingPlatform.getConsentInformation(reactContext);
   }
 
-  private int getConsentStatusInt(ConsentStatus consentStatus) {
+  private String getConsentStatusString(int consentStatus) {
     switch (consentStatus) {
-      case NON_PERSONALIZED:
-        return 1;
-      case PERSONALIZED:
-        return 2;
-      case UNKNOWN:
+      case ConsentInformation.ConsentStatus.REQUIRED:
+        return "REQUIRED";
+      case ConsentInformation.ConsentStatus.NOT_REQUIRED:
+        return "NOT_REQUIRED";
+      case ConsentInformation.ConsentStatus.OBTAINED:
+        return "OBTAINED";
+      case ConsentInformation.ConsentStatus.UNKNOWN:
       default:
-        return 0;
+        return "UNKNOWN";
     }
   }
 
   @ReactMethod
-  public void requestInfoUpdate(ReadableArray publisherIds, Promise promise) {
-    @SuppressWarnings("SuspiciousToArrayCall")
-    String[] publisherIdsArray = publisherIds.toArrayList().toArray(new String[0]);
-
-    consentInformation.requestConsentInfoUpdate(
-        publisherIdsArray,
-        new ConsentInfoUpdateListener() {
-          @Override
-          public void onConsentInfoUpdated(ConsentStatus consentStatus) {
+  public void requestInfoUpdate(@Nonnull final ReadableMap options, final Promise promise) {
+    try {
+      ConsentRequestParameters.Builder paramsBuilder = new ConsentRequestParameters.Builder();
+      ConsentDebugSettings.Builder debugSettingsBuilder =
+          new ConsentDebugSettings.Builder(getApplicationContext());
+
+      if (options.hasKey("testDeviceIdentifiers")) {
+        ReadableArray devices = options.getArray("testDeviceIdentifiers");
+
+        for (int i = 0; i < devices.size(); i++) {
+          debugSettingsBuilder.addTestDeviceHashedId(devices.getString(i));
+        }
+      }
+
+      if (options.hasKey("debugGeography")) {
+        debugSettingsBuilder.setDebugGeography(options.getInt("debugGeography"));
+      }
+
+      paramsBuilder.setConsentDebugSettings(debugSettingsBuilder.build());
+
+      if (options.hasKey("tagForUnderAgeOfConsent")) {
+        paramsBuilder.setTagForUnderAgeOfConsent(options.getBoolean("tagForUnderAgeOfConsent"));
+      }
+
+      ConsentRequestParameters consentRequestParameters = paramsBuilder.build();
+
+      if (getCurrentActivity() == null) {
+        rejectPromiseWithCodeAndMessage(
+            promise,
+            "null-activity",
+            "Attempted to request a consent info update but the current Activity was null.");
+        return;
+      }
+
+      consentInformation.requestConsentInfoUpdate(
+          getCurrentActivity(),
+          consentRequestParameters,
+          () -> {
             WritableMap requestInfoMap = Arguments.createMap();
-            requestInfoMap.putInt("status", getConsentStatusInt(consentStatus));
+            requestInfoMap.putString(
+                "status", getConsentStatusString(consentInformation.getConsentStatus()));
             requestInfoMap.putBoolean(
-                "isRequestLocationInEeaOrUnknown",
-                consentInformation.isRequestLocationInEeaOrUnknown());
+                "isConsentFormAvailable", consentInformation.isConsentFormAvailable());
             promise.resolve(requestInfoMap);
-          }
-
-          @Override
-          public void onFailedToUpdateConsentInfo(String reason) {
-            rejectPromiseWithCodeAndMessage(promise, "consent-update-failed", reason);
-          }
-        });
-  }
-
-  @ReactMethod
-  public void showForm(ReadableMap options, Promise promise) {
-    if (getCurrentActivity() == null) {
-      rejectPromiseWithCodeAndMessage(
-          promise,
-          "null-activity",
-          "Consent form attempted to show but the current Activity was null.");
-      return;
-    }
-    getCurrentActivity()
-        .runOnUiThread(
-            () -> {
-              URL privacyUrl = null;
-
-              try {
-                privacyUrl = new URL(options.getString("privacyPolicy"));
-              } catch (MalformedURLException e) {
-                // Validated in JS land
-              }
-
-              ConsentFormListener listener =
-                  new ConsentFormListener() {
-                    @Override
-                    public void onConsentFormLoaded() {
-                      try {
-                        consentForm.show();
-                      } catch (Exception e) {
-                        rejectPromiseWithCodeAndMessage(
-                            promise, "consent-form-error", e.toString());
-                      }
-                    }
-
-                    @Override
-                    public void onConsentFormClosed(
-                        ConsentStatus consentStatus, Boolean userPrefersAdFree) {
-                      WritableMap consentFormMap = Arguments.createMap();
-                      consentFormMap.putInt("status", getConsentStatusInt(consentStatus));
-                      consentFormMap.putBoolean("userPrefersAdFree", userPrefersAdFree);
-                      promise.resolve(consentFormMap);
-                    }
-
-                    @Override
-                    public void onConsentFormError(String reason) {
-                      rejectPromiseWithCodeAndMessage(promise, "consent-form-error", reason);
-                    }
-                  };
-
-              ConsentForm.Builder builder =
-                  new ConsentForm.Builder(getCurrentActivity(), privacyUrl).withListener(listener);
-
-              if (options.hasKey("withPersonalizedAds")
-                  && options.getBoolean("withPersonalizedAds")) {
-                builder = builder.withPersonalizedAdsOption();
-              }
-
-              if (options.hasKey("withNonPersonalizedAds")
-                  && options.getBoolean("withNonPersonalizedAds")) {
-                builder = builder.withNonPersonalizedAdsOption();
-              }
-
-              if (options.hasKey("withAdFree") && options.getBoolean("withAdFree")) {
-                builder = builder.withAdFreeOption();
-              }
-
-              consentForm = builder.build();
-              consentForm.load();
-            });
-  }
-
-  @ReactMethod
-  public void getStatus(Promise promise) {
-    ConsentStatus status = consentInformation.getConsentStatus();
-    promise.resolve(getConsentStatusInt(status));
-  }
-
-  @ReactMethod
-  public void setStatus(int status, Promise promise) {
-    ConsentStatus consentStatus = ConsentStatus.UNKNOWN;
-
-    switch (status) {
-      case 0:
-        consentStatus = ConsentStatus.UNKNOWN;
-        break;
-      case 1:
-        consentStatus = ConsentStatus.NON_PERSONALIZED;
-        break;
-      case 2:
-        consentStatus = ConsentStatus.PERSONALIZED;
-        break;
+          },
+          formError ->
+              rejectPromiseWithCodeAndMessage(
+                  promise, "consent-update-failed", formError.getMessage()));
+    } catch (Exception e) {
+      rejectPromiseWithCodeAndMessage(promise, "consent-update-failed", e.toString());
     }
-
-    consentInformation.setConsentStatus(consentStatus);
-    promise.resolve(null);
   }
 
   @ReactMethod
-  public void getAdProviders(Promise promise) {
-    List<AdProvider> providers = consentInformation.getAdProviders();
-
-    WritableArray formattedAdProviders = Arguments.createArray();
-
-    for (AdProvider provider : providers) {
-      WritableMap formattedProvider = Arguments.createMap();
-      formattedProvider.putString("companyName", provider.getName());
-      formattedProvider.putString("companyId", provider.getId());
-      formattedProvider.putString("privacyPolicyUrl", provider.getPrivacyPolicyUrlString());
-      formattedAdProviders.pushMap(formattedProvider);
+  public void showForm(final Promise promise) {
+    try {
+      if (getCurrentActivity() == null) {
+        rejectPromiseWithCodeAndMessage(
+            promise,
+            "null-activity",
+            "Consent form attempted to show but the current Activity was null.");
+        return;
+      }
+      getCurrentActivity()
+          .runOnUiThread(
+              () ->
+                  UserMessagingPlatform.loadConsentForm(
+                      getReactApplicationContext(),
+                      consentForm ->
+                          consentForm.show(
+                              getCurrentActivity(),
+                              formError -> {
+                                if (formError != null) {
+                                  rejectPromiseWithCodeAndMessage(
+                                      promise, "consent-form-error", formError.getMessage());
+                                } else {
+                                  WritableMap consentFormMap = Arguments.createMap();
+                                  consentFormMap.putString(
+                                      "status",
+                                      getConsentStatusString(
+                                          consentInformation.getConsentStatus()));
+                                  promise.resolve(consentFormMap);
+                                }
+                              }),
+                      formError ->
+                          rejectPromiseWithCodeAndMessage(
+                              promise, "consent-form-error", formError.getMessage())));
+    } catch (Exception e) {
+      rejectPromiseWithCodeAndMessage(promise, "consent-form-error", e.toString());
     }
-
-    promise.resolve(formattedAdProviders);
   }
 
   @ReactMethod
-  public void setTagForUnderAgeOfConsent(boolean tag, Promise promise) {
-    consentInformation.setTagForUnderAgeOfConsent(tag);
-    promise.resolve(null);
-  }
-
-  @ReactMethod
-  public void setDebugGeography(int geography, Promise promise) {
-    if (geography == 0) {
-      consentInformation.setDebugGeography(DebugGeography.DEBUG_GEOGRAPHY_DISABLED);
-    } else if (geography == 1) {
-      consentInformation.setDebugGeography(DebugGeography.DEBUG_GEOGRAPHY_EEA);
-    } else if (geography == 2) {
-      consentInformation.setDebugGeography(DebugGeography.DEBUG_GEOGRAPHY_NOT_EEA);
-    }
-
-    promise.resolve(null);
+  public void reset() {
+    consentInformation.reset();
   }
 
   @ReactMethod
-  public void addTestDevices(ReadableArray deviceIds, Promise promise) {
-    List<Object> devices = deviceIds.toArrayList();
-    for (Object device : devices) {
-      consentInformation.addTestDevice((String) device);
+  public void getTCString(Promise promise) {
+    try {
+      SharedPreferences prefs =
+          PreferenceManager.getDefaultSharedPreferences(getReactApplicationContext());
+      // https://github.com/InteractiveAdvertisingBureau/GDPR-Transparency-and-Consent-Framework/blob/master/TCFv2/IAB%20Tech%20Lab%20-%20CMP%20API%20v2.md#in-app-details
+      String tcString = prefs.getString("IABTCF_TCString", null);
+      promise.resolve(tcString);
+    } catch (Exception e) {
+      rejectPromiseWithCodeAndMessage(promise, "consent-string-error", e.toString());
     }
-    promise.resolve(null);
   }
 }

package/android/src/main/java/io/invertase/googlemobileads/ReactNativeGoogleMobileAdsModule.java

@@ -117,7 +117,7 @@ public class ReactNativeGoogleMobileAdsModule extends ReactNativeModule {
   @ReactMethod
   public void initialize(Promise promise) {
     MobileAds.initialize(
-        getContext(),
+        getApplicationContext(),
         new OnInitializationCompleteListener() {
           @Override
           public void onInitializationComplete(InitializationStatus initializationStatus) {

package/docs/common-reasons-for-ads-not-showing.mdx

@@ -13,6 +13,7 @@ You'll be notified of approval or rejection via email after review.
 
 New apps and ad units take some time to activate.
 Here are common reasons you may not see live impressions immediately:
+
 - It usually takes at least an hour after you create an app or ad unit
 - Sometimes it can take a few days for ads to appear in new apps or ad units
 - New iOS apps will not show Google ads until they’re listed in the Apple App Store
@@ -35,6 +36,7 @@ Test devices can either be added in the AdMob UI or programmatically using the G
 Follow the steps below to add your device as a test device.
 
 #### Add your test device in the AdMob UI
+
 For a simple, non-programmatic way to add a test device and test new or existing app builds, use the AdMob UI.
 [Learn how](https://support.google.com/admob/answer/9691433).
 
@@ -48,39 +50,39 @@ If you want to test ads in your app as you're developing, follow the steps below
 
 3. Check the console for a message that looks like this:
 
-    ```
-    GADMobileAds.sharedInstance.requestConfiguration.testDeviceIdentifiers = 
-      @[ @"2077ef9a63d2b398840261c8221a0c9b"  ]; // Sample device ID
-    ```
+   ```
+   GADMobileAds.sharedInstance.requestConfiguration.testDeviceIdentifiers =
+     @[ @"2077ef9a63d2b398840261c8221a0c9b"  ]; // Sample device ID
+   ```
 
-    Copy your test device ID to your clipboard.
+   Copy your test device ID to your clipboard.
 
 4. Check the logcat output for a message that looks like the one below, which shows you your device ID and how to add it as a test device:
 
-    ```
-    I/Ads: Use RequestConfiguration.Builder.setTestDeviceIds(Arrays.asList("33BE2250B43518CCDA7DE426D04EE231"))
-    to get test ads on this device."
-    ```
+   ```
+   I/Ads: Use RequestConfiguration.Builder.setTestDeviceIds(Arrays.asList("33BE2250B43518CCDA7DE426D04EE231"))
+   to get test ads on this device."
+   ```
 
-    Copy your test device ID to your clipboard.
+   Copy your test device ID to your clipboard.
 
 5. Modify your code to set the test device ID through testDeviceIdentifiers
 
-    ```js
-    import mobileAds from 'react-native-google-mobile-ads';
+   ```js
+   import mobileAds from 'react-native-google-mobile-ads';
 
-    mobileAds()
-      .setRequestConfiguration({
-        // An array of test device IDs to add to the allow list.
-        testDeviceIdentifiers: ["2077ef9a63d2b398840261c8221a0c9b", "EMULATOR"]
-      })
-      .then(() => {
-        // Request config successfully set!
-      });
-    ```
+   mobileAds()
+     .setRequestConfiguration({
+       // An array of test device IDs to add to the allow list.
+       testDeviceIdentifiers: ['2077ef9a63d2b398840261c8221a0c9b', 'EMULATOR'],
+     })
+     .then(() => {
+       // Request config successfully set!
+     });
+   ```
 
-5. Re-run your app. If the ad is a Google ad, you'll see a Test Ad label centered at the top of the ad.
-Ads with this Test Ad label are safe to click. Requests, impressions, and clicks on test ads will not show up in your account's reports.
+6. Re-run your app. If the ad is a Google ad, you'll see a Test Ad label centered at the top of the ad.
+   Ads with this Test Ad label are safe to click. Requests, impressions, and clicks on test ads will not show up in your account's reports.
 
 ## Emulator vs real device
 
@@ -89,4 +91,4 @@ In some cases ads won't show up on an emulator but will show up while testing on
 ## Extra links
 
 - Mobile Ads SDK [iOS](https://developers.google.com/admob/ios/quick-start), [Android](https://developers.google.com/admob/android/quick-start)
-- [Common reasons for ads not showing](https://support.google.com/admob/answer/9469204)
+- [Common reasons for ads not showing](https://support.google.com/admob/answer/9469204)

package/docs/displaying-ads-hook.mdx

@@ -0,0 +1,99 @@
+# Hooks
+
+The AdMob package provides hooks to help you to display ads in a functional component with tiny code. The supported ad formats are full-screen ads: App open, Interstitial & Rewarded.
+
+## Load an ad
+
+You can create a new ad by adding a corresponding ad type's hook to your component.
+
+The first argument of the hook is the "Ad Unit ID".
+For testing, we can use a Test ID, however for production the ID from the
+Google AdMob dashboard under "Ad units" should be used:
+
+```tsx {4-8}
+import { useInterstitialAd, TestIds } from 'react-native-google-mobile-ads';
+
+export default function App() {
+  const interstitialAd = useInterstitialAd(TestIds.Interstitial, {
+    requestNonPersonalizedAdsOnly: true,
+  });
+
+  return <View>{/* ... */}</View>;
+}
+```
+
+> The `adUnitid` parameter can also be used to manage creation and destruction of an ad instance.
+> If `adUnitid` is set or changed, new ad instance will be created and previous ad instance will be destroyed if exists.
+> If `adUnitid` is set to `null`, no ad instance will be created and previous ad instance will be destroyed if exists.
+
+The second argument is an additional optional request options object to be sent whilst loading an advert, such as keywords & location.
+Setting additional request options helps AdMob choose better tailored ads from the network. View the [`RequestOptions`](/reference/admob/requestoptions)
+documentation to view the full range of options available.
+
+## Show the ad
+
+The hook returns several states and functions to control ad.
+
+```tsx
+import { useInterstitialAd, TestIds } from 'react-native-google-mobile-ads';
+
+export default function App({ navigation }) {
+  const { isLoaded, isClosed, load, show } = useInterstitialAd(TestIds.Interstitial, {
+    requestNonPersonalizedAdsOnly: true,
+  });
+
+  useEffect(() => {
+    // Start loading the interstitial straight away
+    load();
+  }, [load]);
+
+  useEffect(() => {
+    if (isClosed) {
+      // Action after the ad is closed
+      navigation.navigate('NextScreen');
+    }
+  }, [isClosed, navigation]);
+
+  return (
+    <View>
+      <Button
+        title="Navigate to next screen"
+        onPress={() => {
+          if (isLoaded) {
+            show();
+          } else {
+            // No advert ready to show yet
+            navigation.navigate('NextScreen');
+          }
+        }}
+      />
+    </View>
+  );
+}
+```
+
+The code above immediately starts to load a new advert from the network (via `load()`).
+When user presses button, it checks if the ad is loaded via `isLoaded` value,
+then the `show` function is called and the advert is shown over-the-top of your application.
+Otherwise, if the ad is not loaded, the `navigation.navigate` method is called to navigate to the next screen without showing the ad.
+After the ad is closed, the `isClosed` value is set to `true` and the `navigation.navigate` method is called to navigate to the next screen.
+
+If needed, you can reuse the existing hook to load more adverts and show them when required. The states are initialized when the `load` function is called.
+
+Return values of the hook are:
+
+| Name           | Type                               | Description                                                                                                        |
+| :------------- | :--------------------------------- | :----------------------------------------------------------------------------------------------------------------- |
+| isLoaded       | boolean                            | Whether the ad is loaded and ready to to be shown to the user.                                                     |
+| isOpened       | boolean                            | Whether the ad is opened. The value is remained `true` even after the ad is closed unless **new ad is requested**. |
+| isClosed       | boolean                            | Whether your ad is dismissed.                                                                                      |
+| isShowing      | boolean                            | Whether your ad is showing. The value is equal with `isOpened && !isClosed`.                                       |
+| error          | Error \| undefined                 | `Error` object throwed during ad load.                                                                             |
+| reward         | [RewardedAdReward](#) \| undefined | Loaded reward item of the Rewarded Ad. Available only in RewardedAd.                                               |
+| isEarnedReward | boolean                            | Whether the user earned the reward by Rewarded Ad.                                                                 |
+| load           | Function                           | Start loading the advert with the provided RequestOptions.                                                         |
+| show           | Function                           | Show the loaded advert to the user.                                                                                |
+
+> Note that `isOpened` value remains `true` even after the ad is closed.
+> The value changes to `false` when ad is initialized via calling `load()`.
+> To determine whether the ad is currently showing, use `isShowing` value.

package/docs/displaying-ads.mdx

@@ -27,11 +27,10 @@ const appOpenAd = AppOpenAd.createForAdRequest(adUnitId, {
 });
 
 // Preload an app open ad
-appOpenAd.load()
+appOpenAd.load();
 
 // Show the app open ad when user brings the app to the foreground.
-appOpenAd.show()
-
+appOpenAd.show();
 ```
 
 ### Consider ad expiration
@@ -159,7 +158,7 @@ The purpose of a rewarded ad is to reward users with _something_ after completin
 as watching a video or submitting an option via an interactive form. If the user completes the action, you can reward them
 with something (e.g. in-game currency).
 
-To create a new interstitial, call the `createForAdRequest` method from the `RewardedAd` class. The first argument
+To create a new rewarded ad, call the `createForAdRequest` method from the `RewardedAd` class. The first argument
 of the method is the "Ad Unit ID". For testing, we can use a Test ID, however for production the ID from the
 Google AdMob dashboard under "Ad units" should be used: