@trycourier/courier-react-native 1.0.8 → 2.0.0-beta0

package/lib/typescript/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAuB5D,cAAM,OAAO;;YAUG,WAAW;IAazB,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,aAAa,CAAkC;IAEvD;;;;OAIG;IACU,cAAc,CAAC,WAAW,EAAE,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;IAmBnE,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED;;;OAGG;IACH,IAAI,MAAM,IAAI,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,CAExC;IAED;;;;;;;;;;;;;;;OAeG;IACI,MAAM,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,IAAI,CAAC;IAIhG;;;;OAIG;IACI,WAAW,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,IAAI,CAAC;IAI/D;;;;OAIG;IACI,aAAa,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,IAAI,CAAC;IAIjE;;;;OAIG;IACI,oBAAoB,IAAI,OAAO,CAAC,IAAI,CAAC;IAI5C;;;;OAIG;IACI,gBAAgB,CAAC,KAAK,EAAE;QAAE,aAAa,EAAE,MAAM,IAAI,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAC;QAAC,iBAAiB,EAAE,CAAC,QAAQ,EAAE,YAAY,EAAE,KAAK,IAAI,CAAA;KAAE,GAAG,oBAAoB;IAkCxJ,mBAAmB,CAAC,KAAK,EAAE;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE,GAAG,MAAM;CAIlE;;AAED,wBAA6B"}

package/lib/typescript/models/CourierInboxListener.d.ts

@@ -0,0 +1,9 @@
+import { EmitterSubscription } from "react-native";
+export declare class CourierInboxListener {
+    listenerId?: string;
+    onInitialLoad?: EmitterSubscription;
+    onError?: EmitterSubscription;
+    onMessagesChanged?: EmitterSubscription;
+    remove(): void;
+}
+//# sourceMappingURL=CourierInboxListener.d.ts.map

package/lib/typescript/models/CourierInboxListener.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CourierInboxListener.d.ts","sourceRoot":"","sources":["../../../src/models/CourierInboxListener.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAGlD,qBAAa,oBAAoB;IAExB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,mBAAmB,CAAA;IACnC,OAAO,CAAC,EAAE,mBAAmB,CAAA;IAC7B,iBAAiB,CAAC,EAAE,mBAAmB,CAAA;IAEvC,MAAM;CAcd"}

package/lib/typescript/models/CourierInboxTheme.d.ts

@@ -0,0 +1,34 @@
+export interface CourierInboxFont {
+    family?: string;
+    size?: number;
+    color?: string;
+}
+export interface CourierInboxButtonStyles {
+    font?: CourierInboxFont;
+    backgroundColor?: string;
+    cornerRadius?: number;
+}
+export default interface CourierInboxTheme {
+    unreadIndicatorBarColor?: string;
+    loadingIndicatorColor?: string;
+    titleFont?: CourierInboxFont;
+    timeFont?: CourierInboxFont;
+    bodyFont?: CourierInboxFont;
+    detailTitleFont?: CourierInboxFont;
+    buttonStyles?: CourierInboxButtonStyles;
+    iOS?: {
+        messageAnimationStyle?: 'fade' | 'right' | 'left' | 'top' | 'bottom' | 'none' | 'middle' | 'automatic';
+        cellStyles?: {
+            separatorStyle?: 'none' | 'singleLine' | 'singleLineEtched';
+            separatorInsets?: {
+                top?: number;
+                left?: number;
+                bottom?: number;
+                right?: number;
+            };
+            separatorColor?: string;
+            selectionStyle?: 'none' | 'blue' | 'gray' | 'default';
+        };
+    };
+}
+//# sourceMappingURL=CourierInboxTheme.d.ts.map

package/lib/typescript/models/CourierInboxTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CourierInboxTheme.d.ts","sourceRoot":"","sources":["../../../src/models/CourierInboxTheme.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,CAAC,OAAO,WAAW,iBAAiB;IACxC,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,QAAQ,CAAC,EAAE,gBAAgB,CAAA;IAC3B,QAAQ,CAAC,EAAE,gBAAgB,CAAA;IAC3B,eAAe,CAAC,EAAE,gBAAgB,CAAA;IAClC,YAAY,CAAC,EAAE,wBAAwB,CAAA;IACvC,GAAG,CAAC,EAAE;QACJ,qBAAqB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,WAAW,CAAC;QACvG,UAAU,CAAC,EAAE;YACX,cAAc,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,kBAAkB,CAAC;YAC5D,eAAe,CAAC,EAAE;gBAAE,GAAG,CAAC,EAAE,MAAM,CAAC;gBAAC,IAAI,CAAC,EAAE,MAAM,CAAC;gBAAC,MAAM,CAAC,EAAE,MAAM,CAAC;gBAAC,KAAK,CAAC,EAAE,MAAM,CAAA;aAAE,CAAC;YACnF,cAAc,CAAC,EAAE,MAAM,CAAC;YACxB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;SACtD,CAAA;KACF,CAAA;CACF"}

package/lib/typescript/models/InboxAction.d.ts

@@ -0,0 +1,8 @@
+export interface InboxAction {
+    content?: string | null;
+    href?: string | null;
+    data?: {
+        [key: string]: any;
+    } | null;
+}
+//# sourceMappingURL=InboxAction.d.ts.map

package/lib/typescript/models/InboxAction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InboxAction.d.ts","sourceRoot":"","sources":["../../../src/models/InboxAction.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,GAAG,IAAI,CAAC;CACtC"}

package/lib/typescript/models/InboxMessage.d.ts

@@ -0,0 +1,18 @@
+import { InboxAction } from "./InboxAction";
+export interface InboxMessage {
+    messageId: string;
+    title?: string | null;
+    body?: string | null;
+    preview?: string | null;
+    created?: string | null;
+    actions?: InboxAction[] | null;
+    data?: {
+        [key: string]: any;
+    } | null;
+    read?: boolean | null;
+    opened?: boolean | null;
+    archived?: boolean | null;
+    subtitle?: string | null;
+    time?: string;
+}
+//# sourceMappingURL=InboxMessage.d.ts.map

package/lib/typescript/models/InboxMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InboxMessage.d.ts","sourceRoot":"","sources":["../../../src/models/InboxMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IAC/B,IAAI,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,GAAG,IAAI,CAAC;IACrC,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf"}

package/lib/typescript/views/CourierInboxView.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { ViewStyle } from "react-native";
+import CourierInboxTheme from "src/models/CourierInboxTheme";
+import { InboxAction } from "src/models/InboxAction";
+import { InboxMessage } from "src/models/InboxMessage";
+type CourierInboxViewProps = {
+    lightTheme?: CourierInboxTheme;
+    darkTheme?: CourierInboxTheme;
+    onClickInboxMessageAtIndex?: (message: InboxMessage, index: number) => void;
+    onClickInboxActionForMessageAtIndex?: (action: InboxAction, message: InboxMessage, index: number) => void;
+    onScrollInbox?: (offsetY: number, offsetX: number) => void;
+    style?: ViewStyle;
+};
+export declare const CourierInboxView: (props: CourierInboxViewProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=CourierInboxView.d.ts.map

package/lib/typescript/views/CourierInboxView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CourierInboxView.d.ts","sourceRoot":"","sources":["../../../src/views/CourierInboxView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+C,SAAS,EAAE,MAAM,cAAc,CAAC;AACtF,OAAO,iBAAiB,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEvD,KAAK,qBAAqB,GAAG;IAC3B,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,0BAA0B,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5E,mCAAmC,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1G,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAiBF,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,sBAsD5D,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@trycourier/courier-react-native",
-  "version": "1.0.8",
-  "description": "test",
+  "version": "2.0.0-beta0",
+  "description": "Inbox & Push Notifications for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/index.d.ts",
@@ -13,24 +13,30 @@
     "android",
     "ios",
     "cpp",
-    "courier-react-native.podspec",
+    "*.podspec",
     "!lib/typescript/example",
-    "!android/build",
     "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
     "!**/__tests__",
     "!**/__fixtures__",
-    "!**/__mocks__"
+    "!**/__mocks__",
+    "!**/.*"
   ],
   "scripts": {
     "test": "jest",
-    "typescript": "tsc --noEmit",
+    "typecheck": "tsc --noEmit",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
-    "prepare": "bob build",
+    "prepack": "bob build",
     "release": "release-it",
     "example": "yarn --cwd example",
-    "bootstrap": "yarn example && yarn && yarn example pods",
-    "linkPackage": "yarn link && yarn example link @trycourier/courier-react-native && yarn example setupEnv",
-    "setup": "sh setup.sh"
+    "build:android": "cd example/android && ./gradlew assembleDebug --no-daemon --console=plain -PreactNativeArchitectures=arm64-v8a",
+    "build:ios": "cd example/ios && xcodebuild -workspace CourierReactNativeExample.xcworkspace -scheme CourierReactNativeExample -configuration Debug -sdk iphonesimulator CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ GCC_OPTIMIZATION_LEVEL=0 GCC_PRECOMPILE_PREFIX_HEADER=YES ASSETCATALOG_COMPILER_OPTIMIZATION=time DEBUG_INFORMATION_FORMAT=dwarf COMPILER_INDEX_STORE_ENABLE=NO",
+    "bootstrap": "yarn example && yarn install && yarn example pods",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build"
   },
   "keywords": [
     "react-native",
@@ -38,7 +44,7 @@
     "android"
   ],
   "repository": "https://github.com/trycourier/courier-react-native",
-  "author": "FahadAminShovon <shovonfahad991@gmail.com> (https://github.com/FahadAminShovon)",
+  "author": "mikemilla <mike@mikemiller.design> (https://github.com/mikemilla)",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/trycourier/courier-react-native/issues"
@@ -48,33 +54,27 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.18.2",
     "@commitlint/config-conventional": "^17.0.2",
-    "@react-native-community/eslint-config": "^3.2.0",
+    "@evilmartians/lefthook": "^1.2.2",
+    "@react-native-community/eslint-config": "^3.0.2",
     "@release-it/conventional-changelog": "^5.0.0",
     "@types/jest": "^28.1.2",
     "@types/react": "~17.0.21",
-    "@types/react-native": "0.68.0",
-    "@typescript-eslint/parser": "^5.42.1",
-    "commitizen": "^4.2.5",
-    "commitlint": "^17.2.0",
-    "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.27.0",
-    "eslint-config-airbnb": "^19.0.4",
+    "@types/react-native": "0.70.0",
+    "commitlint": "^17.0.2",
+    "del-cli": "^5.0.0",
+    "eslint": "^8.4.1",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-prettier": "^4.0.0",
     "jest": "^28.1.1",
-    "lefthook": "^1.2.0",
     "pod-install": "^0.1.0",
-    "prettier": "^2.7.1",
-    "react": "17.0.2",
-    "react-native": "0.68.2",
-    "react-native-builder-bob": "^0.18.3",
+    "prettier": "^2.0.5",
+    "react": "18.2.0",
+    "react-native": "0.72.4",
+    "react-native-builder-bob": "^0.21.3",
     "release-it": "^15.0.0",
-    "typescript": "^4.8.4"
+    "turbo": "^1.10.7",
+    "typescript": "^5.0.2"
   },
   "resolutions": {
     "@types/react": "17.0.21"
@@ -83,14 +83,15 @@
     "react": "*",
     "react-native": "*"
   },
+  "engines": {
+    "node": ">= 16.0.0"
+  },
+  "packageManager": "^yarn@1.22.15",
   "jest": {
     "preset": "react-native",
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
       "<rootDir>/lib/"
-    ],
-    "setupFiles": [
-      "./src/__mocks__/native-module-bridge.js"
     ]
   },
   "commitlint": {
@@ -115,14 +116,36 @@
       }
     }
   },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native-community",
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "off",
+          "useTabs": false
+        }
+      ]
+    }
+  },
   "eslintIgnore": [
     "node_modules/",
-    "lib/",
-    "**/babel.config.**",
-    "**/metro.config.**",
-    "**/react-native.config.**",
-    "**/scripts/**"
+    "lib/"
   ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
   "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
@@ -136,11 +159,5 @@
         }
       ]
     ]
-  },
-  "dependencies": {},
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
   }
 }

package/src/index.tsx

@@ -0,0 +1,188 @@
+import {
+  NativeModules,
+  NativeEventEmitter,
+  EmitterSubscription,
+  Platform,
+} from 'react-native';
+import { CourierInboxListener } from './models/CourierInboxListener';
+import { InboxMessage } from './models/InboxMessage';
+
+export { CourierInboxView } from './views/CourierInboxView';
+
+const LINKING_ERROR =
+  `The package 'courier-react-native' 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';
+
+const CourierReactNativeModules = NativeModules.CourierReactNativeModule
+  ? NativeModules.CourierReactNativeModule
+  : new Proxy(
+      {},
+      {
+        get() {
+          throw new Error(LINKING_ERROR);
+        },
+      }
+    );
+
+const CourierEventEmitter = new NativeEventEmitter(
+  NativeModules.CourierReactNativeModule
+);
+
+class Courier {
+
+  public constructor() {
+
+    // Sets the initial SDK values
+    // Defaults to React Native level debugging
+    // and will show all foreground notification styles in iOS
+    this.setDefaults();
+  }
+
+  private async setDefaults() {
+    try {
+      await Promise.all([
+        this.setIsDebugging(__DEV__),
+        // this.iOSForegroundPresentationOptions({
+        //   options: ['sound', 'badge', 'list', 'banner'],
+        // }),
+      ]);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  private _isDebugging = false;
+
+  private debugListener: EmitterSubscription | undefined;
+
+  /**
+   * Tells native Courier SDKs to show or hide logs.
+   * Defaults to the React __DEV__ mode
+   * @example Courier.setIsDebugging(true)
+   */
+  public async setIsDebugging(isDebugging: boolean): Promise<boolean> {
+
+    // Remove the existing listener if needed
+    this.debugListener?.remove();
+
+    // Set a new listener
+    // listener needs to be registered first to catch the event
+    if (isDebugging) {
+      this.debugListener = CourierEventEmitter.addListener('courierDebugEvent', event => {
+        console.log('\x1b[36m%s\x1b[0m', 'COURIER', event);
+      });
+    }
+
+    this._isDebugging = await CourierReactNativeModules.setDebugMode(isDebugging);
+
+    return this._isDebugging;
+
+  }
+
+  get isDebugging(): boolean {
+    return this._isDebugging;
+  }
+
+  /**
+   * Returns the current user id stored in local native storage
+   * @example const userId = await Courier.userId
+   */
+  get userId(): Promise<string | undefined> {
+    return CourierReactNativeModules.getUserId();
+  }
+
+  /**
+   * Signs user in and persists signin in between sessions
+   * using native level storage apis
+   * 
+   * @example
+   * ```
+   *await Courier.signIn({
+      accessToken: YOUR_COURIER_GENERATED_JWT,
+      clientKey: YOUR_CLIENT_KEY,
+      userId: YOUR_USER_ID,
+    })
+   * ```
+   * Your access token should be generated using this endpoint
+   * that is requested from your backend
+   * https://www.courier.com/docs/reference/auth/issue-token/
+   */
+  public signIn(props: { accessToken: string, clientKey?: string, userId: string }): Promise<void> {
+    return CourierReactNativeModules.signIn(props.accessToken, props.clientKey ?? null, props.userId);
+  }
+
+  /**
+   * TODO
+   * @param props 
+   * @returns 
+   */
+  public readMessage(props: { messageId: string }): Promise<void> {
+    return CourierReactNativeModules.readMessage(props.messageId);
+  }
+
+  /**
+   * TODO
+   * @param props 
+   * @returns 
+   */
+  public unreadMessage(props: { messageId: string }): Promise<void> {
+    return CourierReactNativeModules.unreadMessage(props.messageId);
+  }
+
+  /**
+   * TODO
+   * @param props 
+   * @returns 
+   */
+  public readAllInboxMessages(): Promise<void> {
+    return CourierReactNativeModules.readAllInboxMessages();
+  }
+
+  /**
+   * TODO
+   * @param props 
+   * @returns 
+   */
+  public addInboxListener(props: { onInitialLoad: () => void, onError: () => void, onMessagesChanged: (messages: InboxMessage[]) => void }): CourierInboxListener {
+
+    // Create the initial listeners
+    const inboxListener = new CourierInboxListener();
+
+    if (props.onInitialLoad) {
+      inboxListener.onInitialLoad = CourierEventEmitter.addListener('inboxInitialLoad', () => {
+        props.onInitialLoad!()
+      });
+    }
+
+    if (props.onError) {
+      inboxListener.onError = CourierEventEmitter.addListener('inboxError', event => {
+        console.log(event)
+        props.onError!()
+      });
+    }
+
+    if (props.onMessagesChanged) {
+      inboxListener.onMessagesChanged = CourierEventEmitter.addListener('inboxMessagesChanged', event => {
+        console.log('onMessagesChanged')
+        console.log(event)
+        props.onMessagesChanged!(
+          event.messages
+        )
+      });
+    }
+
+    inboxListener.listenerId = CourierReactNativeModules.addInboxListener(null);
+
+    return inboxListener;
+
+  }
+
+  public removeInboxListener(props: { listenerId: string }): string {
+    return CourierReactNativeModules.removeInboxListener(props.listenerId);
+  }
+  
+}
+
+export default new Courier();

package/src/models/CourierInboxListener.tsx

@@ -0,0 +1,25 @@
+import { EmitterSubscription } from "react-native"
+import Courier from 'courier-react-native';
+
+export class CourierInboxListener {
+
+  public listenerId?: string
+  public onInitialLoad?: EmitterSubscription
+  public onError?: EmitterSubscription
+  public onMessagesChanged?: EmitterSubscription
+
+  public remove() {
+
+    // Remove the native inbox listener
+    if (this.listenerId) {
+      Courier.removeInboxListener({ listenerId: this.listenerId });
+    }
+
+    // Remove the emitters
+    this.onInitialLoad?.remove();
+    this.onError?.remove();
+    this.onMessagesChanged?.remove();
+
+  }
+
+}

package/src/models/CourierInboxTheme.tsx

@@ -0,0 +1,30 @@
+export interface CourierInboxFont {
+  family?: string
+  size?: number
+  color?: string
+}
+
+export interface CourierInboxButtonStyles {
+  font?: CourierInboxFont
+  backgroundColor?: string
+  cornerRadius?: number
+}
+
+export default interface CourierInboxTheme {
+  unreadIndicatorBarColor?: string
+  loadingIndicatorColor?: string
+  titleFont?: CourierInboxFont
+  timeFont?: CourierInboxFont
+  bodyFont?: CourierInboxFont
+  detailTitleFont?: CourierInboxFont
+  buttonStyles?: CourierInboxButtonStyles
+  iOS?: {
+    messageAnimationStyle?: 'fade' | 'right' | 'left' | 'top' | 'bottom' | 'none' | 'middle' | 'automatic',
+    cellStyles?: {
+      separatorStyle?: 'none' | 'singleLine' | 'singleLineEtched',
+      separatorInsets?: { top?: number, left?: number, bottom?: number, right?: number },
+      separatorColor?: string,
+      selectionStyle?: 'none' | 'blue' | 'gray' | 'default'
+    }
+  }
+}

package/src/models/InboxAction.tsx

@@ -0,0 +1,5 @@
+export interface InboxAction {
+  content?: string | null;
+  href?: string | null;
+  data?: { [key: string]: any } | null;
+}

package/src/models/InboxMessage.tsx

@@ -0,0 +1,16 @@
+import { InboxAction } from "./InboxAction";
+
+export interface InboxMessage {
+  messageId: string;
+  title?: string | null;
+  body?: string | null;
+  preview?: string | null;
+  created?: string | null;
+  actions?: InboxAction[] | null;
+  data?: { [key: string]: any } | null;
+  read?: boolean | null;
+  opened?: boolean | null;
+  archived?: boolean | null
+  subtitle?: string | null;
+  time?: string;
+}

package/src/views/CourierInboxView.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { Platform, requireNativeComponent, UIManager, ViewStyle } from "react-native";
+import CourierInboxTheme from "src/models/CourierInboxTheme";
+import { InboxAction } from "src/models/InboxAction";
+import { InboxMessage } from "src/models/InboxMessage";
+
+type CourierInboxViewProps = {
+  lightTheme?: CourierInboxTheme;
+  darkTheme?: CourierInboxTheme;
+  onClickInboxMessageAtIndex?: (message: InboxMessage, index: number) => void;
+  onClickInboxActionForMessageAtIndex?: (action: InboxAction, message: InboxMessage, index: number) => void;
+  onScrollInbox?: (offsetY: number, offsetX: number) => void;
+  style?: ViewStyle;
+};
+
+const ComponentName = 'CourierReactNativeView';
+
+const LINKING_ERROR =
+  `The package 'courier-react-native' 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';
+
+const CourierInbox =
+  UIManager.getViewManagerConfig(ComponentName) != null
+    ? requireNativeComponent<CourierInboxViewProps>(ComponentName)
+    : () => {
+        throw new Error(LINKING_ERROR);
+      };
+
+export const CourierInboxView = (props: CourierInboxViewProps) => {
+
+  const onClickInboxMessageAtIndex = (event: any) => {
+
+    // Parse the native event data
+    if (props.onClickInboxMessageAtIndex) {
+
+      const index = event.nativeEvent["index"]
+      const message = event.nativeEvent["message"] as InboxMessage
+
+      props.onClickInboxMessageAtIndex(message, index)
+
+    }
+
+  }
+
+  const onClickInboxActionForMessageAtIndex = (event: any) => {
+
+    // Parse the native event data
+    if (props.onClickInboxActionForMessageAtIndex) {
+
+      const index = event.nativeEvent["index"]
+      const action = event.nativeEvent["action"] as InboxAction
+      const message = event.nativeEvent["message"] as InboxMessage
+
+      props.onClickInboxActionForMessageAtIndex(action, message, index)
+
+    }
+
+  }
+
+  const onScrollInbox = (event: any) => {
+
+    // Parse the native event data
+    if (props.onScrollInbox) {
+
+      const contentOffset = event.nativeEvent["contentOffset"]
+      props.onScrollInbox(contentOffset["y"], contentOffset["x"])
+
+    }
+
+  }
+
+  return (
+    <CourierInbox 
+      lightTheme={props.lightTheme} 
+      darkTheme={props.darkTheme}
+      onClickInboxMessageAtIndex={onClickInboxMessageAtIndex}
+      onClickInboxActionForMessageAtIndex={onClickInboxActionForMessageAtIndex}
+      onScrollInbox={onScrollInbox}
+      style={props.style}
+    />
+  )
+
+}