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

Since version 1.6.1+patch.1, it is necessary to call the loadAd() method to start loading the banner.

The widget has support for the following parameters:

Parameter	Type	Required	Descripction
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

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:

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:

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