React Native

22min
Introduction
Welcome to the comprehensive guide on integrating the MomentScience Moments API into your React Native application! This guide will provide you with step-by-step instructions to seamlessly incorporate MomentScience Offers into your app's user experience.

Before Starting
Before diving into the integration process, there are a few preliminary steps you need to take
Obtain an API key
To access the Moments API, you must obtain an API key. Follow the instructions provided to acquire your unique API key.

Learn how to obtain an API key
﻿
Plan Your Implementation
Determine where MomentScience Offers will display within your app.
Decide whether Offers will appear as part of a screen or as full-screen modal overlays.
Specify whether Offers should display once per session or each time a specific section of the app is accessed.
Getting Started
Let's kickstart the integration process by completing the following tasks:

Install Dependency Packages
You'll need to install the necessary dependency packages, Axios and react-native-device-info, to make API calls from your app and obtain device-related information. Run the provided command to install these packages.

Dependency Packages Installation Command
npm install axios react-native-device-info
npm install axios react-native-device-info
﻿
Implement Intent Filter for Android App
To ensure offer links open in an external browser on Android devices, add the provided intent filter to the AndroidManifest.xml file of your app.

XML
  <queries>
    <intent>
      <action android:name="android.intent.action.VIEW" />
      <category android:name="android.intent.category.BROWSABLE" />
      <data android:scheme="https" />
    </intent>
  </queries>
  <queries>
    <intent>
      <action android:name="android.intent.action.VIEW" />
      <category android:name="android.intent.category.BROWSABLE" />
      <data android:scheme="https" />
    </intent>
  </queries>
﻿
Get Your Device User-Agent Parameter
When calling our API, it's important to include the User-Agent parameter. Here's how you can retrieve its value for the device using the react-native-device-info package.

Fetching 'User-Agent' Parameter
import DeviceInfo from 'react-native-device-info';

export const getUserAgent = async () => {
  return await DeviceInfo.getUserAgent();
};

import DeviceInfo from 'react-native-device-info';

export const getUserAgent = async () => {
  return await DeviceInfo.getUserAgent();
};
﻿
Generating User Identifiers
When communicating with the API, it's recommended to include an identifier unique to each user. In the code example provided, we utilize the Device ID retrieved from the 'react-native-device-info' package for this purpose.

To implement this, simply pass an alphanumeric string unique to each user on your system.  to the adpx_fp parameter within the payload of the Fetch Offers call.   
MomentScience uses the adpx_fp value to control how often offers are shown to a user and to prevent the same offer from appearing again when a user opts out.







Generating Unique User ID
import DeviceInfo from 'react-native-device-info';

export const generateUniqueID = () => {
  return Platform.select({
    ios: DeviceInfo.getUniqueId(), // IDFV for iOS
    android: DeviceInfo.getAndroidId(), // AndroidID for Android
    default: 'unknown',
  });
};
import DeviceInfo from 'react-native-device-info';

export const generateUniqueID = () => {
  return Platform.select({
    ios: DeviceInfo.getUniqueId(), // IDFV for iOS
    android: DeviceInfo.getAndroidId(), // AndroidID for Android
    default: 'unknown',
  });
};
﻿
Fetch Offer Data
Utilize axios to retrieve offers from the Moments API. Structure the API call with relevant parameters such as apiKey, query, and payload.


The function below is a "wrapper" for the Moments API. For complete information about the Moments API, please refer to the Moments API documentation.﻿﻿
Call Moments API
import axios from 'axios';
import {firePixel, getUserAgent, openURL} from './Util';

const [offers, setOffers] = useState(null);

// Function to fetch Moment offers from the API
const fetchMomentOffers = async (apiKey, queryParameters, payload) => {
    try {
      let userAgent = payload?.ua ?? (await getUserAgent());

      // Define headers for the API request
      const headers = {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        // User-Agent value can be obtained from the
        // "react-native-device-info" package
        'User-Agent': userAgent,
      };

      const allQueryParameters = {
        api_key: apiKey,
        ...(queryParameters || {}),
      };

      // Remove undefined values from allParams
      if (queryParameters) {
        Object.keys(allQueryParameters).forEach(
          key =>
            allQueryParameters[key] === undefined &&
            delete allQueryParameters[key],
        );
      }

      // Remove undefined values from payload
      if (payload) {
        Object.keys(payload).forEach(
          key => payload[key] === undefined && delete payload[key],
        );
      }
      
      // Generate the query string
      const queryString = Object.keys(allQueryParameters)
        .map(
          key =>
            `${encodeURIComponent(key)}=${encodeURIComponent(
              allQueryParameters[key],
            )}`,
        )
        .join('&');

      // Construct the API URL
      const apiUrl = `http://api.adspostx.com/native/v2/offers.json${
        queryString ? `?${queryString}` : ''
      }`;
      
      // Make a POST request to the API
      const response = await axios.post(apiUrl, payload, {headers});
      return response;
    } catch (error) {
      throw error;
    }
};


const fetchData = async () => {
    const queryParameters = {loyaltyboost: '0', creative: '0'};

    const payload = {
    // 'dev': '1' enables sandbox environment and 
    // returns offers for testing purposes; no activity is recorded
    // Use '1' while testing only and not in production
      'dev': '1',
    
    // Replace the value of 'adpx_fp' with your
    // unique user identifier (customer id, user id, etc)
      'adpx_fp': (await generateUniqueID()).toString(),
    };

    try {
      const result = await fetchMomentOffers(
        '<api_key>', //replace with your generated API Key
        queryParameters,
        payload,
      );
      let offerArray = result.data?.data?.offers;
      setOffers(offerArray);
    } catch (error) {
      console.log('Error in while fetchOffers:', error);
      setOffers(null);
    }
  };
  
import axios from 'axios';
import {firePixel, getUserAgent, openURL} from './Util';

const [offers, setOffers] = useState(null);

// Function to fetch Moment offers from the API
const fetchMomentOffers = async (apiKey, queryParameters, payload) => {
    try {
      let userAgent = payload?.ua ?? (await getUserAgent());

      // Define headers for the API request
      const headers = {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        // User-Agent value can be obtained from the
        // "react-native-device-info" package
        'User-Agent': userAgent,
      };

      const allQueryParameters = {
        api_key: apiKey,
        ...(queryParameters || {}),
      };

      // Remove undefined values from allParams
      if (queryParameters) {
        Object.keys(allQueryParameters).forEach(
          key =>
            allQueryParameters[key] === undefined &&
            delete allQueryParameters[key],
        );
      }

      // Remove undefined values from payload
      if (payload) {
        Object.keys(payload).forEach(
          key => payload[key] === undefined && delete payload[key],
        );
      }
      
      // Generate the query string
      const queryString = Object.keys(allQueryParameters)
        .map(
          key =>
            `${encodeURIComponent(key)}=${encodeURIComponent(
              allQueryParameters[key],
            )}`,
        )
        .join('&');

      // Construct the API URL
      const apiUrl = `http://api.adspostx.com/native/v2/offers.json${
        queryString ? `?${queryString}` : ''
      }`;
      
      // Make a POST request to the API
      const response = await axios.post(apiUrl, payload, {headers});
      return response;
    } catch (error) {
      throw error;
    }
};


const fetchData = async () => {
    const queryParameters = {loyaltyboost: '0', creative: '0'};

    const payload = {
    // 'dev': '1' enables sandbox environment and 
    // returns offers for testing purposes; no activity is recorded
    // Use '1' while testing only and not in production
      'dev': '1',
    
    // Replace the value of 'adpx_fp' with your
    // unique user identifier (customer id, user id, etc)
      'adpx_fp': (await generateUniqueID()).toString(),
    };

    try {
      const result = await fetchMomentOffers(
        '<api_key>', //replace with your generated API Key
        queryParameters,
        payload,
      );
      let offerArray = result.data?.data?.offers;
      setOffers(offerArray);
    } catch (error) {
      console.log('Error in while fetchOffers:', error);
      setOffers(null);
    }
  };
  
﻿

Now you can call the fetchData function anywhere in your app whenever you need to retrieve offer data.
When dev is set to '1', the sandbox environment is enabled for testing purposes only, with no activity recorded in production. In this mode, geo-targeting is ignored for publishers, ensuring that all offers are returned in ad responses for comprehensive testing.
Supporting Functions
In the previous code snippet, several functions are invoked to facilitate various operations. Here's an overview of each function and its purpose: 
firePixelFunction: This function is utilized to send requests to different URLs based on specific conditions:
When a new offer is displayed on the screen.
When a negative Call-To-Action (CTA) like "No thanks" is tapped.
When the user taps on the Close button.
openUrlFunction: This function is invoked when the user interacts positively with the offer image or a Call-To-Action (CTA). It facilitates opening a link in an external browser for further engagement.
firePixel  Function
openURL Function
import axios from 'axios';
import {Linking} from 'react-native';
import DeviceInfo from 'react-native-device-info';

export const openURL = async url => {
  if (url) {
    const supported = await Linking.canOpenURL(url);

    if (supported) {
      await Linking.openURL(url);
    } else {
      console.log(`[AdsPostXAPIDemo] Cannot open URL: ${url}`);
    }
  }
};
import axios from 'axios';
import {Linking} from 'react-native';
import DeviceInfo from 'react-native-device-info';

export const openURL = async url => {
  if (url) {
    const supported = await Linking.canOpenURL(url);

    if (supported) {
      await Linking.openURL(url);
    } else {
      console.log(`[AdsPostXAPIDemo] Cannot open URL: ${url}`);
    }
  }
};
﻿
Implementing UI and Event Beacons
After obtaining the data in the previous step, it's time to design the user interface (UI) and update it according to the data.  We'll also want to ensure that different event beacons are fired as the user engages with the UI.
In this example, we'll showcase a standard modal box that displays a sequence of offers with navigation and a close button.  


<div style="max-width: 400px; position: relative; padding-bottom: calc(120.4102564102564% + 42px); height: 0;"><iframe src="https://play.momentscience.com/embed/clsmc1n1c0tsfpe8p3vu30udy" allow="clipboard-write" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
<div style="max-width: 400px; position: relative; padding-bottom: calc(120.4102564102564% + 42px); height: 0;"><iframe src="https://play.momentscience.com/embed/clsmc1n1c0tsfpe8p3vu30udy" allow="clipboard-write" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
﻿

While this example features a modal/pop-up box, feel free to build any experience you wish.  The primary purpose of this example is to demonstrate navigation between offers as well as how to fire event beacons as the user moves along the offer sequence.

UI Design
We'll split the UI into two main parts.

Part 1: Offer Container UI (OfferContainerView):
This section encompasses the navigation buttons, offer display area, and a close button.
Navigation Buttons: These allow users to move to the previous or next offer.
Close Button: Enables users to close the entire Offer Container UI.
Input Data: Data required to render the Offer UI inside the Offer Container UI.
We'll set up a callback function:
OnCloseOfferCTA: we send a request to the URL defined in beacons?.close is invoked when the user closes an OfferContainerView OR when the user taps on the negative CTA on the last offer presented. When invoked by tapping on the close button, shouldFirePixel will be set to true. When invoked by tapping on the negative CTA on the last offer presented, shouldFirePixel will be set to false.

JS
const [offers, setOffers] = useState(null);
const [isOfferClosed, setOfferClosed] = useState(false);

{!isOfferClosed && offers && offers.length > 0 && (
        <OfferContainerView
          offers={offers}
          OnCloseOfferCTA={(currentIndex, shouldFirePixel) => {
            console.log('[AdsPostXAPIDemo] close button tapped');
            if (shouldFirePixel) {
              firePixel(offers[currentIndex]?.beacons?.close);
            }
            setOfferClosed(true);
          }}
        />
      )}

const [offers, setOffers] = useState(null);
const [isOfferClosed, setOfferClosed] = useState(false);

{!isOfferClosed && offers && offers.length > 0 && (
        <OfferContainerView
          offers={offers}
          OnCloseOfferCTA={(currentIndex, shouldFirePixel) => {
            console.log('[AdsPostXAPIDemo] close button tapped');
            if (shouldFirePixel) {
              firePixel(offers[currentIndex]?.beacons?.close);
            }
            setOfferClosed(true);
          }}
        />
      )}
﻿
﻿
Once the user closes the Offer Container UI, the next time you want to show offers, you need to reload them. To reload offers, you can reset the offer state and fetch new data. Here's how you can do it:
JS
setOfferClosed(false);
fetchData();
setOfferClosed(false);
fetchData();
﻿
 OfferContainerView Overview
Item
Description
currentOffer
Keeps track of the current offer displayed by the OfferView.
currentOfferIndex
Tracks the position of the currently displayed offer in an array of offers.
openURL
Function called when the user taps on the offer image or a positive call-to-action (CTA).
firePixel
Function to send requests to various URLs under different conditions, including rendering new offers.
When a new offer is rendered, a request is sent to the pixel URL which we can get from .pixel
When the user taps on the close button, a request is sent to the `close beacon` URL which we can get it from .beacons?.close

When the user taps on a negative CTA, a request is sent to the beacons?.no_thanks_click URL.

goToNextOffer
responsible for handling actions when want to display next offer.
goToPreviousOffer
responsible for handling actions when want to display prev offer.
OnCloseOfferCTA
callback function which will be invoked when user tap on close button and when last offer has been viewed.
Complete Source Code of OfferContainerView.js
JS
import React, {useState, useEffect} from 'react';
import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
import OfferView from './OfferView';
import {firePixel, openURL} from './Util';

function OfferContainerView({offers, OnCloseOfferCTA}) {
  const [currentOffer, setCurrentOffer] = useState(null);
  const [currentOfferIndex, setCurrentOfferIndex] = useState(0);

  useEffect(() => {
    setCurrentOffer(offers[currentOfferIndex]);
    console.log('[AdsPostXAPIDemo] firing pixel now');
    firePixel(offers[currentOfferIndex]?.pixel);
  }, [currentOfferIndex]);

  const goToNextOffer = shouldClose => {
    console.log('[AdsPostXAPIDemo] Go to next Offer tapped');
    var currentIndex = currentOfferIndex;
    if (currentIndex == offers.length - 1) {
      if (!shouldClose) {
        return;
      }
      OnCloseOfferCTA(currentOfferIndex, shouldClose);
      return;
    }
    currentIndex += 1;
    setCurrentOfferIndex(currentIndex);
  };

  const goToPreviousOffer = () => {
    var currentIndex = currentOfferIndex;
    if (currentIndex == 0) {
      return;
    }
    console.log('[AdsPostXAPIDemo] Go to previous Offer tapped');
    currentIndex -= 1;
    setCurrentOfferIndex(currentIndex);
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity
        onPress={() => {
          OnCloseOfferCTA(currentOfferIndex, true);
        }}
        style={{flexDirection: 'row-reverse', padding: 8}}>
        <Text>Close</Text>
      </TouchableOpacity>
      {currentOffer && (
        <OfferView
          title={currentOffer.title}
          description={currentOffer.description}
          imageURL={currentOffer.image}
          clickURL={currentOffer.click_url}
          imageCTAAction={() => {
            openURL(currentOffer?.click_url);
          }}
          positiveCTA={currentOffer.cta_yes}
          onPositiveCTA={() => {
            console.log('[AdsPostXAPIDemo] positive cta clicked');
            console.log('[AdsPostXAPIDemo] opening a link url');
            openURL(currentOffer?.click_url);
            goToNextOffer(true);
          }}
          negativeCTA={currentOffer.cta_no}
          onNegativeCTA={() => {
            console.log('[AdsPostXAPIDemo] negative cta clicked');
            console.log(
              '[AdsPostXAPIDemo] fire no thanks beacon when negative cta tapped...',
            );
            firePixel(currentOffer?.beacons?.no_thanks_click);
            goToNextOffer(true);
          }}
        />
      )}
      <View style={styles.bottomToolBar}>
        <TouchableOpacity
          onPress={goToPreviousOffer}
          style={styles.navigationButton}>
          <Text>{'<'}</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {
            goToNextOffer(false);
          }}
          style={styles.navigationButton}>
          <Text>{'>'}</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'flex-start',
    flexDirection: 'column',
    borderColor: 'black',
    borderRadius: 8,
    borderWidth: 1,
    margin: 8,
  },
  bottomToolBar: {
    height: 44,
    width: '100%',
    backgroundColor: 'black',
    alignItems: 'center',
    justifyContent: 'space-evenly',
    flexDirection: 'row',
  },
  navigationButton: {
    backgroundColor: 'grey',
    padding: 8,
    paddingStart: 16,
    paddingEnd: 16,
  },
});

export default OfferContainerView;

import React, {useState, useEffect} from 'react';
import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
import OfferView from './OfferView';
import {firePixel, openURL} from './Util';

function OfferContainerView({offers, OnCloseOfferCTA}) {
  const [currentOffer, setCurrentOffer] = useState(null);
  const [currentOfferIndex, setCurrentOfferIndex] = useState(0);

  useEffect(() => {
    setCurrentOffer(offers[currentOfferIndex]);
    console.log('[AdsPostXAPIDemo] firing pixel now');
    firePixel(offers[currentOfferIndex]?.pixel);
  }, [currentOfferIndex]);

  const goToNextOffer = shouldClose => {
    console.log('[AdsPostXAPIDemo] Go to next Offer tapped');
    var currentIndex = currentOfferIndex;
    if (currentIndex == offers.length - 1) {
      if (!shouldClose) {
        return;
      }
      OnCloseOfferCTA(currentOfferIndex, shouldClose);
      return;
    }
    currentIndex += 1;
    setCurrentOfferIndex(currentIndex);
  };

  const goToPreviousOffer = () => {
    var currentIndex = currentOfferIndex;
    if (currentIndex == 0) {
      return;
    }
    console.log('[AdsPostXAPIDemo] Go to previous Offer tapped');
    currentIndex -= 1;
    setCurrentOfferIndex(currentIndex);
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity
        onPress={() => {
          OnCloseOfferCTA(currentOfferIndex, true);
        }}
        style={{flexDirection: 'row-reverse', padding: 8}}>
        <Text>Close</Text>
      </TouchableOpacity>
      {currentOffer && (
        <OfferView
          title={currentOffer.title}
          description={currentOffer.description}
          imageURL={currentOffer.image}
          clickURL={currentOffer.click_url}
          imageCTAAction={() => {
            openURL(currentOffer?.click_url);
          }}
          positiveCTA={currentOffer.cta_yes}
          onPositiveCTA={() => {
            console.log('[AdsPostXAPIDemo] positive cta clicked');
            console.log('[AdsPostXAPIDemo] opening a link url');
            openURL(currentOffer?.click_url);
            goToNextOffer(true);
          }}
          negativeCTA={currentOffer.cta_no}
          onNegativeCTA={() => {
            console.log('[AdsPostXAPIDemo] negative cta clicked');
            console.log(
              '[AdsPostXAPIDemo] fire no thanks beacon when negative cta tapped...',
            );
            firePixel(currentOffer?.beacons?.no_thanks_click);
            goToNextOffer(true);
          }}
        />
      )}
      <View style={styles.bottomToolBar}>
        <TouchableOpacity
          onPress={goToPreviousOffer}
          style={styles.navigationButton}>
          <Text>{'<'}</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {
            goToNextOffer(false);
          }}
          style={styles.navigationButton}>
          <Text>{'>'}</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'flex-start',
    flexDirection: 'column',
    borderColor: 'black',
    borderRadius: 8,
    borderWidth: 1,
    margin: 8,
  },
  bottomToolBar: {
    height: 44,
    width: '100%',
    backgroundColor: 'black',
    alignItems: 'center',
    justifyContent: 'space-evenly',
    flexDirection: 'row',
  },
  navigationButton: {
    backgroundColor: 'grey',
    padding: 8,
    paddingStart: 16,
    paddingEnd: 16,
  },
});

export default OfferContainerView;
﻿
Part 2: Offer UI (OfferView):
OfferView Component Overview
The OfferView component is crucial for rendering individual offer units and managing various interactions. The primary responsibility of OfferView is to render an individual offer unit.

Each OfferView has the following parts:
Offer Part
Description
title
Represents the title of the offer. .title
imageURL
Represents the URL of the offer image. .image
description
Represents the description of the offer. .description
clickURL
Represents the URL to hit when the positive CTA is tapped or when the offer image is tapped.
onImageCTA
Represents a callback function triggered when the offer image is tapped.
We need to fetch the click URL and then open it in an external browser, which is handled by the openURL function.
positiveCTA
Represents the text for the positive call-to-action (CTA). .cta_yes
onPositiveCTA
Represents a callback function triggered when the positive CTA is tapped. 
In this callback function:
We open the URL stored in .click_url in an external browser.
We move the user to the next offer by invoking goToNextOffer.
negativeCTA
Represents the text for the negative CTA. .cta_no
onNegativeCTA
Represents a callback function triggered when the negative CTA is tapped. 
In this callback function:
We send a request using the URL stored in .beacons?.no_thanks_click.
We move the user to the next offer by calling goToNextOffer.
﻿
Complete Source Code of OfferView.js
 OfferView.js Source Code
import React, {useEffect} from 'react';
import {View, StyleSheet, Text, Image, TouchableOpacity} from 'react-native';

function OfferView({
  title,
  imageURL,
  description,
  clickURL,
  onImageCTA,
  positiveCTA,
  onPositiveCTA,
  negativeCTA,
  onNegativeCTA,
}) {
  return (
    <View style={styles.container}>
      {title && <Text style={styles.title}>{title}</Text>}
      {imageURL && (
        <TouchableOpacity onPress={onImageCTA}>
          <Image
            source={{uri: `${imageURL}`}}
            resizeMode="contain"
            style={styles.image}
          />
        </TouchableOpacity>
      )}
      {description && <Text style={styles.description}>{description}</Text>}
      <View style={styles.ctaContainer}>
        {positiveCTA && (
          <TouchableOpacity
            onPress={onPositiveCTA}
            style={[styles.cta, {backgroundColor: '#3565A9'}]}>
            <Text style={styles.ctaText}>{positiveCTA}</Text>
          </TouchableOpacity>
        )}
        {negativeCTA && (
          <TouchableOpacity
            onPress={onNegativeCTA}
            style={[styles.cta, {backgroundColor: 'grey'}]}>
            <Text style={styles.ctaText}>{negativeCTA}</Text>
          </TouchableOpacity>
        )}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'transparent',
  },
  title: {
    textAlign: 'center',
    color: 'white',
    backgroundColor: '#3565A9',
    fontSize: 20,
    padding: 8,
    marginBottom: 16,
  },
  image: {
    height: 150,
    width: '100%',
  },
  description: {
    textAlign: 'center',
    padding: 8,
    fontSize: 16,
    marginBottom: 16,
  },
  ctaContainer: {
    flexDirection: 'column',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  cta: {
    padding: 16,
    marginBottom: 16,
    borderRadius: 8,
  },
  ctaText: {
    color: 'white',
  },
});

export default OfferView;

import React, {useEffect} from 'react';
import {View, StyleSheet, Text, Image, TouchableOpacity} from 'react-native';

function OfferView({
  title,
  imageURL,
  description,
  clickURL,
  onImageCTA,
  positiveCTA,
  onPositiveCTA,
  negativeCTA,
  onNegativeCTA,
}) {
  return (
    <View style={styles.container}>
      {title && <Text style={styles.title}>{title}</Text>}
      {imageURL && (
        <TouchableOpacity onPress={onImageCTA}>
          <Image
            source={{uri: `${imageURL}`}}
            resizeMode="contain"
            style={styles.image}
          />
        </TouchableOpacity>
      )}
      {description && <Text style={styles.description}>{description}</Text>}
      <View style={styles.ctaContainer}>
        {positiveCTA && (
          <TouchableOpacity
            onPress={onPositiveCTA}
            style={[styles.cta, {backgroundColor: '#3565A9'}]}>
            <Text style={styles.ctaText}>{positiveCTA}</Text>
          </TouchableOpacity>
        )}
        {negativeCTA && (
          <TouchableOpacity
            onPress={onNegativeCTA}
            style={[styles.cta, {backgroundColor: 'grey'}]}>
            <Text style={styles.ctaText}>{negativeCTA}</Text>
          </TouchableOpacity>
        )}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'transparent',
  },
  title: {
    textAlign: 'center',
    color: 'white',
    backgroundColor: '#3565A9',
    fontSize: 20,
    padding: 8,
    marginBottom: 16,
  },
  image: {
    height: 150,
    width: '100%',
  },
  description: {
    textAlign: 'center',
    padding: 8,
    fontSize: 16,
    marginBottom: 16,
  },
  ctaContainer: {
    flexDirection: 'column',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  cta: {
    padding: 16,
    marginBottom: 16,
    borderRadius: 8,
  },
  ctaText: {
    color: 'white',
  },
});

export default OfferView;
﻿
Explore the MomentScience Example on GitHub by visiting the provided link. Download the example, then run it on your machine to see it in action.



﻿
📢 If you're running into any issues while going through the integration process, feel free to contact us at [email protected].
﻿
Item	Description
currentOffer	Keeps track of the current offer displayed by the OfferView.
currentOfferIndex	Tracks the position of the currently displayed offer in an array of offers.
openURL	Function called when the user taps on the offer image or a positive call-to-action (CTA).
firePixel	Function to send requests to various URLs under different conditions, including rendering new offers. When a new offer is rendered, a request is sent to the pixel URL which we can get from .pixel When the user taps on the close button, a request is sent to the `close beacon` URL which we can get it from .beacons?.close When the user taps on a negative CTA, a request is sent to the beacons?.no_thanks_click URL.
goToNextOffer	responsible for handling actions when want to display next offer.
goToPreviousOffer	responsible for handling actions when want to display prev offer.
OnCloseOfferCTA	callback function which will be invoked when user tap on close button and when last offer has been viewed.
Offer Part	Description
title	Represents the title of the offer. .title
imageURL	Represents the URL of the offer image. .image
description	Represents the description of the offer. .description
clickURL	Represents the URL to hit when the positive CTA is tapped or when the offer image is tapped.
onImageCTA	Represents a callback function triggered when the offer image is tapped. We need to fetch the click URL and then open it in an external browser, which is handled by the openURL function.
positiveCTA	Represents the text for the positive call-to-action (CTA). .cta_yes
onPositiveCTA	Represents a callback function triggered when the positive CTA is tapped. In this callback function: We open the URL stored in .click_url in an external browser. We move the user to the next offer by invoking goToNextOffer.
negativeCTA	Represents the text for the negative CTA. .cta_no
onNegativeCTA	Represents a callback function triggered when the negative CTA is tapped. In this callback function: We send a request using the URL stored in .beacons?.no_thanks_click. We move the user to the next offer by calling goToNextOffer.
Updated 21 Sep 2024
Did this page help you?
Mobile
Perkswall