> ## Documentation Index
> Fetch the complete documentation index at: https://guide.daro.so/llms.txt
> Use this file to discover all available pages before exploring further.

# Banner & MREC Ads

> Implement banner and MREC ads in your React Native app.

## Banner & MREC Ad Formats

### Banner Ads

Rectangular ad format (320x50) that occupies part of your app layout. Supported by most ad demand sources.

<img src="https://mintcdn.com/delightroom-5a71a6a8/j3-znW7LKrbpP3mb/sdk-integration/common-img/ad-formats-en/banner-example.png?fit=max&auto=format&n=j3-znW7LKrbpP3mb&q=85&s=3aa2e622942800824207a2261e062053" alt="Banner Example Pn" title="Banner Example Pn" style={{ width:"43%" }} width="972" height="2160" data-path="sdk-integration/common-img/ad-formats-en/banner-example.png" />

### MREC Ads

Medium Rectangle format (300x250) with similar characteristics to banner ads.

<img src="https://mintcdn.com/delightroom-5a71a6a8/j3-znW7LKrbpP3mb/sdk-integration/common-img/ad-formats-en/mrec-example.png?fit=max&auto=format&n=j3-znW7LKrbpP3mb&q=85&s=fa808a03d2e5a55975c680cae400660d" alt="Mrec Example Pn" title="Mrec Example Pn" style={{ width:"43%" }} width="972" height="2160" data-path="sdk-integration/common-img/ad-formats-en/mrec-example.png" />

***

## Creating Banner/MREC Components

<Tabs>
  <Tab title="Non-Reward">
    ```javascript theme={null}
    import { AdFormat, AdBannerView } from "react-native-daro";
    import { Platform } from "react-native";
    ```
  </Tab>

  <Tab title="Reward">
    ```javascript theme={null}
    import { AdFormat, AdBannerView } from "react-native-daro-m";
    import { Platform } from "react-native";
    ```
  </Tab>
</Tabs>

<CodeGroup>
  ```javascript Banner theme={null}

  const BANNER_AD_UNIT_ID = Platform.select({
      ios: ${iOS unit Id},
      android: ${Android unit id},
      default: '',
  });

  <AdBannerView
    style={styles.bannerView} // You must pass the ad unit ID when creating the component. Please set the style size to 320x50.
    adFormat={AdFormat.BANNER}
    adUnitId={BANNER_AD_UNIT_ID}
  />
  ```

  ```javascript MREC theme={null}

  const BANNER_AD_UNIT_ID = Platform.select({
      ios: ${iOS unit Id},
      android: ${Android unit id},
      default: '',
  });

  <AdBannerView
    style={styles.bannerView} // You must pass the ad unit ID when creating the component. Please set the style size to 300x250.
    adFormat={AdFormat.MREC}
    adUnitId={BANNER_AD_UNIT_ID}
  />
  ```
</CodeGroup>

<Warning>
  * When using the same AdUnitId across multiple placements, be sure to enter a `placement` to distinguish each placement.
</Warning>