> ## Documentation Index
> Fetch the complete documentation index at: https://docs.contentignite.com/llms.txt
> Use this file to discover all available pages before exploring further.

# App Open

> Setting up App Open ads

App Open Ads have two possible flows designed to be used together: Cold start and Resuming from background.

<Note>
  App Open ads must be enabled when you initialise the SDK by passing `appOpenPlacementId` to
  `ContentIgniteSDK.initialise` (see the [Introduction](/app/react_native/react_native_intro)).
  Once enabled, use the `CIAppOpenAd` singleton to load and show ads.
</Note>

## Cold start (Splash screen)

The first approach allows you to monetise the loading screen of your app. When the user opens the app, the splash screen is displayed. While your app is loading, the SDK will load an ad. If the ad loads in time you can display it before the home screen of your app is shown.

Race the load against a short timeout so a slow load never blocks the user from reaching your app:

```tsx theme={null}
import ContentIgniteSDK, { CIAppOpenAd } from '@content-ignite/mobile-sdk-react-native';

const AD_LOAD_TIMEOUT_MS = 5000;

// Resolves false after the timeout so a slow load never blocks the app.
const timeout = (ms: number) =>
  new Promise<boolean>((resolve) => setTimeout(() => resolve(false), ms));

async function bootstrap() {
  const initialised = await ContentIgniteSDK.initialise({
    publisherId: '<PUBLISHER-ID>',
    googleId: 'ca-app-pub-3940256099942544~3347511713',
    debugFeature: true,
    appOpenPlacementId: '<PLACEMENT-ID>',
  });

  if (initialised) {
    const loaded = await Promise.race([CIAppOpenAd.load(), timeout(AD_LOAD_TIMEOUT_MS)]);
    if (loaded) {
      await CIAppOpenAd.show(); // resolves once the ad is dismissed
    }
  }

  // Reveal the home screen.
}
```

## Resuming from background

To monetise the app returning to the foreground, listen to React Native's
[`AppState`](https://reactnative.dev/docs/appstate). When the app becomes `active`, show a ready ad,
otherwise load one for the next foreground:

```tsx theme={null}
import { useEffect } from 'react';
import { AppState, AppStateStatus } from 'react-native';
import { CIAppOpenAd } from '@content-ignite/mobile-sdk-react-native';

function useAppOpenResume(splashCompleted: React.MutableRefObject<boolean>) {
  useEffect(() => {
    const onChange = async (state: AppStateStatus) => {
      // Only run once the cold-start splash flow has completed.
      if (state !== 'active' || !splashCompleted.current) return;

      try {
        if (await CIAppOpenAd.isAvailable()) {
          await CIAppOpenAd.show();
        } else {
          // No ad ready — load one for the next foreground.
          CIAppOpenAd.load();
        }
      } catch (error) {
        console.warn('App Open resume flow failed:', error);
      }
    };

    const subscription = AppState.addEventListener('change', onChange);
    return () => subscription.remove();
  }, [splashCompleted]);
}
```

<Note>
  Guard the resume flow with a flag (e.g. a `splashCompleted` ref set once the cold-start flow
  finishes) so an ad isn't shown twice on the very first launch.
</Note>

See the full example: [App Open sample app](https://gitlab.com/content-ignite/content-ignite-mobile-sdk-react-native/-/tree/main/examples/example-app-open).