tenerity-blender-rn-sdk

This is a Mobile Ad Library - Blender package provided by Webloyalty for implementation in react-native applications of our partners

🚨 IMPORTANT! 🚨 Version 3.x introduces several breaking changes focused on simplifying the usage of the Blender component. Please review the section below to see how to upgrade to the new version.

How to:

1. Install the package

yarn add tenerity-blender-rn-sdk

2. Install Pods for tenerity-blender-rn-sdk dependencies (react-native-device-info react-native-webview)

You can omit this step if you already have these pods installed

cd ios && pod install && cd ..

⚠️ v3.x changes ⚠️

if it's the first time you are installing and implementing this library, please skip to the Example section below.

Version 3.x introduces several breaking changes focused on simplifying the usage of the Blender component. Please review the following modifications and update your code accordingly:

Removed: BlenderContextProvider

The BlenderContextProvider component has been completely removed from our code and therefore, you should remove any usage of BlenderContextProvider from your implementation as it's no more required.

Removed props

To streamline the Blender component interface, the following props have been removed:

| Prop name | Required action | | -------------------- | ------------------------------- | | bannerType | Remove this prop from usage | | isBannerShown | Remove this prop from usage | | showLoadingIndicator | Remove this prop from usage | | webViewProps | Remove this prop from usage |

These removals were made to enhance ease of use and reduce unnecessary configuration when integrating the Blender component. You can find an example below to see how to integrate our library now.

Example

On the page where you want our banner(s) to appear, use the component like this:

import React from 'react';
import { StyleSheet, TextView } from 'react-native';
import { Blender } from 'tenerity-blender-rn-sdk'

const YourPage = () => {
  const CAMPAIGN_ID = "wl campaign id"

  //...

  return (
    <>
      //Your component(s) above the Blender one
      <Blender
        campaignId={CAMPAIGN_ID}
        isLoggingEnabled={true}
        inlineBannerStyle={styles.bannerStyle}
        onSuccess={() => console.log('Banners loaded successfully')}
        onFailure={(error) => console.log('Failed to load banners:', error)}
      />
      //Your component(s) below the Blender one
    </>
  );
};

const styles = StyleSheet.create({
  // ... your others styles for this page will probably be here
  bannerStyle: {
    width: '100%',
    height: 200,
  },
});

export default YourPage;

💡 This example shows how to display both inline and overlay banners on the same page.

The position of the component in your render hierarchy, along with the inlineBannerStyle prop, determines where the inline banner appears. These are only relevant when an inline banner is actually present in the campaign — you can ignore them otherwise and even more important, you shouldn't use inlineBannerStyle when only an overlay banner is present in the campaign to avoid any flickering/jumping issues.

The overlay banner, appears above the page content and isn’t affected by render hierarchy.

Props description

export type BlenderProps = {
  campaignId: string;
  isLoggingEnabled?: boolean | undefined;
  inlineBannerStyle?: StyleSheetProperties | any;
  keywords?: string | null | undefined;
  onSuccess?: () => void;
  onFailure?: (error: string) => void;
};

| prop | type | required | default value | | :---------------- | :------------------- | :------- | :------------ | | campaignId | string | yes | | | isLoggingEnabled | boolean | no | false | | inlineBannerStyle | StyleSheetProperties | no | {} | | keywords | string | no | null | | onSuccess | function | no | undefined | | onFailure | function | no | undefined |

campaignId

This is the Campaign ID sent to you from Webloyalty to use for retrieving the banners relevant to a specific campaign.

isLoggingEnabled

Set this prop to true if needed to access debug logs. Keep in mind that the logs will be enabled for both development and production builds when the value is set to true.

inlineBannerStyle

The Blender SDK works with an array of "banner objects" that are provided by the API. One of the properties of a banner object tells us of whether this specific banner is an inline banner (intended to be displayed within the contents of a screen) or a full-screen banner (intended to be displayed in a full-screen modal).

You can customize the inline banner (the banner intended to be displayed within the content of a screen) style with the inlineBannerStyle prop in your component. You will probably do that in order to set a width and a height to tell the component how he should occupy the space in the screen.

If only an overlay banner is present in the campaign and this prop is provided, this will cause flickering/jumping issues and therefore, you shouldn't provide it.

keywords

You should only use this optional props if it have been communicated from Webloyalty.

onSuccess

Optional callback function that gets called when banners are successfully fetched and loaded.

onFailure

Optional callback function that gets called when an error occurs during banner fetching. Receives the error message as parameter.