React Native SDK Installation

Pre-requisites

Visual Studio Code
React Native 0.80 or newer
JDK 17 (as per React Native requirements)
Android Studio (Panda or newer)
Xcode (26.2 or newer)
Obtain client settings from Publift:
- TENANT_CODE
- TAG_ID
- Google APPLICATION_ID (Android)
- GADApplicationIdentifier (iOS)

Installation

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

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

npm install @publift/react-native-fuseapp
# or
yarn add @publift/react-native-fuseapp

Enable new architecture in app.json

{
    "expo": {
        ...
        "newArchEnabled": true,
        ...
    }
}

Android Setup

Enable new architecture in your android/gradle.properties file:

newArchEnabled=true

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/" }
    }
}

allprojects {
    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

<?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="########" />
        <meta-data
            android:name="com.publift.mobile.TAG_ID"
            android:value="########" />
        <meta-data
            android:name="com.publift.mobile.TENANT_CODE"
            android:value="########" />

        ...
    </application>
</manifest>

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/'

env['RCT_NEW_ARCH_ENABLED']=1

target 'MyApp' do
    ...
    
    use_frameworks! :linkage => :static
    
    ...
end

Run pod install

cd ios && pod install

Update Info.plist

<?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>########</string>
    <key>com.publift.mobile.TAG_ID</key>
    <string>########</string>
    <key>com.publift.mobile.TENANT_CODE</key>
    <string>########</string>
    
    ...
</dict>
</plist>

Add SKAdNetworkItems - copy and add the contents from here

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

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

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={(data) => {
    console.log('Fuse Event:', data.event);
  }}
/>

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

async function showInterstitial() {
  const ad = new FuseFullScreenAdView({
    code: 'interstitial_zone_code',
    onEvent: (data) => {
      console.log('Interstitial event:', data.event);
      if (data.event === FuseAdViewEvent.Dismissed) {
        ad.dispose();
      }
    },
  });

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