@robylon/react-native-sdk 2.0.19-staging.0 → 2.0.19-staging.3

package/lib/module/utils/systemInfo.js

@@ -1,2 +1,29 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.getSystemInfo=exports.getBrowserAndOSInfoScript=void 0;var _reactNative=require("react-native");var _version=require("../version");var getDeviceType=function getDeviceType(){var _Dimensions$get=_reactNative.Dimensions.get("window"),width=_Dimensions$get.width,height=_Dimensions$get.height;var aspectRatio=height/width;if(_reactNative.Platform.OS==="ios"){return _reactNative.Platform.isPad?"iPad":"iPhone";}else if(_reactNative.Platform.OS==="android"){return aspectRatio<1.6?"Android Tablet":"Android Phone";}return"Desktop";};var getScreenSize=function getScreenSize(){return{width:Math.round(_reactNative.Dimensions.get("window").width*_reactNative.PixelRatio.get()),height:Math.round(_reactNative.Dimensions.get("window").height*_reactNative.PixelRatio.get())};};var getBrowserAndOSInfoScript=exports.getBrowserAndOSInfoScript=function getBrowserAndOSInfoScript(){return"\n    function getOSAndBrowser() {\n      const userAgent = navigator.userAgent;\n      \n      // OS Detection\n      let os = \"unknown\";\n      if (userAgent.indexOf(\"Win\") !== -1) os = \"Windows\";\n      else if (userAgent.indexOf(\"Mac\") !== -1) os = \"MacOS\";\n      else if (userAgent.indexOf(\"Linux\") !== -1) os = \"Linux\";\n      else if (userAgent.indexOf(\"Android\") !== -1) os = \"Android\";\n      else if (userAgent.indexOf(\"like Mac\") !== -1) os = \"iOS\";\n\n      // Browser Detection\n      let browser = \"unknown\";\n      if (userAgent.indexOf(\"Chrome\") !== -1) browser = \"Chrome\";\n      else if (userAgent.indexOf(\"Safari\") !== -1) browser = \"Safari\";\n      else if (userAgent.indexOf(\"Firefox\") !== -1) browser = \"Firefox\";\n      else if (userAgent.indexOf(\"Edge\") !== -1) browser = \"Edge\";\n      else if (userAgent.indexOf(\"MSIE\") !== -1 || userAgent.indexOf(\"Trident/\") !== -1) browser = \"IE\";\n\n      window.ReactNativeWebView.postMessage(JSON.stringify({\n        type: 'SYSTEM_INFO',\n        data: { os, browser }\n      }));\n    }\n    getOSAndBrowser();\n    true;\n  ";};var getSystemInfo=exports.getSystemInfo=function getSystemInfo(webViewSystemInfo){return{platform:_reactNative.Platform.OS,os:webViewSystemInfo.os||_reactNative.Platform.OS,browser:webViewSystemInfo.browser||"WebView",SDK_VERSION:_version.SDK_VERSION,device:getDeviceType(),screen_size:getScreenSize()};};
+Object.defineProperty(exports,"__esModule",{value:true});exports.getSystemInfo=exports.getBrowserAndOSInfoScript=void 0;var _reactNative=require("react-native");var _version=require("../version");var getDeviceType=function getDeviceType(){var _Dimensions$get=_reactNative.Dimensions.get("window"),width=_Dimensions$get.width,height=_Dimensions$get.height;var aspectRatio=height/width;if(_reactNative.Platform.OS==="ios"){return _reactNative.Platform.isPad?"iPad":"iPhone";}else if(_reactNative.Platform.OS==="android"){return aspectRatio<1.6?"Android Tablet":"Android Phone";}return"Desktop";};var getScreenSize=function getScreenSize(){return{width:Math.round(_reactNative.Dimensions.get("window").width*_reactNative.PixelRatio.get()),height:Math.round(_reactNative.Dimensions.get("window").height*_reactNative.PixelRatio.get())};};var getBrowserAndOSInfoScript=exports.getBrowserAndOSInfoScript=function getBrowserAndOSInfoScript(){return`
+    function getOSAndBrowser() {
+      const userAgent = navigator.userAgent;
+      
+      // OS Detection
+      let os = "unknown";
+      if (userAgent.indexOf("Win") !== -1) os = "Windows";
+      else if (userAgent.indexOf("Mac") !== -1) os = "MacOS";
+      else if (userAgent.indexOf("Linux") !== -1) os = "Linux";
+      else if (userAgent.indexOf("Android") !== -1) os = "Android";
+      else if (userAgent.indexOf("like Mac") !== -1) os = "iOS";
+
+      // Browser Detection
+      let browser = "unknown";
+      if (userAgent.indexOf("Chrome") !== -1) browser = "Chrome";
+      else if (userAgent.indexOf("Safari") !== -1) browser = "Safari";
+      else if (userAgent.indexOf("Firefox") !== -1) browser = "Firefox";
+      else if (userAgent.indexOf("Edge") !== -1) browser = "Edge";
+      else if (userAgent.indexOf("MSIE") !== -1 || userAgent.indexOf("Trident/") !== -1) browser = "IE";
+
+      window.ReactNativeWebView.postMessage(JSON.stringify({
+        type: 'SYSTEM_INFO',
+        data: { os, browser }
+      }));
+    }
+    getOSAndBrowser();
+    true;
+  `;};var getSystemInfo=exports.getSystemInfo=function getSystemInfo(webViewSystemInfo){return{platform:_reactNative.Platform.OS,os:webViewSystemInfo.os||_reactNative.Platform.OS,browser:webViewSystemInfo.browser||"WebView",SDK_VERSION:_version.SDK_VERSION,device:getDeviceType(),screen_size:getScreenSize()};};
 //# sourceMappingURL=systemInfo.js.map

package/lib/module/utils/systemInfo.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_version","getDeviceType","_Dimensions$get","Dimensions","get","width","height","aspectRatio","Platform","OS","isPad","getScreenSize","Math","round","PixelRatio","getBrowserAndOSInfoScript","exports","getSystemInfo","webViewSystemInfo","platform","os","browser","SDK_VERSION","device","screen_size"],"sourceRoot":"../../../src","sources":["utils/systemInfo.ts"],"mappings":"wHAAA,IAAAA,YAAA,CAAAC,OAAA,iBACA,IAAAC,QAAA,CAAAD,OAAA,eAiBA,GAAM,CAAAE,aAAa,CAAG,QAAhB,CAAAA,aAAaA,CAAA,CAAiB,CAClC,IAAAC,eAAA,CAA0BC,uBAAU,CAACC,GAAG,CAAC,QAAQ,CAAC,CAA1CC,KAAK,CAAAH,eAAA,CAALG,KAAK,CAAEC,MAAM,CAAAJ,eAAA,CAANI,MAAM,CACrB,GAAM,CAAAC,WAAW,CAAGD,MAAM,CAAGD,KAAK,CAElC,GAAIG,qBAAQ,CAACC,EAAE,GAAK,KAAK,CAAE,CACzB,MAAO,CAAAD,qBAAQ,CAACE,KAAK,CAAG,MAAM,CAAG,QAAQ,CAC3C,CAAC,IAAM,IAAIF,qBAAQ,CAACC,EAAE,GAAK,SAAS,CAAE,CACpC,MAAO,CAAAF,WAAW,CAAG,GAAG,CAAG,gBAAgB,CAAG,eAAe,CAC/D,CACA,MAAO,SAAS,CAClB,CAAC,CAGD,GAAM,CAAAI,aAAa,CAAG,QAAhB,CAAAA,aAAaA,CAAA,CAAqB,CACtC,MAAO,CACLN,KAAK,CAAEO,IAAI,CAACC,KAAK,CAACV,uBAAU,CAACC,GAAG,CAAC,QAAQ,CAAC,CAACC,KAAK,CAAGS,uBAAU,CAACV,GAAG,CAAC,CAAC,CAAC,CACpEE,MAAM,CAAEM,IAAI,CAACC,KAAK,CAACV,uBAAU,CAACC,GAAG,CAAC,QAAQ,CAAC,CAACE,MAAM,CAAGQ,uBAAU,CAACV,GAAG,CAAC,CAAC,CACvE,CAAC,CACH,CAAC,CAGM,GAAM,CAAAW,yBAAyB,CAAAC,OAAA,CAAAD,yBAAA,CAAG,QAA5B,CAAAA,yBAAyBA,CAAA,CAAiB,CACrD,4nCA4BF,CAAC,CAGM,GAAM,CAAAE,aAAa,CAAAD,OAAA,CAAAC,aAAA,CAAG,QAAhB,CAAAA,aAAaA,CAAIC,iBAG7B,CAAiB,CAChB,MAAO,CACLC,QAAQ,CAAEX,qBAAQ,CAACC,EAAE,CACrBW,EAAE,CAAEF,iBAAiB,CAACE,EAAE,EAAIZ,qBAAQ,CAACC,EAAE,CACvCY,OAAO,CAAEH,iBAAiB,CAACG,OAAO,EAAI,SAAS,CAC/CC,WAAW,CAAXA,oBAAW,CACXC,MAAM,CAAEtB,aAAa,CAAC,CAAC,CACvBuB,WAAW,CAAEb,aAAa,CAAC,CAC7B,CAAC,CACH,CAAC","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_version","getDeviceType","_Dimensions$get","Dimensions","get","width","height","aspectRatio","Platform","OS","isPad","getScreenSize","Math","round","PixelRatio","getBrowserAndOSInfoScript","exports","getSystemInfo","webViewSystemInfo","platform","os","browser","SDK_VERSION","device","screen_size"],"sourceRoot":"../../../src","sources":["utils/systemInfo.ts"],"mappings":"wHAAA,IAAAA,YAAA,CAAAC,OAAA,iBACA,IAAAC,QAAA,CAAAD,OAAA,eAiBA,GAAM,CAAAE,aAAa,CAAG,QAAhB,CAAAA,aAAaA,CAAA,CAAiB,CAClC,IAAAC,eAAA,CAA0BC,uBAAU,CAACC,GAAG,CAAC,QAAQ,CAAC,CAA1CC,KAAK,CAAAH,eAAA,CAALG,KAAK,CAAEC,MAAM,CAAAJ,eAAA,CAANI,MAAM,CACrB,GAAM,CAAAC,WAAW,CAAGD,MAAM,CAAGD,KAAK,CAElC,GAAIG,qBAAQ,CAACC,EAAE,GAAK,KAAK,CAAE,CACzB,MAAO,CAAAD,qBAAQ,CAACE,KAAK,CAAG,MAAM,CAAG,QAAQ,CAC3C,CAAC,IAAM,IAAIF,qBAAQ,CAACC,EAAE,GAAK,SAAS,CAAE,CACpC,MAAO,CAAAF,WAAW,CAAG,GAAG,CAAG,gBAAgB,CAAG,eAAe,CAC/D,CACA,MAAO,SAAS,CAClB,CAAC,CAGD,GAAM,CAAAI,aAAa,CAAG,QAAhB,CAAAA,aAAaA,CAAA,CAAqB,CACtC,MAAO,CACLN,KAAK,CAAEO,IAAI,CAACC,KAAK,CAACV,uBAAU,CAACC,GAAG,CAAC,QAAQ,CAAC,CAACC,KAAK,CAAGS,uBAAU,CAACV,GAAG,CAAC,CAAC,CAAC,CACpEE,MAAM,CAAEM,IAAI,CAACC,KAAK,CAACV,uBAAU,CAACC,GAAG,CAAC,QAAQ,CAAC,CAACE,MAAM,CAAGQ,uBAAU,CAACV,GAAG,CAAC,CAAC,CACvE,CAAC,CACH,CAAC,CAGM,GAAM,CAAAW,yBAAyB,CAAAC,OAAA,CAAAD,yBAAA,CAAG,QAA5B,CAAAA,yBAAyBA,CAAA,CAAiB,CACrD,MAAO;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG,CACH,CAAC,CAGM,GAAM,CAAAE,aAAa,CAAAD,OAAA,CAAAC,aAAA,CAAG,QAAhB,CAAAA,aAAaA,CAAIC,iBAG7B,CAAiB,CAChB,MAAO,CACLC,QAAQ,CAAEX,qBAAQ,CAACC,EAAE,CACrBW,EAAE,CAAEF,iBAAiB,CAACE,EAAE,EAAIZ,qBAAQ,CAACC,EAAE,CACvCY,OAAO,CAAEH,iBAAiB,CAACG,OAAO,EAAI,SAAS,CAC/CC,WAAW,CAAXA,oBAAW,CACXC,MAAM,CAAEtB,aAAa,CAAC,CAAC,CACvBuB,WAAW,CAAEb,aAAa,CAAC,CAC7B,CAAC,CACH,CAAC","ignoreList":[]}

package/lib/module/utils/webViewStorage.js

@@ -1,2 +1,34 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.getStorageScript=exports.createStorageMessage=exports.StorageMessageType=void 0;var StorageMessageType=exports.StorageMessageType=function(StorageMessageType){StorageMessageType["GET_STORAGE"]="GET_STORAGE";StorageMessageType["SET_STORAGE"]="SET_STORAGE";StorageMessageType["STORAGE_READY"]="STORAGE_READY";StorageMessageType["STORAGE_ERROR"]="STORAGE_ERROR";StorageMessageType["STORAGE_RESPONSE"]="STORAGE_RESPONSE";return StorageMessageType;}({});var getStorageScript=exports.getStorageScript=function getStorageScript(){return"\n  window.handleStorageOperation = function(message) {\n    try {\n      switch(message.type) {\n        case '"+StorageMessageType.GET_STORAGE+"':\n          const value = localStorage.getItem(message.key);\n          window.ReactNativeWebView.postMessage(JSON.stringify({\n            type: '"+StorageMessageType.STORAGE_RESPONSE+"',\n            key: message.key,\n            value: value\n          }));\n          break;\n        case '"+StorageMessageType.SET_STORAGE+"':\n          localStorage.setItem(message.key, message.value);\n          window.ReactNativeWebView.postMessage(JSON.stringify({\n            type: '"+StorageMessageType.STORAGE_RESPONSE+"',\n            key: message.key,\n            value: message.value\n          }));\n          break;\n      }\n    } catch (error) {\n      window.ReactNativeWebView.postMessage(JSON.stringify({\n        type: '"+StorageMessageType.STORAGE_ERROR+"',\n        error: error.message\n      }));\n    }\n  };\n\n  window.ReactNativeWebView.postMessage(JSON.stringify({\n    type: '"+StorageMessageType.STORAGE_READY+"'\n  }));\n";};var createStorageMessage=exports.createStorageMessage=function createStorageMessage(type,key,value){return"window.handleStorageOperation("+JSON.stringify({type:type,key:key,value:value})+");";};
+Object.defineProperty(exports,"__esModule",{value:true});exports.getStorageScript=exports.createStorageMessage=exports.StorageMessageType=void 0;var StorageMessageType=exports.StorageMessageType=function(StorageMessageType){StorageMessageType["GET_STORAGE"]="GET_STORAGE";StorageMessageType["SET_STORAGE"]="SET_STORAGE";StorageMessageType["STORAGE_READY"]="STORAGE_READY";StorageMessageType["STORAGE_ERROR"]="STORAGE_ERROR";StorageMessageType["STORAGE_RESPONSE"]="STORAGE_RESPONSE";return StorageMessageType;}({});var getStorageScript=exports.getStorageScript=function getStorageScript(){return`
+  window.handleStorageOperation = function(message) {
+    try {
+      switch(message.type) {
+        case '${StorageMessageType.GET_STORAGE}':
+          const value = localStorage.getItem(message.key);
+          window.ReactNativeWebView.postMessage(JSON.stringify({
+            type: '${StorageMessageType.STORAGE_RESPONSE}',
+            key: message.key,
+            value: value
+          }));
+          break;
+        case '${StorageMessageType.SET_STORAGE}':
+          localStorage.setItem(message.key, message.value);
+          window.ReactNativeWebView.postMessage(JSON.stringify({
+            type: '${StorageMessageType.STORAGE_RESPONSE}',
+            key: message.key,
+            value: message.value
+          }));
+          break;
+      }
+    } catch (error) {
+      window.ReactNativeWebView.postMessage(JSON.stringify({
+        type: '${StorageMessageType.STORAGE_ERROR}',
+        error: error.message
+      }));
+    }
+  };
+
+  window.ReactNativeWebView.postMessage(JSON.stringify({
+    type: '${StorageMessageType.STORAGE_READY}'
+  }));
+`;};var createStorageMessage=exports.createStorageMessage=function createStorageMessage(type,key,value){return`window.handleStorageOperation(${JSON.stringify({type:type,key:key,value:value})});`;};
 //# sourceMappingURL=webViewStorage.js.map

package/lib/module/utils/webViewStorage.js.map

@@ -1 +1 @@
-{"version":3,"names":["StorageMessageType","exports","getStorageScript","GET_STORAGE","STORAGE_RESPONSE","SET_STORAGE","STORAGE_ERROR","STORAGE_READY","createStorageMessage","type","key","value","JSON","stringify"],"sourceRoot":"../../../src","sources":["utils/webViewStorage.ts"],"mappings":"oJAEY,CAAAA,kBAAkB,CAAAC,OAAA,CAAAD,kBAAA,UAAlBA,kBAAkB,EAAlBA,kBAAkB,8BAAlBA,kBAAkB,8BAAlBA,kBAAkB,kCAAlBA,kBAAkB,kCAAlBA,kBAAkB,8CAAlB,CAAAA,kBAAkB,OAevB,GAAM,CAAAE,gBAAgB,CAAAD,OAAA,CAAAC,gBAAA,CAAG,QAAnB,CAAAA,gBAAgBA,CAAA,2HAIbF,kBAAkB,CAACG,WAAW,yJAGzBH,kBAAkB,CAACI,gBAAgB,iHAKxCJ,kBAAkB,CAACK,WAAW,0JAGzBL,kBAAkB,CAACI,gBAAgB,wNAQvCJ,kBAAkB,CAACM,aAAa,sIAOpCN,kBAAkB,CAACO,aAAa,gBAE5C,CAEM,GAAM,CAAAC,oBAAoB,CAAAP,OAAA,CAAAO,oBAAA,CAAG,QAAvB,CAAAA,oBAAoBA,CAC/BC,IAAwB,CACxBC,GAAY,CACZC,KAAc,CACH,CACX,uCAAwCC,IAAI,CAACC,SAAS,CAAC,CACrDJ,IAAI,CAAJA,IAAI,CACJC,GAAG,CAAHA,GAAG,CACHC,KAAK,CAALA,KACF,CAAC,CAAC,MACJ,CAAC","ignoreList":[]}
+{"version":3,"names":["StorageMessageType","exports","getStorageScript","GET_STORAGE","STORAGE_RESPONSE","SET_STORAGE","STORAGE_ERROR","STORAGE_READY","createStorageMessage","type","key","value","JSON","stringify"],"sourceRoot":"../../../src","sources":["utils/webViewStorage.ts"],"mappings":"oJAEY,CAAAA,kBAAkB,CAAAC,OAAA,CAAAD,kBAAA,UAAlBA,kBAAkB,EAAlBA,kBAAkB,8BAAlBA,kBAAkB,8BAAlBA,kBAAkB,kCAAlBA,kBAAkB,kCAAlBA,kBAAkB,8CAAlB,CAAAA,kBAAkB,OAevB,GAAM,CAAAE,gBAAgB,CAAAD,OAAA,CAAAC,gBAAA,CAAG,QAAnB,CAAAA,gBAAgBA,CAAA,QAAS;AACtC;AACA;AACA;AACA,gBAAgBF,kBAAkB,CAACG,WAAW;AAC9C;AACA;AACA,qBAAqBH,kBAAkB,CAACI,gBAAgB;AACxD;AACA;AACA;AACA;AACA,gBAAgBJ,kBAAkB,CAACK,WAAW;AAC9C;AACA;AACA,qBAAqBL,kBAAkB,CAACI,gBAAgB;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBJ,kBAAkB,CAACM,aAAa;AACjD;AACA;AACA;AACA;AACA;AACA;AACA,aAAaN,kBAAkB,CAACO,aAAa;AAC7C;AACA,CAAC,GAEM,GAAM,CAAAC,oBAAoB,CAAAP,OAAA,CAAAO,oBAAA,CAAG,QAAvB,CAAAA,oBAAoBA,CAC/BC,IAAwB,CACxBC,GAAY,CACZC,KAAc,CACH,CACX,MAAO,iCAAiCC,IAAI,CAACC,SAAS,CAAC,CACrDJ,IAAI,CAAJA,IAAI,CACJC,GAAG,CAAHA,GAAG,CACHC,KAAK,CAALA,KACF,CAAC,CAAC,IAAI,CACR,CAAC","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robylon/react-native-sdk",
-  "version": "2.0.19-staging.0",
+  "version": "2.0.19-staging.3",
   "description": "React Native SDK for Robylon",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -9,7 +9,7 @@
   "source": "src/index.tsx",
   "readme": "README.md",
   "scripts": {
-    "prebuild": "node scripts/generate-version.js",
+    "prebuild": "node scripts/update-version.js",
     "build": "bob build",
     "clean": "rimraf lib",
     "prebuild:dev": "cp .npmignore.development .npmignore",
@@ -22,7 +22,7 @@
     "version:staging": "npm version prerelease --preid staging",
     "version:production": "npm version patch",
     "publish:dev": "npm run clean && npm run prebuild:dev && npm run version:dev && npm run build:dev && npm publish --tag dev",
-    "publish:staging": "node scripts/validate-publish.js staging && npm version $(node scripts/get-next-version.js staging) && npm publish --tag staging",
+    "publish:staging": "node scripts/validate-publish.js staging && npm version $(node scripts/get-next-version.js staging) && npm run build:staging && npm publish --tag staging",
     "publish:production": "node scripts/validate-publish.js production && npm version $(node scripts/get-next-version.js production) && npm publish",
     "publish:hotfix": "node scripts/validate-publish.js hotfix && npm version $(node scripts/get-next-version.js hotfix) && npm publish --tag hotfix",
     "postinstall": "node scripts/setup-git-hooks.js",
@@ -47,7 +47,8 @@
     "react-native-builder-bob": "^0.20.0",
     "rimraf": "^6.0.1",
     "semver": "^7.5.4",
-    "typescript": "^4.5.2"
+    "typescript": "^4.5.2",
+    "metro-react-native-babel-preset": "^0.76.5"
   },
   "react-native-builder-bob": {
     "source": "src",

package/scripts/update-version.js

@@ -0,0 +1,15 @@
+const fs = require("fs");
+const path = require("path");
+
+// Read version from package.json
+const packageJson = require("../package.json");
+const version = packageJson.version;
+
+// Create version.ts content
+const content = `// This file is auto-generated. Do not modify it manually.
+export const SDK_VERSION = '${version}';\n`;
+
+// Write to version.ts
+fs.writeFileSync(path.join(__dirname, "../src/version.ts"), content);
+
+console.log(`Updated SDK_VERSION to ${version}`);

package/src/ChatbotWebview.tsx

@@ -0,0 +1,44 @@
+// File: src/ChatbotWebview.tsx
+import React, { useEffect, useState } from "react";
+import { View } from "react-native";
+import { WebView } from "react-native-webview";
+import { BASE_CHATBOT_URL } from "./constants";
+import LoadingIndicator from "./LoadingIndicator";
+
+interface ChatbotWebviewProps {
+  chatbotId: string;
+  additionalParams?: Record<string, string>;
+}
+
+const constructUrl = (
+  chatbotId: string,
+  additionalParams: Record<string, string> = {}
+): string => {
+  const params = new URLSearchParams({ id: chatbotId, ...additionalParams });
+  return `${BASE_CHATBOT_URL}?${params.toString()}`;
+};
+
+export const ChatbotWebview: React.FC<ChatbotWebviewProps> = ({
+  chatbotId,
+  additionalParams,
+}) => {
+  const [url, setUrl] = useState<string>("");
+
+  useEffect(() => {
+    setUrl(constructUrl(chatbotId, additionalParams));
+  }, [chatbotId, additionalParams]);
+
+  return (
+    <View style={{ flex: 1 }}>
+      {url ? (
+        <WebView
+          source={{ uri: url }}
+          startInLoadingState={true}
+          renderLoading={() => <LoadingIndicator />}
+        />
+      ) : (
+        <LoadingIndicator />
+      )}
+    </View>
+  );
+};