---
metadata:
  - name: generator
    content: Diplodoc Platform v5.52.0
alternate:
  - https://ads.yandex.com/helpcenter/en/easy/integration/react-native/formats/banner.md
  - https://ads.yandex.com/helpcenter/ru/easy/integration/react-native/formats/banner.md
  - https://ads.yandex.com/helpcenter/zh/easy/integration/react-native/formats/banner.md
  - href: en/easy/integration/react-native/formats/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://ads.yandex.com/helpcenter/en/llms.txt

# Banner

## Banner types

The Yandex Mobile Ads SDK has two banner types:

#|
||

**Banner**

|

**Description**

|

**When to use**

||
||

Sticky banner

|

A banner that is pinned to the screen edge and displayed on top of other elements. Banners of this type are unaffected by scrolling.

|

When you want a banner to “stick”, which means to remain in its place and be shown on top of content even if a user scrolls the screen.

||
||

Inline banner

|

A banner that is embedded in your app (for example, in content or a list) as if it's a UI element.

|

When the banner should be part of the page content, appearing in a news feed, between posts, or as a list item.

||
|#

Banners of all types automatically refresh creatives every 60 seconds.

{% note tip %}

To set a custom auto‑refresh period, contact your personal manager.

{% endnote %}

Code-wise, these banners only differ in how you set their sizes. Examples:

{% list tabs %}

- Sticky banners

    ```TypeScript
    BannerAdSize.stickySize(width: number)
    ```

- Inline banners

    ```TypeScript
    BannerAdSize.inlineSize(width: number, maxHeight: number)
    ```

{% endlist %}


#|
||

**Entity**

|

**Description**

||
||

`BannerAdSize`

|

The banner height:

- **Mustn't** exceed 15% of the screen height.

- Must be at least 50 **dp/pt (Android/iOS)**.

All banner sizes must be specified in **dp**.

||
||

`adUnitId`

|

Use:

- **Development mode** to work with [demo ad units](https://ads.yandex.com/helpcenter/en/easy/integration/react-native/testing.md#blocks).

- **Production mode** to work with `R-M-XXXXXX-Y` (for the actual ID, check the Yandex Advertising Network interface). `R-M-XXXXXX-Y` is a template for your actual ad unit ID that will be used to receive various creatives.

||
|#


## Example of creating a banner

```JavaScript
import React, { useEffect, useState } from 'react';
import { ActivityIndicator, Alert, Dimensions, StyleSheet, Text, View } from 'react-native';
import { AdTheme, BannerAdSize, BannerView, Gender, Location } from 'yandex-mobile-ads';

const BANNER_AD_UNIT_ID = 'demo-banner-yandex';

export default function BannerAdScreen() {
  const [adLoaded, setAdLoaded] = useState(false);
  const [adSize, setAdSize] = useState<BannerAdSize | null>(null);
  const [error, setError] = useState<Error | string | null>(null);
  const [screenWidth, setScreenWidth] = useState(Dimensions.get('window').width);

  useEffect(() => {
    const subscription = Dimensions.addEventListener('change', ({ window }) => {
      setScreenWidth(window.width);
    });
    return () => subscription?.remove();
  }, []);

  useEffect(() => {
      console.log('🔍 Creating banner size for width:', screenWidth);

      BannerAdSize.stickySize(screenWidth)
        .then((size) => {
          console.log('✅ Banner size created:', size);
          setAdSize(size);
        })
        .catch((err) => {
          console.error('❌ Failed to create banner size:', err);
          setError(err);
        });

    return () => {};
  }, [screenWidth]);

  if (error) {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Banner Ad</Text>
        <Text style={styles.errorText}>
          ❌ Error: {error instanceof Error ? error.message : String(error)}
        </Text>
        <Text style={styles.hintText}>
          Make sure you are NOT using Expo Go!{'\n'}
          Run: <Text style={styles.codeText}>npx expo run:ios</Text>
        </Text>
      </View>
    );
  }

  if (!adSize) {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Banner Ad</Text>
        <ActivityIndicator size="large" color="#007AFF" />
        <Text style={styles.status}>⏳ Preparing banner...</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Banner Ad</Text>
      <Text style={styles.status}>
        {adLoaded ? '✅ Ad Loaded' : '⏳ Loading...'}
      </Text>

      <View style={[styles.adContainer, { width: adSize.width, height: adSize.height }]}>
        <BannerView
          size={adSize}
          adRequest={{
            adUnitId: BANNER_AD_UNIT_ID,
            targeting: {
              age: '20',
              contextQuery: 'context-query',
              contextTags: ['context-tag'],
              gender: Gender.Male,
              location: new Location(55.734202, 37.588063),
            },
            adTheme: AdTheme.Light,
            parameters: new Map<string, string>([
              ['param1', 'value1'],
              ['param2', 'value2'],
            ]),
          }}
          onAdLoaded={(event) => {
            setAdLoaded(true);
            console.log('✅ Banner ad loaded', event.nativeEvent.adInfo);
          }}
          onAdFailedToLoad={(error: any) => {
            console.error('❌ Banner ad failed:', error);
            Alert.alert('Ad Failed', error?.message || 'Unknown error');
          }}
          onAdClicked={() => console.log('👆 Banner clicked')}
          onAdImpression={(event: any) =>
            console.log('👁️ Impression:', event.nativeEvent.impressionData)
          }
        />
      </View>

      <Text style={styles.sizeInfo}>
        Size: {adSize.width}x{adSize.height} dp
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  status: {
    fontSize: 16,
    marginBottom: 20,
    color: '#666',
  },
  adContainer: {
    backgroundColor: '#fff',
    borderRadius: 10,
    overflow: 'hidden',
    marginVertical: 20,
  },
  sizeInfo: {
    fontSize: 12,
    color: '#999',
    marginTop: 10,
  },
  errorText: {
    fontSize: 14,
    color: '#f00',
    textAlign: 'center',
    padding: 20,
  },
  hintText: {
    fontSize: 12,
    color: '#666',
    textAlign: 'center',
    marginTop: 10,
  },
  codeText: {
    fontFamily: 'monospace',
    backgroundColor: '#e0e0e0',
    padding: 4,
  },
});

```

## Checking integration

You can test the performance of ad formats using our [demo project](https://ads.yandex.com/helpcenter/en/easy/integration/react-native/testing.md).