React Native SDK Setup

The Monetai React Native SDK helps you effectively implement promotions by predicting purchasers within your app. This document provides step-by-step guidance from SDK installation to initialization and usage of key features.

Prerequisites

• React Native 0.73 or higher
• iOS: iOS 13.0 or higher
• Android: API Level 24 or higher
  • Android is supported from SDK version 0.2.9.

---

1. SDK Installation

yarn

yarn add @hayanmind/monetai-react-native

npm

npm install @hayanmind/monetai-react-native

iOS Additional Setup

Run the following command in your iOS project to install native modules:

cd ios && pod install

App Rebuild

After installing the SDK, you need to rebuild your app:

iOS

npx react-native run-ios

Android

npx react-native run-android

---

2. SDK Initialization

Basic Initialization

Initialize the SDK when your app starts. Set it up in App.js or your main component as follows:

import MonetaiSDK from "@hayanmind/monetai-react-native";

// Initialize when app starts
const initializeMonetai = async () => {
  try {
    const result = await MonetaiSDK.initialize({
      sdkKey: "YOUR_SDK_KEY", // SDK key issued from Monetai dashboard
      userId: "USER_ID", // Unique user ID (required)
      useStoreKit2: true, // Use StoreKit2 on iOS 15+ devices (recommended)
    });

    console.log("Monetai SDK initialization completed:", result);
  } catch (error) {
    console.error("Monetai SDK initialization failed:", error);
  }
};

// Call in App.js
useEffect(() => {
  initializeMonetai();
}, []);

API Reference: MonetaiSDK.initialize()

Parameters

Parameter	Type	Description
sdkKey	string	SDK key issued from Monetai (Settings > SDK Integration)
userId	string	Unique user ID
useStoreKit2	boolean?	Whether to use StoreKit2 (iOS only, default: false)

Return Value

Return Value	Type	Description
organizationId	number	Organization ID
platform	'react_native'	Platform info
version	string	SDK version
userId	string	Set user ID
group	ABTestGroup | null	A/B test group

ABTestGroup Type

Value	Description
monetai	Experimental group with automatic promotion
baseline	Control group without promotion
unknown	Users not included in campaign
null	When no current campaign exists

---

3. Event Logging

You can record custom events to track user behavior for predicting and analyzing purchase conversion rates. The purchaser prediction model is generated based on these events.

import MonetaiSDK from "@hayanmind/monetai-react-native";

await MonetaiSDK.logEvent({
  eventName: "app_in",
});

Event Handling Before Initialization

Events that occur before initialization are stored in a queue and automatically sent after initialization.

API Reference: MonetaiSDK.logEvent()

Parameters

Parameter	Type	Description
eventName	string	Event name

---

4. Purchaser Prediction

You can predict whether a user is likely to make a purchase by calling the following function at your desired timing:

import MonetaiSDK from "@hayanmind/monetai-react-native";

const predictUserPurchase = async () => {
  try {
    const result = await MonetaiSDK.predict();

    console.log("Prediction result:", result.prediction);
    console.log("Test group:", result.testGroup);

    if (result.prediction === "non-purchaser") {
      // When predicted as non-purchaser, offer discount
      console.log("Predicted as non-purchaser - discount can be applied");
    } else if (result.prediction === "purchaser") {
      // When predicted as purchaser
      console.log("Predicted as purchaser - discount not needed");
    }
  } catch (error) {
    console.error("Prediction failed:", error);
  }
};

API Reference: MonetaiSDK.predict()

Return Value

Return Value	Type	Description
prediction	PredictResult	Prediction result
testGroup	ABTestGroup	A/B test group

PredictResult Type

Value	Description
non-purchaser	Predicted not to purchase
purchaser	Predicted to purchase
null	Cannot predict (before model creation or no active campaign)

Important Notes for predict() Function

1. Promotion Duplication Prevention

• When a promotion is already active from a previous predict() call, calling predict() multiple times will not start a new promotion. Only the same promotion information will be returned in onDiscountInfoChange.

2. Promotion Restart

• After a promotion period ends, calling predict() again will start a new promotion if the user is still predicted as a non-purchaser.

3. Exclude Paid Subscription Users

• If you do not want to provide promotions to users who are already on paid subscriptions, do not call the predict() function for those users.

---

5. Discount Information Subscription and UI Update Handling

When the predict() call result indicates that a user is predicted as a non-purchaser, discount information is provided through MonetaiProvider to offer discounts to customers.

Custom Promotion Screen Implementation

Important: You must implement your own logic to display promotion screens using the startedAt and endedAt information from DiscountInfo. The SDK only provides the discount timing information - the actual UI components and promotion screen logic need to be implemented by you.

The startedAt and endedAt values in the discount information indicate the valid period for the promotion. You should use these timestamps to:

• Show promotion screens only during the valid period
• Hide promotion screens when the period expires

import MonetaiSDK, { MonetaiProvider } from "@hayanmind/monetai-react-native";

const App = () => {
  const [discountInfo, setDiscountInfo] = useState(null);

  const handleDiscountInfoChange = (newDiscountInfo) => {
    setDiscountInfo(newDiscountInfo);

    if (newDiscountInfo) {
      // Update UI when discount info is available
      const now = new Date();
      const endTime = new Date(newDiscountInfo.endedAt);

      if (now < endTime) {
        // When discount is valid
        showDiscountBanner(newDiscountInfo);
      }
    } else {
      // When no discount info
      hideDiscountBanner();
    }
  };

  const showDiscountBanner = (info) => {
    // Show discount banner logic
    console.log("Show discount banner:", info);
  };

  const hideDiscountBanner = () => {
    // Hide discount banner logic
    console.log("Hide discount banner");
  };

  return (
    <MonetaiProvider onDiscountInfoChange={handleDiscountInfoChange}>
      {/* App components */}
      {discountInfo && <DiscountBanner discountInfo={discountInfo} />}
    </MonetaiProvider>
  );
};

Utilizing Discount Info Callback

This callback is called when there is valid discount information when the app starts or when new discount information is generated after calling the predict() function. You can use this to display discount banners or update price information in real-time.

API Reference: MonetaiProvider

Props

Props	Type	Description
children	ReactNode	Child components
onDiscountInfoChange	(discountInfo: DiscountInfo | null) => void	Discount info change callback

DiscountInfo Type

Property	Type	Description
startedAt	Date	Discount start time
endedAt	Date	Discount end time
userId	string	User ID
sdkKey	string	SDK key

---

6. SDK Reset

Initialize the SDK when the user logs out.

import MonetaiSDK from "@hayanmind/monetai-react-native";

// When user logs out
const logoutUser = async () => {
  try {
    await MonetaiSDK.reset();
    console.log("User logout completed");
  } catch (error) {
    console.error("User logout failed:", error);
  }
};

---

Next Steps

After completing SDK setup, proceed to the next steps:

• Model Generation: Check the AI model creation process
• Campaign Start: Start your first promotion campaign

Support

If you encounter any issues during SDK integration, please contact support@monetai.io.