---
metadata:
  - name: generator
    content: Diplodoc Platform v5.57.3
alternate:
  - https://boost.yandex.com/doc/en/ad-monetization/dev/react-native7/adaptive-inline-banner.md
  - https://boost.yandex.com/doc/ru/ad-monetization/dev/react-native7/adaptive-inline-banner.md
  - href: en/ad-monetization/dev/react-native7/adaptive-inline-banner.md
    type: text/markdown
    title: Markdown version
  - href: llms.txt
    type: text/markdown
    title: llms.txt
---
> **Documentation Index:** Fetch the complete configuration index at https://boost.yandex.com/doc/en/llms.txt

<!--
Используется в Boost: boost/en/ad-monetization/dev/react-native
-->

# Adaptive inline banner

<!-- source: en/ad-monetization/dev/_includes7/adaptive-inline-banner.md -->
An adaptive inline banner is a flexible banner ad format that ensures maximum efficiency by optimizing ad size for each device.
<!-- endsource: en/ad-monetization/dev/_includes7/adaptive-inline-banner.md -->

<!-- source: en/ad-monetization/dev/_includes7/adaptive-inline-banner.md -->
This ad type lets developers set a maximum allowable width and height for the ad, though the optimal ad size is still determined automatically. To choose the best ad size, adaptive inline banners use a maximum height instead of a fixed one. That provides room for improving performance.
<!-- endsource: en/ad-monetization/dev/_includes7/adaptive-inline-banner.md -->

Typically, this format is used in feed-based apps or contexts where it's acceptable to primarily focus user attention on ads.

{% cut "Appearance" %}

<img src="https://yastatic.net/s3/doc-binary/src/docs/support/mobile-ads/en/monetization/_images/banner-inline-en-ex.png" width="200">

{% endcut %}

This guide covers the process of integrating adaptive inline banners into React Native apps.
Besides code samples and instructions, it also contains format-specific recommendations and links to additional resources.

## Prerequisite {#pre}

<!-- source: en/ad-monetization/dev/_includes7/pre-react-native.md -->
1. Follow the Yandex Mobile Ads React Native plugin integration steps described under [Quick start](https://boost.yandex.com/doc/en/ad-monetization/dev/react-native7/quick-start.md).
2. Make sure that you have the [latest version of the Yandex Mobile Ads React Native plugin](https://boost.yandex.com/doc/en/ad-monetization/dev/platforms.md). If you're using mediation, update to the most recent [single build version](https://boost.yandex.com/doc/en/ad-monetization/dev/platforms.md).
<!-- endsource: en/ad-monetization/dev/_includes7/pre-react-native.md -->

## Implementation {#implement}

Key steps to integrate an adaptive inline banner:

* Get the banner size.
* Set up the parameters for loading ads using an `AdRequest` object.
* Display the ad by setting the required properties and callback functions to handle events within the ad lifecycle.

## Specifics of adaptive inline banner integration {#features}

1. We strongly discourage attempting to load a new ad when receiving an error in the `onAdFailedToLoad` callback. If you need to load an ad from `onAdFailedToLoad`, limit retry attempts to avoid recurring failed ad requests in case of network connection constraints.

2. For adaptive inline banners to work properly, [make your app layouts adaptive](https://reactnative.dev/docs/flexbox). Otherwise, your ads might render incorrectly.

3. Adaptive inline banners work best when utilizing the full available width. In most cases, this will be the full width of the device screen. Be sure to consider the padding parameters set in your app and the display's safe area.

4. Adaptive inline banners are designed to be placed in scrollable content. Their height can be the same as the device screen or limited by the maximum height, depending on the API.

5. To get the size of the ad, use the method `BannerAdSize.inlineSize(width, maxHeight)`, which accepts the available width of the ad container and the maximum acceptable ad height as arguments.

6. The ad width and height values contained within a `BannerAdSize` object that was calculated using the `BannerAdSize.inlineSize(width, maxHeight)` method are consistent across the same device. When testing your app's layout on a specific device, you can be sure that the ad size for that device will remain the same.

## Getting the banner size

To get the size of the ad, use the method `BannerAdSize.inlineSize(width, maxHeight)`, which accepts the available width of the ad container and the maximum acceptable ad height as arguments. Be sure to consider the padding parameters set in your app and the display's safe area:

```ts
let adSize = await BannerAdSize.inlineSize(Dimensions.get('window').width, bannerMaxHeight);
```

## Creating an AdRequest

You can expand the ad request parameters via the `AdRequest` class object. You can provide information about the user's interests, page context, location, and other additional data. Adding extra context to ad requests can greatly improve ad relevance. To learn more, see [Ad targeting](https://boost.yandex.com/doc/en/ad-monetization/dev/react-native7/target.md).

## Ad display

To load an ad, you need the size calculated using the `BannerAdSize.inlineSize(width, maxHeight)` method as well as the placement ID that you obtained in the Boost (adUnitId).

To enable notifications when ads load or fail to load and track an adaptive inline banner's lifecycle events, set callback functions for the `BannerView` component.

You can also expand the request parameters by passing the `adRequest` property of the `BannerView` component to the `AdRequest` class object.

The example below shows how to set the adaptive inline banner properties and the callback functions for handling its lifecycle events. Once loaded, the banner is displayed automatically:

```ts
const createBanner = async () => {
    let adSize = await BannerAdSize.inlineSize(Dimensions.get('window').width, bannerMaxHeight);

    let adRequest = new AdRequest({
        adUnitId: 'R-M-XXXXXX-Y', // for debug you can use 'demo-banner-yandex'
        age: '20',
        contextQuery: 'context-query',
        contextTags: ['context-tag'],
        gender: Gender.Male,
        location: new Location(55.734202, 37.588063)
    });

    return (
        <BannerView
            size={adSize}
            adUnitId={'R-M-XXXXXX-Y'} // or 'demo-banner-yandex'
            adRequest={adRequest}
            onAdLoaded={() => console.log('Did load')}
            onAdFailedToLoad={(event: any) => console.log(`Did fail to load with error: ${JSON.stringify(event.nativeEvent)}`)}
            onAdClicked={() => console.log('Did click')}
            onLeftApplication={() => console.log('Did leave application')}
            onReturnToApplication={() => console.log('Did return to application')}
            onAdImpression={(event: any) => console.log(`Did track impression: ${JSON.stringify(event.nativeEvent.impressionData)}`)}
            onAdClose={() => console.log('Did close')}
        />
    );
}
```

## Testing adaptive inline banner integration {#test}

{% list tabs %}

- Android

  <!-- source: en/ad-monetization/dev/_includes7/test-android-inline-banner.md -->
  ### Using demo ad units for ad testing {#demo-blocks}

  We recommend using test ads to test your adaptive inline banner integration and your app itself.

  To make sure that test ads are returned for each ad request, we created a special demo ad placement ID designed to help you test your ad integration.

  Demo adUnitId: `demo-banner-yandex`.

  {% note warning %}

  Before publishing your app in the store, make sure to replace the demo placement ID with the real ID you obtained in the interface Boost.

  {% endnote %}

  For the list of all available demo ad placement IDs, see [Demo ad units for testing](https://boost.yandex.com/doc/en/ad-monetization/dev/android7/demo-blocks.md).

  ### Testing ad integration {#test-int}

  You can test your adaptive inline banner integration using the SDK's built-in analyzer.

  This tool checks whether ads are enabled properly and outputs a detailed report to a log.
  To view the report, search the keyword “YandexAds” in [Logcat](https://developer.android.com/studio/command-line/logcat), a tool for debugging Android apps.

  ```bash
  adb logcat -v brief '*:S YandexAds'
  ```

  If the integration is successful, the following message is returned:
  ```bash
  adb logcat -v brief '*:S YandexAds'
  mobileads$ adb logcat -v brief '*:S YandexAds'
  I/YandexAds(13719): [Integration] Ad type banner was integrated successfully
  ```

  If you're having problems integrating banner ads, you'll get a detailed report on the issues and recommendations for how to fix them.
  <!-- endsource: en/ad-monetization/dev/_includes7/test-android-inline-banner.md -->

- iOS

  ### Using demo ad units for ad testing

  <!-- source: en/ad-monetization/dev/_includes7/test-ios-inline-banner.md -->
  We recommend using test ads to test your ad integration and your app itself.

  To make sure that test ads are returned for each ad request, we created a special demo ad placement ID designed to help you test your ad integration.

  Demo adUnitId: `demo-banner-yandex`.

  {% note warning %}

  Before publishing your app in the store, make sure to replace the demo placement ID with the real ID you obtained in the interface Boost.

  {% endnote %}

  For the list of all available demo ad placement IDs, see [Demo ad units for testing](https://boost.yandex.com/doc/en/ad-monetization/dev/ios7/demo-blocks.md).
  <!-- endsource: en/ad-monetization/dev/_includes7/test-ios-inline-banner.md -->

  ### Testing ad integration

  <!-- source: en/ad-monetization/dev/_includes7/test-integration-ios.md -->
  You can test your ad integration using the native Console tool.

  To view detailed logs, call the `MobileAds` class's `enableLogging` method.

  ```swift
  MobileAds.enableLogging()
  ```

  To view SDK logs, go to the Console tool and set `Subsystem = com.mobile.ads.ads.sdk`. You can also filter logs by category and error level.

  If you're having problems integrating ads, you'll get a detailed report on the issues and recommendations for how to fix them.

  <img src= "https://yastatic.net/s3/doc-binary/src/dev/mobile-ads/common/integration-ios-2.png">
  <!-- endsource: en/ad-monetization/dev/_includes7/test-integration-ios.md -->

{% endlist %}

## Additional resources {#resources}

* <!-- source: en/ad-monetization/dev/_includes7/github-pubdev-links.md -->
  Link to [GitHub](https://github.com/yandexmobile/yandex-ads-react-native-plugin).
  <!-- endsource: en/ad-monetization/dev/_includes7/github-pubdev-links.md -->