Banner

Integrate banners

Important 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 third 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 Gravite Support Team.

Usage

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 the render function. Example below adds 320x53 banner ad.

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.

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>
        );
    }

Call functions

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

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

Then you can access the banner instance by refs.

onPressReloadBannerOne(){
    this.refs.bannerOne.reloadPlacement();
}

API

For more details about functions and properties of RNAatkitBanner component, please see this page in the Reference.