React Native Component Guidelines

Integration guide


Installation

Using npm:

npm install --save react-native-outbrain

Using yarn:

yarn add react-native-outbrain


Usage

Import Outbrain Module

import { OutbrainWidget } from 'react-native-outbrain'

OutbrainWidget Component

<OutbrainWidget
  url={"http://mobile-demo.outbrain.com"}
  widgetId={"MB_2"}
  installationKey={"NANOWDGT01"}
  userId={this.state.idfa}
/>

Getting IDFA

Using react-native-idfa, get the user idfa to pass to the userId prop:

import { IDFA } from 'react-native-idfa';

componentDidMount() {
  IDFA.getIDFA().then((idfa) => {
    this.setState({ idfa, });
  })
  .catch((e) => {
    console.error(e);
  });
}


Displaying a SmartFeed widget

In order to display a SmartFeed widget, follow those steps:

Save a reference to the OutbrainWidget

Save a reference to the OutbrainWidget to use it for loading more items to the feed:

<OutbrainWidget
  ...
  ref={input => this.outbrainWidget = input}
/>

Detect scroll to bottom in your ScrollView

Detect scroll to bottom in your ScrollView to load more items to the OutbrainWidget feed when reaching the bottom of the screen, for example:

isCloseToBottom ({layoutMeasurement, contentOffset, contentSize}) {
  const paddingToBottom = 50;
  return layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom;
};

<ScrollView
  onMomentumScrollEnd={({nativeEvent}) => {
    if (this.outbrainWidget && this.isCloseToBottom(nativeEvent)) {
      this.outbrainWidget.loadMore() // load more items to OutbrainWidget feed
    }
  }
>


Advanced

GDPR \ CCPA Support

Use the following props to pass OutbrainWidget the GDPR or CCPA string from your app code.

For GDPR consent V2 use consentV2 For CCPA string use ccpaString. For example:

<OutbrainWidget
  ...
  consentV2={"consentV2"}
  ccpaString={"ccpaString"}
/>

Style the WebView

You can pass a style for the WebView to customize its style (width, add padding, etc.) For example:

<OutbrainWidget
  ...
  style={{width: screenWidth * 0.9}}
/>

Dark mode support

To enable dark mode, set darkMode prop to true:

<OutbrainWidget
  ...
  darkMode={true}
/>

Organic recommendation click listener

Using the onOrganicClick prop, you can set a callback to get the organic url, for example:

<OutbrainWidget
  ...
  onOrganicClick={orgUrl => console.log("In App - click on: " + orgUrl)}
/>