React Native

25min
Overview
This guide explains how to integrate the Moments API into your React Native application. It covers setup, fetching offers, implementing the UI, and tracking user interactions. Follow these steps to integrate MomentScience offers into your app with minimal overhead.
Prerequisites
Before diving into the integration process, there are a few preliminary steps you need to take
Obtain an API key
Before you start the integration, you must acquire a unique API key. Follow the instructions provided here to obtain your key.
Check Version Requirements
Ensure your project is using React 18.0.0 or higher and React Native 0.73 or higher.
Verify that all dependencies are compatible with these versions.
Plan Your Implementation:
Identify Offer Display Areas:
Decide whether offers will appear as part of a screen or as full-screen modal overlays.
Frequency of Display:
Determine if offers should be shown once per session or every time a specific section is accessed.
Getting Started
Install Dependency Packages
To enable API communication and device information retrieval, install the following dependencies:
﻿Axios: for making HTTP requests. 
﻿react-native-device-info: for accessing device details.
﻿react-native-config: for managing environment variables via a .env file. 
Installation Command
npm install axios@latest react-native-device-info@latest react-native-config@latest
npm install axios@latest react-native-device-info@latest react-native-config@latest
﻿
Implement Android Intent Filter
Add the following intent filter to your AndroidManifest.xml to open offer links in an external browser:
AndroidManifest.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>
﻿
Fetch Offers
The Moments API provides offer data based on query parameters and payload inputs. To retrieve offers, implement a function that calls the Moments API with the necessary parameters.
For complete details on Moments API, refer to the Moments API documentation.
The function below acts as a wrapper for the Moments API, handling query parameters and headers. Once implemented, you can call the fetchData function anywhere in your app to retrieve offer data.
Fetch and Process Offers Data
Moments API Wrapper Function
const [offers, setOffers] = useState(null);
const [isOfferClosed, setOfferClosed] = useState(false);

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

  const payload = {
    // 'dev' mode: set to '1' for testing (ensure '0' in production)
    dev: '1',
    // Unique user identifier; replace with your own logic as needed
    adpx_fp: (await generateUniqueID()).toString(),
  };

  try {
    const apiKey = Config.API_KEY;
    const response = await fetchMomentOffers(apiKey, queryParameters, payload);

    // Safely extract the offers array from the response
    const offers = response?.data?.data?.offers ?? [];
    setOffers(offers.length ? offers : null); // Handle empty array scenario
  } catch (error) {
    if (__DEV__) {
      console.error('Error while fetching offers:', error);
    }
    setOffers(null); // Clear offers on error
  }
};

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

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

  const payload = {
    // 'dev' mode: set to '1' for testing (ensure '0' in production)
    dev: '1',
    // Unique user identifier; replace with your own logic as needed
    adpx_fp: (await generateUniqueID()).toString(),
  };

  try {
    const apiKey = Config.API_KEY;
    const response = await fetchMomentOffers(apiKey, queryParameters, payload);

    // Safely extract the offers array from the response
    const offers = response?.data?.data?.offers ?? [];
    setOffers(offers.length ? offers : null); // Handle empty array scenario
  } catch (error) {
    if (__DEV__) {
      console.error('Error while fetching offers:', error);
    }
    setOffers(null); // Clear offers on error
  }
};
﻿
Refer to this complete sample source code for an API call demonstration.
 Implement UI and Event Beacons
After retrieving the offer data, the next step is to develop the user interface (UI) and integrate event beacons to track user interactions. This section covers:
Designing the offer display UI
Implementing navigation between offers
Tracking user engagement with event beacons
<div style="position: relative; box-sizing: content-box; max-height: 80vh; max-height: 80svh; width: 100%; aspect-ratio: 0.46208530805687204; padding: 40px 0 40px 0;"><iframe src="https://play.momentscience.com/embed/clsmc1n1c0tsfpe8p3vu30udy?embed_v=2" loading="lazy" title="Standard React Native UI" 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="position: relative; box-sizing: content-box; max-height: 80vh; max-height: 80svh; width: 100%; aspect-ratio: 0.46208530805687204; padding: 40px 0 40px 0;"><iframe src="https://play.momentscience.com/embed/clsmc1n1c0tsfpe8p3vu30udy?embed_v=2" loading="lazy" title="Standard React Native UI" allow="clipboard-write" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
﻿
Embed Offer UI 
The offer UI can be embedded using an iframe. The following example sets the iframe height to adjust automatically:
This example features a modal, but you can implement any UI format that fits your application.
Build the Offer Container UI 
The Offer Container UI is responsible for displaying multiple offers in a sequence. It includes:
Navigation Buttons: Allow users to move between offers.
Close Button: Closes the offer container.
Offer Display Area: Renders the current offer.
This component maintains the state of the current offer and handles user interactions such as button clicks and event beacon tracking.
Define the OfferContainerView Component
The OfferContainerViewcomponent manages the state of offers and user interactions.
Prop
Description
offers
An array of offer objects containing title, description, image, and CTA buttons.
OnCloseOfferCTA
Callback function triggered when the OfferContainerview is closed. It receives: 
- currentOfferIndex: Index of the displayed offer. 
- shouldFirePixel: A boolean indicating whether to call firePixel(). (See Supporting Functions for details.) 
Handle the Close Event
The OnCloseOfferCTAfunction is triggered when:
The user closes the OfferContainerView.
The user taps the negative CTA on the last offer.
It sends a request to the URL defined in beacons?.close before closing the view.
For more details on event tracking, refer to the "Supporting Functions" section.
Handling the Close Event Code Example
const [offers, setOffers] = useState(null);
const [isOfferClosed, setOfferClosed] = useState(false);

{
  !isOfferClosed && offers?.length > 0 && (
    <OfferContainerView
      offers={offers}
      OnCloseOfferCTA={(currentIndex, shouldFirePixel) => {
        if (__DEV__) {
          console.log("[MomentScienceAPIDemo] Close button tapped");
        }
        if (shouldFirePixel && offers[currentIndex]?.beacons?.close) {
          firePixel(offers[currentIndex].beacons.close);
        }
        setOfferClosed(true);
      }}
    />
  );
}
const [offers, setOffers] = useState(null);
const [isOfferClosed, setOfferClosed] = useState(false);

{
  !isOfferClosed && offers?.length > 0 && (
    <OfferContainerView
      offers={offers}
      OnCloseOfferCTA={(currentIndex, shouldFirePixel) => {
        if (__DEV__) {
          console.log("[MomentScienceAPIDemo] Close button tapped");
        }
        if (shouldFirePixel && offers[currentIndex]?.beacons?.close) {
          firePixel(offers[currentIndex].beacons.close);
        }
        setOfferClosed(true);
      }}
    />
  );
}
﻿
View the full OfferContainerView.js source code on GitHub from here. ﻿
Implement Offer UI 
Each individual offer is displayed using the OfferViewcomponent. This component includes an image, title, description, and two CTA buttons.
Define the OfferView Component
Prop
Description
title
The offer title.
imageURL
The URL of the offer image.
description
A detailed description of the offer.
clickURL
The URL to open when either the offer image or the positive CTA is tapped.
positiveCTA
Text for the positive CTA button.
onImageCTA 
A callback function triggered when the offer image is tapped. This function fetches the clickURL and opens it in an external browser using the openURLfunction.
onPositiveCTA
A callback function invoked when the positive CTA is tapped. It performs two actions: 
• Opens the URL stored in .click_urlin an external browser. 
• Advances to the next offer by invoking goToNextOffer(). 
negativeCTA
The text label for the negative call-to-action button,
onNegativeCTA
A callback function executed when the negative CTA is tapped. It sends a request using the URL specified in .beacons?.no_thanks_click and then advances to the next offer by calling goToNextOffer().
Handling Offer Interactions Code
<OfferView
  title={currentOffer.title}
  description={currentOffer.description}
  imageURL={currentOffer.image}
  clickURL={currentOffer.click_url}
  onImageCTA={() => openURL(currentOffer?.click_url)}
  positiveCTA={currentOffer.cta_yes}
  onPositiveCTA={() => {
    if (__DEV__) {
      console.log("[MomentScienceAPIDemo] Positive CTA clicked");
    }
    openURL(currentOffer?.click_url);
    goToNextOffer(true);
  }}
  negativeCTA={currentOffer.cta_no}
  onNegativeCTA={() => {
    if (__DEV__) {
      console.log("[MomentScienceAPIDemo] Negative CTA clicked");
    }
    firePixel(currentOffer?.beacons?.no_thanks_click);
    goToNextOffer(true);
  }}
/>;
<OfferView
  title={currentOffer.title}
  description={currentOffer.description}
  imageURL={currentOffer.image}
  clickURL={currentOffer.click_url}
  onImageCTA={() => openURL(currentOffer?.click_url)}
  positiveCTA={currentOffer.cta_yes}
  onPositiveCTA={() => {
    if (__DEV__) {
      console.log("[MomentScienceAPIDemo] Positive CTA clicked");
    }
    openURL(currentOffer?.click_url);
    goToNextOffer(true);
  }}
  negativeCTA={currentOffer.cta_no}
  onNegativeCTA={() => {
    if (__DEV__) {
      console.log("[MomentScienceAPIDemo] Negative CTA clicked");
    }
    firePixel(currentOffer?.beacons?.no_thanks_click);
    goToNextOffer(true);
  }}
/>;
﻿
View the full OfferView.js. source code on GitHub from here. ﻿
Supporting Functions
Device Information Functions 
Get Device User-Agent
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 thereact-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
To ensure effective tracking and offer management, the API requires a unique identifier for each user. This identifier is passed as the adpx_fpparameter in the Fetch Offers API request.
MomentScience uses adpx_fpto:
Control the frequency of offer displays for a user.
Prevent the same offer from appearing again when a user opts out.
The following function retrieves a device-specific unique identifier using the react-native-device-info package:
Generating User Identifiers
import DeviceInfo from 'react-native-device-info';
import { Platform } from 'react-native';

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

export const generateUniqueID = () => {
  return Platform.select({
    ios: DeviceInfo.getUniqueId(),    // Uses IDFV for iOS
    android: DeviceInfo.getAndroidId(), // Uses AndroidID for Android
    default: 'unknown',
  });
};
﻿
For iOS: Uses getUniqueId(), which returns the Identifier for Vendors (IDFV).
For Android: Uses getAndroidId(), which retrieves the Android ID.
For other platforms: Returns "unknown" as a fallback.
This unique ID should be passed as the adpx_fp parameter in the Fetch Offers API request to maintain consistent tracking across sessions.
Event Tracking Functions
firePixel  
Purpose:
The firePixel function is responsible for sending tracking requests (pixels) under specific conditions to log user interactions. It sends HTTP requests to predefined beacon URLs when:
OfferContainerView is closed: Sends a request to beacons.close.
An offer is displayed: Sends a request to .pixel
Negative CTA is tapped: Sends a request to beacons.no_thanks_click.
firePixel  Function
import axios from 'axios';
import {Linking} from 'react-native';
import DeviceInfo from 'react-native-device-info';

export const firePixel = url => {
  if (url) {
    if (__DEV__) {
      console.log('[MomentScienceAPIDemo] Inside fire pixel');
    }
    
    axios
      .get(url)
      .then(response => {
        if (__DEV__) {
          console.log('[MomentScienceAPIDemo] fire pixel Success:', response.data);
        }
      })
      .catch(error => {
        console.error('fire pixel Error:', error);
      });
  }
};
import axios from 'axios';
import {Linking} from 'react-native';
import DeviceInfo from 'react-native-device-info';

export const firePixel = url => {
  if (url) {
    if (__DEV__) {
      console.log('[MomentScienceAPIDemo] Inside fire pixel');
    }
    
    axios
      .get(url)
      .then(response => {
        if (__DEV__) {
          console.log('[MomentScienceAPIDemo] fire pixel Success:', response.data);
        }
      })
      .catch(error => {
        console.error('fire pixel Error:', error);
      });
  }
};
﻿
openURL 
Purpose:
Opens a specified URL in an external browser. This is used when the user taps the offer image or a positive CTA.
Usage:
Call openURL(url) with the target URL. The function first checks if the URL can be opened and then launches it in the device’s browser.
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 {
      if (__DEV__) {
        console.log(`[MomentScienceAPIDemo] 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 {
      if (__DEV__) {
        console.log(`[MomentScienceAPIDemo] Cannot open URL: ${url}`);
      }
    }
  }
};
﻿
Reloading Offers 
Once the user closes the Offer Container UI, the next time you want to show offers, you need to reload them. You can reset the offer state and fetch new data to reload offers.
Reload Offers
// To reload offers
setOfferClosed(false);
fetchData();
// To reload offers
setOfferClosed(false);
fetchData();
﻿
Explore the MomentScience Example on GitHub. Download and run it locally 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].
Prop	Description
offers	An array of offer objects containing title, description, image, and CTA buttons.
OnCloseOfferCTA	Callback function triggered when the OfferContainerview is closed. It receives: - currentOfferIndex: Index of the displayed offer. - shouldFirePixel: A boolean indicating whether to call firePixel(). (See Supporting Functions for details.)
Prop	Description
title	The offer title.
imageURL	The URL of the offer image.
description	A detailed description of the offer.
clickURL	The URL to open when either the offer image or the positive CTA is tapped.
positiveCTA	Text for the positive CTA button.
onImageCTA	A callback function triggered when the offer image is tapped. This function fetches the clickURL and opens it in an external browser using the openURLfunction.
onPositiveCTA	A callback function invoked when the positive CTA is tapped. It performs two actions: • Opens the URL stored in .click_urlin an external browser. • Advances to the next offer by invoking goToNextOffer().
negativeCTA	The text label for the negative call-to-action button,
onNegativeCTA	A callback function executed when the negative CTA is tapped. It sends a request using the URL specified in .beacons?.no_thanks_click and then advances to the next offer by calling goToNextOffer().
Updated 25 Feb 2025
Did this page help you?
Mobile
Perkswall