Website logo
Dashboard
⌘K
🚀Integration Guide Overview
JS SDK (for Websites)
Presentation Options
Google Tag Manager (GTM)
Google Ad Manager (GAM)
Mobile SDK
iOS SDK
Android SDK
React Native SDK
Flutter SDK
Using macros
Passing payload values
Shopify
API
Native Ads API
Reporting API
Settings API
Errors
Postbacks
LoyaltyBoost (Rewarded Campaigns)
Perkswall
Frequently Asked Questions
Adding AdsPostX to your page
Offerwall
Docs powered by Archbee
Mobile SDK

React Native SDK

Introduction

Welcome to the guide on integrating AdsPostX into your React Native application. This comprehensive documentation is designed to assist developers in seamlessly incorporating AdsPostX Offers into their React native apps. Whether you're looking to monetize your app or enhance user engagement, AdsPostX provides a powerful solution.

Before getting started, please ensure that you already have an account with AdsPostX. If you don't have an account yet, you can easily create a new one now. Once you have your account credentials, you can proceed with the integration process outlined in this guide.

Let's dive in and explore the features and functionalities of the rnadspostx package to unlock the full potential of AdsPostX within your React Native application.

Requirements

Before you begin the integration process, make sure you have the following requirements in place:

  1. React Native Environment Setup: Ensure that you have set up the general React Native environment on your development machine. This includes Node.js, npm/yarn, and the React Native CLI. Refer to the React Native documentation for detailed instructions on setting up the development environment.
  2. iOS Build Support Tools: If you plan to target iOS devices, you will need to install Xcode and the necessary build support tools. Xcode is available for download from the Mac App Store. Install Xcode and follow the installation instructions to set up the necessary development tools.
  3. Android Build Support Tools: If you intend to target Android devices, you will need to install Android Studio and the required build support tools. Android Studio provides a comprehensive development environment for building Android apps. Download and install Android Studio, following the installation guide provided by Google.
  4. Cocoapods (iOS only): Cocoapods is a dependency manager for iOS projects. If you are targeting iOS devices, you will need to have Cocoapods installed. Cocoapods simplifies the process of integrating third-party libraries into your iOS project. Install Cocoapods by running the following command in your terminal:
JS
$ sudo gem install cocoapods


Minimum Deployment Target:

Ensure that your target platforms meet the minimum deployment target requirements:

For iOS

The minimum deployment target for iOS is iOS 13 or later.

  1. Open your client app iOS project-workspace (*.xcworkspace) in XCODE.
  2. Select your project at PROJECT level. On the Right side, Under info section, you will find Deployment Target Section. Under it, you will find iOS Deployment Target, make sure it is ≥ 13.0
    • Document image
      
  3. Select your project at TARGETS level. Under General → Minimum Deployments make sure the value for iOS is ≥ 13.0
    • Document image
      
  4. Open a Pod file, If you are using a global platform, check to make sure platform :ios, '13.0’. (OR any value above 13.0 will work) has been updated.

For Android

The minimum SDK version for Android is 24 (Android 7.0 Nougat) or later.

  1. Set minSdkVersion to 24 in app-level build.gradle. (Note: if you are referring to root/project level value for eg. rootProject.ext.minSdkVersion inside app-level build.gradle for minSdkVersion then set minSdkVersion to 24 in project-level build.gradle.)



Having these requirements in place will allow you to proceed with the integration of the rnadspostx package smoothly.

Latest Version

version

0.1.31

Installation

To integrate the rnadspostx package into your React Native project, follow these steps:

  1. Open Terminal and navigate to the root folder of your React Native project.
  2. Run the following command to install the rnadspostx package:
npm install --save rnadspostx

3. Wait for the installation process to complete. This may take a few moments, depending on your internet connection and the size of the package.

For iOS

  1. Open terminal, Go to <your react native app>/ios. / Do pod install OR pod update

For Android

  1. Check the value of android:allowBackup in android/app/src/main/AndroidManifest.xml
    1. If it is false then you need to make changes as below:
      1. add xmlns:tools="http://schemas.android.com/tools" to manifest as an XML namespace.
      2. add tools:replace="android:allowBackup” at <application> level and also add/update android:allowBackup= “true (OR false)” (depending upon your requirement).
    2. If it is true or not present then no changes are required.
  2. Perform gradle sync.

Integration

There are two ways to integrate AdsPostX into your React Native app.

Native Ads API Native Ads API provides a highly flexible implementation method. With Native Ads API, you can retrieve Offers in a JSON response and then parse and display them according to your specific requirements. The JSON response contains individual fragments that make up an Offer, giving you full control over how the Offer is rendered. This method allows for deep customization and styling to seamlessly blend the Offers into your app's UI.

Standard Integration If you prefer a quick and straightforward way to display AdsPostX Offers without the need for extensive customization, the Standard integration is a suitable option. It offers a pre-built modal box that can be easily integrated into your React Native app. While it may not provide the same level of customization as Native Ads, the Standard integration does allow basic theming options that can be controlled through the AdsPostX dashboard. This option is ideal for those who prioritize simplicity and quick implementation.

Native Ads API Integration

Once you've installed the rnadspostx package using the step(s) above, you can simply use the getOffers call to retrieve Offers. You will need your SDK ID in order to do so.

Usage

Import AdsPostXPlugin in your RN project:

JS
import {AdsPostXPlugin} from 'rnadspostx';


Here is an example of a fully-formed call using the getOffers method:

JS
// Values used here are for demonstration purposes.
// Replace them with your actual values.
const sdkId = 'YOUR_SDK_ID';
const payload = {
  country: 'USA',
  firstname: 'Dev',
  // setting `creative` attribute here returns only those
  // Offers that have at least one creative
  creative: '1',
};

try {
  // the `payload` is optional
  const {status, response} = await AdsPostXPlugin.getOffers(sdkId, payload);

  if (!status) {
    // Handle possible API failure
    return;
  }
  
  // Get the Offers array
  const offers = response.data.offers;
} catch (error) {
  // Handle any errors that occurred during the getOffers call
}


where

Parameter Name

Parameter Type

Optional/Required

Description

sdkId

string

required

SDK ID as provided

payload

JSON object

optional

User payload parameters and other filters/options

It returns a promise with status and response details.

Name

Data Type

Description

status

boolean

indicates if the getOffers call was successful or not.

response

JSON object

If promise resolve then status will be true, response will give details about the Offers.

If promiserejects then status will be false, response will give details about the error.

The getOffers method is effectively a wrapper around the AdsPostX Native Ads API which you can learn more about here. The payload and options values can be passed through and used interchangeably with the Native Ads API.

In the example above, the payload parameter is passing user payload information including country and firstname. The payload parameter also includes a creatives: 1 option to instruct AdsPostX to only return Offers that have at least one creative.

The getOffers response object will contain Offers if Offers are available and can then be parsed to display them using the Offers fragments provided.

To accurately report events such as impressions, opt-outs, etc, each Offer contains beacon URL to fire based on the nature of the event. For impressions, use the pixel attribute. For other events, refer to the beacons attribute to handle. For example, if the user presses "No thanks" on the offer, fire the no_thanks_click beacon URL.

getOffers Response Example

Success

A successful call to getOffers would return a JSON object containing status and response as follows:

JS
{
  "status": true,
  "response": {
    "data": 
      "offers": [
        {
          "id": 4053,
          "mini_text_html": "<p>Sample Mini Text here</p>",
          "description": "<p>Upgrade your headwear game by grabbing this Texas Rangers Chrome 59FIFTY Fitted Hat from New Era. Highlighting your loyalty to the team will be super easy thanks to the distinctive Texas Rangers graphics embroidered on the crown.</p><p>Upgrade your headwear game Now. Don't just wait. </p>",
          "creatives": [
            {
              "url": "https://adpx.b-cdn.net/campaigns/1330/2c893d4226891cc160dd6658a660bbeb.png",
              "type": "png",
              "width": 900,
              "id": 1009,
              "is_primary": true,
              "aspect_ratio": 1,
              "height": 900
            },
            {
              "url": "https://adpx.b-cdn.net/campaigns/1330/e4ea32bf3c8f2c6434d59df46a986dc1/avif",
              "type": "heif",
              "width": 900,
              "id": 1010,
              "is_primary": false,
              "aspect_ratio": 1,
              "height": 900
            },
          ],
          "image": "https://adpx.b-cdn.net/campaigns/1330/2c893d4226891cc160dd6658a660bbeb.png",
          "adv_pixel_url": "",
          "cta_no": "No, Thanks",
          "title": "Texas Rangers New Era Chrome 59FIFTY Fitted Hat - Stone/Black",
          "beacons": {
            "no_thanks_click": "https://track.adspostx.com/event/record/no_thanks_click?oid=4053&cid=1330&pid=800&sess_id=e7ff9c17a762751520be3315ba22fe9e7be8323f",
            "close": "https://track.adspostx.com/event/record/close?oid=4053&cid=1330&pid=800&sess_id=e7ff9c17a762751520be3315ba22fe9e7be8323f"
          },
          "click_url": "https://track.adspostx.com/sdk/offer-click?o_id=4053&c_id=1330&p_id=800&sess_id=e7ff9c17a762751520be3315ba22fe9e7be8323f",
          "useraction_url": "https://www.adspostx.com/get-started?click={click_id}",
          "useraction_cta": "Buy Now",
          "cta_yes": "Yes, please",
          "pixel": "https://track.adspostx.com/sdk/v2/impression/p.png?o_id=4053&c_id=1330&p_id=800&sess_id=e7ff9c17a762751520be3315ba22fe9e7be8323f&cbuster={CBUSTER}"
        }
      ],
      "styles": {   //styles settings for the template associated with the account used by the Standard Integration. Can be ignored.
        "offerText": {
          "fontSize": 14,
          "font": null,
          "buttonYes": {
            "hover": "#1A56DB",
            "stroke": "#1C64F2",
            "background": "#1C64F2",
            "color": "#ffffff"
          },
          "buttonNo": {
            "hover": "#E5E7EB",
            "stroke": "#9CA3AF",
            "background": "#ffffff",
            "color": "#6B7280"
          },
          "textColor": "#000"
        },
        "footer": {
          "publisher_name": "Ansh LLC",
          "privacy": "https://www.adspostx.com/privacy-policy",
          "text": "Powered by AdsPostX",
          "publisher_privacy_policy": "https://www.enefits.co/privacy",
          "disclaimer": ""
        },
        "header": {
          "text": "Your order is complete",
          "lead_in_text_color": "#000000",
          "lead_in_text": "Here are some offers from brands you love!",
          "textColor": "#ffffff",
          "fontSize": 16,
          "background": "#1A56DB"
        },
        "settings": {
          "screen_margin": 0,
          "darken_bg_non_centered": false,
          "show_disclaimer": false,
          "ad_position": "center",
          "ad_animation": "bottom-top",
          "enable_vertical_offset": false,
          "button_order": "neg_first",
          "delay": 0,
          "mobile_vertical_offset": null,
          "darken_bg": true,
          "fixed_progress_bar": false
        },
        "popup": {
          "shadow": "#8f8f8f",
          "borderRadius": {
            "bottom_right": "5",
            "top_right": "5",
            "top_left": "5",
            "bottom_left": "5"
          },
          "background": "#ffffff",
          "lightBox": "#000"
        }
      },
      "count": 1,     //number of Offers returned by the getOffers method determined in the AdsPOstX dashboard via Settings/Behaviour.
    }
  }
}


Failure

A failed call to getOffers would return a JSON response similar to the following:

JS
{
  "status": false,
	"response": {
		"error": "The operation couldn’t be completed. (Invalid response status code: 401 error 401.)"
	}
}


Standard Integration

Integrating AdsPostX in your app consists of three steps.

  1. Initializing SDK
  2. Loading Offers
  3. Displaying Offers

Initializing the SDK

Include the rnadspostx initialization code anywhere in the app but make sure to call it before loading & showing offers.

Also, make sure to import { AdsPostXPlugin } from 'rnadspostx'

JS
// values used here are for demo purposes; please use actual values when integrating SDK.

 const sdkId = '<Your SDK ID';
 AdsPostXPlugin.init(sdkId, (response) => {
     /* if response is true, init call is success.
        otherwise you will get an error with response.*/        
    }
);


where

Parameter Name

Parameter Type

Required/Optional

Description

sdkId

string

required

SDK ID as provided

response

callback object

required

indicates if the init call was successful or not; if not, error information will be returned

Loading Offers

Once the SDK is initialized successfully, call the load function to load Offers.

The load function must be called at least once before showing Offers.

Load Offers with payload

JS
// values used here are just for demo purpose, use actual values when you are integrating SDK.

const payload = {"firstname": "john", "country": "US"}

AdsPostXPlugin.load(response => {  
/*
    if response is 'true' mean offer loaded successfully,
    else check 'error' field for error while loading offers.
*/              
}, payload);


Load Offers without payload

JS
// values used here are just for demo purpose, use actual values when you are integrating SDK.


AdsPostXPlugin.load(response => {
/*
    if response is 'true' mean offer loaded successfully,
    else check 'error' field for error while loading offers.
*/  
});


where

Parameter Name

Parameter Type

Required/Optional

Description

response

callback parameter

required

gives an indication that the offers are loaded successfully or not.

If a response is 'true', this mean offers are loaded successfully and ready to be displayed.

Otherwise, you will get an error with 'error' field in the response.

payload

JS Object

optional

payload and their values you want to send to AdsPostX in the payload.

Supports adhoc key-value pairs.

Currently, the following payload values are supported:

Name

Data Type

email

string

firstname

string

lastname

string

mobile

string

confirmationref

string

amount

string

currency

string

paymentType

string

ccbin

string

language

string

country

string

zipcode

string

orderid

string

offerid

string

subid

string

Displaying offers

Once init and load calls are successful, call show to display offers in your app.



JS
// values used here are just for demo purpose, use actual values when you are integrating SDK.

const showOptions = {
    position: {
        topMargin: 5.0,
        rightMargin: 5.0,
        bottomMargin: 5.0,
        leftMargin: 5.0,
    },
    styles: {
        transparent: true, // OR false
        type: 'popup' // OR 'fullscreen',
    },
    callbacks: {
        showCallback: () => {
          console.log('Show callback called');
        },
        errorCallback: event => {
          console.log('Error callback called:', event);
        },
        dismissCallback: () => {
          console.log('Dismiss callback called');
        },
    },
};

AdsPostXPlugin.show(showOptions);


where

Parameter Name

Parameter Type

required/optional

Description

position

object

required

contains topMargin, rightMargin, bottomMargin, leftMarin as members.

topMargin: Describes top margin in %. Must be >=0 and <=15.

rightMargin: Describes right side margin in %. Must be >=0 and <=15.

bottomMargin: Describes bottom margin in %. Must be >=0 and <=15.

leftMargin: Describes left side margin in %. Must be >=0 and <=15.



styles

object

required

contains transparent and type.

transparent: set it to true if you want to set the offer background transparent.

type: can be popupor fullscreen

callbacks

object

required

contains showCallback, errorCallback and dismissCallback.

errorCallback

should be part of callbacks

required

Callback that runs when there is an error. Provides a error info.

showCallback

should be part of callbacks



required

Callback to run each time an offer is displayed

dismissCallback

should be part of callbacks



required

Callback to run each time an offer is dismissed

Margins will be calculated based on orientation. If in landscape orientation, margin will be calculated considering the device height. If in portrait orientation, margin will be calculated considering the device width.

If margin value is > 15 then it will consider only 15.

After displaying offers, the load function must be called again before displaying offers again.

Set Environment

The default value for Environment is 0(live environment).

We recommend using test environment only in development, not in production.

Make sure to call this method before init() call.



JS
 AdsPostXPlugin.setEnvironment(0) // for 'live' environment.

// OR

 AdsPostXPlugin.setEnvironment(1) // for 'test' environment.


Set Debug Log

By default, Debug Log is disabled.

Enabling Debug Log will give you more debug information related to offers.

We recommend enabling logs only in development - not in production.

Make sure to call this method before the init() call.

Swift
AdsPostx.setDebugLog(true) // to enable debug logs

// OR 

AdsPostx.setDebugLog(false) // to disable debug logs


Orientation Related (only for iOS)

Also, add the following code to the client application's 'AppDelegate' method supportedInterfaceOrientationsFor window

Open & Navigate to <react-native-client-app> /ios /<project_name> /AppDelegate.mm

#import <AdsPostX/AdsPostX-Swift.h> in AppDelegate.mm

add the following code.

ObjectiveC
- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
    
          return [AdsPostx supportedInterfaceOrientations:UIInterfaceOrientationMaskAll];
          
    }


where

Value

description

UIInterfaceOrientationMaskAll

if the client app supports all orientations.

UIInterfaceOrientationMaskPortrait

if the client app supports only portrait orientation.

UIInterfaceOrientationMaskLandscape

if the client app supports only landscape orientation.

UIInterfaceOrientationMaskAllButUpsideDown

if client app supports all orientations except UpsideDown.

FAQ

1) When pod install / pod update if you are getting the below error:

[!] CocoaPods could not find compatible versions for pod "rnadspostx":   In Podfile:     rnadspostx (from `../node_modules/rnadspostx`)Specs satisfying the `rnadspostx (from `../node_modules/rnadspostx`)` dependency were found, but they required a higher minimum deployment target.

Ans:

In React Native client app -> ios -> Pod file, change to platform :ios, 13. Also make sure xcode project deployment target is >= iOS13.

2) If you are getting the below error in Android version:

uses-sdk:minSdkVersion 21 cannot be smaller than version 2 declared in library [com.github.AdsPostX:adspostx-android:1.0.0]

Ans:

Set minSdkVersion = 23 in gradle file.

3) If you are getting the below error in Android version:

Namespace 'tools' is not bound in AndroidManifest.xml.

Ans:

To fix this error, you need to add the tools namespace declaration to your AndroidManifest.xml file. Here's an example:

xml <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"> ... </manifest>

Make sure to add the xmlns:tools="http://schemas.android.com/tools" declaration to the root manifest element. Once you've added the declaration, the "Namespace 'tools' is not bound" error should go away.

4) If you are getting the below error in the Android version.

Execution failed for task ':app:processDebugMainManifest'. Manifest merger failed : Attribute application@allowBackup value=(false) from AndroidManifest.xml:10:7-34         is also present at [com.github.AdsPostX:adspostx-android:1.0.0] AndroidManifest.xml:15:9-35 value=(true).         Suggestion: add 'tools:replace="android:allowBackup"' to <application> element at AndroidManifest.xml:7:5-12:19 to override.

Ans:

Add tools:replace="android:allowBackup" in androidmanifest.xml.

Need help?

If you're running into any issues while going through the integration process, feel free to contact us at help@adspostx.com.



PREVIOUS
Android SDK
NEXT
Flutter SDK
Docs powered by Archbee
TABLE OF CONTENTS
Introduction
Requirements
Minimum Deployment Target:
For iOS
For Android
Latest Version
Installation
For iOS
For Android
Integration
Native Ads API Integration
Usage
getOffers Response Example
Standard Integration
Initializing the SDK
Loading Offers
Displaying offers
Set Environment
Set Debug Log
Orientation Related (only for iOS)
FAQ
Need help?
Docs powered by Archbee