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, and Rewarded Interstitial.

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:

import { useInterstitialAd, TestIds } from 'react-native-google-mobile-ads';

export default function App() {
  const interstitialAd = useInterstitialAd(TestIds.Interstitial);

  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 documentation to view the full range of options available.

Show the ad#

The hook returns several states and functions to control ad.

import { useInterstitialAd, TestIds } from 'react-native-google-mobile-ads';

export default function App({ navigation }) {
  const { isLoaded, isClosed, load, show } = useInterstitialAd(TestIds.INTERSTITIAL);

  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:

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.