Skip to content

Commit de9e63d

Browse files
kristerkarikristerkari
committed
Update react-native-web to 0.12 and remove className deprecation
1 parent ec8aacf commit de9e63d

File tree

3 files changed

+315
-193
lines changed

3 files changed

+315
-193
lines changed

‎package.json

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
"lint": "eslint . && stylelint 'src/**/*.@(css|scss)'",
1010
"web": "webpack-dev-server --mode development",
1111
"ios": "react-native run-ios",
12-
"android": "react-native run-android"
12+
"android": "react-native run-android",
13+
"postinstall": "patch-package"
1314
},
1415
"dependencies": {
1516
"es6-shim": "^0.35.5",
@@ -19,13 +20,13 @@
1920
"react-fontawesome": "^1.6.1",
2021
"react-native": "0.59.8",
2122
"react-native-fontawesome": "5.7.0",
22-
"react-native-web": "^0.10.0",
23+
"react-native-web": "^0.12.2",
2324
"tslib": "^1.9.3"
2425
},
2526
"devDependencies": {
2627
"@babel/core": "^7.4.4",
27-
"@babel/runtime": "^7.4.4",
2828
"@babel/preset-env": "^7.4.4",
29+
"@babel/runtime": "^7.4.4",
2930
"@teamthread/strict-css-modules-loader": "^0.0.3",
3031
"@types/jest": "^24.0.13",
3132
"@types/prop-types": "^15.7.1",
@@ -47,6 +48,7 @@
4748
"jest-cli": "^24.8.0",
4849
"metro-react-native-babel-preset": "^0.54.1",
4950
"node-sass": "^4.12.0",
51+
"patch-package": "^6.2.1",
5052
"postcss": "^7.0.16",
5153
"postcss-css-variables": "^0.12.0",
5254
"postcss-loader": "^3.0.0",

‎patches/react-native-web+0.12.2.patch

Lines changed: 245 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,245 @@
1+
diff --git a/node_modules/react-native-web/dist/cjs/exports/Image/index.js b/node_modules/react-native-web/dist/cjs/exports/Image/index.js
2+
index 36a3f8d..39811ed 100644
3+
--- a/node_modules/react-native-web/dist/cjs/exports/Image/index.js
4+
+++ b/node_modules/react-native-web/dist/cjs/exports/Image/index.js
5+
@@ -315,6 +315,7 @@ function (_React$Component) {
6+
accessibilityState = _this$props3.accessibilityState,
7+
accessible = _this$props3.accessible,
8+
blurRadius = _this$props3.blurRadius,
9+
+ className = _this$props3.className,
10+
defaultSource = _this$props3.defaultSource,
11+
draggable = _this$props3.draggable,
12+
importantForAccessibility = _this$props3.importantForAccessibility,
13+
@@ -385,6 +386,7 @@ function (_React$Component) {
14+
accessibilityRole: accessibilityRole,
15+
accessibilityState: accessibilityState,
16+
accessible: accessible,
17+
+ className: className,
18+
importantForAccessibility: importantForAccessibility,
19+
nativeID: nativeID,
20+
onLayout: this._createLayoutHandler(finalResizeMode),
21+
diff --git a/node_modules/react-native-web/dist/cjs/exports/ScrollView/ScrollViewBase.js b/node_modules/react-native-web/dist/cjs/exports/ScrollView/ScrollViewBase.js
22+
index f7a5343..ee63e58 100644
23+
--- a/node_modules/react-native-web/dist/cjs/exports/ScrollView/ScrollViewBase.js
24+
+++ b/node_modules/react-native-web/dist/cjs/exports/ScrollView/ScrollViewBase.js
25+
@@ -127,6 +127,7 @@ function (_React$Component) {
26+
accessibilityRole = _this$props.accessibilityRole,
27+
accessibilityState = _this$props.accessibilityState,
28+
children = _this$props.children,
29+
+ className = _this$props.className,
30+
importantForAccessibility = _this$props.importantForAccessibility,
31+
nativeID = _this$props.nativeID,
32+
onLayout = _this$props.onLayout,
33+
@@ -144,6 +145,7 @@ function (_React$Component) {
34+
accessibilityRole: accessibilityRole,
35+
accessibilityState: accessibilityState,
36+
children: children,
37+
+ className: className,
38+
importantForAccessibility: importantForAccessibility,
39+
nativeID: nativeID,
40+
onLayout: onLayout,
41+
diff --git a/node_modules/react-native-web/dist/cjs/exports/Text/index.js b/node_modules/react-native-web/dist/cjs/exports/Text/index.js
42+
index 473ffbe..a02e660 100644
43+
--- a/node_modules/react-native-web/dist/cjs/exports/Text/index.js
44+
+++ b/node_modules/react-native-web/dist/cjs/exports/Text/index.js
45+
@@ -50,7 +50,7 @@ function (_React$Component) {
46+
supportedProps.onKeyDown = this._createEnterHandler(onPress);
47+
}
48+
49+
- supportedProps.classList = [classes.text, hasTextAncestor === true && classes.textHasAncestor, numberOfLines === 1 && classes.textOneLine, numberOfLines != null && numberOfLines > 1 && classes.textMultiLine]; // allow browsers to automatically infer the language writing direction
50+
+ supportedProps.classList = [_this$props.className, classes.text, hasTextAncestor === true && classes.textHasAncestor, numberOfLines === 1 && classes.textOneLine, numberOfLines != null && numberOfLines > 1 && classes.textMultiLine]; // allow browsers to automatically infer the language writing direction
51+
52+
supportedProps.dir = dir !== undefined ? dir : 'auto';
53+
supportedProps.ref = forwardedRef;
54+
diff --git a/node_modules/react-native-web/dist/cjs/exports/View/filterSupportedProps.js b/node_modules/react-native-web/dist/cjs/exports/View/filterSupportedProps.js
55+
index 414da16..2deea35 100644
56+
--- a/node_modules/react-native-web/dist/cjs/exports/View/filterSupportedProps.js
57+
+++ b/node_modules/react-native-web/dist/cjs/exports/View/filterSupportedProps.js
58+
@@ -19,6 +19,7 @@ var supportedProps = {
59+
accessibilityState: true,
60+
accessible: true,
61+
children: true,
62+
+ className: true,
63+
disabled: true,
64+
importantForAccessibility: true,
65+
nativeID: true,
66+
diff --git a/node_modules/react-native-web/dist/cjs/exports/View/index.js b/node_modules/react-native-web/dist/cjs/exports/View/index.js
67+
index efe1676..75772fa 100644
68+
--- a/node_modules/react-native-web/dist/cjs/exports/View/index.js
69+
+++ b/node_modules/react-native-web/dist/cjs/exports/View/index.js
70+
@@ -59,7 +59,7 @@ function (_React$Component) {
71+
});
72+
}
73+
74+
- supportedProps.classList = [classes.view];
75+
+ supportedProps.classList = [this.props.className, classes.view];
76+
supportedProps.ref = this.props.forwardedRef;
77+
supportedProps.style = _StyleSheet.default.compose(hasTextAncestor && styles.inline, this.props.style);
78+
79+
diff --git a/node_modules/react-native-web/dist/exports/Image/index.js b/node_modules/react-native-web/dist/exports/Image/index.js
80+
index 8281e36..9682fc3 100644
81+
--- a/node_modules/react-native-web/dist/exports/Image/index.js
82+
+++ b/node_modules/react-native-web/dist/exports/Image/index.js
83+
@@ -296,6 +296,7 @@ function (_React$Component) {
84+
accessibilityRole = _this$props3.accessibilityRole,
85+
accessibilityState = _this$props3.accessibilityState,
86+
accessible = _this$props3.accessible,
87+
+ className = _this$props3.className,
88+
blurRadius = _this$props3.blurRadius,
89+
defaultSource = _this$props3.defaultSource,
90+
draggable = _this$props3.draggable,
91+
@@ -367,6 +368,7 @@ function (_React$Component) {
92+
accessibilityRole: accessibilityRole,
93+
accessibilityState: accessibilityState,
94+
accessible: accessible,
95+
+ className: className,
96+
importantForAccessibility: importantForAccessibility,
97+
nativeID: nativeID,
98+
onLayout: this._createLayoutHandler(finalResizeMode),
99+
diff --git a/node_modules/react-native-web/dist/exports/ScrollView/ScrollViewBase.js b/node_modules/react-native-web/dist/exports/ScrollView/ScrollViewBase.js
100+
index fb1155f..27743e9 100644
101+
--- a/node_modules/react-native-web/dist/exports/ScrollView/ScrollViewBase.js
102+
+++ b/node_modules/react-native-web/dist/exports/ScrollView/ScrollViewBase.js
103+
@@ -125,6 +125,7 @@ function (_React$Component) {
104+
accessibilityRole = _this$props.accessibilityRole,
105+
accessibilityState = _this$props.accessibilityState,
106+
children = _this$props.children,
107+
+ className = _this$props.className,
108+
importantForAccessibility = _this$props.importantForAccessibility,
109+
nativeID = _this$props.nativeID,
110+
onLayout = _this$props.onLayout,
111+
@@ -142,6 +143,7 @@ function (_React$Component) {
112+
accessibilityRole: accessibilityRole,
113+
accessibilityState: accessibilityState,
114+
children: children,
115+
+ className: className,
116+
importantForAccessibility: importantForAccessibility,
117+
nativeID: nativeID,
118+
onLayout: onLayout,
119+
diff --git a/node_modules/react-native-web/dist/exports/Text/index.js b/node_modules/react-native-web/dist/exports/Text/index.js
120+
index 9f08836..54745a3 100644
121+
--- a/node_modules/react-native-web/dist/exports/Text/index.js
122+
+++ b/node_modules/react-native-web/dist/exports/Text/index.js
123+
@@ -45,7 +45,7 @@ function (_React$Component) {
124+
supportedProps.onKeyDown = this._createEnterHandler(onPress);
125+
}
126+
127+
- supportedProps.classList = [classes.text, hasTextAncestor === true && classes.textHasAncestor, numberOfLines === 1 && classes.textOneLine, numberOfLines != null && numberOfLines > 1 && classes.textMultiLine]; // allow browsers to automatically infer the language writing direction
128+
+ supportedProps.classList = [this.props.className, classes.text, hasTextAncestor === true && classes.textHasAncestor, numberOfLines === 1 && classes.textOneLine, numberOfLines != null && numberOfLines > 1 && classes.textMultiLine]; // allow browsers to automatically infer the language writing direction
129+
130+
supportedProps.dir = dir !== undefined ? dir : 'auto';
131+
supportedProps.ref = forwardedRef;
132+
diff --git a/node_modules/react-native-web/dist/exports/View/filterSupportedProps.js b/node_modules/react-native-web/dist/exports/View/filterSupportedProps.js
133+
index e894fda..55b6b3a 100644
134+
--- a/node_modules/react-native-web/dist/exports/View/filterSupportedProps.js
135+
+++ b/node_modules/react-native-web/dist/exports/View/filterSupportedProps.js
136+
@@ -14,6 +14,7 @@ var supportedProps = {
137+
accessibilityState: true,
138+
accessible: true,
139+
children: true,
140+
+ className: true,
141+
disabled: true,
142+
importantForAccessibility: true,
143+
nativeID: true,
144+
diff --git a/node_modules/react-native-web/dist/exports/View/index.js b/node_modules/react-native-web/dist/exports/View/index.js
145+
index 68072e7..2c186d5 100644
146+
--- a/node_modules/react-native-web/dist/exports/View/index.js
147+
+++ b/node_modules/react-native-web/dist/exports/View/index.js
148+
@@ -54,7 +54,7 @@ function (_React$Component) {
149+
});
150+
}
151+
152+
- supportedProps.classList = [classes.view];
153+
+ supportedProps.classList = [this.props.className, classes.view];
154+
supportedProps.ref = this.props.forwardedRef;
155+
supportedProps.style = StyleSheet.compose(hasTextAncestor && styles.inline, this.props.style);
156+
157+
diff --git a/node_modules/react-native-web/src/exports/Image/index.js b/node_modules/react-native-web/src/exports/Image/index.js
158+
index 10d20d8..4e533dd 100644
159+
--- a/node_modules/react-native-web/src/exports/Image/index.js
160+
+++ b/node_modules/react-native-web/src/exports/Image/index.js
161+
@@ -199,6 +199,7 @@ class Image extends React.Component<ImageProps, State> {
162+
accessibilityState,
163+
accessible,
164+
blurRadius,
165+
+ className,
166+
defaultSource,
167+
draggable,
168+
importantForAccessibility,
169+
@@ -271,6 +272,7 @@ class Image extends React.Component<ImageProps, State> {
170+
accessibilityRole={accessibilityRole}
171+
accessibilityState={accessibilityState}
172+
accessible={accessible}
173+
+ className={className}
174+
importantForAccessibility={importantForAccessibility}
175+
nativeID={nativeID}
176+
onLayout={this._createLayoutHandler(finalResizeMode)}
177+
diff --git a/node_modules/react-native-web/src/exports/ScrollView/ScrollViewBase.js b/node_modules/react-native-web/src/exports/ScrollView/ScrollViewBase.js
178+
index 07737de..5c99fab 100644
179+
--- a/node_modules/react-native-web/src/exports/ScrollView/ScrollViewBase.js
180+
+++ b/node_modules/react-native-web/src/exports/ScrollView/ScrollViewBase.js
181+
@@ -81,6 +81,7 @@ export default class ScrollViewBase extends React.Component<Props> {
182+
accessibilityRole,
183+
accessibilityState,
184+
children,
185+
+ className,
186+
importantForAccessibility,
187+
nativeID,
188+
onLayout,
189+
@@ -101,6 +102,7 @@ export default class ScrollViewBase extends React.Component<Props> {
190+
accessibilityRole={accessibilityRole}
191+
accessibilityState={accessibilityState}
192+
children={children}
193+
+ className={className}
194+
importantForAccessibility={importantForAccessibility}
195+
nativeID={nativeID}
196+
onLayout={onLayout}
197+
diff --git a/node_modules/react-native-web/src/exports/Text/index.js b/node_modules/react-native-web/src/exports/Text/index.js
198+
index 5f79e86..fe4ff14 100644
199+
--- a/node_modules/react-native-web/src/exports/Text/index.js
200+
+++ b/node_modules/react-native-web/src/exports/Text/index.js
201+
@@ -34,6 +34,7 @@ class Text extends React.Component<TextProps> {
202+
}
203+
204+
supportedProps.classList = [
205+
+ this.props.className,
206+
classes.text,
207+
hasTextAncestor === true && classes.textHasAncestor,
208+
numberOfLines === 1 && classes.textOneLine,
209+
diff --git a/node_modules/react-native-web/src/exports/View/filterSupportedProps.js b/node_modules/react-native-web/src/exports/View/filterSupportedProps.js
210+
index 5ad7141..1fd1475 100644
211+
--- a/node_modules/react-native-web/src/exports/View/filterSupportedProps.js
212+
+++ b/node_modules/react-native-web/src/exports/View/filterSupportedProps.js
213+
@@ -15,6 +15,7 @@ const supportedProps = {
214+
accessibilityState: true,
215+
accessible: true,
216+
children: true,
217+
+ className: true,
218+
disabled: true,
219+
importantForAccessibility: true,
220+
nativeID: true,
221+
diff --git a/node_modules/react-native-web/src/exports/View/index.js b/node_modules/react-native-web/src/exports/View/index.js
222+
index 43902f6..e6f1437 100644
223+
--- a/node_modules/react-native-web/src/exports/View/index.js
224+
+++ b/node_modules/react-native-web/src/exports/View/index.js
225+
@@ -49,7 +49,7 @@ class View extends React.Component<ViewProps> {
226+
});
227+
}
228+
229+
- supportedProps.classList = [classes.view];
230+
+ supportedProps.classList = [this.props.className, classes.view];
231+
supportedProps.ref = this.props.forwardedRef;
232+
supportedProps.style = StyleSheet.compose(
233+
hasTextAncestor && styles.inline,
234+
diff --git a/node_modules/react-native-web/src/exports/View/types.js b/node_modules/react-native-web/src/exports/View/types.js
235+
index 853c252..2540b5a 100644
236+
--- a/node_modules/react-native-web/src/exports/View/types.js
237+
+++ b/node_modules/react-native-web/src/exports/View/types.js
238+
@@ -85,6 +85,7 @@ export type ViewProps = {
239+
},
240+
accessible?: boolean,
241+
children?: any,
242+
+ className?: string,
243+
forwardedRef?: any,
244+
hitSlop?: EdgeInsetsValue,
245+
importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants',

0 commit comments

Comments
 (0)