> For the complete documentation index, see [llms.txt](https://aatkit.gitbook.io/aatkit-react-native-integration/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aatkit.gitbook.io/aatkit-react-native-integration/formats/in-feed-banner.md).

# 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](/aatkit-react-native-integration/other/reference/rnaatkitinfeedbanner.md) in the Reference.<br>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://aatkit.gitbook.io/aatkit-react-native-integration/formats/in-feed-banner.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.