Wiki

Banner Ads

Note: Google network might not count impressions correctly unless banner is placed within ScrollView component. According to our tests, ads from this network don't detect impressions correctly when ad is presented inside static views. We are not able to fix it because we recognize it as the problem related to React/Google Ads SDK, and as mediation provider, we can't interfere with thirdy party code. That's why we recommend using banner components (when Google networks are used) only placed in ScrollView. Otherwise please be aware the revenue might be affected. For more information, please contact AddApptr Support Team.

Use RNAatkitBanner component to display banner ads. Every banner component has to have unique placement name. Please note that the placement name has to be constant after once defined and cannot change with every app restart. Also you have to define the size of the placement. Place RNAatkitBanner component inside render function. Example below ads 320x53 banner ad.

#!javascript

import {
    RNAatkit,
    RNAatkitBanner
} from '@addapptr/react-native-aatkit'

...

    render() {
        return (
            <View>  
                <RNAatkitBanner
                    name="Banner"
                    size={RNAatkit.PlacementSize_Banner320x53}
                    reloadOnStart={false}
                    autoreload={true}
                    onHaveAd={() => {
                        console.log("onHaveAd Banner");
                    }}
                    onPauseForAd={() => {
                        console.log("onPauseForAd Banner");
                    }}
                    onResumeAfterAd={() => {
                        console.log("onResumeAfterAd Banner");
                    }}
                    onNoAd={() => {
                        console.log("onNoAd Banner");
                    }}
                    onShowingEmpty={() => {
                        console.log("onShowingEmpty Banner");
                    }}
                />
            </View>
        );
    }

Multi-Size Ads

To add multi-size banner, use RNAatkitBanner component as well. Just set size property as PlacementSize_MultiSizeBanner. Also you should use special onHaveAdForPlacementWithBannerView event to get notified whether ad is loaded. Please note every loaded banner might have different size, so the size of RNAatkitBanner component changes as well.

#!javascript

import {
    RNAatkit,
    RNAatkitBanner
} from '@addapptr/react-native-aatkit'

...

    render() {
        return (
            <View>  
                <RNAatkitBanner
                    reloadOnStart={false}
                    autoreload={true}
                    name="MultiSize"
                    size={RNAatkit.PlacementSize_MultiSizeBanner}
                    onHaveAdForPlacementWithBannerView={() => {
                        console.log("onHaveAdForPlacementWithBannerView MultiSize");
                    }}
                    onPauseForAd={() => {
                        console.log("onPauseForAd MultiSize");
                    }}
                    onResumeAfterAd={() => {
                        console.log("onResumeAfterAd MultiSize");
                    }}
                    onNoAd={() => {
                        console.log("onNoAd MultiSize");
                    }}
                    onShowingEmpty={() => {
                        console.log("onShowingEmpty MultiSize");
                    }} 
                />
            </View>
        );
    }

Calling functions

It's possible to call functions on the concrete RNAatkitBanner component instance. First define ref property:

#!javascript
<RNAatkitBanner
    name="BannerOne"
    size={RNAatkit.PlacementSize_Banner320x53}
    ref="bannerOne" />

Then you can access the banner instance by refs:

#!javascript
onPressReloadBannerOne(){
    this.refs.bannerOne.reloadPlacement();
}

API

For more details about functions and properties of RNAatkitBanner component, please see the API section on the home page.