# In-Feed 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.

#### Create placement <a href="#markdown-header-creating-placement" id="markdown-header-creating-placement"></a>

First, create an in-feed banner placement using the `createInFeedBannerPlacement` function form the `RNAatkit` module. Next, determine the ad loading type.

Available ad loading types:

* `InFeedBannerPlacementLoadingType_BannerCache` – a specialized mechanism that wraps an in-feed banner and automatically preloads banner ads. Its goal is to maintain a predefined number of banners in memory, allowing them to be handed over to the app immediately when needed.
  * While using this type, you can determine the `cacheSize` parameter. If `cacheSize` is not set, a self-adjusting mechanism will be used to optimize the banner cache size automatically.
* `InFeedBannerPlacementLoadingType_Requests`  – this type loads ads using a specific configuration and notifies plugin about the result of each individual load request (success or failure). It provides more control over ad requests but requires more manual management, such as cancelling requests when an ad is no longer needed.

You can also pass additional configuration like manualAdSpaceCounting, desired banner sizes to be loaded etc.

```javascript
#!javascript

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

...

RNAatkit.createInFeedBannerPlacement(
    "InFeed", 
    {
        loadingType: RNAatkit.InFeedBannerPlacementLoadingType_BannerCache,
        cacheSize : 3,
        manualAdSpaceCounting: false,
        bannerSizes: [
            "320x53",
            "300x250"
        ]
    });
```

#### Use RNAatkitInFeedBanner component <a href="#markdown-header-using-rnaatkitinfeedbanner-component" id="markdown-header-using-rnaatkitinfeedbanner-component"></a>

Use `RNAatkitInFeedBanner` component to place the banner ad to the UI. Set the `name` property corresponding the placement name passed to the `createInFeedBannerPlacement` function.

```javascript
import {
    RNAatkitInFeedBanner
} from '@addapptr/react-native-aatkit'

...

<RNAatkitInFeedBanner
    name="InFeed" />
```

#### Load at start <a href="#markdown-header-loading-at-start" id="markdown-header-loading-at-start"></a>

You can use `reloadOnStart` property to load in-feed banner ad right away when `RNAatkitInFeedBanner` component is added to the UI. AATKit will get an ad from the cache or load it from the server.

```javascript
import {
    RNAatkitInFeedBanner
} from '@addapptr/react-native-aatkit'

...

<RNAatkitInFeedBanner
    name="InFeed"
    reloadOnStart={true} />
```

#### Reload ads <a href="#markdown-header-reloading-a-ds" id="markdown-header-reloading-a-ds"></a>

You can also reload in-feed banner ads which are already added to the UI. Every `RNAatkitInFeedBanner` component is added to the internal AATKit list. This way you can use those functions for loading:

* reloadAllInFeedBannerComponents
* reloadLastInFeedBannerComponent
* reloadConcreteInFeedBannerComponents

Please note there is the `getInFeedBannerComponentsCount` function which might be helpful to determine the size of the list containing `RNAatkitInFeedBanner` components.

This type of loading banners is recommended when your app has the constant size of in-feed ads and/or you want already visible ads to be reloaded.

### Events

You can define functions for `onCreate` and `onShowNewAd` events of the `RNAatkitInFeedBanner` component. Those functions might be a good place to reload in-feed ads.

```javascript
import {
    RNAatkitInFeedBanner
} from '@addapptr/react-native-aatkit'

...

<RNAatkitInFeedBanner
    name="InFeed"
    onCreate={() => {
        //Component created and attached to the UI
    }}
    onShowNewAd={() => {
        //New ad loaded and presented
    }} />
```

### Cancel loading ads <a href="#markdown-header-cancelling-loading-a-ds" id="markdown-header-cancelling-loading-a-ds"></a>

When you no longer want the ad to finish loading (for example when moving to another screen), you can cancel the ad request using `cancelReloadingInFeedBannerPlacement` function.

```javascript
import {
    RNAatkit
} from '@addapptr/react-native-aatkit'

...

RNAatkit.cancelReloadingInFeedBannerPlacement("InFeed");
```

### Manual adspace counting <a href="#markdown-header-manual-a-dspace-counting" id="markdown-header-manual-a-dspace-counting"></a>

If you use manual adspace counting, remember to call `countAdSpaceForInFeedBannerPlacement` function whenever new adspace should be counted.

```javascript
import {
    RNAatkit
} from '@addapptr/react-native-aatkit'

...

RNAatkit.countAdSpaceForInFeedBannerPlacement("InFeed");
```

### API

For more details about functions and properties related to the in-feed banner ads, please see this [page](https://aatkit.gitbook.io/aatkit-react-native-integration/other/reference/rnaatkitinfeedbanner) in the Reference.<br>