# Banner

### Important note

Google network might not count impressions correctly unless banner is placed within [ScrollView](https://reactnative.dev/docs/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](https://reactnative.dev/docs/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.

```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 <a href="#markdown-header-multi-size-a-ds" id="markdown-header-multi-size-a-ds"></a>

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

### Call functions <a href="#markdown-header-calling-functions" id="markdown-header-calling-functions"></a>

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 <a href="#markdown-header-api" id="markdown-header-api"></a>

For more details about functions and properties of RNAatkitBanner component, please see this [page](https://aatkit.gitbook.io/aatkit-react-native-integration/other/reference/rnaatkitbanner) in the Reference.