Skip to main content
The SDK supports Banner Ads via the CIBannerView component. It accepts all standard React Native ViewProps (so you control the ad size through style) plus the following parameters:

​
Required

  • placementId: string: Unique ID for this Ad Placement provided by Content Ignite.
  • pageUrl: string: URL used for targeting, for example if the ad is displayed inline within an article or section of the app which has an equivalent URL on the web.
  • targeting: Record<string, string[]>: Pass custom key-value pairs to ad requests.

​
Optional

  • style: Standard React Native style used to size the banner (e.g. { width: 300, height: 250 }).
  • onBannerLoaded: () => void: Called when the ad has loaded successfully.
  • onBannerLoadFailed: (event) => void: Called when the ad fails to load. The reason is available on event.nativeEvent.error.
  • onBannerClicked: () => void: Called when the user taps the ad.
  • onBannerImpression: () => void: Called when an impression is recorded.
import { CIBannerView } from '@content-ignite/mobile-sdk-react-native';
import { View, StyleSheet } from 'react-native';

function BannerScreen({ isSDKInitialised }: { isSDKInitialised: boolean }) {
  if (!isSDKInitialised) {
    return <View style={styles.container} />;
  }

  return (
    <View style={styles.container}>
      <CIBannerView
        placementId="<PLACEMENT-ID>"
        pageUrl="https://example.com/home"
        targeting={{ segment: ['health', 'fitness'], region: ['ie'] }}
        onBannerLoaded={() => console.log('Banner loaded')}
        onBannerLoadFailed={(e) => console.warn('Banner failed:', e.nativeEvent.error)}
        onBannerClicked={() => console.log('Banner clicked')}
        onBannerImpression={() => console.log('Banner impression')}
        style={styles.banner}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  banner: {
    width: 300,
    height: 250,
  },
});
The banner is rendered natively, so make sure the SDK has been initialised (see the Introduction) before mounting CIBannerView.

​
Handling ad events

To listen and respond to events from a Banner ad, pass the onBanner* callbacks: 
<CIBannerView
  placementId="<PLACEMENT-ID>"
  pageUrl="https://example.com/home"
  targeting={{ segment: ['health', 'fitness'] }}
  onBannerLoaded={() => console.log('Banner ad loaded.')}
  onBannerLoadFailed={(e) => console.warn('Banner ad failed to load:', e.nativeEvent.error)}
  onBannerClicked={() => console.log('Banner ad clicked.')}
  onBannerImpression={() => console.log('Banner ad impression.')}
  style={{ width: 300, height: 250 }}
/>
See the full example: Banner sample app.