App Open Ads
App open ads appear when users bring your app to the foreground, providing a monetization opportunity during app launches.
Each ad format uses a Zone ID to identify the ad placement. Zone IDs are configured in the Empower dashboard.
Note: All ad status listeners are optional. The SDK handles ad loading and display automatically. Use listeners only if you need to track ad states for analytics, UI updates, or custom logic.
Quick Start
import {
loadAppOpenAd,
showAppOpen,
addEventListener,
EmpowerAdsEvents,
AdStatus,
} from '@empower-nokta/react-native-mobile-ads';
const ZONE_ID = { android: 'ANDROID_ZONE_ID', ios: 'IOS_ZONE_ID' };
// Preload the app open ad
loadAppOpenAd(ZONE_ID);
// Show when ad is ready
const unsubscribe = addEventListener(
EmpowerAdsEvents.APP_OPEN_STATUS,
(event) => {
if (event.status === AdStatus.READY) {
showAppOpen(ZONE_ID);
}
}
);
Loading App Open Ads
import { loadAppOpenAd } from '@empower-nokta/react-native-mobile-ads';
// With a single zone ID
loadAppOpenAd('YOUR_ZONE_ID');
// With per-platform zone IDs
loadAppOpenAd({ android: 'ANDROID_ZONE_ID', ios: 'IOS_ZONE_ID' });
The function returns a Promise<boolean> that resolves to true when the ad starts loading.
Showing App Open Ads
import { showAppOpen } from '@empower-nokta/react-native-mobile-ads';
showAppOpen('YOUR_ZONE_ID')
.then((shown) => {
if (!shown) {
console.log('App Open ad not ready');
}
})
.catch((err) => {
console.log('Failed to show App Open ad:', err);
});
Listening to App Open Status (Optional)
import {
addEventListener,
EmpowerAdsEvents,
AdStatus,
loadAppOpenAd,
} from '@empower-nokta/react-native-mobile-ads';
const ZONE_ID = 'YOUR_ZONE_ID';
const unsubscribe = addEventListener(
EmpowerAdsEvents.APP_OPEN_STATUS,
(event) => {
switch (event.status) {
case AdStatus.READY:
// Ad is ready to show
break;
case AdStatus.FAILED:
// Ad failed to load
break;
case AdStatus.SHOWN:
// Ad is being displayed
break;
case AdStatus.SKIPPED:
// User dismissed the ad
break;
case AdStatus.USED:
// Ad was shown and closed — reload for next time
loadAppOpenAd(ZONE_ID);
break;
}
}
);
// Clean up
unsubscribe();
Complete Example
Show the app open ad on cold start only (once per session):
import React, { useEffect } from 'react';
import { Platform } from 'react-native';
import {
init,
loadAppOpenAd,
showAppOpen,
addEventListener,
EmpowerAdsEvents,
AdStatus,
} from '@empower-nokta/react-native-mobile-ads';
const ZONE_ID = { android: 'ANDROID_ZONE_ID', ios: 'IOS_ZONE_ID' };
// Module-level flag to prevent showing more than once
let appOpenShown = false;
export default function App() {
useEffect(() => {
const appId = Platform.select({
android: 'your_android_app_identifier',
ios: 'your_ios_app_identifier',
});
init({ appAdIdentifier: appId });
// Preload
loadAppOpenAd(ZONE_ID);
// Show once when ready
const unsubscribe = addEventListener(
EmpowerAdsEvents.APP_OPEN_STATUS,
(event) => {
if (event.status === AdStatus.READY && !appOpenShown) {
appOpenShown = true;
showAppOpen(ZONE_ID);
}
}
);
return () => unsubscribe();
}, []);
return (
// Your app content
);
}
Show on Foreground Return
To show the ad when users return to the app (similar to native ProcessLifecycleOwner on Android or SceneDelegate on iOS), use React Native's AppState:
import React, { useEffect, useRef } from 'react';
import { AppState } from 'react-native';
import {
loadAppOpenAd,
showAppOpen,
addEventListener,
EmpowerAdsEvents,
AdStatus,
} from '@empower-nokta/react-native-mobile-ads';
const ZONE_ID = 'YOUR_ZONE_ID';
const MIN_BACKGROUND_SECONDS = 30;
export default function AppOpenHandler() {
const appState = useRef(AppState.currentState);
const backgroundTime = useRef(null);
const isAdReady = useRef(false);
useEffect(() => {
// Preload
loadAppOpenAd(ZONE_ID);
// Track readiness
const unsubStatus = addEventListener(
EmpowerAdsEvents.APP_OPEN_STATUS,
(event) => {
isAdReady.current = event.status === AdStatus.READY;
if (event.status === AdStatus.USED) {
loadAppOpenAd(ZONE_ID); // Reload for next time
}
}
);
// Listen for foreground return
const subscription = AppState.addEventListener('change', (nextState) => {
if (appState.current === 'active' && nextState.match(/inactive|background/)) {
backgroundTime.current = Date.now();
}
if (appState.current.match(/inactive|background/) && nextState === 'active') {
const elapsed = (Date.now() - (backgroundTime.current || 0)) / 1000;
if (elapsed >= MIN_BACKGROUND_SECONDS && isAdReady.current) {
showAppOpen(ZONE_ID);
}
}
appState.current = nextState;
});
return () => {
unsubStatus();
subscription.remove();
};
}, []);
return null; // Render nothing — this is a logic-only component
}
Best Practices
- Cold starts — Show on fresh app launches for highest impact
- Don't show on every return — Only show after meaningful background time (30+ seconds)
- Respect user experience — Don't interrupt critical user flows (checkout, onboarding, etc.)
- Reload after close, not during show — Call
loadAppOpenAdagain when the ad is closed (on theUSEDstatus), to prepare for next time - Don't call
loadAppOpenAdwhile an ad is on screen — Reloading a zone that is currently showing is ignored by the SDK; trigger the next preload from theUSEDstatus, not right afterSHOWN - Don't block app launch — Let content load first on cold start
- Once per session — Consider using a module-level flag to limit to one display per cold start
Ad Status Reference
| Status | Description |
|---|---|
INITIALIZING | Ad is loading |
READY | Ad is loaded and ready to display |
FAILED | Ad failed to load |
SHOWN | Ad is being displayed |
SKIPPED | User dismissed the ad |
USED | Ad was shown and closed |