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:

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
      ref={bannerRef}
      adSize={RNWortiseAdSize.HEIGHT_50}
      adUnitId="Wortise Ad Unit ID"
    />
  </View>
);

The widget has support for the following parameters:

Parameter	Type	Required	Description
adUnitId	String	Yes	The ad unit ID to assign to the banner
adSize	String	No	Maximum size (height) for the banner. The possible values for this parameter are declared in the `RNWortiseAdSize` object
autoRefreshTime	Integer	No	Value in seconds that represents the time that must elapse to load a new banner ad
onClicked	Function	No	Function that will be invoked when the banner has been clicked
onFailedToLoad	Function	No	Function that will be invoked when the banner could not load an ad
onImpression	Function	No	Function that will be invoked when the banner has generated an impression
onLoaded	Function	No	Function that will be invoked when the banner has loaded an ad
onRevenuePaid	Function	No	Function that will be invoked when the banner has generated revenue
onSizeChange	Function	No	Function that will be invoked when the banner size has changed
requestParameters	Object	No	Extra parameters for the ad request, such as the collapsible position

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 use this format, an AdSize generated in the following way must be passed to the BannerAd widget:

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

// You need 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:

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

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

Collapsible banners

Collapsible banners are anchored banners that are initially shown as a larger overlay, with a button that collapses them to their declared size. They are meant to improve the performance of anchored banners without taking up more space permanently.

To request one, pass the desired position through the requestParameters property:

<WortiseBanner
  adSize={adSize}
  adUnitId="Wortise Ad Unit ID"
  requestParameters={{ collapsible: 'bottom' }}
/>

The position determines where the expanded ad is anchored, and it must match the position of the banner inside the app layout:

Value	Description
`'bottom'`	The banner is placed at the bottom of the screen
`'top'`	The banner is placed at the top of the screen