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 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 source code to see 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: