React Native SDK Installation

Pre-requisites

  1. Visual Studio Code
  2. React Native 0.80 or newer
  3. JDK 17 (as per React Native requirements)
  4. Android Studio (Panda or newer)
  5. Xcode (26.2 or newer)
  6. Obtain client settings from Publift:
    • TENANT_CODE
    • TAG_ID
    • Google APPLICATION_ID (Android)
    • GADApplicationIdentifier (iOS)

Installation

  1. Add @publift/react-native-fuseapp to your project

Create or edit .npmrc in your project root so only the @publift scope resolves through Cloudsmith (this leaves the public npm registry as the default for every other package):

@publift:registry=https://npm.cloudsmith.io/publift/fuseapp/
//npm.cloudsmith.io/publift/fuseapp/:_authToken=BrnMk9bbufLlX4Vd

Then install:

npm install @publift/react-native-fuseapp
# or
yarn add @publift/react-native-fuseapp
  1. Android Setup
  • Add the Publift Maven repository to the repositories block in your android/build.gradle file:
buildscript {
    repositories {
        google()
        mavenCentral()
        maven { url "https://dl.cloudsmith.io/BrnMk9bbufLlX4Vd/publift/fuseapp/maven/" }
    }
}

If your project uses dependencyResolutionManagement in settings.gradle (non-React Native projects), you can add it there instead:

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.PREFER_SETTINGS)
    repositories {
        ...
        maven { url = uri("https://dl.cloudsmith.io/BrnMk9bbufLlX4Vd/publift/fuseapp/maven/") }
    }
}
  • Update AndroidManifest.xml

Replace <YOUR_GAM_APP_ID>, <YOUR_PUBLIFT_TAG_ID> and <YOUR_TENANT_CODE> with the values provided by Publift — substitute the value only, not the surrounding angle brackets.

<?xml version="1.0" encoding="UTF-8"?>
<manifest ... >
    <application ... >
        <!-- Sample Ad Manager app ID: ca-app-pub-3940256099942544~3347511713 -->
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="<YOUR_GAM_APP_ID>" />
        <meta-data
            android:name="com.publift.mobile.TAG_ID"
            android:value="<YOUR_PUBLIFT_TAG_ID>" />
        <meta-data
            android:name="com.publift.mobile.TENANT_CODE"
            android:value="<YOUR_TENANT_CODE>" />

        ...
    </application>
</manifest>
  1. iOS Setup
  • Add the Publift CocoaPods repository at the top of your Podfile
source 'https://dl.cloudsmith.io/BrnMk9bbufLlX4Vd/publift/fuseapp/cocoapods/index.git'
source 'https://cdn.cocoapods.org/'

use_frameworks! :linkage => :static
  • Run pod install
cd ios && pod install

Apple Silicon note: if pod install fails with an incompatible architecture error from the nkf gem, your pod is running under an x86_64 Ruby. Install the Homebrew CocoaPods (native arm64) and retry: brew install cocoapods.

  • Update Info.plist

Replace <YOUR_GAM_APP_ID>, <YOUR_PUBLIFT_TAG_ID> and <YOUR_TENANT_CODE> with the values provided by Publift — substitute the value only, not the surrounding angle brackets.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <!-- Sample Ad Manager App ID: ca-app-pub-9939518381636264~1458516390 -->
    <key>GADApplicationIdentifier</key>
    <string><YOUR_GAM_APP_ID></string>
    <key>com.publift.mobile.TAG_ID</key>
    <string><YOUR_PUBLIFT_TAG_ID></string>
    <key>com.publift.mobile.TENANT_CODE</key>
    <string><YOUR_TENANT_CODE></string>
    
    ...
</dict>
</plist>
  • Add SKAdNetworkItems - copy and add the contents from here
  1. Initialize the Plugin

Before loading ads, your app should initialize the Fuse App SDK plugin. Wrap your app with the FuseAppProvider component:

import React, { useRef } from 'react';
import { FuseAppProvider, FuseAppRef } from '@publift/react-native-fuseapp';

export default function App() {
  const fuseRef = useRef<FuseAppRef | null>(null);

  return (
    <FuseAppProvider
      ref={fuseRef}
      autoInitialize={true}
      onInitialized={() => console.log('Fuse SDK ready')}
    >
      <MyApp fuseRef={fuseRef} />
    </FuseAppProvider>
  );
}
  1. Display a Banner Ad

The following is an example of loading a banner ad.

import React from 'react';
import { View } from 'react-native';
import { FuseAdView } from '@publift/react-native-fuseapp';

function MyScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center' }}>
      <FuseAdView code="example_fixed_size_banner" />
    </View>
  );
}
  1. Customize your Banner Ad

The following example displays some customization options. See the example app for more detailed examples.

<FuseAdView
  code="example_fixed_size_banner"
  loadingBehaviour={{ type: 'progressBar' }}
  errorBehaviour={{ type: 'hide' }}
  params={{
    customTargeting: {
      sport: 'basketball',
      size: 'small',
    },
    contentUrls: ['https://www.publift.com/about'],
  }}
  onEvent={(event) => {
    console.log('Fuse Event:', event);
  }}
/>
  1. Display a Full-screen Ad

The following is an example of loading and showing a full-screen (interstitial) ad.

import { FuseFullScreenAdView, FuseAdViewEvent } from '@publift/react-native-fuseapp';

const ad = new FuseFullScreenAdView({
  code: 'example_interstitial',
  onEvent: (data) => {
    if (data.event === FuseAdViewEvent.Dismissed) {
      ad.dispose();
    }
  },
});

// Show with a 10 second timeout
await ad.show(10000);