AndroidiOSAnnouncementsSupport Forum
SDK DocumentationRecipesAnnouncementsSupport Forum
AndroidiOSAnnouncementsSupport Forum
SDK Documentation

Advanced Options

React Native Plugin 3.x > Advanced Options

Suggest Edits

Additional methods

refresh()

Fetches new recommendations.

The scope is determined by the object invoking the method:

ObjectExampleScope
Pagepage.refresh();Fetches new recommendations for all units under that page.
UnitunitRef.current?.refresh();Fetches new recommendations for the given unit only.
----
Requires that you use the useNodeRef hook and keep a reference to the Unit.
See: Fetching content manually

Sample code snippets:

<Button
  title={'Refresh Page'}
  onPress={() => {
    page.refresh();
	}}
/>

<Button
  title={'Refresh Unit'}
  onPress={() => {
    unitRef.current?.refresh();
	}}
/>

Fetching content manually

🚧

To cater for special scenarios, you may want to fetch (or refresh) content manually

This flow is more advanced, and replaces the steps outlined under Create unit Instances.

For each Taboola Unit on the page:

  1. Implement the Taboola useNodeRef hook, and invoke fetchContent to fetch Taboola content:
// Fetch content - without keeping a reference to the Unit.
const [setUnitRef] = useNodeRef((unit) => {
   unit.fetchContent();
});

// Fetch content - and keep a reference to the Unit (`unitRef`).
// You can use that reference elsewhere in your code, to fetch or refresh content.
const [setUnitRef, unitRef] = useNodeRef((unit)=>{
  unit.fetchContent()
});

📘

Depending on your specific needs, you can optionally keep a reference to the Unit.

Refer to each of the code snippets, above.

  1. Create a <TBLClassicUnit> component. (This represents a Taboola Widget or Feed.)

📘

Include a reference to setUnitRef.

<View style={{ flex:1 }}>
  <TBLClassicUnit
  publisherParams={{
    classicPageId: pageId,
    placement:<placement>,                    
    mode:<mode>,
    placementType: <placementType>,
  }}
  ref={setUnitRef}
  style={{
    width: '100%',
    flex: 1,
  }}/>
</View>

<View style={{ flex:1 }}>
  <TBLClassicUnit
  publisherParams={{
    classicPageId: page?.pageId,                    
    placement:”Below Article Thumbnails Limited-20”,
    mode:”thumbs-feed-01”,
    placementType: TBL_PLACEMENT_TYPE.FEED,
  }}
  ref={setUnitRef}
  style={{
    width: '100%',
    flex: 1,
  }}/>
</View>

📘

Params

  • placement - The placement name, as provided by Taboola - e.g. "<<placementNameLimited20>>".
  • mode - The UI Mode ID of the unit, as provided by Taboola - e.g. "<<mode>>".
  • placementType - The unit type (see below for possible values).
placementTypeDescription
TBL_PLACEMENT_TYPE.PAGE_MIDDLEReturn a mid-page Widget.
TBL_PLACEMENT_TYPE.PAGE_BOTTOMReturn a page bottom Widget.
TBL_PLACEMENT_TYPE.FEEDReturns a Taboola Feed.

🚧

Multiple Taboola units

With v3 of the Taboola plugin, you can add multiple Taboola units to the same screen (without loading them sequentially).

See the code sample at the end of this section.

<Button
  title={'Refresh Page'}
  onPress={() => {
    page.refresh();
	}}
/>

<Button
  title={'Refresh Unit'}
  onPress={() => {
    unitRef.current?.refresh();
	}}
/>

Code sample

🚧

Always use your own param values, as provided by Taboola.

import {
    Taboola,
    TBL_PLACEMENT_TYPE,
    TBLClassicUnit,
    useGetPageId, useNodeRef
} from "@taboola/react-native-plugin-3x";


// Taboola page
const page = useMemo(
  () =>
    Taboola.getClassicPage(
      'https://www.example.com/articles?id=123',
      'article'
    ),
  []
);

// Set page to 'dark mode'
page.setPageExtraProperties({ darkMode: 'true' });


//Taboola hooks
const [pageId] = useGetPageId(page);

const [setUnitRef] = useNodeRef((unit) => {
  unit.fetchContent();
});
const [setUnitRef2] = useNodeRef((unit) => {
  unit.fetchContent();
});


// 'Page' object cleanup
useEffect(() => {
  return () => {
    page.remove();
  };
}, [page]);


// TBLClassicUnit components
<>


  <TBLClassicUnit
    ref={setUnitRef}
    publisherParams={{
      classicPageId: pageId,
      placement: 'Mid Article',
      mode: 'alternating-widget-with-video-1x1',
      placementType: TBL_PLACEMENT_TYPE.PAGE_MIDDLE,
    }}
    style={{
      backgroundColor: GREEN,
      flex: 1,
    }}
  />

  <TBLClassicUnit
    ref={setUnitRef2}
    publisherParams={{
      classicPageId: pageId,
      placement: 'Below Article Thumbnails Limited-20',
      mode: 'thumbs-feed-01',
      placementType: TBL_PLACEMENT_TYPE.FEED,
    }}
    style={{
      backgroundColor: RED,
      flex: 1,
    }}
  />
</>

🚧

Multiple Taboola units

With v3 of the Taboola plugin, you can add multiple Taboola units to the same screen (without loading them sequentially).

Updated over 1 year ago