Documentation

Hey friend! We are co-hosting a conference with Software Mansion, learn more.

FacebookAds

Facebook Audience SDK integration for Expo apps.

You need to create a placement ID to display ads. Follow steps 1 and 3 from the Getting Started Guide for Facebook Audience to create the placement ID.

In your project's app.json, add your Facebook App ID and Facebook Display Name under the facebookAppId and facebookDisplayName keys.

When using Facebook Ads in development, you'll need to register your device to be able to show ads. You can add the following at the top of your file to register your device:
import { FacebookAds } from 'expo';

FacebookAds.AdSettings.addTestDevice(FacebookAds.AdSettings.currentDeviceHash);
You should see fake ads after you add this snippet.
To use Facebook Ads in production with real ads, you need to publish your app on Play Store or App Store and add your app in the Facebook console. Refer the Submit Your App for Review section in the Getting Started Guide for more details.

Interstitial Ad is a type of ad that displays a full-screen modal dialog with media content. It has a dismiss button as well as a touchable area that takes the user outside of your app to the advertised content.
Example:
import { FacebookAds } from 'expo';

FacebookAds.InterstitialAdManager.showAd(placementId)
  .then(didClick => {})
  .catch(error => {})
The method returns a promise that will be rejected when an error occurs during a call (e.g. no fill from ad server or network error) and resolved when the user either dimisses or interacts with the displayed ad.

Native ads can be customized to match the design of your app. To display a native ad, you need to:

The NativeAdManager is responsible for fetching and caching ads as you request them.
import { FacebookAds } from 'expo';

const adsManager = new FacebookAds.NativeAdsManager(placementId, numberOfAdsToRequest);
The constructor accepts two parameters:
  • placementId - which is a unique identifier describing your ad units
  • numberOfAdsToRequest - which is a number of ads to request by ads manager at a time

Next, you need to wrap the component you want to use to show your add with the withNativeAd higher-order component. The wrapped component will receive a prop named nativeAd, which you can use to render an ad.
import { FacebookAds } from 'expo';

class AdComponent extends React.Component {
  render() {
    return (
      <View>
        <Text>{this.props.nativeAd.bodyText}</Text>
      </View>
    );
  }
}

export default FacebookAds.withNativeAd(AdComponent);
The nativeAd object can contain the following properties:
  • advertiserName - The name of the Facebook Page or mobile app that represents the business running each ad.
  • headline - The headline that the advertiser entered when they created their ad. This is usually the ad's main title.
  • linkDescription - Additional information that the advertiser may have entered.
  • adTranslation - The word 'ad', translated into the language based upon Facebook app language setting.
  • promotedTranslation - The word 'promoted', translated into the language based upon Facebook app language setting.
  • sponsoredTranslation - The word 'sponsored', translated into the language based upon Facebook app language setting.
  • bodyText - Ad body
  • callToActionText - Call to action phrase, e.g. - "Install Now"
  • socialContext - social context for the Ad, for example "Over half a million users"
More information on how the properties correspond to an exemplary ad can be found in the official Facebook documentation for Android and for iOS.

AdMediaView displays native ad media content whereas AdIconView is responsible for displaying an ad icon.
** Note: ** Don't use more than one AdMediaView and AdIconView component (each) within one native ad. If you use more, only the last mounted one will be populated with ad content.
import { FacebookAds } from 'expo';
const { AdIconView, AdMediaView } = FacebookAds;

class AdComponent extends React.Component {
  render() {
    return (
      <View>
        <AdMediaView />
        <AdIconView />
      </View>
    );
  }
}

export default FacebookAds.withNativeAd(AdComponent);

** Note:** In order for elements wrapped with AdTriggerView to trigger the ad, you also must include AdMediaView in the children tree.
import { FacebookAds } from 'expo';
const { AdTriggerView, AdMediaView } = FacebookAds;

class AdComponent extends React.Component {
  render() {
    return (
      <View>
        <AdMediaView />
        <AdTriggerView>
          <Text>{this.props.nativeAd.bodyText}</Text>
        </AdTriggerView>
      </View>
    );
  }
}

export default FacebookAds.withNativeAd(AdComponent);

Now you can render the wrapped component and pass the adsManager instance you created earlier.
class MyApp extends React.Component {
  render() {
    return (
      <View>
        <AdComponent adsManager={adsManager} />
      </View>
    );
  }
}

The BannerAd component allows you to display native as banners (known as AdView).
Banners are available in 3 sizes:
  • standard (BANNER_HEIGHT_50)
  • large (BANNER_HEIGHT_90)
  • rectangle (RECTANGLE_HEIGHT_250)

In order to show an ad, you first have to import BannerAd from the package:
import { FacebookAds } from 'expo';

function ViewWithBanner(props) {
  return (
    <View>
      <FacebookAds.BannerAd
        placementId="YOUR_BANNER_PLACEMENT_ID"
        type="standard"
        onPress={() => console.log('click')}
        onError={(error) => console.log('error', error)}
      />
    </View>
  );
}

A wrapper for FBNativeAdsManager. It provides a mechanism to fetch a set of ads and use them.

By default the native ads manager will refresh its ads periodically. This does not mean that any ads which are shown in the application's UI will be refreshed, but requesting next native ads to render may return new ads at different times.
adsManager.disableAutoRefresh();

This controls which media from the native ads are cached before being displayed. The default is to not block on caching.
adsManager.setMediaCachePolicy('none' | 'icon' | 'image' | 'all');
Note: This method is a no-op on Android

InterstitialAdManager is a manager that allows you to display interstitial ads within your app.

Shows a fullscreen interstitial ad asynchronously.
InterstitialAdManager.showAd('placementId')
  .then(...)
  .catch(...);
Promise will be rejected when there's an error loading ads from Facebook Audience network. It will resolve with aboolean indicating whether user didClick an ad or not.
Note: There can be only one showAd call being performed at a time. Otherwise, an error will be thrown.

AdSettings contains global settings for all ad controls.

Constant which contains current device's hash.

Registers given device to receive test ads. When you run app on simulator, it should automatically get added. Use it to receive test ads in development mode on a standalone phone.
All devices should be specified before any other action takes place, like AdsManager gets created.
FacebookAds.AdSettings.addTestDevice('hash');

Clears all previously set test devices. If you want your ads to respect newly set config, you'll have to destroy and create an instance of AdsManager once again.
FacebookAds.AdSettings.clearTestDevices();

Sets current SDK log level.
FacebookAds.AdSettings.setLogLevel('none' | 'debug' | 'verbose' | 'warning' | 'error' | 'notification');
Note: This method is a no-op on Android.

Configures the ad control for treatment as child-directed.
FacebookAds.AdSettings.setIsChildDirected(true | false);

If an ad provided service is mediating Audience Network in their SDK, it is required to set the name of the mediation service
FacebookAds.AdSettings.setMediationService('foobar');

Sets the URL prefix to use when making ad requests.
FacebookAds.AdSettings.setUrlPrefix('...');
Note: This method should never be used in production