rn-erxes-sdk 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2023 Munkh-orgil
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,31 @@
+# rn-erxes-sdk
+
+React Native Erxes SDK
+
+## Installation
+
+```sh
+npm install rn-erxes-sdk
+```
+
+## Usage
+
+```js
+import { multiply } from 'rn-erxes-sdk';
+
+// ...
+
+const result = await multiply(3, 7);
+```
+
+## Contributing
+
+See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+
+## License
+
+MIT
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/lib/commonjs/App.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNativeWebview = _interopRequireDefault(require("react-native-webview"));
+var _reactNative = require("react-native");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ErxesSDK = _ref => {
+  let {
+    brandId,
+    src,
+    pollInterval
+  } = _ref;
+  const runFirst = `window.erxesSettings = { messenger: { brand_id: "${brandId}", pollInterval: ${pollInterval}, css: ".topbar-button.right { visibility: hidden;} .erxes-launcher { visibility: hidden; }"}, }; (function () { var script = document.createElement('script'); script.src = "${src}/build/messengerWidget.bundle.js"; script.async = true; var entry = document.getElementsByTagName('script')[0]; entry.parentNode.insertBefore(script, entry); })(); true;`;
+  const onMessage = data => {
+    const {
+      notificationCount
+    } = JSON.parse(data.nativeEvent.data);
+    console.log('****************** ', notificationCount);
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNativeWebview.default, {
+    source: _reactNative.Platform.OS === 'ios' ? require('./index.html') : {
+      uri: 'file:///android_asset/index.html'
+    },
+    originWhitelist: ['*'],
+    sharedCookiesEnabled: true,
+    cacheEnabled: true,
+    allowFileAccess: true,
+    domStorageEnabled: true,
+    thirdPartyCookiesEnabled: true
+    // allowingReadAccessToURL
+    // style={{ width: 200 }}
+    ,
+    onLoadEnd: syntheticEvent => {
+      // update component to be aware of loading status
+      const {
+        nativeEvent
+      } = syntheticEvent;
+      console.log(nativeEvent.loading);
+    },
+    javaScriptEnabled: true,
+    onError: er => {
+      console.log(er);
+    },
+    startInLoadingState: true
+    // renderLoading={() => <Loader />}
+    ,
+    injectedJavaScript: runFirst
+    // injectedJavaScriptBeforeContentLoaded={runFirst}
+
+    // onNavigationStateChange={this.handleWebViewNavigationStateChange}
+    ,
+    onMessage: onMessage
+  });
+};
+var _default = ErxesSDK;
+exports.default = _default;
+//# sourceMappingURL=App.js.map

package/lib/commonjs/App.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNativeWebview","_reactNative","obj","__esModule","default","ErxesSDK","_ref","brandId","src","pollInterval","runFirst","onMessage","data","notificationCount","JSON","parse","nativeEvent","console","log","createElement","source","Platform","OS","uri","originWhitelist","sharedCookiesEnabled","cacheEnabled","allowFileAccess","domStorageEnabled","thirdPartyCookiesEnabled","onLoadEnd","syntheticEvent","loading","javaScriptEnabled","onError","er","startInLoadingState","injectedJavaScript","_default","exports"],"sourceRoot":"../../src","sources":["App.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,mBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AAAwC,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAQxC,MAAMG,QAA6B,GAAGC,IAAA,IAAoC;EAAA,IAAnC;IAAEC,OAAO;IAAEC,GAAG;IAAEC;EAAa,CAAC,GAAAH,IAAA;EACnE,MAAMI,QAAQ,GAAI,oDAAmDH,OAAQ,oBAAmBE,YAAa,iLAAgLD,GAAI,2KAA0K;EAE3c,MAAMG,SAAS,GAAIC,IAAS,IAAK;IAC/B,MAAM;MAAEC;IAAkB,CAAC,GAAGC,IAAI,CAACC,KAAK,CAACH,IAAI,CAACI,WAAW,CAACJ,IAAI,CAAC;IAE/DK,OAAO,CAACC,GAAG,CAAC,qBAAqB,EAAEL,iBAAiB,CAAC;EACvD,CAAC;EAED,oBACEhB,MAAA,CAAAO,OAAA,CAAAe,aAAA,CAACnB,mBAAA,CAAAI,OAAO;IACNgB,MAAM,EACJC,qBAAQ,CAACC,EAAE,KAAK,KAAK,GACjBvB,OAAO,CAAC,cAAc,CAAC,GACvB;MAAEwB,GAAG,EAAE;IAAmC,CAC/C;IACDC,eAAe,EAAE,CAAC,GAAG,CAAE;IACvBC,oBAAoB,EAAE,IAAK;IAC3BC,YAAY,EAAE,IAAK;IACnBC,eAAe,EAAE,IAAK;IACtBC,iBAAiB,EAAE,IAAK;IACxBC,wBAAwB,EAAE;IAC1B;IACA;IAAA;IACAC,SAAS,EAAGC,cAAc,IAAK;MAC7B;MACA,MAAM;QAAEf;MAAY,CAAC,GAAGe,cAAc;MACtCd,OAAO,CAACC,GAAG,CAACF,WAAW,CAACgB,OAAO,CAAC;IAClC,CAAE;IACFC,iBAAiB,EAAE,IAAK;IACxBC,OAAO,EAAGC,EAAE,IAAK;MACflB,OAAO,CAACC,GAAG,CAACiB,EAAE,CAAC;IACjB,CAAE;IACFC,mBAAmB,EAAE;IACrB;IAAA;IACAC,kBAAkB,EAAE3B;IACpB;;IAEA;IAAA;IACAC,SAAS,EAAEA;EAAU,CACtB,CAAC;AAEN,CAAC;AAAC,IAAA2B,QAAA,GAEajC,QAAQ;AAAAkC,OAAA,CAAAnC,OAAA,GAAAkC,QAAA"}

package/lib/commonjs/index.html

@@ -0,0 +1,114 @@
+<html>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta charset="utf-8" />
+
+  <body id="mbody" onload="openMessenger()"></body>
+  <script>
+    function openMessenger() {
+      setTimeout(function () {
+        window.Erxes.showMessenger();
+      }, 1500);
+    }
+
+    window.addEventListener('message', (e) => {
+      const { data } = e;
+      const { notificationCount } = data;
+
+      if (notificationCount !== undefined) {
+        window.ReactNativeWebView.postMessage(JSON.stringify(data));
+      }
+    });
+  </script>
+
+  <style>
+    #mbody {
+      align-items: center;
+      justify-content: center;
+      background-color: rgb(189, 189, 188);
+      display: flex;
+      /* flex-direction: column; */
+    }
+
+    .topbar-button {
+      visibility: hidden;
+    }
+
+    .loader {
+      border: 5px solid #f3f3f3;
+      /* Light grey */
+      border-top: 5px solid #3498db;
+      /* Blue */
+      border-radius: 50%;
+      width: 50px;
+      height: 50px;
+      animation: spin 5s linear infinite;
+    }
+
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    /* CSS */
+    .button-75 {
+      align-items: center;
+      background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
+      border: 0;
+      border-radius: 10px;
+      box-sizing: border-box;
+      color: #fff;
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      /* font-family: "Codec cold", sans-serif; */
+      font-size: 16px;
+      font-weight: 700;
+      height: 54px;
+      justify-content: center;
+      letter-spacing: 0.4px;
+      line-height: 1;
+      max-width: 100%;
+      padding-left: 20px;
+      padding-right: 20px;
+      padding-top: 3px;
+      text-decoration: none;
+      text-transform: uppercase;
+      user-select: none;
+      -webkit-user-select: none;
+      touch-action: manipulation;
+    }
+
+    .button-75:active {
+      outline: 0;
+    }
+
+    .button-75:hover {
+      outline: 0;
+    }
+
+    .button-75 span {
+      transition: all 200ms;
+    }
+
+    .button-75:hover span {
+      transform: scale(0.9);
+      opacity: 0.75;
+    }
+
+    @media screen and (max-width: 991px) {
+      .button-75 {
+        font-size: 15px;
+        height: 50px;
+      }
+
+      .button-75 span {
+        line-height: 50px;
+      }
+    }
+  </style>
+</html>

package/lib/commonjs/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _App = _interopRequireDefault(require("./App"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = _App.default;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_App","_interopRequireDefault","require","obj","__esModule","default","_default","ErxesSDK","exports"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;;;;;AAAA,IAAAA,IAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA6B,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAEdC,YAAQ;AAAAC,OAAA,CAAAH,OAAA,GAAAC,QAAA"}

package/lib/module/App.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import WebView from 'react-native-webview';
+import { Platform } from 'react-native';
+const ErxesSDK = _ref => {
+  let {
+    brandId,
+    src,
+    pollInterval
+  } = _ref;
+  const runFirst = `window.erxesSettings = { messenger: { brand_id: "${brandId}", pollInterval: ${pollInterval}, css: ".topbar-button.right { visibility: hidden;} .erxes-launcher { visibility: hidden; }"}, }; (function () { var script = document.createElement('script'); script.src = "${src}/build/messengerWidget.bundle.js"; script.async = true; var entry = document.getElementsByTagName('script')[0]; entry.parentNode.insertBefore(script, entry); })(); true;`;
+  const onMessage = data => {
+    const {
+      notificationCount
+    } = JSON.parse(data.nativeEvent.data);
+    console.log('****************** ', notificationCount);
+  };
+  return /*#__PURE__*/React.createElement(WebView, {
+    source: Platform.OS === 'ios' ? require('./index.html') : {
+      uri: 'file:///android_asset/index.html'
+    },
+    originWhitelist: ['*'],
+    sharedCookiesEnabled: true,
+    cacheEnabled: true,
+    allowFileAccess: true,
+    domStorageEnabled: true,
+    thirdPartyCookiesEnabled: true
+    // allowingReadAccessToURL
+    // style={{ width: 200 }}
+    ,
+    onLoadEnd: syntheticEvent => {
+      // update component to be aware of loading status
+      const {
+        nativeEvent
+      } = syntheticEvent;
+      console.log(nativeEvent.loading);
+    },
+    javaScriptEnabled: true,
+    onError: er => {
+      console.log(er);
+    },
+    startInLoadingState: true
+    // renderLoading={() => <Loader />}
+    ,
+    injectedJavaScript: runFirst
+    // injectedJavaScriptBeforeContentLoaded={runFirst}
+
+    // onNavigationStateChange={this.handleWebViewNavigationStateChange}
+    ,
+    onMessage: onMessage
+  });
+};
+export default ErxesSDK;
+//# sourceMappingURL=App.js.map

package/lib/module/App.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","WebView","Platform","ErxesSDK","_ref","brandId","src","pollInterval","runFirst","onMessage","data","notificationCount","JSON","parse","nativeEvent","console","log","createElement","source","OS","require","uri","originWhitelist","sharedCookiesEnabled","cacheEnabled","allowFileAccess","domStorageEnabled","thirdPartyCookiesEnabled","onLoadEnd","syntheticEvent","loading","javaScriptEnabled","onError","er","startInLoadingState","injectedJavaScript"],"sourceRoot":"../../src","sources":["App.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,SAASC,QAAQ,QAAQ,cAAc;AAQvC,MAAMC,QAA6B,GAAGC,IAAA,IAAoC;EAAA,IAAnC;IAAEC,OAAO;IAAEC,GAAG;IAAEC;EAAa,CAAC,GAAAH,IAAA;EACnE,MAAMI,QAAQ,GAAI,oDAAmDH,OAAQ,oBAAmBE,YAAa,iLAAgLD,GAAI,2KAA0K;EAE3c,MAAMG,SAAS,GAAIC,IAAS,IAAK;IAC/B,MAAM;MAAEC;IAAkB,CAAC,GAAGC,IAAI,CAACC,KAAK,CAACH,IAAI,CAACI,WAAW,CAACJ,IAAI,CAAC;IAE/DK,OAAO,CAACC,GAAG,CAAC,qBAAqB,EAAEL,iBAAiB,CAAC;EACvD,CAAC;EAED,oBACEX,KAAA,CAAAiB,aAAA,CAAChB,OAAO;IACNiB,MAAM,EACJhB,QAAQ,CAACiB,EAAE,KAAK,KAAK,GACjBC,OAAO,CAAC,cAAc,CAAC,GACvB;MAAEC,GAAG,EAAE;IAAmC,CAC/C;IACDC,eAAe,EAAE,CAAC,GAAG,CAAE;IACvBC,oBAAoB,EAAE,IAAK;IAC3BC,YAAY,EAAE,IAAK;IACnBC,eAAe,EAAE,IAAK;IACtBC,iBAAiB,EAAE,IAAK;IACxBC,wBAAwB,EAAE;IAC1B;IACA;IAAA;IACAC,SAAS,EAAGC,cAAc,IAAK;MAC7B;MACA,MAAM;QAAEf;MAAY,CAAC,GAAGe,cAAc;MACtCd,OAAO,CAACC,GAAG,CAACF,WAAW,CAACgB,OAAO,CAAC;IAClC,CAAE;IACFC,iBAAiB,EAAE,IAAK;IACxBC,OAAO,EAAGC,EAAE,IAAK;MACflB,OAAO,CAACC,GAAG,CAACiB,EAAE,CAAC;IACjB,CAAE;IACFC,mBAAmB,EAAE;IACrB;IAAA;IACAC,kBAAkB,EAAE3B;IACpB;;IAEA;IAAA;IACAC,SAAS,EAAEA;EAAU,CACtB,CAAC;AAEN,CAAC;AAED,eAAeN,QAAQ"}

package/lib/module/index.html

@@ -0,0 +1,114 @@
+<html>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta charset="utf-8" />
+
+  <body id="mbody" onload="openMessenger()"></body>
+  <script>
+    function openMessenger() {
+      setTimeout(function () {
+        window.Erxes.showMessenger();
+      }, 1500);
+    }
+
+    window.addEventListener('message', (e) => {
+      const { data } = e;
+      const { notificationCount } = data;
+
+      if (notificationCount !== undefined) {
+        window.ReactNativeWebView.postMessage(JSON.stringify(data));
+      }
+    });
+  </script>
+
+  <style>
+    #mbody {
+      align-items: center;
+      justify-content: center;
+      background-color: rgb(189, 189, 188);
+      display: flex;
+      /* flex-direction: column; */
+    }
+
+    .topbar-button {
+      visibility: hidden;
+    }
+
+    .loader {
+      border: 5px solid #f3f3f3;
+      /* Light grey */
+      border-top: 5px solid #3498db;
+      /* Blue */
+      border-radius: 50%;
+      width: 50px;
+      height: 50px;
+      animation: spin 5s linear infinite;
+    }
+
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    /* CSS */
+    .button-75 {
+      align-items: center;
+      background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
+      border: 0;
+      border-radius: 10px;
+      box-sizing: border-box;
+      color: #fff;
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      /* font-family: "Codec cold", sans-serif; */
+      font-size: 16px;
+      font-weight: 700;
+      height: 54px;
+      justify-content: center;
+      letter-spacing: 0.4px;
+      line-height: 1;
+      max-width: 100%;
+      padding-left: 20px;
+      padding-right: 20px;
+      padding-top: 3px;
+      text-decoration: none;
+      text-transform: uppercase;
+      user-select: none;
+      -webkit-user-select: none;
+      touch-action: manipulation;
+    }
+
+    .button-75:active {
+      outline: 0;
+    }
+
+    .button-75:hover {
+      outline: 0;
+    }
+
+    .button-75 span {
+      transition: all 200ms;
+    }
+
+    .button-75:hover span {
+      transform: scale(0.9);
+      opacity: 0.75;
+    }
+
+    @media screen and (max-width: 991px) {
+      .button-75 {
+        font-size: 15px;
+        height: 50px;
+      }
+
+      .button-75 span {
+        line-height: 50px;
+      }
+    }
+  </style>
+</html>

package/lib/module/index.js

@@ -0,0 +1,3 @@
+import ErxesSDK from './App';
+export default ErxesSDK;
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ErxesSDK"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"AAAA,OAAOA,QAAQ,MAAM,OAAO;AAE5B,eAAeA,QAAQ"}

package/lib/typescript/App.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type PropTypes = {
+    brandId: string;
+    src: string;
+    pollInterval: number;
+};
+declare const ErxesSDK: React.FC<PropTypes>;
+export default ErxesSDK;
+//# sourceMappingURL=App.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../src/App.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,SAAS,GAAG;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA0CjC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/typescript/index.d.ts

@@ -0,0 +1,3 @@
+import ErxesSDK from './App';
+export default ErxesSDK;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,OAAO,CAAC;AAE7B,eAAe,QAAQ,CAAC"}

package/package.json

@@ -0,0 +1,162 @@
+{
+  "name": "rn-erxes-sdk",
+  "version": "0.1.0",
+  "description": "react-native erxes sdk",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!lib/typescript/example",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "prepack": "bob build",
+    "release": "release-it",
+    "example": "yarn --cwd example",
+    "bootstrap": "yarn example && yarn install"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": "https://github.com/Munkhorgilb/rn-erxes-sdk",
+  "author": "Munkh-orgil <monkhorgilbayarbaatar@gmail.com> (https://github.com/Munkhorgilb)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Munkhorgilb/rn-erxes-sdk/issues"
+  },
+  "homepage": "https://github.com/Munkhorgilb/rn-erxes-sdk#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^17.0.2",
+    "@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.70.0",
+    "commitlint": "^17.0.2",
+    "del-cli": "^5.0.0",
+    "eslint": "^8.4.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "jest": "^28.1.1",
+    "pod-install": "^0.1.0",
+    "prettier": "^2.0.5",
+    "react": "18.2.0",
+    "react-native": "0.71.8",
+    "react-native-builder-bob": "^0.20.0",
+    "release-it": "^15.0.0",
+    "typescript": "^4.5.2"
+  },
+  "resolutions": {
+    "@types/react": "17.0.21"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "engines": {
+    "node": ">= 16.0.0"
+  },
+  "packageManager": "^yarn@1.22.15",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native-community",
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "dependencies": {
+    "react-native-webview": "^12.2.0"
+  }
+}

package/src/App.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import WebView from 'react-native-webview';
+import { Platform } from 'react-native';
+
+export type PropTypes = {
+  brandId: string;
+  src: string;
+  pollInterval: number;
+};
+
+const ErxesSDK: React.FC<PropTypes> = ({ brandId, src, pollInterval }) => {
+  const runFirst = `window.erxesSettings = { messenger: { brand_id: "${brandId}", pollInterval: ${pollInterval}, css: ".topbar-button.right { visibility: hidden;} .erxes-launcher { visibility: hidden; }"}, }; (function () { var script = document.createElement('script'); script.src = "${src}/build/messengerWidget.bundle.js"; script.async = true; var entry = document.getElementsByTagName('script')[0]; entry.parentNode.insertBefore(script, entry); })(); true;`;
+
+  const onMessage = (data: any) => {
+    const { notificationCount } = JSON.parse(data.nativeEvent.data);
+
+    console.log('****************** ', notificationCount);
+  };
+
+  return (
+    <WebView
+      source={
+        Platform.OS === 'ios'
+          ? require('./index.html')
+          : { uri: 'file:///android_asset/index.html' }
+      }
+      originWhitelist={['*']}
+      sharedCookiesEnabled={true}
+      cacheEnabled={true}
+      allowFileAccess={true}
+      domStorageEnabled={true}
+      thirdPartyCookiesEnabled={true}
+      // allowingReadAccessToURL
+      // style={{ width: 200 }}
+      onLoadEnd={(syntheticEvent) => {
+        // update component to be aware of loading status
+        const { nativeEvent } = syntheticEvent;
+        console.log(nativeEvent.loading);
+      }}
+      javaScriptEnabled={true}
+      onError={(er) => {
+        console.log(er);
+      }}
+      startInLoadingState={true}
+      // renderLoading={() => <Loader />}
+      injectedJavaScript={runFirst}
+      // injectedJavaScriptBeforeContentLoaded={runFirst}
+
+      // onNavigationStateChange={this.handleWebViewNavigationStateChange}
+      onMessage={onMessage}
+    />
+  );
+};
+
+export default ErxesSDK;

package/src/index.html

@@ -0,0 +1,114 @@
+<html>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta charset="utf-8" />
+
+  <body id="mbody" onload="openMessenger()"></body>
+  <script>
+    function openMessenger() {
+      setTimeout(function () {
+        window.Erxes.showMessenger();
+      }, 1500);
+    }
+
+    window.addEventListener('message', (e) => {
+      const { data } = e;
+      const { notificationCount } = data;
+
+      if (notificationCount !== undefined) {
+        window.ReactNativeWebView.postMessage(JSON.stringify(data));
+      }
+    });
+  </script>
+
+  <style>
+    #mbody {
+      align-items: center;
+      justify-content: center;
+      background-color: rgb(189, 189, 188);
+      display: flex;
+      /* flex-direction: column; */
+    }
+
+    .topbar-button {
+      visibility: hidden;
+    }
+
+    .loader {
+      border: 5px solid #f3f3f3;
+      /* Light grey */
+      border-top: 5px solid #3498db;
+      /* Blue */
+      border-radius: 50%;
+      width: 50px;
+      height: 50px;
+      animation: spin 5s linear infinite;
+    }
+
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    /* CSS */
+    .button-75 {
+      align-items: center;
+      background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
+      border: 0;
+      border-radius: 10px;
+      box-sizing: border-box;
+      color: #fff;
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      /* font-family: "Codec cold", sans-serif; */
+      font-size: 16px;
+      font-weight: 700;
+      height: 54px;
+      justify-content: center;
+      letter-spacing: 0.4px;
+      line-height: 1;
+      max-width: 100%;
+      padding-left: 20px;
+      padding-right: 20px;
+      padding-top: 3px;
+      text-decoration: none;
+      text-transform: uppercase;
+      user-select: none;
+      -webkit-user-select: none;
+      touch-action: manipulation;
+    }
+
+    .button-75:active {
+      outline: 0;
+    }
+
+    .button-75:hover {
+      outline: 0;
+    }
+
+    .button-75 span {
+      transition: all 200ms;
+    }
+
+    .button-75:hover span {
+      transform: scale(0.9);
+      opacity: 0.75;
+    }
+
+    @media screen and (max-width: 991px) {
+      .button-75 {
+        font-size: 15px;
+        height: 50px;
+      }
+
+      .button-75 span {
+        line-height: 50px;
+      }
+    }
+  </style>
+</html>

package/src/index.tsx

@@ -0,0 +1,3 @@
+import ErxesSDK from './App';
+
+export default ErxesSDK;