Migrating from Plugin 3.x

Overview

This document outlines the steps to migrate your Taboola React Native plugin implementation from version 3.x to 4.x. The new version introduces a more robust and flexible API. The main change is the separation of the data-fetching logic from the UI rendering, which gives developers more control.

Step 1: Initialization

The index.js file is where you initialize the Taboola SDK. This step remains largely the same, requiring you to call Taboola.init with your publisher name.

Initialization (index.js):

>

Step 2: Classic Unit

Creating a classic Taboola unit now involves a few distinct steps to set up the data handling before rendering the UI.

2.1 Create TBLClassicPage

First, you need to create a TBLClassicPage instance, which represents the page containing the Taboola unit.

Create TBLClassicPage:

>

2.2 Create TBLClassicListener

Next, define a listener to handle events from the Taboola unit, such as ad clicks or errors.

Create TBLClassicListener - 4.x**

>

Listeners in 3.x are passed via JSX props on TBLClassicUnit.

>

2.3 Create Unit

Now, use the useCreateUnit hook to create a controller for your classic unit, passing the page, placement details, and listener.

Create Unit:

>

Step 3: Fetch Content

With the unit controller created, you can now fetch the ad content.

3.1 Fetch content

Use a useEffect hook to call classicUnit.fetchContent() once the unit is available.

Fetch Content:

>

In 3.x, fetchContent() was executed on the component either via a ref or automatically using the isAutoFetch prop.

>

Step 4: Create UI

After setting up the logic, you can render the UI component.

4.1 Create TBLClassicUnit

The TBLClassicUnit component now takes the tblClassicPage and the tblClassicUnitController as props to render the ads.

Create TBLClassicUnit:

>

Step 5: Cleanup

It's important to clean up the page instance when the component unmounts to prevent memory leaks.

5.1 Remove Classic Page

Use a useEffect cleanup function to call Taboola.removeClassicPage.

Cleanup:

>

3.x

>

Full Example: ClassicFeed.js

Here is a complete example of a ClassicFeed.js component combining all the steps above.

Full Example:

>

Migrating from RN 3.x

The main difference from version 3.x is that the TBLClassicUnit component is now a "dumb" component that only handles UI. All properties and event handlers are now managed through the TBLClassicPage and the unit controller.

📘

Old JSX from RN 3.x

For reference, here is an example of the old JSX structure from version 3.x. Note how all parameters and callbacks were passed directly as props to the component.

Old JSX from RN 3.x:

>