Skip to content

Commit c9f7c46

Browse files
jaulzkmagiera
jaulz
authored and
kmagiera
committed
fix: web compatibility (#406)
The motivation for me was to use `react-navigation@^3` and I stumbled across quite a few missing imports. This PR will introduce some shims so it shouldn't be a problem anymore.
1 parent 60fec9c commit c9f7c46

31 files changed

+4708
-617
lines changed

‎Directions.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { NativeModules } from 'react-native';
2+
3+
const { RNGestureHandlerModule } = NativeModules;
4+
5+
export default RNGestureHandlerModule.Direction;

‎Directions.web.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
RIGHT: 1,
3+
LEFT: 2,
4+
UP: 4,
5+
DOWN: 8,
6+
};

‎DrawerLayout.js

+9-4
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import {
1818
StatusBar,
1919
I18nManager,
2020
} from 'react-native';
21-
import { AnimatedEvent } from 'react-native/Libraries/Animated/src/AnimatedEvent';
2221

2322
import { PanGestureHandler, TapGestureHandler, State } from './GestureHandler';
2423

@@ -88,7 +87,7 @@ export default class DrawerLayout extends Component<PropType, StateType> {
8887
Right: 'right',
8988
};
9089
_openValue: ?Animated.Interpolation;
91-
_onGestureEvent: ?AnimatedEvent;
90+
_onGestureEvent: ?Animated.Event;
9291
_accessibilityIsModalView = React.createRef();
9392
_pointerEventsView = React.createRef();
9493
_panGestureHandler = React.createRef();
@@ -353,10 +352,16 @@ export default class DrawerLayout extends Component<PropType, StateType> {
353352
this.props.drawerWidth,
354353
options.velocity ? options.velocity : 0
355354
);
355+
356+
// We need to force the update, otherwise the overlay is not rerendered and it would not be clickable
357+
this.forceUpdate();
356358
};
357359

358360
closeDrawer = (options: DrawerMovementOptionType = {}) => {
359361
this._animateDrawer(undefined, 0, options.velocity ? options.velocity : 0);
362+
363+
// We need to force the update, otherwise the overlay is not rerendered and it would be still clickable
364+
this.forceUpdate();
360365
};
361366

362367
_renderOverlay = () => {
@@ -371,6 +376,7 @@ export default class DrawerLayout extends Component<PropType, StateType> {
371376
opacity: overlayOpacity,
372377
backgroundColor: this.props.overlayColor,
373378
};
379+
374380
return (
375381
<TapGestureHandler onHandlerStateChange={this._onTapHandlerStateChange}>
376382
<Animated.View
@@ -455,7 +461,7 @@ export default class DrawerLayout extends Component<PropType, StateType> {
455461
ref={this._accessibilityIsModalView}
456462
accessibilityViewIsModal={this._drawerShown}
457463
style={[styles.drawerContainer, drawerStyles, drawerContainerStyle]}>
458-
<View style={[styles.drawer, dynamicDrawerStyles]}>
464+
<View style={dynamicDrawerStyles}>
459465
{this.props.renderNavigationView(this._openValue)}
460466
</View>
461467
</Animated.View>
@@ -509,7 +515,6 @@ export default class DrawerLayout extends Component<PropType, StateType> {
509515
}
510516

511517
const styles = StyleSheet.create({
512-
drawer: { flex: 0 },
513518
drawerContainer: {
514519
...StyleSheet.absoluteFillObject,
515520
zIndex: 1001,

‎Example/App.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { Text, View, FlatList, StyleSheet, YellowBox } from 'react-native';
3-
import { createStackNavigator } from 'react-navigation';
3+
import { createAppContainer, createStackNavigator } from 'react-navigation';
44
import { RectButton, ScrollView } from 'react-native-gesture-handler';
55

66
import SwipeableTable from './swipeable';
@@ -156,4 +156,4 @@ const styles = StyleSheet.create({
156156
},
157157
});
158158

159-
export default ExampleApp;
159+
export default createAppContainer(ExampleApp);

‎Example/android/build.gradle

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ buildscript {
44
ext {
55
buildToolsVersion = "27.0.3"
66
minSdkVersion = 16
7-
compileSdkVersion = 27
7+
compileSdkVersion = 28
88
targetSdkVersion = 26
99
supportLibVersion = "27.1.1"
1010
}

‎Example/bottomSheet/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
PanGestureHandler,
55
NativeViewGestureHandler,
66
State,
7-
TapGestureHandler
7+
TapGestureHandler,
88
} from 'react-native-gesture-handler';
99

1010
import { LoremIpsum } from '../common';

‎Example/combo/index.js

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { Component } from 'react';
22
import {
3-
Alert,
43
StyleSheet,
54
ScrollView as RNScroll,
65
Switch,
@@ -107,7 +106,7 @@ class ControlledSwitch extends React.Component {
107106

108107
class Combo extends Component {
109108
_onClick = () => {
110-
Alert.alert("I'm so touched");
109+
alert("I'm so touched");
111110
this._scrollView.scrollTo({ y: 200, animated: true });
112111
};
113112
render() {
@@ -140,7 +139,7 @@ class Combo extends Component {
140139
<Swipeable>
141140
<RectButton
142141
style={styles.rectButton}
143-
onPress={() => Alert.alert('First row clicked')}>
142+
onPress={() => alert('First row clicked')}>
144143
<Text style={styles.buttonText}>
145144
Swipe this row & observe highlight delay
146145
</Text>
@@ -155,7 +154,7 @@ class Combo extends Component {
155154
<View style={styles.buttonDelimiter} />
156155
<RectButton
157156
style={styles.rectButton}
158-
onPress={() => Alert.alert('Second row clicked')}>
157+
onPress={() => alert('Second row clicked')}>
159158
<Text style={styles.buttonText}>
160159
Second info icon will block scrolling
161160
</Text>
@@ -167,7 +166,7 @@ class Combo extends Component {
167166
<View style={styles.buttonDelimiter} />
168167
<RectButton
169168
style={styles.rectButton}
170-
onPress={() => Alert.alert('Third row clicked')}>
169+
onPress={() => alert('Third row clicked')}>
171170
<Text style={styles.buttonText}>
172171
This one will cancel when you drag outside
173172
</Text>

‎Example/common.js

+4-6
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,12 @@ export class LoremIpsum extends React.Component {
1313
style: styles.lipsum,
1414
};
1515
loremIpsum() {
16-
return LOREM_IPSUM.split(' ').slice(0, this.props.words).join(' ');
16+
return LOREM_IPSUM.split(' ')
17+
.slice(0, this.props.words)
18+
.join(' ');
1719
}
1820
render() {
19-
return (
20-
<Text style={this.props.style}>
21-
{this.loremIpsum()}
22-
</Text>
23-
);
21+
return <Text style={this.props.style}>{this.loremIpsum()}</Text>;
2422
}
2523
}
2624

‎Example/index.web.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { AppRegistry } from 'react-native';
2+
3+
import ExampleApp from './App';
4+
5+
AppRegistry.registerComponent('App', () => ExampleApp);
6+
AppRegistry.runApplication('App', { rootTag: document.getElementById('root') });

‎Example/metro.config.js

+4-30
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,17 @@
11
const blacklist = require('metro-config/src/defaults/blacklist');
22
const path = require('path');
3+
const pkg = require('./package.json');
34

45
const glob = require('glob-to-regexp');
56

67
function getBlacklist() {
78
const nodeModuleDirs = [
89
glob(`${path.resolve(__dirname, '..')}/node_modules/*`),
9-
glob(`${path.resolve(__dirname)}/node_modules/metro/node_modules/fbjs/*`),
10+
glob(`${path.resolve(__dirname)}/node_modules/*/node_modules/fbjs/*`),
1011
glob(
1112
`${path.resolve(
1213
__dirname
13-
)}/node_modules/create-react-context/node_modules/fbjs/*`
14-
),
15-
glob(
16-
`${path.resolve(
17-
__dirname
18-
)}/node_modules/create-react-class/node_modules/fbjs/*`
19-
),
20-
glob(
21-
`${path.resolve(
22-
__dirname
23-
)}/node_modules/react-navigation/node_modules/hoist-non-react-statics/*`
24-
),
25-
glob(
26-
`${path.resolve(
27-
__dirname
28-
)}/node_modules/react-navigation-tabs/node_modules/hoist-non-react-statics/*`
29-
),
30-
glob(
31-
`${path.resolve(
32-
__dirname
33-
)}/node_modules/react-native-safe-area-view/node_modules/hoist-non-react-statics/*`
14+
)}/node_modules/*/node_modules/hoist-non-react-statics/*`
3415
),
3516
];
3617
return blacklist(nodeModuleDirs);
@@ -39,14 +20,7 @@ function getBlacklist() {
3920
module.exports = {
4021
resolver: {
4122
blacklistRE: getBlacklist(),
42-
providesModuleNodeModules: [
43-
'react-native',
44-
'react',
45-
'invariant',
46-
'fbjs',
47-
'prop-types',
48-
'hoist-non-react-statics',
49-
],
23+
providesModuleNodeModules: Object.keys(pkg.dependencies),
5024
},
5125
watchFolders: [path.resolve(__dirname, '..')],
5226
};

‎Example/multitap/index.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Component } from 'react';
2-
import { Alert, StyleSheet, View } from 'react-native';
2+
import { StyleSheet, View } from 'react-native';
33

44
import {
55
LongPressGestureHandler,
@@ -14,17 +14,17 @@ export class PressBox extends Component {
1414
doubleTapRef = React.createRef();
1515
_onHandlerStateChange = event => {
1616
if (event.nativeEvent.state === State.ACTIVE) {
17-
Alert.alert("I'm being pressed for so long");
17+
alert("I'm being pressed for so long");
1818
}
1919
};
2020
_onSingleTap = event => {
2121
if (event.nativeEvent.state === State.ACTIVE) {
22-
Alert.alert("I'm touched");
22+
alert("I'm touched");
2323
}
2424
};
2525
_onDoubleTap = event => {
2626
if (event.nativeEvent.state === State.ACTIVE) {
27-
Alert.alert('D0able tap, good job!');
27+
alert('D0able tap, good job!');
2828
}
2929
};
3030
render() {

‎Example/package.json

+19-3
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
"private": true,
55
"scripts": {
66
"start": "node node_modules/react-native/local-cli/cli.js start --config ../../../../metro.config.js",
7+
"ios": "react-native run-ios",
8+
"android": "react-native run-android",
9+
"web": "webpack-dev-server --open",
710
"test": "jest"
811
},
912
"dependencies": {
@@ -12,19 +15,32 @@
1215
"invariant": "^2.2.4",
1316
"prop-types": "^15.6.2",
1417
"react": "16.5.1",
15-
"react-native": "0.58.0-rc.2",
18+
"react-art": "^16.7.0",
19+
"react-dom": "^16.7.0",
20+
"react-native": "^0.58.0-rc.2",
1621
"react-native-vector-icons": "5.0.0",
17-
"react-navigation": "2.17.0"
22+
"react-native-web": "^0.10.0-alpha.3",
23+
"react-navigation": "^3.1"
1824
},
1925
"jest": {
2026
"preset": "react-native"
2127
},
2228
"devDependencies": {
29+
"@babel/plugin-proposal-class-properties": "^7.3.0",
30+
"@babel/polyfill": "^7.2.5",
31+
"@babel/preset-env": "^7.3.1",
32+
"@babel/runtime": "^7.3.1",
2333
"babel-jest": "23.6.0",
34+
"babel-loader": "^8.0.5",
2435
"babel-plugin-module-resolver": "^3.1.1",
36+
"babel-preset-react-native": "^4.0.1",
2537
"glob-to-regexp": "^0.4.0",
2638
"jest": "23.6.0",
2739
"metro-react-native-babel-preset": "0.45.2",
28-
"react-test-renderer": "^16.5.2"
40+
"react-test-renderer": "^16.5.2",
41+
"url-loader": "^1.1.2",
42+
"webpack": "^4.29.0",
43+
"webpack-cli": "^3.2.1",
44+
"webpack-dev-server": "^3.1.14"
2945
}
3046
}

‎Example/panResponder/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Component } from 'react';
2-
import { Alert, StyleSheet, View, PanResponder } from 'react-native';
2+
import { StyleSheet, View, PanResponder } from 'react-native';
33

44
import { ScrollView } from 'react-native-gesture-handler';
55

@@ -94,7 +94,7 @@ class PanResponderExample extends Component {
9494

9595
export default class Example extends Component {
9696
_onClick = () => {
97-
Alert.alert("I'm so touched");
97+
alert("I'm so touched");
9898
};
9999
render() {
100100
return (

‎Example/rows/index.js

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Component } from 'react';
2-
import { Alert, Animated, StyleSheet, Text, View } from 'react-native';
2+
import { Animated, StyleSheet, Text, View } from 'react-native';
33

44
import {
55
PanGestureHandler,
@@ -114,7 +114,7 @@ export const InfoButton = props => (
114114
<BorderlessButton
115115
{...props}
116116
style={styles.infoButton}
117-
onPress={() => Alert.alert(`${props.name} info button clicked`)}>
117+
onPress={() => alert(`${props.name} info button clicked`)}>
118118
<View style={styles.infoButtonBorders}>
119119
<Text style={styles.infoButtonText}>i</Text>
120120
</View>
@@ -132,7 +132,7 @@ export default class Example extends Component {
132132
<Swipeable>
133133
<RectButton
134134
style={styles.rectButton}
135-
onPress={() => Alert.alert('First row clicked')}>
135+
onPress={() => alert('First row clicked')}>
136136
<Text style={styles.buttonText}>
137137
Swipe this row & observe highlight delay
138138
</Text>
@@ -147,7 +147,7 @@ export default class Example extends Component {
147147
<View style={styles.buttonDelimiter} />
148148
<RectButton
149149
style={styles.rectButton}
150-
onPress={() => Alert.alert('Second row clicked')}>
150+
onPress={() => alert('Second row clicked')}>
151151
<Text style={styles.buttonText}>
152152
Second info icon will block scrolling
153153
</Text>
@@ -160,7 +160,7 @@ export default class Example extends Component {
160160
<RectButton
161161
rippleColor="red"
162162
style={styles.rectButton}
163-
onPress={() => Alert.alert('Third row clicked')}>
163+
onPress={() => alert('Third row clicked')}>
164164
<Text style={styles.buttonText}>
165165
This one will cancel when you drag outside
166166
</Text>
@@ -175,7 +175,7 @@ export default class Example extends Component {
175175
<RectButton
176176
enabled={false}
177177
style={styles.rectButton}
178-
onPress={() => Alert.alert('Fourth row clicked')}>
178+
onPress={() => alert('Fourth row clicked')}>
179179
<Text style={styles.buttonText}>
180180
This row is "disabled" but you can swipe it
181181
</Text>
@@ -184,12 +184,12 @@ export default class Example extends Component {
184184
</Swipeable>
185185
<LongPressGestureHandler
186186
onHandlerStateChange={({ nativeEvent }) =>
187-
nativeEvent.state === State.ACTIVE && Alert.alert('Long')
187+
nativeEvent.state === State.ACTIVE && alert('Long')
188188
}>
189189
<RectButton
190190
rippleColor="red"
191191
style={styles.rectButton}
192-
onPress={() => Alert.alert('Fifth row clicked')}>
192+
onPress={() => alert('Fifth row clicked')}>
193193
<Text style={styles.buttonText}>
194194
Clickable row with long press handler
195195
</Text>

0 commit comments

Comments
 (0)