React Navigation install

2022-12-10 19:46:34 +01:00 · 2022-12-10 19:46:34 +01:00 · 6a6daadc0a
parent 2627c8ade5
commit 6a6daadc0a
4 changed files with 337 additions and 19 deletions
--- a/android/app/src/main/java/com/clickandjoinapp/MainActivity.java
+++ b/android/app/src/main/java/com/clickandjoinapp/MainActivity.java
@ -3,9 +3,15 @@ package com.clickandjoinapp;
 import com.facebook.react.ReactActivity;
 import com.facebook.react.ReactActivityDelegate;
 import com.facebook.react.ReactRootView;
+import android.os.Bundle;

 public class MainActivity extends ReactActivity {

+  @Override
+  protected void onCreate(Bundle savedInstanceState) {
+    super.onCreate(null);
+  }
+
  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
--- a/package-lock.json
+++ b/package-lock.json
@ -8,6 +8,8 @@
      "name": "ClickAndJoinApp",
      "version": "0.0.1",
      "dependencies": {
+        "@react-navigation/native": "^6.1.0",
+        "@react-navigation/native-stack": "^6.9.5",
        "babel-preset-esnext": "^1.1.3",
        "babel-preset-react": "^6.24.1",
        "native-base": "^3.4.23",
@ -15,6 +17,7 @@
        "react-dom": "18.1.0",
        "react-native": "0.70.6",
        "react-native-safe-area-context": "^4.4.1",
+        "react-native-screens": "^3.18.2",
        "react-native-web": "^0.18.10"
      },
      "devDependencies": {
@ -4888,6 +4891,99 @@
      "resolved": "https://registry.npmjs.org/@react-native/polyfills/-/polyfills-2.0.0.tgz",
      "integrity": "sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ=="
    },
+    "node_modules/@react-navigation/core": {
+      "version": "6.4.4",
+      "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.4.tgz",
+      "integrity": "sha512-skdTzr6sOceEusEDG+e58zaSpgy1Yz7eZGFtmkmdYAFkZDy5nkIY/0nYuXP0waUYarNXg6lNEVkF995/kZXHZg==",
+      "dependencies": {
+        "@react-navigation/routers": "^6.1.5",
+        "escape-string-regexp": "^4.0.0",
+        "nanoid": "^3.1.23",
+        "query-string": "^7.1.3",
+        "react-is": "^16.13.0",
+        "use-latest-callback": "^0.1.5"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/@react-navigation/core/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@react-navigation/core/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/@react-navigation/elements": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.10.tgz",
+      "integrity": "sha512-JFaoZG9S+Zz291CvAMeGw8kNl/g2AaY9Pbo+VcYO+JM6UF/E5Obq9ga2ydxDrn3an7wzdl6flA/4lWhqG82Vqw==",
+      "peerDependencies": {
+        "@react-navigation/native": "^6.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-safe-area-context": ">= 3.0.0"
+      }
+    },
+    "node_modules/@react-navigation/native": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.0.tgz",
+      "integrity": "sha512-CdjOmbE4c/UczczqeP7ZrFXJcjnXOCwY1PDNjX51Ph1b2tHXpQ41/089k3R49dc5i2sFLk6jKaryFU2dcLr8jw==",
+      "dependencies": {
+        "@react-navigation/core": "^6.4.4",
+        "escape-string-regexp": "^4.0.0",
+        "fast-deep-equal": "^3.1.3",
+        "nanoid": "^3.1.23"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/@react-navigation/native-stack": {
+      "version": "6.9.5",
+      "resolved": "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-6.9.5.tgz",
+      "integrity": "sha512-1ZIrla+b4gB8KDC6QewtZ/1yOS23bQctwR4Pf6ECA0stEH8ibbxh70iiI/LluL5CtWxrWfgOrl1jpQsVvtKY+Q==",
+      "dependencies": {
+        "@react-navigation/elements": "^1.3.10",
+        "warn-once": "^0.1.0"
+      },
+      "peerDependencies": {
+        "@react-navigation/native": "^6.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-safe-area-context": ">= 3.0.0",
+        "react-native-screens": ">= 3.0.0"
+      }
+    },
+    "node_modules/@react-navigation/native/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@react-navigation/routers": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.5.tgz",
+      "integrity": "sha512-JzMRiRRu8J0yUMC7BV8wOVzevjkHnIPONbpCTL/vH5yceTm+dSH/U3esIObgk8wYYbov+jYlVhwUQNGRb2to6g==",
+      "dependencies": {
+        "nanoid": "^3.1.23"
+      }
+    },
    "node_modules/@react-stately/checkbox": {
      "version": "3.3.1",
      "resolved": "https://registry.npmjs.org/@react-stately/checkbox/-/checkbox-3.3.1.tgz",
@ -8666,9 +8762,9 @@
      "dev": true
    },
    "node_modules/decode-uri-component": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.1.tgz",
-      "integrity": "sha512-XZHyaFJ6QMWhYmlz+UcmtaLeecNiXwkTGzCqG5WByt+1P1HnU6Siwf0TeP3OsZmlnGqQRSEMIxue0LLCaGY3dw==",
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
      "engines": {
        "node": ">=0.10"
      }
@ -10185,8 +10281,7 @@
    "node_modules/fast-deep-equal": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
    },
    "node_modules/fast-diff": {
      "version": "1.2.0",
@ -10290,6 +10385,14 @@
        "node": ">=8"
      }
    },
+    "node_modules/filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/finalhandler": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
@ -14886,6 +14989,17 @@
        "multicast-dns": "cli.js"
      }
    },
+    "node_modules/nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
    "node_modules/nanomatch": {
      "version": "1.2.13",
      "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@ -16154,6 +16268,23 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/query-string": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.3.tgz",
+      "integrity": "sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==",
+      "dependencies": {
+        "decode-uri-component": "^0.2.2",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/querystringify": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@ -16239,6 +16370,17 @@
        "react": "^18.1.0"
      }
    },
+    "node_modules/react-freeze": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.3.tgz",
+      "integrity": "sha512-ZnXwLQnGzrDpHBHiC56TXFXvmolPeMjTn1UOm610M4EXGzbEDR7oOIyS2ZiItgbs6eZc4oU/a0hpk8PrcKvv5g==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.0"
+      }
+    },
    "node_modules/react-is": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -16317,6 +16459,19 @@
        "react-native": "*"
      }
    },
+    "node_modules/react-native-screens": {
+      "version": "3.18.2",
+      "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.18.2.tgz",
+      "integrity": "sha512-ANUEuvMUlsYJ1QKukEhzhfrvOUO9BVH9Nzg+6eWxpn3cfD/O83yPBOF8Mx6x5H/2+sMy+VS5x/chWOOo/U7QJw==",
+      "dependencies": {
+        "react-freeze": "^1.0.0",
+        "warn-once": "^0.1.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
    "node_modules/react-native-svg": {
      "version": "13.6.0",
      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-13.6.0.tgz",
@ -17830,6 +17985,14 @@
        "wbuf": "^1.7.3"
      }
    },
+    "node_modules/split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/split-string": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@ -17992,6 +18155,14 @@
        "node": ">= 0.6"
      }
    },
+    "node_modules/strict-uri-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+      "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
    "node_modules/string_decoder": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@ -19105,6 +19276,11 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/use-latest-callback": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.5.tgz",
+      "integrity": "sha512-HtHatS2U4/h32NlkhupDsPlrbiD27gSH5swBdtXbCAlc6pfOFzaj0FehW/FO12rx8j2Vy4/lJScCiJyM01E+bQ=="
+    },
    "node_modules/use-subscription": {
      "version": "1.8.0",
      "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.8.0.tgz",
@ -19234,6 +19410,11 @@
        "makeerror": "1.0.12"
      }
    },
+    "node_modules/warn-once": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/warn-once/-/warn-once-0.1.1.tgz",
+      "integrity": "sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q=="
+    },
    "node_modules/watchpack": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@ -23445,6 +23626,72 @@
      "resolved": "https://registry.npmjs.org/@react-native/polyfills/-/polyfills-2.0.0.tgz",
      "integrity": "sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ=="
    },
+    "@react-navigation/core": {
+      "version": "6.4.4",
+      "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.4.tgz",
+      "integrity": "sha512-skdTzr6sOceEusEDG+e58zaSpgy1Yz7eZGFtmkmdYAFkZDy5nkIY/0nYuXP0waUYarNXg6lNEVkF995/kZXHZg==",
+      "requires": {
+        "@react-navigation/routers": "^6.1.5",
+        "escape-string-regexp": "^4.0.0",
+        "nanoid": "^3.1.23",
+        "query-string": "^7.1.3",
+        "react-is": "^16.13.0",
+        "use-latest-callback": "^0.1.5"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        },
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
+    "@react-navigation/elements": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.10.tgz",
+      "integrity": "sha512-JFaoZG9S+Zz291CvAMeGw8kNl/g2AaY9Pbo+VcYO+JM6UF/E5Obq9ga2ydxDrn3an7wzdl6flA/4lWhqG82Vqw==",
+      "requires": {}
+    },
+    "@react-navigation/native": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.0.tgz",
+      "integrity": "sha512-CdjOmbE4c/UczczqeP7ZrFXJcjnXOCwY1PDNjX51Ph1b2tHXpQ41/089k3R49dc5i2sFLk6jKaryFU2dcLr8jw==",
+      "requires": {
+        "@react-navigation/core": "^6.4.4",
+        "escape-string-regexp": "^4.0.0",
+        "fast-deep-equal": "^3.1.3",
+        "nanoid": "^3.1.23"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        }
+      }
+    },
+    "@react-navigation/native-stack": {
+      "version": "6.9.5",
+      "resolved": "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-6.9.5.tgz",
+      "integrity": "sha512-1ZIrla+b4gB8KDC6QewtZ/1yOS23bQctwR4Pf6ECA0stEH8ibbxh70iiI/LluL5CtWxrWfgOrl1jpQsVvtKY+Q==",
+      "requires": {
+        "@react-navigation/elements": "^1.3.10",
+        "warn-once": "^0.1.0"
+      }
+    },
+    "@react-navigation/routers": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.5.tgz",
+      "integrity": "sha512-JzMRiRRu8J0yUMC7BV8wOVzevjkHnIPONbpCTL/vH5yceTm+dSH/U3esIObgk8wYYbov+jYlVhwUQNGRb2to6g==",
+      "requires": {
+        "nanoid": "^3.1.23"
+      }
+    },
    "@react-stately/checkbox": {
      "version": "3.3.1",
      "resolved": "https://registry.npmjs.org/@react-stately/checkbox/-/checkbox-3.3.1.tgz",
@ -26598,9 +26845,9 @@
      "dev": true
    },
    "decode-uri-component": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.1.tgz",
-      "integrity": "sha512-XZHyaFJ6QMWhYmlz+UcmtaLeecNiXwkTGzCqG5WByt+1P1HnU6Siwf0TeP3OsZmlnGqQRSEMIxue0LLCaGY3dw=="
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ=="
    },
    "deep-is": {
      "version": "0.1.4",
@ -27729,8 +27976,7 @@
    "fast-deep-equal": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
    },
    "fast-diff": {
      "version": "1.2.0",
@ -27824,6 +28070,11 @@
        "to-regex-range": "^5.0.1"
      }
    },
+    "filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ=="
+    },
    "finalhandler": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
@ -31347,6 +31598,11 @@
        "thunky": "^1.0.2"
      }
    },
+    "nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+    },
    "nanomatch": {
      "version": "1.2.13",
      "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@ -32313,6 +32569,17 @@
        "side-channel": "^1.0.4"
      }
    },
+    "query-string": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.3.tgz",
+      "integrity": "sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==",
+      "requires": {
+        "decode-uri-component": "^0.2.2",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
+      }
+    },
    "querystringify": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@ -32385,6 +32652,12 @@
        "scheduler": "^0.22.0"
      }
    },
+    "react-freeze": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.3.tgz",
+      "integrity": "sha512-ZnXwLQnGzrDpHBHiC56TXFXvmolPeMjTn1UOm610M4EXGzbEDR7oOIyS2ZiItgbs6eZc4oU/a0hpk8PrcKvv5g==",
+      "requires": {}
+    },
    "react-is": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -32461,6 +32734,15 @@
      "integrity": "sha512-N9XTjiuD73ZpVlejHrUWIFZc+6Z14co1K/p1IFMkImU7+avD69F3y+lhkqA2hN/+vljdZrBSiOwXPkuo43nFQA==",
      "requires": {}
    },
+    "react-native-screens": {
+      "version": "3.18.2",
+      "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.18.2.tgz",
+      "integrity": "sha512-ANUEuvMUlsYJ1QKukEhzhfrvOUO9BVH9Nzg+6eWxpn3cfD/O83yPBOF8Mx6x5H/2+sMy+VS5x/chWOOo/U7QJw==",
+      "requires": {
+        "react-freeze": "^1.0.0",
+        "warn-once": "^0.1.0"
+      }
+    },
    "react-native-svg": {
      "version": "13.6.0",
      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-13.6.0.tgz",
@ -33679,6 +33961,11 @@
        "wbuf": "^1.7.3"
      }
    },
+    "split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
+    },
    "split-string": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@ -33809,6 +34096,11 @@
      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA=="
    },
+    "strict-uri-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+      "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ=="
+    },
    "string_decoder": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@ -34599,6 +34891,11 @@
      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
    },
+    "use-latest-callback": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.5.tgz",
+      "integrity": "sha512-HtHatS2U4/h32NlkhupDsPlrbiD27gSH5swBdtXbCAlc6pfOFzaj0FehW/FO12rx8j2Vy4/lJScCiJyM01E+bQ=="
+    },
    "use-subscription": {
      "version": "1.8.0",
      "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.8.0.tgz",
@ -34706,6 +35003,11 @@
        "makeerror": "1.0.12"
      }
    },
+    "warn-once": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/warn-once/-/warn-once-0.1.1.tgz",
+      "integrity": "sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q=="
+    },
    "watchpack": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
--- a/package.json
+++ b/package.json
@ -12,6 +12,8 @@
    "lint": "eslint ."
  },
  "dependencies": {
+    "@react-navigation/native": "^6.1.0",
+    "@react-navigation/native-stack": "^6.9.5",
    "babel-preset-esnext": "^1.1.3",
    "babel-preset-react": "^6.24.1",
    "native-base": "^3.4.23",
@ -19,6 +21,7 @@
    "react-dom": "18.1.0",
    "react-native": "0.70.6",
    "react-native-safe-area-context": "^4.4.1",
+    "react-native-screens": "^3.18.2",
    "react-native-web": "^0.18.10"
  },
  "devDependencies": {
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,7 +1,9 @@
 import React, {useState} from 'react';

 import {NativeBaseProvider, Box, Input, Text} from 'native-base';
-import {extendTheme} from 'native-base';
+import {StatusBar} from 'native-base';
+import {NavigationContainer} from '@react-navigation/native';
+import {SafeAreaProvider} from 'react-native-safe-area-context';

 import {theme} from '@caj/configs/colors';

@ -19,14 +21,19 @@ const user: User = {

 const App = () => {
  return (
-    <NativeBaseProvider theme={theme}>
-      <Box>
-        <Text> ma boyy :--)</Text>
-      </Box>
-      <Box alignItems="center">
-        <Input shadow={2} placeholder="Enter your name" />
-      </Box>
-    </NativeBaseProvider>
+    <NavigationContainer>
+      {
+        <NativeBaseProvider theme={theme}>
+          <StatusBar backgroundColor="transparent" translucent={true} />
+          <Box safeArea>
+            <Text> ma boyy :--)))</Text>
+          </Box>
+          <Box alignItems="center">
+            <Input shadow={2} placeholder="Enter your name" />
+          </Box>
+        </NativeBaseProvider>
+      }
+    </NavigationContainer>
  );
 };
 /*