chore: add react-navigation as submodule & use it in test applications (

#1993) ## Description Add `react-navigation` as submodule and use it in test applications. ## Changes - Added react-navigation submodule - Configured metro.config.js to resolve directory with react-navigation - Changed dependency list to point onto linked dependencies - Added postinstall step to package.json ## Test code and steps to reproduce Firstly, run `yarn` command from the screens root directory to initialize react-navigation submodule. Then, try to run example application. ## Checklist - [X] Ensured that CI passes --------- Co-authored-by: tboba <tymoteusz.boba@gmail.com>
software-mansion · Mar 18, 2024 · 09db75e · 09db75e
1 parent 895606e
commit 09db75e
Show file tree

Hide file tree

Showing 18 changed files with 656 additions and 403 deletions.
diff --git a/.gitmodules b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "react-navigation"]
+	path = react-navigation
+	url = https://github.com/react-navigation/react-navigation.git
diff --git a/Example/ios/Podfile.lock b/Example/ios/Podfile.lock
@@ -741,12 +741,12 @@ SPEC CHECKSUMS:
   ReactCommon: 4b2bdcb50a3543e1c2b2849ad44533686610826d
   RNGestureHandler: 38aa38413896620338948fbb5c90579a7b1c3fde
   RNReanimated: 0f8173d46f45c2f690c416dff10206832631571d
-  RNScreens: 975abd21a20b6ebd26563e5ab86b30250569c182
+  RNScreens: a4248a4721179cdeaae41b7d247fb0ab19ecbac4
   RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Yoga: 3efc43e0d48686ce2e8c60f99d4e6bd349aff981
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
 PODFILE CHECKSUM: 86e380a4262db238c7a45428750af2d88465585c
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.15.2
diff --git a/Example/metro.config.js b/Example/metro.config.js
@@ -5,7 +5,8 @@ const exclusionList = require('metro-config/src/defaults/exclusionList');
 const escape = require('escape-string-regexp');
 const pack = require('../package.json');
 
-const root = path.resolve(__dirname, '..');
+// react-native-screens root directory
+const rnsRoot = path.resolve(__dirname, '..');
 
 const modules = [
   '@react-navigation/native',
@@ -17,21 +18,64 @@ const modules = [
 
 const config = {
   projectRoot: __dirname,
-  watchFolders: [root],
+  watchFolders: [rnsRoot],
 
   // We need to make sure that only one version is loaded for peerDependencies
   // So we exclude them at the root, and alias them to the versions in example's node_modules
   resolver: {
-    blacklistRE: exclusionList(
+    blockList: exclusionList(
       modules.map(
-        m => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
+        m =>
+          new RegExp(`^${escape(path.join(rnsRoot, 'node_modules', m))}\\/.*$`)
       )
     ),
 
     extraNodeModules: modules.reduce((acc, name) => {
       acc[name] = path.join(__dirname, 'node_modules', name);
       return acc;
     }, {}),
+
+    // Since we use react-naviation as submodule it comes with it's own node_modules. While loading
+    // react-navigation code, due to how module resolution algorithms works it seems that its node_modules
+    // are consulted first, resulting in double-loaded packages (so doubled react, react-native and other package instances) leading
+    // to various errors. To mitigate this we define below custom request resolver, hijacking requests to conflicting modules and manually
+    // resolving appropriate files. **Most likely** this can be achieved by proper usage of blockList but I found this method working ¯\_(ツ)_/¯
+    resolveRequest: (context, moduleName, platform) => {
+      if (moduleName === 'react' || moduleName === 'react-native') {
+        return {
+          filePath: path.join(
+            __dirname,
+            'node_modules',
+            moduleName,
+            'index.js'
+          ),
+          type: 'sourceFile',
+        };
+      }
+
+      if (moduleName === 'react-native-safe-area-context') {
+        return {
+          filePath: path.join(
+            __dirname,
+            'node_modules',
+            moduleName,
+            'src',
+            'index.tsx'
+          ),
+          type: 'sourceFile',
+        };
+      }
+
+      if (moduleName === 'react-native-screens') {
+        return {
+          filePath: path.join(rnsRoot, 'src', 'index.tsx'),
+          type: 'sourceFile',
+        };
+      }
+
+      // Optionally, chain to the standard Metro resolver.
+      return context.resolveRequest(context, moduleName, platform);
+    },
   },
 
   transformer: {

diff --git a/FabricExample/metro.config.js b/FabricExample/metro.config.js
@@ -5,7 +5,8 @@ const exclusionList = require('metro-config/src/defaults/exclusionList');
 const escape = require('escape-string-regexp');
 const pack = require('../package.json');
 
-const root = path.resolve(__dirname, '..');
+// react-native-screens root directory
+const rnsRoot = path.resolve(__dirname, '..');
 
 const modules = [
   '@react-navigation/native',
@@ -16,14 +17,15 @@ const modules = [
 
 const config = {
   projectRoot: __dirname,
-  watchFolders: [root],
+  watchFolders: [rnsRoot],
 
   // We need to make sure that only one version is loaded for peerDependencies
   // So we exclude them at the root, and alias them to the versions in example's node_modules
   resolver: {
-    blacklistRE: exclusionList(
+    blockList: exclusionList(
       modules.map(
-        m => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`),
+        m =>
+          new RegExp(`^${escape(path.join(rnsRoot, 'node_modules', m))}\\/.*$`),
       ),
     ),
 
@@ -33,6 +35,48 @@ const config = {
     }, {}),
 
     nodeModulesPaths: [path.join(__dirname, '../../')],
+
+    // Since we use react-naviation as submodule it comes with it's own node_modules. While loading
+    // react-navigation code, due to how module resolution algorithms works it seems that its node_modules
+    // are consulted first, resulting in double-loaded packages (so doubled react, react-native and other package instances) leading
+    // to various errors. To mitigate this we define below custom request resolver, hijacking requests to conflicting modules and manually
+    // resolving appropriate files. **Most likely** this can be achieved by proper usage of blockList but I found this method working ¯\_(ツ)_/¯
+    resolveRequest: (context, moduleName, platform) => {
+      if (moduleName === 'react' || moduleName === 'react-native') {
+        return {
+          filePath: path.join(
+            __dirname,
+            'node_modules',
+            moduleName,
+            'index.js',
+          ),
+          type: 'sourceFile',
+        };
+      }
+
+      if (moduleName === 'react-native-safe-area-context') {
+        return {
+          filePath: path.join(
+            __dirname,
+            'node_modules',
+            moduleName,
+            'src',
+            'index.tsx',
+          ),
+          type: 'sourceFile',
+        };
+      }
+
+      if (moduleName === 'react-native-screens') {
+        return {
+          filePath: path.join(rnsRoot, 'src', 'index.tsx'),
+          type: 'sourceFile',
+        };
+      }
+
+      // Optionally, chain to the standard Metro resolver.
+      return context.resolveRequest(context, moduleName, platform);
+    },
   },
 
   transformer: {

diff --git a/FabricExample/package.json b/FabricExample/package.json
@@ -10,13 +10,21 @@
     "test": "jest"
   },
   "dependencies": {
-    "@react-navigation/native": "^6.1.10",
-    "@react-navigation/native-stack": "^6.9.18",
+    "@react-navigation/bottom-tabs": "link:../react-navigation/packages/bottom-tabs/",
+    "@react-navigation/native": "link:../react-navigation/packages/native/",
+    "@react-navigation/native-stack": "link:../react-navigation/packages/native-stack/",
+    "@react-navigation/stack": "link:../react-navigation/packages/stack/",
+    "@react-navigation/core": "link:../react-navigation/packages/core/",
+    "@react-navigation/elements": "link:../react-navigation/packages/elements/",
+    "@react-navigation/routers": "link:../react-navigation/packages/routers/",
     "react": "18.2.0",
     "react-native": "0.74.0-rc.2",
     "react-native-safe-area-context": "^4.10.0-rc.1",
     "react-native-screens": "link:../"
   },
+  "resolutions": {
+    "@react-navigation/core": "link:../react-navigation/packages/core/"
+  },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@babel/preset-env": "^7.20.0",

diff --git a/FabricExample/yarn.lock b/FabricExample/yarn.lock
@@ -112,7 +112,6 @@
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.15.tgz#5ee90093914ea09639b01c711db0d6775e558be1"
   integrity sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w==
-  dependencies:
     "@babel/helper-annotate-as-pure" "^7.22.5"
     regexpu-core "^5.3.1"
     semver "^6.3.1"
@@ -953,7 +952,6 @@
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.23.6.tgz#aa36a94e5da8d94339ae3a4e22d40ed287feb34c"
   integrity sha512-6cBG5mBvUu4VUD04OHKnYzbuHNP8huDsD3EDqqpIpsswTDoqHCjLoHb6+QgsV1WsT2nipRqCPgxD3LXnEO7XfA==
-  dependencies:
     "@babel/helper-annotate-as-pure" "^7.22.5"
     "@babel/helper-create-class-features-plugin" "^7.23.6"
     "@babel/helper-plugin-utils" "^7.22.5"
@@ -2379,7 +2377,6 @@ array.prototype.flat@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz#1476217df8cff17d72ee8f3ba06738db5b387d18"
   integrity sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==
-  dependencies:
     call-bind "^1.0.2"
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
@@ -2798,11 +2795,27 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
-color-name@~1.1.4:
+color-name@^1.0.0, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+color-string@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
+  integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
+color@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
+  integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
+  dependencies:
+    color-convert "^2.0.1"
+    color-string "^1.9.0"
+
 colorette@^1.0.7:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.4.0.tgz#5190fbb87276259a86ad700bff2c6d6faa3fca40"
@@ -3921,6 +3934,11 @@ is-arrayish@^0.2.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
 
+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
+
 is-async-function@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.0.0.tgz#8e4418efd3e5d3a6ebb0164c05ef5afb69aa9646"
@@ -4869,7 +4887,6 @@ metro-babel-transformer@0.80.6:
   version "0.80.6"
   resolved "https://registry.yarnpkg.com/metro-babel-transformer/-/metro-babel-transformer-0.80.6.tgz#49df74af71ecc9871636cf469726debcb5a1c858"
   integrity sha512-ssuoVC4OzqaOt3LpwfUbDfBlFGRu9v1Yf2JJnKPz0ROYHNjSBws4aUesqQQ/Ea8DbiH7TK4j4cJmm+XjdHmgqA==
-  dependencies:
     "@babel/core" "^7.20.0"
     hermes-parser "0.19.1"
     nullthrows "^1.1.1"
@@ -5601,7 +5618,6 @@ react-devtools-core@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-5.0.0.tgz#50b04a4dbfa62badbe4d86529e9478c396988b31"
   integrity sha512-SAAMLacNDfFjMJjmbXURNWtrTyARi9xTqGkY48Btw5cIWlr1wgxfWYZKxoUZav1qqmhbpgTzSmmF+cpMHGHY3A==
-  dependencies:
     shell-quote "^1.6.1"
     ws "^7"
 
@@ -5760,7 +5776,6 @@ regenerate-unicode-properties@^10.1.0:
   version "10.1.1"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.1.tgz#6b0e05489d9076b04c436f318d9b067bba459480"
   integrity sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q==
-  dependencies:
     regenerate "^1.4.2"
 
 regenerate@^1.4.2:
@@ -6076,6 +6091,13 @@ signal-exit@^3.0.2, signal-exit@^3.0.3, signal-exit@^3.0.7:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
 
+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
+  dependencies:
+    is-arrayish "^0.3.1"
+
 sisteransi@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
@@ -6569,7 +6591,6 @@ v8-to-istanbul@^9.0.1:
   version "9.2.0"
   resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-9.2.0.tgz#2ed7644a245cddd83d4e087b9b33b3e62dfd10ad"
   integrity sha512-/EH/sDgxU2eGxajKdwLCDmQ4FWq+kpi3uCmBGpw1xJtnAxEjlD8j8PEiGWpCIMIs3ciNAgH0d3TTJiUkYzyZjA==
-  dependencies:
     "@jridgewell/trace-mapping" "^0.3.12"
     "@types/istanbul-lib-coverage" "^2.0.1"
     convert-source-map "^2.0.0"

diff --git a/FabricTestExample/ios/Podfile.lock b/FabricTestExample/ios/Podfile.lock
@@ -1561,7 +1561,7 @@ SPEC CHECKSUMS:
   RNReanimated: 48945413234cac33094662be9fd8e8c470f3ef11
   RNScreens: 45205abaabfa7c01b0325ef17acd8475aff8d5e8
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
-  Yoga: 2cce570d19c00f4761c1450f194e07f5c880c13c
+  Yoga: f78d50661f1d9906929cddb3641febd14068f090
 
 PODFILE CHECKSUM: 67b3d295da87c29349179e51bb3526b67059b646
 

diff --git a/FabricTestExample/metro.config.js b/FabricTestExample/metro.config.js
@@ -5,7 +5,8 @@ const exclusionList = require('metro-config/src/defaults/exclusionList');
 const escape = require('escape-string-regexp');
 const pack = require('../package.json');
 
-const root = path.resolve(__dirname, '..');
+// react-native-screens root directory
+const rnsRoot = path.resolve(__dirname, '..');
 
 const modules = [
   '@react-navigation/native',
@@ -18,14 +19,15 @@ const modules = [
 
 const config = {
   projectRoot: __dirname,
-  watchFolders: [root],
+  watchFolders: [rnsRoot],
 
   // We need to make sure that only one version is loaded for peerDependencies
   // So we exclude them at the root, and alias them to the versions in example's node_modules
   resolver: {
-    blacklistRE: exclusionList(
+    blockList: exclusionList(
       modules.map(
-        m => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`),
+        m =>
+          new RegExp(`^${escape(path.join(rnsRoot, 'node_modules', m))}\\/.*$`),
       ),
     ),
 
@@ -35,6 +37,48 @@ const config = {
     }, {}),
 
     nodeModulesPaths: [path.join(__dirname, '../../')],
+
+    // Since we use react-naviation as submodule it comes with it's own node_modules. While loading
+    // react-navigation code, due to how module resolution algorithms works it seems that its node_modules
+    // are consulted first, resulting in double-loaded packages (so doubled react, react-native and other package instances) leading
+    // to various errors. To mitigate this we define below custom request resolver, hijacking requests to conflicting modules and manually
+    // resolving appropriate files. **Most likely** this can be achieved by proper usage of blockList but I found this method working ¯\_(ツ)_/¯
+    resolveRequest: (context, moduleName, platform) => {
+      if (moduleName === 'react' || moduleName === 'react-native') {
+        return {
+          filePath: path.join(
+            __dirname,
+            'node_modules',
+            moduleName,
+            'index.js',
+          ),
+          type: 'sourceFile',
+        };
+      }
+
+      if (moduleName === 'react-native-safe-area-context') {
+        return {
+          filePath: path.join(
+            __dirname,
+            'node_modules',
+            moduleName,
+            'src',
+            'index.tsx',
+          ),
+          type: 'sourceFile',
+        };
+      }
+
+      if (moduleName === 'react-native-screens') {
+        return {
+          filePath: path.join(rnsRoot, 'src', 'index.tsx'),
+          type: 'sourceFile',
+        };
+      }
+
+      // Optionally, chain to the standard Metro resolver.
+      return context.resolveRequest(context, moduleName, platform);
+    },
   },
 
   transformer: {