outbrain-inc/outbrain-react-native-component

Outbrain React Native Demo

Project used this tutorial for referene.

use npm pack to test locally

See the Release Notes for the latest version details.

Installation

Using npm:

npm install --save react-native-outbrain

or using yarn:

yarn add react-native-outbrain

Widget Settings (AMPM)

Custom Clicks Handler (982) = enable

Must be set so all click will be passed to the native function. if a feed is in use then change this setting to all the feed child widgets

Feed Manual Chunk Fetch (919) = enable

On ReactNative the native scroll will not work, managing the fetching of next cards is done from the app.

In general please refer to this Outbrain Confluence page

Example Apps - Download Links

iOS Demo download link

Android Demo download link

Usage

Import Outbrain Module

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

Example for displaying a regular widget

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

Example for displaying a Smartfeed widget

<OutbrainWidget
  url={"http://mobile-demo.outbrain.com"}
  widgetId={"MB_1"}
  installationKey={"NANOWDGT01"}
  ref={input => this.outbrainWidget = input}
  userId={this.state.IDFA}
/>

Example for detect scroll to bottom

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

<ScrollView
  style={styles.container}
  showsVerticalScrollIndicator={false}
  onMomentumScrollEnd={({nativeEvent}) => {
    if (this.outbrainWidget && this.isCloseToBottom(nativeEvent)) {
      console.log("onMomentumScrollEnd - isCloseToBottom")
      this.outbrainWidget.loadMore()
    }
  }}>

GDPR \ CCPA Support

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

For GDPR consent V1 use consentV1 For GDPR consent V2 use consentV2 For CCPA string use ccpaString

<OutbrainWidget
                url={"http://mobile-demo.outbrain.com"}
                widgetId={"MB_1"}
                installationKey={"NANOWDGT01"}
                consentV1={"1111111"}
                consentV2={"2222222"}
                ccpaString={"3333333"}
                style={{width: screenWidth*1}}
                ref={input => this.outbrainWidget = input}
                userId={this.state.IDFA}
              />

Example for getting IDFA

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

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

Example for organic click custom listener

<OutbrainWidget
  url={"http://mobile-demo.outbrain.com"}
  widgetId={"MB_1"}
  installationKey={"NANOWDGT01"}
  onOrganicClick={orgUrl => console.log("In App - click on: " + orgUrl)}
  style={{width: screenWidth*1}}
  ref={input => this.outbrainWidget = input}
  userId={this.state.IDFA}
/>

Dark mode support

To enable dark mode, set darkMode in props to true.

<OutbrainWidget
  url={"http://mobile-demo.outbrain.com"}
  widgetId={"MB_1"}
  installationKey={"NANOWDGT01"}
  onOrganicClick={orgUrl => console.log("In App - click on: " + orgUrl)}
  style={{width: screenWidth*1}}
  ref={input => this.outbrainWidget = input}
  userId={this.state.IDFA}
  darkMode={true}
/>

Development Setup

Edit package.json with "react-native-outbrain": "../../"

Test a new version

1. update version in package.json
2. run npm pack --> creates eact-native-outbrain-1.0.3.tgz for example.
3. in /examples/examples/DemoProject yarn add ../../react-native-outbrain-1.0.3.tgz

Release a new version

1. Edit version in package.json in root dir
2. npm login
3. npm publish