Skip to content

Commit 5d069fd

Browse files
kkafartboba
authored and
ja1ns
committed
chore: add react-navigation as submodule & use it in test applications (software-mansion#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 <[email protected]>
1 parent f570e41 commit 5d069fd

File tree

18 files changed

+656
-403
lines changed

18 files changed

+656
-403
lines changed

‎.gitmodules‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
[submodule "react-navigation"]
2+
path = react-navigation
3+
url = https://github.com/react-navigation/react-navigation.git

‎Example/ios/Podfile.lock‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -741,12 +741,12 @@ SPEC CHECKSUMS:
741741
ReactCommon: 4b2bdcb50a3543e1c2b2849ad44533686610826d
742742
RNGestureHandler: 38aa38413896620338948fbb5c90579a7b1c3fde
743743
RNReanimated: 0f8173d46f45c2f690c416dff10206832631571d
744-
RNScreens: 975abd21a20b6ebd26563e5ab86b30250569c182
744+
RNScreens: a4248a4721179cdeaae41b7d247fb0ab19ecbac4
745745
RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
746746
SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
747747
Yoga: 3efc43e0d48686ce2e8c60f99d4e6bd349aff981
748748
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
749749

750750
PODFILE CHECKSUM: 86e380a4262db238c7a45428750af2d88465585c
751751

752-
COCOAPODS: 1.11.3
752+
COCOAPODS: 1.15.2

‎Example/metro.config.js‎

Lines changed: 48 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ const exclusionList = require('metro-config/src/defaults/exclusionList');
55
const escape = require('escape-string-regexp');
66
const pack = require('../package.json');
77

8-
const root = path.resolve(__dirname, '..');
8+
// react-native-screens root directory
9+
const rnsRoot = path.resolve(__dirname, '..');
910

1011
const modules = [
1112
'@react-navigation/native',
@@ -17,21 +18,64 @@ const modules = [
1718

1819
const config = {
1920
projectRoot: __dirname,
20-
watchFolders: [root],
21+
watchFolders: [rnsRoot],
2122

2223
// We need to make sure that only one version is loaded for peerDependencies
2324
// So we exclude them at the root, and alias them to the versions in example's node_modules
2425
resolver: {
25-
blacklistRE: exclusionList(
26+
blockList: exclusionList(
2627
modules.map(
27-
m => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
28+
m =>
29+
new RegExp(`^${escape(path.join(rnsRoot, 'node_modules', m))}\\/.*$`)
2830
)
2931
),
3032

3133
extraNodeModules: modules.reduce((acc, name) => {
3234
acc[name] = path.join(__dirname, 'node_modules', name);
3335
return acc;
3436
}, {}),
37+
38+
// Since we use react-naviation as submodule it comes with it's own node_modules. While loading
39+
// react-navigation code, due to how module resolution algorithms works it seems that its node_modules
40+
// are consulted first, resulting in double-loaded packages (so doubled react, react-native and other package instances) leading
41+
// to various errors. To mitigate this we define below custom request resolver, hijacking requests to conflicting modules and manually
42+
// resolving appropriate files. **Most likely** this can be achieved by proper usage of blockList but I found this method working ¯\_(ツ)_/¯
43+
resolveRequest: (context, moduleName, platform) => {
44+
if (moduleName === 'react' || moduleName === 'react-native') {
45+
return {
46+
filePath: path.join(
47+
__dirname,
48+
'node_modules',
49+
moduleName,
50+
'index.js'
51+
),
52+
type: 'sourceFile',
53+
};
54+
}
55+
56+
if (moduleName === 'react-native-safe-area-context') {
57+
return {
58+
filePath: path.join(
59+
__dirname,
60+
'node_modules',
61+
moduleName,
62+
'src',
63+
'index.tsx'
64+
),
65+
type: 'sourceFile',
66+
};
67+
}
68+
69+
if (moduleName === 'react-native-screens') {
70+
return {
71+
filePath: path.join(rnsRoot, 'src', 'index.tsx'),
72+
type: 'sourceFile',
73+
};
74+
}
75+
76+
// Optionally, chain to the standard Metro resolver.
77+
return context.resolveRequest(context, moduleName, platform);
78+
},
3579
},
3680

3781
transformer: {

‎FabricExample/metro.config.js‎

Lines changed: 48 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ const exclusionList = require('metro-config/src/defaults/exclusionList');
55
const escape = require('escape-string-regexp');
66
const pack = require('../package.json');
77

8-
const root = path.resolve(__dirname, '..');
8+
// react-native-screens root directory
9+
const rnsRoot = path.resolve(__dirname, '..');
910

1011
const modules = [
1112
'@react-navigation/native',
@@ -16,14 +17,15 @@ const modules = [
1617

1718
const config = {
1819
projectRoot: __dirname,
19-
watchFolders: [root],
20+
watchFolders: [rnsRoot],
2021

2122
// We need to make sure that only one version is loaded for peerDependencies
2223
// So we exclude them at the root, and alias them to the versions in example's node_modules
2324
resolver: {
24-
blacklistRE: exclusionList(
25+
blockList: exclusionList(
2526
modules.map(
26-
m => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`),
27+
m =>
28+
new RegExp(`^${escape(path.join(rnsRoot, 'node_modules', m))}\\/.*$`),
2729
),
2830
),
2931

@@ -33,6 +35,48 @@ const config = {
3335
}, {}),
3436

3537
nodeModulesPaths: [path.join(__dirname, '../../')],
38+
39+
// Since we use react-naviation as submodule it comes with it's own node_modules. While loading
40+
// react-navigation code, due to how module resolution algorithms works it seems that its node_modules
41+
// are consulted first, resulting in double-loaded packages (so doubled react, react-native and other package instances) leading
42+
// to various errors. To mitigate this we define below custom request resolver, hijacking requests to conflicting modules and manually
43+
// resolving appropriate files. **Most likely** this can be achieved by proper usage of blockList but I found this method working ¯\_(ツ)_/¯
44+
resolveRequest: (context, moduleName, platform) => {
45+
if (moduleName === 'react' || moduleName === 'react-native') {
46+
return {
47+
filePath: path.join(
48+
__dirname,
49+
'node_modules',
50+
moduleName,
51+
'index.js',
52+
),
53+
type: 'sourceFile',
54+
};
55+
}
56+
57+
if (moduleName === 'react-native-safe-area-context') {
58+
return {
59+
filePath: path.join(
60+
__dirname,
61+
'node_modules',
62+
moduleName,
63+
'src',
64+
'index.tsx',
65+
),
66+
type: 'sourceFile',
67+
};
68+
}
69+
70+
if (moduleName === 'react-native-screens') {
71+
return {
72+
filePath: path.join(rnsRoot, 'src', 'index.tsx'),
73+
type: 'sourceFile',
74+
};
75+
}
76+
77+
// Optionally, chain to the standard Metro resolver.
78+
return context.resolveRequest(context, moduleName, platform);
79+
},
3680
},
3781

3882
transformer: {

‎FabricExample/package.json‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,21 @@
1010
"test": "jest"
1111
},
1212
"dependencies": {
13-
"@react-navigation/native": "^6.1.10",
14-
"@react-navigation/native-stack": "^6.9.18",
13+
"@react-navigation/bottom-tabs": "link:../react-navigation/packages/bottom-tabs/",
14+
"@react-navigation/native": "link:../react-navigation/packages/native/",
15+
"@react-navigation/native-stack": "link:../react-navigation/packages/native-stack/",
16+
"@react-navigation/stack": "link:../react-navigation/packages/stack/",
17+
"@react-navigation/core": "link:../react-navigation/packages/core/",
18+
"@react-navigation/elements": "link:../react-navigation/packages/elements/",
19+
"@react-navigation/routers": "link:../react-navigation/packages/routers/",
1520
"react": "18.2.0",
1621
"react-native": "0.74.0-rc.2",
1722
"react-native-safe-area-context": "^4.10.0-rc.1",
1823
"react-native-screens": "link:../"
1924
},
25+
"resolutions": {
26+
"@react-navigation/core": "link:../react-navigation/packages/core/"
27+
},
2028
"devDependencies": {
2129
"@babel/core": "^7.20.0",
2230
"@babel/preset-env": "^7.20.0",

‎FabricExample/yarn.lock‎

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,6 @@
112112
version "7.22.15"
113113
resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.15.tgz#5ee90093914ea09639b01c711db0d6775e558be1"
114114
integrity sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w==
115-
dependencies:
116115
"@babel/helper-annotate-as-pure" "^7.22.5"
117116
regexpu-core "^5.3.1"
118117
semver "^6.3.1"
@@ -953,7 +952,6 @@
953952
version "7.23.6"
954953
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.23.6.tgz#aa36a94e5da8d94339ae3a4e22d40ed287feb34c"
955954
integrity sha512-6cBG5mBvUu4VUD04OHKnYzbuHNP8huDsD3EDqqpIpsswTDoqHCjLoHb6+QgsV1WsT2nipRqCPgxD3LXnEO7XfA==
956-
dependencies:
957955
"@babel/helper-annotate-as-pure" "^7.22.5"
958956
"@babel/helper-create-class-features-plugin" "^7.23.6"
959957
"@babel/helper-plugin-utils" "^7.22.5"
@@ -2379,7 +2377,6 @@ array.prototype.flat@^1.3.1:
23792377
version "1.3.2"
23802378
resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz#1476217df8cff17d72ee8f3ba06738db5b387d18"
23812379
integrity sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==
2382-
dependencies:
23832380
call-bind "^1.0.2"
23842381
define-properties "^1.2.0"
23852382
es-abstract "^1.22.1"
@@ -2798,11 +2795,27 @@ [email protected]:
27982795
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
27992796
integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
28002797

2801-
color-name@~1.1.4:
2798+
color-name@^1.0.0, color-name@~1.1.4:
28022799
version "1.1.4"
28032800
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
28042801
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
28052802

2803+
color-string@^1.9.0:
2804+
version "1.9.1"
2805+
resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
2806+
integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
2807+
dependencies:
2808+
color-name "^1.0.0"
2809+
simple-swizzle "^0.2.2"
2810+
2811+
color@^4.2.3:
2812+
version "4.2.3"
2813+
resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
2814+
integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
2815+
dependencies:
2816+
color-convert "^2.0.1"
2817+
color-string "^1.9.0"
2818+
28062819
colorette@^1.0.7:
28072820
version "1.4.0"
28082821
resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.4.0.tgz#5190fbb87276259a86ad700bff2c6d6faa3fca40"
@@ -3921,6 +3934,11 @@ is-arrayish@^0.2.1:
39213934
resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
39223935
integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
39233936

3937+
is-arrayish@^0.3.1:
3938+
version "0.3.2"
3939+
resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
3940+
integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
3941+
39243942
is-async-function@^2.0.0:
39253943
version "2.0.0"
39263944
resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.0.0.tgz#8e4418efd3e5d3a6ebb0164c05ef5afb69aa9646"
@@ -4869,7 +4887,6 @@ [email protected]:
48694887
version "0.80.6"
48704888
resolved "https://registry.yarnpkg.com/metro-babel-transformer/-/metro-babel-transformer-0.80.6.tgz#49df74af71ecc9871636cf469726debcb5a1c858"
48714889
integrity sha512-ssuoVC4OzqaOt3LpwfUbDfBlFGRu9v1Yf2JJnKPz0ROYHNjSBws4aUesqQQ/Ea8DbiH7TK4j4cJmm+XjdHmgqA==
4872-
dependencies:
48734890
"@babel/core" "^7.20.0"
48744891
hermes-parser "0.19.1"
48754892
nullthrows "^1.1.1"
@@ -5601,7 +5618,6 @@ react-devtools-core@^5.0.0:
56015618
version "5.0.0"
56025619
resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-5.0.0.tgz#50b04a4dbfa62badbe4d86529e9478c396988b31"
56035620
integrity sha512-SAAMLacNDfFjMJjmbXURNWtrTyARi9xTqGkY48Btw5cIWlr1wgxfWYZKxoUZav1qqmhbpgTzSmmF+cpMHGHY3A==
5604-
dependencies:
56055621
shell-quote "^1.6.1"
56065622
ws "^7"
56075623

@@ -5760,7 +5776,6 @@ regenerate-unicode-properties@^10.1.0:
57605776
version "10.1.1"
57615777
resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.1.tgz#6b0e05489d9076b04c436f318d9b067bba459480"
57625778
integrity sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q==
5763-
dependencies:
57645779
regenerate "^1.4.2"
57655780

57665781
regenerate@^1.4.2:
@@ -6076,6 +6091,13 @@ signal-exit@^3.0.2, signal-exit@^3.0.3, signal-exit@^3.0.7:
60766091
resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
60776092
integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
60786093

6094+
simple-swizzle@^0.2.2:
6095+
version "0.2.2"
6096+
resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
6097+
integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
6098+
dependencies:
6099+
is-arrayish "^0.3.1"
6100+
60796101
sisteransi@^1.0.5:
60806102
version "1.0.5"
60816103
resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
@@ -6569,7 +6591,6 @@ v8-to-istanbul@^9.0.1:
65696591
version "9.2.0"
65706592
resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-9.2.0.tgz#2ed7644a245cddd83d4e087b9b33b3e62dfd10ad"
65716593
integrity sha512-/EH/sDgxU2eGxajKdwLCDmQ4FWq+kpi3uCmBGpw1xJtnAxEjlD8j8PEiGWpCIMIs3ciNAgH0d3TTJiUkYzyZjA==
6572-
dependencies:
65736594
"@jridgewell/trace-mapping" "^0.3.12"
65746595
"@types/istanbul-lib-coverage" "^2.0.1"
65756596
convert-source-map "^2.0.0"

‎FabricTestExample/ios/Podfile.lock‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1561,7 +1561,7 @@ SPEC CHECKSUMS:
15611561
RNReanimated: 48945413234cac33094662be9fd8e8c470f3ef11
15621562
RNScreens: 45205abaabfa7c01b0325ef17acd8475aff8d5e8
15631563
SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
1564-
Yoga: 2cce570d19c00f4761c1450f194e07f5c880c13c
1564+
Yoga: f78d50661f1d9906929cddb3641febd14068f090
15651565

15661566
PODFILE CHECKSUM: 67b3d295da87c29349179e51bb3526b67059b646
15671567

‎FabricTestExample/metro.config.js‎

Lines changed: 48 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ const exclusionList = require('metro-config/src/defaults/exclusionList');
55
const escape = require('escape-string-regexp');
66
const pack = require('../package.json');
77

8-
const root = path.resolve(__dirname, '..');
8+
// react-native-screens root directory
9+
const rnsRoot = path.resolve(__dirname, '..');
910

1011
const modules = [
1112
'@react-navigation/native',
@@ -18,14 +19,15 @@ const modules = [
1819

1920
const config = {
2021
projectRoot: __dirname,
21-
watchFolders: [root],
22+
watchFolders: [rnsRoot],
2223

2324
// We need to make sure that only one version is loaded for peerDependencies
2425
// So we exclude them at the root, and alias them to the versions in example's node_modules
2526
resolver: {
26-
blacklistRE: exclusionList(
27+
blockList: exclusionList(
2728
modules.map(
28-
m => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`),
29+
m =>
30+
new RegExp(`^${escape(path.join(rnsRoot, 'node_modules', m))}\\/.*$`),
2931
),
3032
),
3133

@@ -35,6 +37,48 @@ const config = {
3537
}, {}),
3638

3739
nodeModulesPaths: [path.join(__dirname, '../../')],
40+
41+
// Since we use react-naviation as submodule it comes with it's own node_modules. While loading
42+
// react-navigation code, due to how module resolution algorithms works it seems that its node_modules
43+
// are consulted first, resulting in double-loaded packages (so doubled react, react-native and other package instances) leading
44+
// to various errors. To mitigate this we define below custom request resolver, hijacking requests to conflicting modules and manually
45+
// resolving appropriate files. **Most likely** this can be achieved by proper usage of blockList but I found this method working ¯\_(ツ)_/¯
46+
resolveRequest: (context, moduleName, platform) => {
47+
if (moduleName === 'react' || moduleName === 'react-native') {
48+
return {
49+
filePath: path.join(
50+
__dirname,
51+
'node_modules',
52+
moduleName,
53+
'index.js',
54+
),
55+
type: 'sourceFile',
56+
};
57+
}
58+
59+
if (moduleName === 'react-native-safe-area-context') {
60+
return {
61+
filePath: path.join(
62+
__dirname,
63+
'node_modules',
64+
moduleName,
65+
'src',
66+
'index.tsx',
67+
),
68+
type: 'sourceFile',
69+
};
70+
}
71+
72+
if (moduleName === 'react-native-screens') {
73+
return {
74+
filePath: path.join(rnsRoot, 'src', 'index.tsx'),
75+
type: 'sourceFile',
76+
};
77+
}
78+
79+
// Optionally, chain to the standard Metro resolver.
80+
return context.resolveRequest(context, moduleName, platform);
81+
},
3882
},
3983

4084
transformer: {

0 commit comments

Comments
 (0)