# 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);
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wortise.com/react-native/integracion-del-sdk/banner.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.