# Banner

Los anuncios de banner son anuncios de imagen o de texto rectangulares que ocupan un lugar dentro del diseño de una aplicación. Permanecen en la pantalla mientras los usuarios interactúan con la aplicación y pueden actualizarse automáticamente después de un cierto período de tiempo. Si eres nuevo en la publicidad móvil, son una excelente opción para comenzar.

## **Integración**

La integración de los banners se realiza añadiendo el widget `WortiseBanner` en el layout de la aplicación. A continuación, se muestra un sencillo ejemplo de integración:

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

/* ... */

const bannerRef = useRef(null);

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

{% hint style="warning" %}
Desde la versión `1.6.1+patch.1`, es necesario llamar al método `loadAd()` para iniciar la carga del banner.&#x20;
{% endhint %}

El widget tiene soporte para los siguientes parámetros:

<table data-header-hidden><thead><tr><th width="170.15234375">Parámetro</th><th width="115.12890625">Tipo</th><th width="110.36328125">Requerido</th><th>Descripción</th></tr></thead><tbody><tr><td>Parámetro</td><td>Tipo</td><td>Requerido</td><td>Descripción</td></tr><tr><td><strong>adUnitId</strong></td><td>String</td><td><strong>Si</strong></td><td>El ID del ad unit a asignar al banner</td></tr><tr><td><strong>adSize</strong></td><td>String</td><td>No</td><td>Tamaño máximo (altura) para el banner. Los posibles valores para este parámetro se encuentran declarados en el objeto <code>RNWortiseAdSize</code></td></tr><tr><td><strong>autoRefreshTime</strong></td><td>Integer</td><td>No</td><td>Valor en segundos que representa el tiempo que deberá transcurrir para que se realice la carga de un nuevo anuncio banner</td></tr><tr><td><strong>onClicked</strong></td><td>Function</td><td>No</td><td>Función que es invocada cuando el banner ha sido clickeado</td></tr><tr><td><strong>onFailedToLoad</strong></td><td>Function</td><td>No</td><td>Función que es invocada cuando el banner no ha podido cargar un anuncio</td></tr><tr><td><strong>onImpression</strong></td><td>Function</td><td>No</td><td>Función que es invocada cuando el banner ha generado una impresión</td></tr><tr><td><strong>onLoaded</strong></td><td>Function</td><td>No</td><td>Función que es invocada cuando el banner ha cargado un anuncio</td></tr><tr><td><strong>onRevenuePaid</strong></td><td>Function</td><td>No</td><td>Función que es invocada cuando el banner ha generado un ingreso</td></tr><tr><td><strong>onSizeChange</strong></td><td>Function</td><td>No</td><td>Función que es invocada cuando el banner ha cambiado de tamaño</td></tr></tbody></table>

## **Banners adaptativos**

Los banners adaptativos son un nuevo formato de banner que se caracteriza por adaptar el tamaño de los anuncios según el dispositivo y la interfaz de la aplicación, para lograr maximizar el rendimiento.

Actualmente existe soporte para dos tipos de banners adaptativos:

### Anclados

Este tipo de banner está diseñado para reemplazar a los banners tradicionales de 320x50 y ser posicionado en la parte superior o inferior de la pantalla.

Para hacer uso de este formato, se debe pasar un `AdSize` al widget `BannerAd` generado de la siguiente manera:

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

// Es necesario especificar la anchura del banner
RNWortiseAdSize.getAnchoredAdaptiveBannerAdSize(width);
```

### Inline

Este otro tipo de banner, en comparación con los anclados, está diseñado para tener una altura variable y ser posicionado dentro de un contenido desplazable.

En este caso, se debe generar un `AdSize` como se muestra a continuación:

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

// Es necesario especificar la anchura del banner. La altura máxima es un
// parámetro opcional (pasando valor 0 o negativo)
RNWortiseAdSize.getInlineAdaptiveBannerAdSize(width, maxHeight);
```