# Banner

Banner ads are rectangular image or text ads that occupy a space inside the application layout. They stay on screen while the users interact with the app and can automatically refresh after a certain period of time. If you are new in mobile advertising, they are an excellent choice to start.

## **Integration**

Banners are integrated by adding the `WortiseBanner` widget to the app's layout. Below, you can find a simple integration example:

```tsx
import { RNWortiseAdSize, WortiseBanner } from '@wortise/react-native-sdk';

/* ... */

const bannerRef = useRef(null);

return (
  <View style={styles.container}>
    <Button
      onPress={bannerRef.current?.loadAd()}
      title="Load Banner"
    />
    <WortiseBanner
      adSize={RNWortiseAdSize.HEIGHT_50}
      adUnitId="Wortise Ad Unit ID"
    />
  </View>
);
```

{% hint style="warning" %}
Since version `1.6.1+patch.1`, it is necessary to call the `loadAd()` method to start loading the banner.
{% endhint %}

The widget has support for the following parameters:

<table data-header-hidden><thead><tr><th width="170.16015625">Parameter</th><th width="114.98046875">Type</th><th width="109.5703125">Required</th><th>Descripction</th></tr></thead><tbody><tr><td>Parameter</td><td>Type</td><td>Required</td><td>Descripction</td></tr><tr><td><strong>adUnitId</strong></td><td>String</td><td><strong>Yes</strong></td><td>The ad unit ID to assign to the banner</td></tr><tr><td><strong>adSize</strong></td><td>String</td><td>No</td><td>Maximum size (height) for the banner. The possible values for this parameter are declared in the <code>RNWortiseAdSize</code> object</td></tr><tr><td><strong>autoRefreshTime</strong></td><td>Integer</td><td>No</td><td>Value in seconds that represents the time that must elapse to load a new banner ad</td></tr><tr><td><strong>onClicked</strong></td><td>Function</td><td>No</td><td>Function that will be invoked when the banner has been clicked</td></tr><tr><td><strong>onFailedToLoad</strong></td><td>Function</td><td>No</td><td>Function that will be invoked when the banner could not load an ad</td></tr><tr><td><strong>onImpression</strong></td><td>Function</td><td>No</td><td>Function that will be invoked when the banner has generated an impression</td></tr><tr><td><strong>onLoaded</strong></td><td>Function</td><td>No</td><td>Function that will be invoked when the banner has loaded an ad</td></tr><tr><td><strong>onRevenuePaid</strong></td><td>Function</td><td>No</td><td>Function that will be invoked when the banner has generated revenue</td></tr><tr><td><strong>onSizeChange</strong></td><td>Function</td><td>No</td><td>Function that will be invoked when the banner size has changed</td></tr></tbody></table>

## **Adaptive banners**

Adaptive banners are a new banner format where the size of the ads is adapted according to the device and the app user-interface, in order to maximize performance.

Currently there is support for two kind of adaptive banners:

### Anchored

This kind of banner is designed to replace the traditional 320x50 banners and be positioned at the top or bottom of the screen.

To make use of this format, an `AdSize` generated in the following way must be passed to the `BannerAd` widget:

```typescript
import { RNWortiseAdSize } from '@wortise/react-native-sdk';

// It is needed to specify the banner width
RNWortiseAdSize.getAnchoredAdaptiveBannerAdSize(width);
```

### Inline

This other kind of banner, in comparison to the anchored, is designed to have a variable height and be positioned inside a scrolling content.

In this case, an `AdSize` must be generated this way:

```typescript
import { RNWortiseAdSize } from '@wortise/react-native-sdk';

// It is needed to specify the banner width. The maximum height is an
// optional parameter (by passing 0 or a negative value)
RNWortiseAdSize.getInlineAdaptiveBannerAdSize(width, maxHeight);
```