[MOB-10290] create-loader-for-rniterableapi

src/core/classes/Iterable.ts

@@ -1,9 +1,4 @@
-import {
-  Linking,
-  NativeEventEmitter,
-  NativeModules,
-  Platform,
-} from 'react-native';
+import { Linking, NativeEventEmitter, Platform } from 'react-native';
 
 import {
   IterableInAppCloseSource,
@@ -21,8 +16,8 @@ import { IterableAuthResponse } from './IterableAuthResponse';
 import type { IterableCommerceItem } from './IterableCommerceItem';
 import { IterableConfig } from './IterableConfig';
 import { IterableLogger } from './IterableLogger';
+import { RNIterableAPI } from './RNIterableAPI';
 
-const RNIterableAPI = NativeModules.RNIterableAPI;
 const RNEventEmitter = new NativeEventEmitter(RNIterableAPI);
 
 /**

src/core/classes/RNIterableAPI.ts

@@ -0,0 +1,26 @@
+import { NativeModules, Platform } from 'react-native';
+
+const LINKING_ERROR =
+  `The package '@iterable/react-native-sdk' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo Go\n';
+
+/**
+ * A bridge between React Native and the native Iterable SDK.
+ *
+ * If the module is not available, it throws an error when accessed.
+ *
+ * @type {object}
+ * @throws {Error} Throws an error if the RNIterableAPI module is not linked properly.
+ */
+export const RNIterableAPI = NativeModules.RNIterableAPI
+  ? NativeModules.RNIterableAPI
+  : new Proxy(
+      {},
+      {
+        get() {
+          throw new Error(LINKING_ERROR);
+        },
+      }
+    );

src/core/classes/index.ts

@@ -8,3 +8,4 @@ export * from './IterableConfig';
 export * from './IterableEdgeInsets';
 export * from './IterableLogger';
 export * from './IterableUtil';
+export * from './RNIterableAPI';

src/inApp/classes/IterableInAppManager.ts

@@ -1,16 +1,11 @@
-import { NativeModules } from 'react-native';
-
-import { Iterable } from '../../core';
+import { Iterable, RNIterableAPI } from '../../core';
 import type {
   IterableInAppDeleteSource,
   IterableInAppLocation,
 } from '../enums';
 import { IterableHtmlInAppContent } from './IterableHtmlInAppContent';
 import { IterableInAppMessage } from './IterableInAppMessage';
 
-// TODO: Create a loader for this
-const RNIterableAPI = NativeModules.RNIterableAPI;
-
 /**
  * Manages in-app messages for the current user.
  *

src/inbox/classes/IterableInboxDataModel.ts

@@ -1,6 +1,4 @@
-import { NativeModules } from 'react-native';
-
-import { Iterable } from '../../core';
+import { Iterable, RNIterableAPI } from '../../core';
 import {
   IterableHtmlInAppContent,
   IterableInAppDeleteSource,
@@ -13,8 +11,6 @@ import type {
   IterableInboxRowViewModel,
 } from '../types';
 
-const RNIterableAPI = NativeModules.RNIterableAPI;
-
 /**
  * The `IterableInboxDataModel` class provides methods to manage and manipulate
  * inbox messages.

src/inbox/components/IterableInbox.tsx

@@ -3,7 +3,6 @@ import { useEffect, useState } from 'react';
 import {
   Animated,
   NativeEventEmitter,
-  NativeModules,
   Platform,
   StyleSheet,
   Text,
@@ -13,12 +12,14 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 
 import {
   Iterable,
+  RNIterableAPI,
   useAppStateListener,
   useDeviceOrientation,
 } from '../../core';
 import { IterableInAppDeleteSource, IterableInAppLocation } from '../../inApp';
 
 import { IterableInboxDataModel } from '../classes';
+import { ITERABLE_INBOX_COLORS } from '../constants';
 import type {
   IterableInboxCustomizations,
   IterableInboxImpressionRowInfo,
@@ -30,9 +31,7 @@ import {
   IterableInboxMessageList,
   type IterableInboxMessageListProps,
 } from './IterableInboxMessageList';
-import { ITERABLE_INBOX_COLORS } from '../constants';
 
-const RNIterableAPI = NativeModules.RNIterableAPI;
 const RNEventEmitter = new NativeEventEmitter(RNIterableAPI);
 
 const DEFAULT_HEADLINE_HEIGHT = 60;