ESC
React Native Starter AI logo
Menu
On this page

Components > Interstitial Ad Button

Interstitial ads are displayed on full-screen in the mobile device. Mostly we prefer to diplay them in the middle of transitions between different states of the mobile apps such as different activities or during the loading states of AI generation flows.

Best time to display interstitial ads

During the natural transition points in your application, it is recommended to display interstitial ads in your application. When you find the right time, you won't lose the user engagement in your application because they will seem to be natural and they are already in the middle of a transition and need to wait something such as loading state of text to image generation flow. While the AI is working on its own magic, you can display an interstitial ad and make it look like it is already loading and we are showing you ads naturally; you are not blocking the user interaction with the app at all!

Intersititial Ad Button Component

Interstitial ad button component is used for showing interstitial ads in your application. You can also directlty use react-native-starter-mobile/hooks/ads/useInterstitialAd.ts hook to programmatically trigger the interstitial app in your mobile application.


React Native Starter AI's dmeo app showing interstitial test ad

The configuration of Interstitial Ad Button component or useInterstitialAd hook is pretty easy as well. You need to enter AdMob Ad Unit ID's to react-native-starter-mobile/constants/ads.ts file.


react-native-starter-mobile/constants/ads.ts
1// INTERSTITIAL 2export const IOS_INTERSTITIAL_ID = "ca-app-pub-<YOUR_INTERSTITIAL_IOS_AD_UNIT_ID>"; 3export const ANDROID_INTERSTITIAL_ID = "ca-app-pub-<YOUR_INTERSTITIAL_ANDROID_AD_UNIT_ID>";

These ad unit IDs can be created through the AdMob dashboard like below:


AdMob dashboard ad units listing page
AdMob dashboard create interstitial ad unit page