@revcontent/react-native-sdk v1.0.2

@revcontent/react-native-sdk

The Revcontent React Native SDK allows publishers to display widgets in their native apps.

Installation

npm i @revcontent/react-native-sdk react-native-webview

Usage

Non TypeScript Implementations

For implementations that don't use TypeScript, you can import the component and then declare it as follows:

import RevcontentNativeWidget from '@revcontent/react-native-sdk';

const widgetRef = useRef(null);
const onScroll = ({ nativeEvent }) => widgetRef.current?.onScroll(nativeEvent);

<ScrollView
  onScroll={onScroll}
  scrollEventThrottle={100}>
  <RevcontentNativeView
    ref={widgetRef}
    widgetId={XXXXXX}
    pubId={XXXXXX}
    backgroundColor="white"
    siteUrl="https://app.yoursite.com"
  />
</ScrollView>;

TypeScript Implementations

For TypeScript, the usage is very similar with the exception that you will need to also import the RevcontentNativeWidgetForwardRefType to properly type your ref:

import RevcontentNativeWidget, { RevcontentNativeWidgetForwardRefType } from '@revcontent/react-native-sdk';

const widgetRef = useRef<RevcontentNativeWidgetForwardRefType>(null);
const onScroll = ({ nativeEvent }: NativeSyntheticEvent<NativeScrollEvent>) => widgetRef.current?.onScroll(nativeEvent);


<ScrollView
  onScroll={onScroll}
  scrollEventThrottle={100}>
  <RevcontentNativeView
    ref={widgetRef}
    widgetId={XXXXXX}
    pubId={XXXXXX}
    backgroundColor="white"
    siteUrl="https://app.yoursite.com"
  />
</ScrollView>;

Properties

The Revcontent native sdk widget exposes 5 properties:

ref

A ref passed into the component that handles consuming scroll event data for visibility related logic.

widgetId

The numerical value of the widget ID to be displayed.

pubId

The numerical ID of your publisher account associated with your widget.

backgroundColor

Overrides the default background color of the widget view. Background color defaults to white if not set.

siteUrl

The base URL used to identify requests for content.