Inji-409: Add flipper config (#865)

* feat(inji-344): add flipper config for mmkv and xstate * feat(inji-409): Add flipper config file and enable devtools for all machines * feat(inji-409): Add react-navigation to flipper config
2026-01-06 20:23:52 -05:00 · 2023-10-04 16:38:34 +05:30
parent ca83cb8158
commit 0dc6139449
11 changed files with 392 additions and 46 deletions
--- a/.env
+++ b/.env
@@ -15,6 +15,7 @@ APPLICATION_THEME=orange

 #environment can be changed if it is toggled
 CREDENTIAL_REGISTRY_EDIT=true
+DEBUG_MODE=false

 #supported languages( en, fil, ar, hi, kn, ta)
 APPLICATION_LANGUAGE=en
--- a/App.tsx
+++ b/App.tsx
@@ -25,7 +25,15 @@ import {MessageOverlay} from './components/MessageOverlay';
 import SecureKeystore from 'react-native-secure-keystore';
 import {isCustomSecureKeystore} from './shared/cryptoutil/cryptoUtil';
 import i18n from './i18n';
+import mmkvFlipper from 'rn-mmkv-storage-flipper';
+import {MMKV} from './shared/storage';
+import {inspect} from 'react-native-flipper-xstate';

+// add this line inside your App.tsx
+if (__DEV__) {
+  mmkvFlipper(MMKV);
+  inspect();
+}
 // kludge: this is a bad practice but has been done temporarily to surface
 //  an occurance of a bug with minimal residual code changes, this should
 //  be removed once the bug cause is determined & fixed, ref: INJI-222
--- a/components/GlobalContextProvider.tsx
+++ b/components/GlobalContextProvider.tsx
@@ -1,18 +1,18 @@
 import React from 'react';
-import { useInterpret } from '@xstate/react';
-import { appMachine, logState } from '../machines/app';
+import {useInterpret} from '@xstate/react';
+import {appMachine, logState} from '../machines/app';

-import { GlobalContext } from '../shared/GlobalContext';
+import {GlobalContext} from '../shared/GlobalContext';

-export const GlobalContextProvider: React.FC = (props) => {
-  const appService = useInterpret(appMachine);
+export const GlobalContextProvider: React.FC = props => {
+  const appService = useInterpret(appMachine, {devTools: __DEV__});

  if (__DEV__) {
    appService.subscribe(logState);
  }

  return (
-    <GlobalContext.Provider value={{ appService }}>
+    <GlobalContext.Provider value={{appService}}>
      {props.children}
    </GlobalContext.Provider>
  );
--- a/inji.flipper
+++ b/inji.flipper
--- a/package-lock.json
+++ b/package-lock.json
@@ -93,6 +93,7 @@
        "@babel/runtime": "^7.20.0",
        "@react-native-community/eslint-config": "^3.2.0",
        "@react-native/metro-config": "^0.72.11",
+        "@react-navigation/devtools": "^6.0.19",
        "@tsconfig/react-native": "^2.0.2",
        "@types/react": "^18.0.24",
        "@types/react-native": "~0.64.12",
@@ -112,8 +113,11 @@
        "lint-staged": "^12.3.7",
        "metro-react-native-babel-preset": "0.73.9",
        "prettier": "^2.6.1",
+        "react-native-flipper": "^0.212.0",
+        "react-native-flipper-xstate": "^1.0.5",
        "react-native-svg-transformer": "^1.1.0",
        "react-test-renderer": "18.2.0",
+        "rn-mmkv-storage-flipper": "^1.1.1",
        "typescript": "^4.9.4"
      },
      "engines": {
@@ -9237,6 +9241,20 @@
        "react": "*"
      }
    },
+    "node_modules/@react-navigation/devtools": {
+      "version": "6.0.19",
+      "resolved": "https://registry.npmjs.org/@react-navigation/devtools/-/devtools-6.0.19.tgz",
+      "integrity": "sha512-TfOOy26boJa4FuTYrwrLYIqv3uXZYt1Ighe5vH892ky5xCYgWY8TBwmHVpXQT/3XBCRkqW6ADyrXLCh5/F0JXg==",
+      "dev": true,
+      "dependencies": {
+        "deep-equal": "^2.0.5",
+        "nanoid": "^3.1.23",
+        "stacktrace-parser": "^0.1.10"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
    "node_modules/@react-navigation/elements": {
      "version": "1.3.7",
      "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.7.tgz",
@@ -12938,21 +12956,38 @@
      }
    },
    "node_modules/deep-equal": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
-      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.2.tgz",
+      "integrity": "sha512-xjVyBf0w5vH0I42jdAZzOKVldmPgSulmiyPRywoyq7HXC9qdgo17kxJE+rdnif5Tz6+pIrpJI8dCpMNLIGkUiA==",
      "dependencies": {
-        "is-arguments": "^1.0.4",
-        "is-date-object": "^1.0.1",
-        "is-regex": "^1.0.4",
-        "object-is": "^1.0.1",
+        "array-buffer-byte-length": "^1.0.0",
+        "call-bind": "^1.0.2",
+        "es-get-iterator": "^1.1.3",
+        "get-intrinsic": "^1.2.1",
+        "is-arguments": "^1.1.1",
+        "is-array-buffer": "^3.0.2",
+        "is-date-object": "^1.0.5",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.2",
+        "isarray": "^2.0.5",
+        "object-is": "^1.1.5",
        "object-keys": "^1.1.1",
-        "regexp.prototype.flags": "^1.2.0"
+        "object.assign": "^4.1.4",
+        "regexp.prototype.flags": "^1.5.0",
+        "side-channel": "^1.0.4",
+        "which-boxed-primitive": "^1.0.2",
+        "which-collection": "^1.0.1",
+        "which-typed-array": "^1.1.9"
      },
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/deep-equal/node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
+    },
    "node_modules/deep-extend": {
      "version": "0.6.0",
      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
@@ -13692,6 +13727,30 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/es-get-iterator": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz",
+      "integrity": "sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "has-symbols": "^1.0.3",
+        "is-arguments": "^1.1.1",
+        "is-map": "^2.0.2",
+        "is-set": "^2.0.2",
+        "is-string": "^1.0.7",
+        "isarray": "^2.0.5",
+        "stop-iteration-iterator": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-get-iterator/node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
+    },
    "node_modules/es-iterator-helpers": {
      "version": "1.0.14",
      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.14.tgz",
@@ -16404,6 +16463,22 @@
      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
      "dev": true
    },
+    "node_modules/fast-loops": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/fast-loops/-/fast-loops-1.1.3.tgz",
+      "integrity": "sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g=="
+    },
+    "node_modules/fast-safe-stringify": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz",
+      "integrity": "sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==",
+      "dev": true
+    },
+    "node_modules/fast-shallow-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
+      "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw=="
+    },
    "node_modules/fast-text-encoding": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/fast-text-encoding/-/fast-text-encoding-1.0.3.tgz",
@@ -18458,7 +18533,6 @@
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
      "integrity": "sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==",
-      "dev": true,
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
      }
@@ -18570,7 +18644,6 @@
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.2.tgz",
      "integrity": "sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==",
-      "dev": true,
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
      }
@@ -18688,7 +18761,6 @@
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
      "integrity": "sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==",
-      "dev": true,
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
      }
@@ -18708,7 +18780,6 @@
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.2.tgz",
      "integrity": "sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==",
-      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.2",
        "get-intrinsic": "^1.1.1"
@@ -26642,6 +26713,75 @@
        "react-native-vector-icons": ">7.0.0"
      }
    },
+    "node_modules/react-native-flipper": {
+      "version": "0.212.0",
+      "resolved": "https://registry.npmjs.org/react-native-flipper/-/react-native-flipper-0.212.0.tgz",
+      "integrity": "sha512-bDRfIgE3v/jjEEdnvGP0T6maDD+bXhDAQ/SZUYTKd/CQ6YIU1c0EF+e0urU62LNMv6XEFQKz226McdddyVhYZA==",
+      "dev": true,
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-native": ">0.62.0"
+      }
+    },
+    "node_modules/react-native-flipper-xstate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/react-native-flipper-xstate/-/react-native-flipper-xstate-1.0.5.tgz",
+      "integrity": "sha512-HYbi0qKBHFpURTIqVSgRSus2nbJop0sSlFwb9fI2MYrj46QsS1zQjO/fjZyo8tFrOiXgPKAKIIcUCa0ULk8T7Q==",
+      "dev": true,
+      "dependencies": {
+        "@xstate/inspect": "^0.5.0",
+        "react-native-flipper": "^0.110.0",
+        "xstate": "^4.25.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0",
+        "react-native": ">0.62.0"
+      }
+    },
+    "node_modules/react-native-flipper-xstate/node_modules/@xstate/inspect": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@xstate/inspect/-/inspect-0.5.2.tgz",
+      "integrity": "sha512-DdqUPiKaHW6VpnVZcm8YMD8LBeS3B9bB3+VT/6VEyilgvf2MgYzho2dKOOkeZM0iDEadSmzGdDpz0jh7DSpMXQ==",
+      "dev": true,
+      "dependencies": {
+        "fast-safe-stringify": "^2.0.7"
+      },
+      "peerDependencies": {
+        "ws": "^7.3.1"
+      }
+    },
+    "node_modules/react-native-flipper-xstate/node_modules/react-native-flipper": {
+      "version": "0.110.0",
+      "resolved": "https://registry.npmjs.org/react-native-flipper/-/react-native-flipper-0.110.0.tgz",
+      "integrity": "sha512-VhHodD04j3SQoPUxHoSHV4jHZyxsdRn7svgA2XteAmw03kF/GF1/ytrcelq9yR/VvWXeUtdrJJ99az0b1nXLjQ==",
+      "dev": true,
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0",
+        "react-native": ">0.62.0"
+      }
+    },
+    "node_modules/react-native-flipper-xstate/node_modules/ws": {
+      "version": "7.5.9",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/react-native-fs": {
      "version": "2.20.0",
      "resolved": "https://registry.npmjs.org/react-native-fs/-/react-native-fs-2.20.0.tgz",
@@ -27845,6 +27985,27 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+<<<<<<< HEAD
+    "node_modules/rn-mmkv-storage-flipper": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/rn-mmkv-storage-flipper/-/rn-mmkv-storage-flipper-1.1.1.tgz",
+      "integrity": "sha512-ufJ1PnUNGMgoSv5xpi428bimoBD4FLBwTfqwP8TXavzG3Pz2tD6U3SptamJdTFUYdymDkVlMNz6BqKhTk/5UMQ==",
+      "dev": true,
+      "peerDependencies": {
+        "react-native-flipper": "latest",
+        "react-native-mmkv-storage": "latest"
+      }
+    },
+    "node_modules/rtl-css-js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
+      "integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
+=======
+>>>>>>> upstream/develop
    "node_modules/rtl-detect": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/rtl-detect/-/rtl-detect-1.0.4.tgz",
@@ -28967,6 +29128,17 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
+      "integrity": "sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==",
+      "dependencies": {
+        "internal-slot": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
    "node_modules/str2buf": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/str2buf/-/str2buf-1.3.0.tgz",
@@ -30629,7 +30801,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.1.tgz",
      "integrity": "sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==",
-      "dev": true,
      "dependencies": {
        "is-map": "^2.0.1",
        "is-set": "^2.0.1",
@@ -37891,6 +38062,17 @@
        "use-latest-callback": "^0.1.5"
      }
    },
+    "@react-navigation/devtools": {
+      "version": "6.0.19",
+      "resolved": "https://registry.npmjs.org/@react-navigation/devtools/-/devtools-6.0.19.tgz",
+      "integrity": "sha512-TfOOy26boJa4FuTYrwrLYIqv3uXZYt1Ighe5vH892ky5xCYgWY8TBwmHVpXQT/3XBCRkqW6ADyrXLCh5/F0JXg==",
+      "dev": true,
+      "requires": {
+        "deep-equal": "^2.0.5",
+        "nanoid": "^3.1.23",
+        "stacktrace-parser": "^0.1.10"
+      }
+    },
    "@react-navigation/elements": {
      "version": "1.3.7",
      "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.7.tgz",
@@ -40663,16 +40845,35 @@
      "requires": {}
    },
    "deep-equal": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
-      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.2.tgz",
+      "integrity": "sha512-xjVyBf0w5vH0I42jdAZzOKVldmPgSulmiyPRywoyq7HXC9qdgo17kxJE+rdnif5Tz6+pIrpJI8dCpMNLIGkUiA==",
      "requires": {
-        "is-arguments": "^1.0.4",
-        "is-date-object": "^1.0.1",
-        "is-regex": "^1.0.4",
-        "object-is": "^1.0.1",
+        "array-buffer-byte-length": "^1.0.0",
+        "call-bind": "^1.0.2",
+        "es-get-iterator": "^1.1.3",
+        "get-intrinsic": "^1.2.1",
+        "is-arguments": "^1.1.1",
+        "is-array-buffer": "^3.0.2",
+        "is-date-object": "^1.0.5",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.2",
+        "isarray": "^2.0.5",
+        "object-is": "^1.1.5",
        "object-keys": "^1.1.1",
-        "regexp.prototype.flags": "^1.2.0"
+        "object.assign": "^4.1.4",
+        "regexp.prototype.flags": "^1.5.0",
+        "side-channel": "^1.0.4",
+        "which-boxed-primitive": "^1.0.2",
+        "which-collection": "^1.0.1",
+        "which-typed-array": "^1.1.9"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+          "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
+        }
      }
    },
    "deep-extend": {
@@ -41272,6 +41473,29 @@
        "which-typed-array": "^1.1.10"
      }
    },
+    "es-get-iterator": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz",
+      "integrity": "sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "has-symbols": "^1.0.3",
+        "is-arguments": "^1.1.1",
+        "is-map": "^2.0.2",
+        "is-set": "^2.0.2",
+        "is-string": "^1.0.7",
+        "isarray": "^2.0.5",
+        "stop-iteration-iterator": "^1.0.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+          "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
+        }
+      }
+    },
    "es-iterator-helpers": {
      "version": "1.0.14",
      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.14.tgz",
@@ -43373,6 +43597,25 @@
      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
      "dev": true
    },
+<<<<<<< HEAD
+    "fast-loops": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/fast-loops/-/fast-loops-1.1.3.tgz",
+      "integrity": "sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g=="
+    },
+    "fast-safe-stringify": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz",
+      "integrity": "sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==",
+      "dev": true
+    },
+    "fast-shallow-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
+      "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw=="
+    },
+=======
+>>>>>>> upstream/develop
    "fast-text-encoding": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/fast-text-encoding/-/fast-text-encoding-1.0.3.tgz",
@@ -44874,8 +45117,7 @@
    "is-map": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
-      "integrity": "sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==",
-      "dev": true
+      "integrity": "sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg=="
    },
    "is-negative-zero": {
      "version": "2.0.2",
@@ -44944,8 +45186,7 @@
    "is-set": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.2.tgz",
-      "integrity": "sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==",
-      "dev": true
+      "integrity": "sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g=="
    },
    "is-shared-array-buffer": {
      "version": "1.0.2",
@@ -45017,8 +45258,7 @@
    "is-weakmap": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
-      "integrity": "sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==",
-      "dev": true
+      "integrity": "sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA=="
    },
    "is-weakref": {
      "version": "1.0.2",
@@ -45032,7 +45272,6 @@
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.2.tgz",
      "integrity": "sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==",
-      "dev": true,
      "requires": {
        "call-bind": "^1.0.2",
        "get-intrinsic": "^1.1.1"
@@ -51078,6 +51317,50 @@
        "react-native-size-matters": "^0.3.1"
      }
    },
+    "react-native-flipper": {
+      "version": "0.212.0",
+      "resolved": "https://registry.npmjs.org/react-native-flipper/-/react-native-flipper-0.212.0.tgz",
+      "integrity": "sha512-bDRfIgE3v/jjEEdnvGP0T6maDD+bXhDAQ/SZUYTKd/CQ6YIU1c0EF+e0urU62LNMv6XEFQKz226McdddyVhYZA==",
+      "dev": true,
+      "requires": {}
+    },
+    "react-native-flipper-xstate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/react-native-flipper-xstate/-/react-native-flipper-xstate-1.0.5.tgz",
+      "integrity": "sha512-HYbi0qKBHFpURTIqVSgRSus2nbJop0sSlFwb9fI2MYrj46QsS1zQjO/fjZyo8tFrOiXgPKAKIIcUCa0ULk8T7Q==",
+      "dev": true,
+      "requires": {
+        "@xstate/inspect": "^0.5.0",
+        "react-native-flipper": "^0.110.0",
+        "xstate": "^4.25.0"
+      },
+      "dependencies": {
+        "@xstate/inspect": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/@xstate/inspect/-/inspect-0.5.2.tgz",
+          "integrity": "sha512-DdqUPiKaHW6VpnVZcm8YMD8LBeS3B9bB3+VT/6VEyilgvf2MgYzho2dKOOkeZM0iDEadSmzGdDpz0jh7DSpMXQ==",
+          "dev": true,
+          "requires": {
+            "fast-safe-stringify": "^2.0.7"
+          }
+        },
+        "react-native-flipper": {
+          "version": "0.110.0",
+          "resolved": "https://registry.npmjs.org/react-native-flipper/-/react-native-flipper-0.110.0.tgz",
+          "integrity": "sha512-VhHodD04j3SQoPUxHoSHV4jHZyxsdRn7svgA2XteAmw03kF/GF1/ytrcelq9yR/VvWXeUtdrJJ99az0b1nXLjQ==",
+          "dev": true,
+          "requires": {}
+        },
+        "ws": {
+          "version": "7.5.9",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+          "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+          "dev": true,
+          "peer": true,
+          "requires": {}
+        }
+      }
+    },
    "react-native-fs": {
      "version": "2.20.0",
      "resolved": "https://registry.npmjs.org/react-native-fs/-/react-native-fs-2.20.0.tgz",
@@ -51947,6 +52230,24 @@
        }
      }
    },
+<<<<<<< HEAD
+    "rn-mmkv-storage-flipper": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/rn-mmkv-storage-flipper/-/rn-mmkv-storage-flipper-1.1.1.tgz",
+      "integrity": "sha512-ufJ1PnUNGMgoSv5xpi428bimoBD4FLBwTfqwP8TXavzG3Pz2tD6U3SptamJdTFUYdymDkVlMNz6BqKhTk/5UMQ==",
+      "dev": true,
+      "requires": {}
+    },
+    "rtl-css-js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
+      "integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
+=======
+>>>>>>> upstream/develop
    "rtl-detect": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/rtl-detect/-/rtl-detect-1.0.4.tgz",
@@ -52871,6 +53172,14 @@
      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
    },
+    "stop-iteration-iterator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
+      "integrity": "sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==",
+      "requires": {
+        "internal-slot": "^1.0.4"
+      }
+    },
    "str2buf": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/str2buf/-/str2buf-1.3.0.tgz",
@@ -54130,7 +54439,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.1.tgz",
      "integrity": "sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==",
-      "dev": true,
      "requires": {
        "is-map": "^2.0.1",
        "is-set": "^2.0.1",
--- a/package.json
+++ b/package.json
@@ -95,6 +95,7 @@
    "@babel/runtime": "^7.20.0",
    "@react-native-community/eslint-config": "^3.2.0",
    "@react-native/metro-config": "^0.72.11",
+    "@react-navigation/devtools": "^6.0.19",
    "@tsconfig/react-native": "^2.0.2",
    "@types/react": "^18.0.24",
    "@types/react-native": "~0.64.12",
@@ -114,8 +115,11 @@
    "lint-staged": "^12.3.7",
    "metro-react-native-babel-preset": "0.73.9",
    "prettier": "^2.6.1",
+    "react-native-flipper": "^0.212.0",
+    "react-native-flipper-xstate": "^1.0.5",
    "react-native-svg-transformer": "^1.1.0",
    "react-test-renderer": "18.2.0",
+    "rn-mmkv-storage-flipper": "^1.1.1",
    "typescript": "^4.9.4"
  },
  "private": true,
--- a/screens/AppLayout.tsx
+++ b/screens/AppLayout.tsx
@@ -1,15 +1,22 @@
 import React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
+import {
+  NavigationContainer,
+  useNavigationContainerRef,
+} from '@react-navigation/native';
 import {
  NativeStackNavigationOptions,
  createNativeStackNavigator,
 } from '@react-navigation/native-stack';
-import { authRoutes, baseRoutes } from '../routes';
-import { useAppLayout } from './AppLayoutController';
-import { StatusBar } from 'react-native';
+import {authRoutes, baseRoutes} from '../routes';
+import {useAppLayout} from './AppLayoutController';
+import {StatusBar} from 'react-native';
+import {useFlipper} from '@react-navigation/devtools';

-const { Navigator, Screen } = createNativeStackNavigator();
+const {Navigator, Screen} = createNativeStackNavigator();
 export const AppLayout: React.FC = () => {
+  const navigationRef = useNavigationContainerRef();
+  useFlipper(navigationRef);
+
  const controller = useAppLayout();
  const options: NativeStackNavigationOptions = {
    title: '',
@@ -19,7 +26,7 @@ export const AppLayout: React.FC = () => {
  };

  return (
-    <NavigationContainer>
+    <NavigationContainer ref={navigationRef}>
      <StatusBar animated={true} barStyle="dark-content" />
      <Navigator
        initialRouteName={
@@ -30,11 +37,11 @@ export const AppLayout: React.FC = () => {
            : baseRoutes[1].name
        }
        screenOptions={options}>
-        {baseRoutes.map((route) => (
+        {baseRoutes.map(route => (
          <Screen key={route.name} {...route} />
        ))}
        {controller.isAuthorized &&
-          authRoutes.map((route) => <Screen key={route.name} {...route} />)}
+          authRoutes.map(route => <Screen key={route.name} {...route} />)}
      </Navigator>
    </NavigationContainer>
  );
--- a/shared/constants.ts
+++ b/shared/constants.ts
@@ -3,11 +3,13 @@ import {
  MIMOTO_HOST,
  ESIGNET_HOST,
  GOOGLE_NEARBY_MESSAGES_API_KEY,
+  DEBUG_MODE,
 } from 'react-native-dotenv';
 import {Argon2iConfig} from './commonUtil';

 export let MIMOTO_BASE_URL = MIMOTO_HOST;
 export let ESIGNET_BASE_URL = ESIGNET_HOST;
+export let DEBUG_MODE_ENABLED = DEBUG_MODE === 'true';

 export const changeCrendetialRegistry = host => (MIMOTO_BASE_URL = host);
 export const changeEsignetUrl = host => (ESIGNET_BASE_URL = host);
--- a/shared/cryptoutil/cryptoUtil.ts
+++ b/shared/cryptoutil/cryptoUtil.ts
@@ -1,7 +1,7 @@
 import {KeyPair, RSA} from 'react-native-rsa-native';
 import forge from 'node-forge';
 import getAllConfigurations from '../commonprops/commonProps';
-import {isIOS} from '../constants';
+import {DEBUG_MODE_ENABLED, isIOS} from '../constants';
 import SecureKeystore from 'react-native-secure-keystore';
 import Storage from '../storage';
 import CryptoJS from 'crypto-js';
@@ -89,7 +89,7 @@ export async function createSignature(
  }
 }

-function replaceCharactersInB64(encodedB64) {
+function replaceCharactersInB64(encodedB64: string) {
  return encodedB64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
 }

@@ -126,6 +126,11 @@ export async function encryptJson(
  encryptionKey: string,
  data: string,
 ): Promise<string> {
+  // Disable Encryption in debug mode
+  if (DEBUG_MODE_ENABLED && __DEV__) {
+    return JSON.stringify(data);
+  }
+
  if (!isCustomSecureKeystore()) {
    return CryptoJS.AES.encrypt(data, encryptionKey).toString();
  }
@@ -137,6 +142,11 @@ export async function decryptJson(
  encryptedData: string,
 ): Promise<string> {
  try {
+    // Disable Encryption in debug mode
+    if (DEBUG_MODE_ENABLED && __DEV__) {
+      return JSON.parse(encryptedData);
+    }
+
    if (!isCustomSecureKeystore()) {
      return CryptoJS.AES.decrypt(encryptedData, encryptionKey).toString(
        CryptoJS.enc.Utf8,
--- a/shared/storage.ts
+++ b/shared/storage.ts
@@ -24,7 +24,7 @@ import {
 } from './cryptoutil/cryptoUtil';
 import {VCMetadata} from './VCMetadata';

-const MMKV = new MMKVLoader().initialize();
+export const MMKV = new MMKVLoader().initialize();
 const vcDirectoryPath = `${DocumentDirectoryPath}/inji/VC`;

 export const API_CACHED_STORAGE_KEYS = {
--- a/types/react-native-dotenv/index.d.ts
+++ b/types/react-native-dotenv/index.d.ts
@@ -38,4 +38,9 @@ declare module 'react-native-dotenv' {
   * LANGUAGE for the unsupported device languages
   */
  export const APPLICATION_LANGUAGE: string;
+
+  /**
+   * Flag for Toggling debug mode
+   */
+  export const DEBUG_MODE: string;
 }