Skip to main content
Banners use the programmatic overlay approach: they overlay your content at a fixed screen position. 
import { CloudXBannerAd, CloudXAdPosition } from 'cloudx-react-native';

const AD_UNIT_ID = 'home_banner';

CloudXBannerAd.addAdLoadedEventListener((adInfo) => {
    console.log('Banner loaded from', adInfo.networkName);
});
CloudXBannerAd.addAdLoadFailedEventListener((error) => {
    console.log('Banner failed:', error.code, error.message);
});
CloudXBannerAd.addAdClickedEventListener((adInfo) => {
    console.log('Banner clicked');
});
CloudXBannerAd.addAdExpandedEventListener((adInfo) => {
    console.log('Banner expanded');
});
CloudXBannerAd.addAdCollapsedEventListener((adInfo) => {
    console.log('Banner collapsed');
});
CloudXBannerAd.addAdRevenuePaidListener((adInfo) => {
    console.log('Banner revenue:', adInfo.revenue);
});

CloudXBannerAd.createAd(AD_UNIT_ID, CloudXAdPosition.BOTTOM_CENTER);
CloudXBannerAd.showAd(AD_UNIT_ID);

CloudXBannerAd.hideAd(AD_UNIT_ID);
CloudXBannerAd.destroyAd(AD_UNIT_ID);
Auto-refresh is enabled by default. To control it manually: 
CloudXBannerAd.stopAutoRefresh(AD_UNIT_ID);
CloudXBannerAd.startAutoRefresh(AD_UNIT_ID);
Use CloudXAdPosition to place the banner: TOP_LEFT, TOP_CENTER, TOP_RIGHT, CENTER_LEFT, CENTERED, CENTER_RIGHT, BOTTOM_LEFT, BOTTOM_CENTER, BOTTOM_RIGHT For pixel-level control, use offsets: 
CloudXBannerAd.createAdWithOffsets(AD_UNIT_ID, CloudXAdPosition.TOP_CENTER, 0, 50);
CloudXBannerAd.updatePosition(AD_UNIT_ID, CloudXAdPosition.BOTTOM_CENTER);
CloudXBannerAd.updateOffsets(AD_UNIT_ID, 0, 20);
Optional placement and custom data for tracking: 
CloudXBannerAd.setBackgroundColor(AD_UNIT_ID, '#000000');
CloudXBannerAd.setPlacement(AD_UNIT_ID, 'home_screen');
CloudXBannerAd.setCustomData(AD_UNIT_ID, 'custom_data');

​
MREC Ads (300x250)

MRECs work identically to banners but with a 300x250 size. Use the CloudXMRECAd module: 
import { CloudXMRECAd, CloudXAdPosition } from 'cloudx-react-native';

const AD_UNIT_ID = 'home_mrec';

CloudXMRECAd.addAdLoadedEventListener((adInfo) => {
    console.log('MREC loaded from', adInfo.networkName);
});
CloudXMRECAd.addAdLoadFailedEventListener((error) => {
    console.log('MREC failed:', error.code, error.message);
});
CloudXMRECAd.addAdClickedEventListener((adInfo) => {
    console.log('MREC clicked');
});
CloudXMRECAd.addAdExpandedEventListener((adInfo) => {
    console.log('MREC expanded');
});
CloudXMRECAd.addAdCollapsedEventListener((adInfo) => {
    console.log('MREC collapsed');
});
CloudXMRECAd.addAdRevenuePaidListener((adInfo) => {
    console.log('MREC revenue:', adInfo.revenue);
});

CloudXMRECAd.createAd(AD_UNIT_ID, CloudXAdPosition.CENTERED);
CloudXMRECAd.showAd(AD_UNIT_ID);

CloudXMRECAd.destroyAd(AD_UNIT_ID);
CloudXMRECAd has the same API surface as CloudXBannerAd, including positioning, offsets, background color, placement, custom data, auto-refresh control, and event listeners.

​
React Hook

import { useCloudXBanner, CloudXBannerAd, CloudXAdPosition } from 'cloudx-react-native';

function HomeScreen() {
    const { isLoaded, error } = useCloudXBanner('home_banner');

    useEffect(() => {
        CloudXBannerAd.createAd('home_banner', CloudXAdPosition.BOTTOM_CENTER);
        CloudXBannerAd.showAd('home_banner');
        return () => CloudXBannerAd.destroyAd('home_banner');
    }, []);

    return <Text>{isLoaded ? 'Banner showing' : 'Loading banner...'}</Text>;
}
Returns: { isLoaded, error }