Skip to content

Commit e66e8de

Browse files
jamesdev-kingjamesdev-king
committed
chore: migrate codegen to TypeScript (#1600)
## Description Issues * [x] ~~`activityState` is set to `0.0` by default in codegened files despite being explicitly set to `WithDefault<Float, -1.0>` in config (it should be `-1.0`). Tested it multiple times it looks like you can't set number < 0 for default when using TypeScript - tested with both `Int32` and `Float` (with Flow it worked fine).~~ * [x] ~~`yarn lint` fails~~ * [x] ~software-mansion/react-native-screens#1631 There are no other differences between codegened files -- I checked it file by file with diff tool. Update: It was confirmed by React Native developer that this indeed is a bug and will be fixed with 0.71. Update: * facebook/react-native#34800 was merged and is available is `0.71` rc branches of React Native. ### ***Important note*** Merging this PR will be breaking change for Fabric support for `react-native` versions lower than `0.71.0` (`activityState` & `sheetCornerRadius` will be broken). ## Changes * Migrated codegen spec files from Flow to TS. * Also bumped `@types/react-native` to `0.69.6` [(see explanation)](software-mansion/react-native-screens@d2ed6ec) * Had to do some minor type-fixing in our types * Had to patch `react-navigation-stack` types. This dependency is required for v4. <!-- ## Screenshots / GIFs Here you can add screenshots / GIFs documenting your change. You can add before / after section if you're changing some behavior. ### Before ### After --> ## Test code and steps to reproduce I created a backup of codegened code from before this PR. After applying these changes I ran: `./gradlew :react-native-screens:generateCodegenArtifactsFromSchema` (or just build application) and then I manually compared codegend files using diff checker - the output code is the same. ## Checklist - [x] Ensured that CI passes (there is a known issue with e2e on iOS, it will be handled separately)
1 parent 14277d0 commit e66e8de

26 files changed

+1417
-1213
lines changed

‎.eslintrc.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,11 @@ module.exports = {
2222
'react-native-screens/createNativeStackNavigator',
2323
'react-native-screens/reanimated',
2424
],
25-
'import/ignore': ['node_modules/react-native/index\\.js$'],
25+
'import/ignore': [
26+
'node_modules/react-native/index\\.js$',
27+
'react-native/Libraries/Utilities/codegenNativeComponent.*',
28+
'react-native/Libraries/Types/CodegenTypes.*'
29+
],
2630
'import/resolver': {
2731
node: {
2832
paths: ['src'],

‎package.json‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@
1414
"lint-android": "./android/gradlew -p android spotlessCheck -q",
1515
"lint": "yarn lint-js && yarn lint-android",
1616
"release": "npm login && release-it",
17-
"prepare": "bob build && husky install"
17+
"prepare": "bob build && husky install",
18+
"postinstall": "patch-package"
1819
},
1920
"main": "lib/commonjs/index",
2021
"module": "lib/module/index",
@@ -71,11 +72,10 @@
7172
"@react-navigation/native": "^5.8.0",
7273
"@react-navigation/stack": "^5.10.0",
7374
"@types/jest": "^26.0.8",
74-
"@types/react": "^16.9.44",
75-
"@types/react-native": "^0.63.2",
75+
"@types/react": "^18.0.24",
7676
"@types/react-test-renderer": "^16.9.2",
77-
"@typescript-eslint/eslint-plugin": "^3.7.1",
78-
"@typescript-eslint/parser": "^3.7.1",
77+
"@typescript-eslint/eslint-plugin": "^5.48.2",
78+
"@typescript-eslint/parser": "^5.48.2",
7979
"@react-native-community/cli": "^9.0.0",
8080
"@react-native-community/cli-platform-android": "^9.0.0",
8181
"@react-native-community/cli-platform-ios": "^9.0.0",
@@ -99,22 +99,24 @@
9999
"lint-staged": "^11.1.2",
100100
"metro-react-native-babel-preset": "^0.61.0",
101101
"prettier": "^2.0.4",
102-
"react": "^16.13.1",
102+
"react": "18.2.0",
103103
"react-dom": "^16.13.1",
104-
"react-native": "^0.63.2",
104+
"react-native": "0.71.0",
105105
"react-native-reanimated": "^2.2.0",
106-
"react-native-safe-area-context": "^4.0.1-rc.5",
106+
"react-native-safe-area-context": "^4.4.1",
107107
"react-native-windows": "^0.64.8",
108108
"react-navigation": "^4.4.3",
109109
"react-navigation-stack": "^2.9.0",
110110
"react-test-renderer": "^16.13.1",
111111
"release-it": "^13.5.2",
112-
"typescript": "^3.9.7"
112+
"patch-package": "6.5.1",
113+
"typescript": "4.8.4"
113114
},
114115
"resolutions": {
115116
"@react-native-community/cli-platform-android": "^9.0.0",
116117
"@react-native-community/cli": "^9.0.0",
117-
"@react-native-community/cli-platform-ios": "^9.0.0"
118+
"@react-native-community/cli-platform-ios": "^9.0.0",
119+
"@types/react": "^18.0.24"
118120
},
119121
"lint-staged": {
120122
"{src,Example}/**/*.{js,ts,tsx}": "yarn format-js",

‎patches/react-navigation-stack+2.10.4.patch‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
diff --git a/node_modules/react-navigation-stack/src/vendor/types.tsx b/node_modules/react-navigation-stack/src/vendor/types.tsx
2+
index 977e7d4..50cdd8e 100644
3+
--- a/node_modules/react-navigation-stack/src/vendor/types.tsx
4+
+++ b/node_modules/react-navigation-stack/src/vendor/types.tsx
5+
@@ -104,17 +104,17 @@ export type Scene<T> = {
6+
/**
7+
* Progress value of the current screen.
8+
*/
9+
- current: Animated.AnimatedInterpolation;
10+
+ current: Animated.AnimatedInterpolation<number>;
11+
/**
12+
* Progress value for the screen after this one in the stack.
13+
* This can be `undefined` in case the screen animating is the last one.
14+
*/
15+
- next?: Animated.AnimatedInterpolation;
16+
+ next?: Animated.AnimatedInterpolation<number>;
17+
/**
18+
* Progress value for the screen before this one in the stack.
19+
* This can be `undefined` in case the screen animating is the first one.
20+
*/
21+
- previous?: Animated.AnimatedInterpolation;
22+
+ previous?: Animated.AnimatedInterpolation<number>;
23+
};
24+
};
25+
26+
@@ -509,7 +509,7 @@ export type StackCardInterpolationProps = {
27+
/**
28+
* Animated node representing the progress value of the current screen.
29+
*/
30+
- progress: Animated.AnimatedInterpolation;
31+
+ progress: Animated.AnimatedInterpolation<number>;
32+
};
33+
/**
34+
* Values for the current screen the screen after this one in the stack.
35+
@@ -519,7 +519,7 @@ export type StackCardInterpolationProps = {
36+
/**
37+
* Animated node representing the progress value of the next screen.
38+
*/
39+
- progress: Animated.AnimatedInterpolation;
40+
+ progress: Animated.AnimatedInterpolation<number>;
41+
};
42+
/**
43+
* The index of the card in the stack.
44+
@@ -528,15 +528,15 @@ export type StackCardInterpolationProps = {
45+
/**
46+
* Animated node representing whether the card is closing (1 - closing, 0 - not closing).
47+
*/
48+
- closing: Animated.AnimatedInterpolation;
49+
+ closing: Animated.AnimatedInterpolation<number>;
50+
/**
51+
* Animated node representing whether the card is being swiped (1 - swiping, 0 - not swiping).
52+
*/
53+
- swiping: Animated.AnimatedInterpolation;
54+
+ swiping: Animated.AnimatedInterpolation<number>;
55+
/**
56+
* Animated node representing multiplier when direction is inverted (-1 - inverted, 1 - normal).
57+
*/
58+
- inverted: Animated.AnimatedInterpolation;
59+
+ inverted: Animated.AnimatedInterpolation<number>;
60+
/**
61+
* Layout measurements for various items we use for animation.
62+
*/
63+
@@ -588,7 +588,7 @@ export type StackHeaderInterpolationProps = {
64+
/**
65+
* Animated node representing the progress value of the current screen.
66+
*/
67+
- progress: Animated.AnimatedInterpolation;
68+
+ progress: Animated.AnimatedInterpolation<number>;
69+
};
70+
/**
71+
* Values for the current screen the screen after this one in the stack.
72+
@@ -598,7 +598,7 @@ export type StackHeaderInterpolationProps = {
73+
/**
74+
* Animated node representing the progress value of the next screen.
75+
*/
76+
- progress: Animated.AnimatedInterpolation;
77+
+ progress: Animated.AnimatedInterpolation<number>;
78+
};
79+
/**
80+
* Layout measurements for various items we use for animation.

‎src/fabric/FullWindowOverlayNativeComponent.js‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎src/fabric/FullWindowOverlayNativeComponent.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
2+
import type { ViewProps } from 'react-native';
3+
4+
interface NativeProps extends ViewProps {}
5+
6+
export default codegenNativeComponent<NativeProps>('RNSFullWindowOverlay', {});

‎src/fabric/ScreenContainerNativeComponent.js‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎src/fabric/ScreenContainerNativeComponent.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
2+
import type { ViewProps } from 'react-native';
3+
4+
interface NativeProps extends ViewProps {}
5+
6+
export default codegenNativeComponent<NativeProps>('RNSScreenContainer', {});

‎src/fabric/ScreenNativeComponent.js‎

Lines changed: 0 additions & 104 deletions
This file was deleted.

0 commit comments

Comments
 (0)