fix: web compatibility

Directions.js

@@ -0,0 +1,5 @@
+import { NativeModules } from 'react-native';
+
+const { RNGestureHandlerModule } = NativeModules;
+
+export default RNGestureHandlerModule.Direction;

Directions.web.js

@@ -0,0 +1,6 @@
+export default {
+  RIGHT: 1,
+  LEFT: 2,
+  UP: 4,
+  DOWN: 8,
+};

DrawerLayout.js

@@ -18,7 +18,6 @@ import {
   StatusBar,
   I18nManager,
 } from 'react-native';
-import { AnimatedEvent } from 'react-native/Libraries/Animated/src/AnimatedEvent';
 
 import { PanGestureHandler, TapGestureHandler, State } from './GestureHandler';
 
@@ -88,7 +87,7 @@ export default class DrawerLayout extends Component<PropType, StateType> {
     Right: 'right',
   };
   _openValue: ?Animated.Interpolation;
-  _onGestureEvent: ?AnimatedEvent;
+  _onGestureEvent: ?Animated.Event;
   _accessibilityIsModalView = React.createRef();
   _pointerEventsView = React.createRef();
   _panGestureHandler = React.createRef();
@@ -353,10 +352,16 @@ export default class DrawerLayout extends Component<PropType, StateType> {
       this.props.drawerWidth,
       options.velocity ? options.velocity : 0
     );
+
+    // We need to force the update, otherwise the overlay is not rerendered and it would not be clickable
+    this.forceUpdate();
   };
 
   closeDrawer = (options: DrawerMovementOptionType = {}) => {
     this._animateDrawer(undefined, 0, options.velocity ? options.velocity : 0);
+
+    // We need to force the update, otherwise the overlay is not rerendered and it would be still clickable
+    this.forceUpdate();
   };
 
   _renderOverlay = () => {
@@ -371,6 +376,7 @@ export default class DrawerLayout extends Component<PropType, StateType> {
       opacity: overlayOpacity,
       backgroundColor: this.props.overlayColor,
     };
+
     return (
       <TapGestureHandler onHandlerStateChange={this._onTapHandlerStateChange}>
         <Animated.View
@@ -455,7 +461,7 @@ export default class DrawerLayout extends Component<PropType, StateType> {
           ref={this._accessibilityIsModalView}
           accessibilityViewIsModal={this._drawerShown}
           style={[styles.drawerContainer, drawerStyles, drawerContainerStyle]}>
-          <View style={[styles.drawer, dynamicDrawerStyles]}>
+          <View style={dynamicDrawerStyles}>
             {this.props.renderNavigationView(this._openValue)}
           </View>
         </Animated.View>
@@ -509,7 +515,6 @@ export default class DrawerLayout extends Component<PropType, StateType> {
 }
 
 const styles = StyleSheet.create({
-  drawer: { flex: 0 },
   drawerContainer: {
     ...StyleSheet.absoluteFillObject,
     zIndex: 1001,

Example/App.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text, View, FlatList, StyleSheet, YellowBox } from 'react-native';
-import { createStackNavigator } from 'react-navigation';
+import { createAppContainer, createStackNavigator } from 'react-navigation';
 import { RectButton, ScrollView } from 'react-native-gesture-handler';
 
 import SwipeableTable from './swipeable';
@@ -156,4 +156,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default ExampleApp;
+export default createAppContainer(ExampleApp);

Example/android/build.gradle

@@ -4,7 +4,7 @@ buildscript {
     ext {
         buildToolsVersion = "27.0.3"
         minSdkVersion = 16
-        compileSdkVersion = 27
+        compileSdkVersion = 28
         targetSdkVersion = 26
         supportLibVersion = "27.1.1"
     }

Example/bottomSheet/index.js

@@ -4,7 +4,7 @@ import {
   PanGestureHandler,
   NativeViewGestureHandler,
   State,
-  TapGestureHandler
+  TapGestureHandler,
 } from 'react-native-gesture-handler';
 
 import { LoremIpsum } from '../common';

Example/combo/index.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import {
-  Alert,
   StyleSheet,
   ScrollView as RNScroll,
   Switch,
@@ -107,7 +106,7 @@ class ControlledSwitch extends React.Component {
 
 class Combo extends Component {
   _onClick = () => {
-    Alert.alert("I'm so touched");
+    alert("I'm so touched");
     this._scrollView.scrollTo({ y: 200, animated: true });
   };
   render() {
@@ -140,7 +139,7 @@ class Combo extends Component {
             <Swipeable>
               <RectButton
                 style={styles.rectButton}
-                onPress={() => Alert.alert('First row clicked')}>
+                onPress={() => alert('First row clicked')}>
                 <Text style={styles.buttonText}>
                   Swipe this row & observe highlight delay
                 </Text>
@@ -155,7 +154,7 @@ class Combo extends Component {
             <View style={styles.buttonDelimiter} />
             <RectButton
               style={styles.rectButton}
-              onPress={() => Alert.alert('Second row clicked')}>
+              onPress={() => alert('Second row clicked')}>
               <Text style={styles.buttonText}>
                 Second info icon will block scrolling
               </Text>
@@ -167,7 +166,7 @@ class Combo extends Component {
             <View style={styles.buttonDelimiter} />
             <RectButton
               style={styles.rectButton}
-              onPress={() => Alert.alert('Third row clicked')}>
+              onPress={() => alert('Third row clicked')}>
               <Text style={styles.buttonText}>
                 This one will cancel when you drag outside
               </Text>

Example/common.js

@@ -13,14 +13,12 @@ export class LoremIpsum extends React.Component {
     style: styles.lipsum,
   };
   loremIpsum() {
-    return LOREM_IPSUM.split(' ').slice(0, this.props.words).join(' ');
+    return LOREM_IPSUM.split(' ')
+      .slice(0, this.props.words)
+      .join(' ');
   }
   render() {
-    return (
-      <Text style={this.props.style}>
-        {this.loremIpsum()}
-      </Text>
-    );
+    return <Text style={this.props.style}>{this.loremIpsum()}</Text>;
   }
 }
 

Example/index.web.js

@@ -0,0 +1,6 @@
+import { AppRegistry } from 'react-native';
+
+import ExampleApp from './App';
+
+AppRegistry.registerComponent('App', () => ExampleApp);
+AppRegistry.runApplication('App', { rootTag: document.getElementById('root') });

Example/metro.config.js

@@ -1,36 +1,17 @@
 const blacklist = require('metro-config/src/defaults/blacklist');
 const path = require('path');
+const pkg = require('./package.json');
 
 const glob = require('glob-to-regexp');
 
 function getBlacklist() {
   const nodeModuleDirs = [
     glob(`${path.resolve(__dirname, '..')}/node_modules/*`),
-    glob(`${path.resolve(__dirname)}/node_modules/metro/node_modules/fbjs/*`),
+    glob(`${path.resolve(__dirname)}/node_modules/*/node_modules/fbjs/*`),
     glob(
       `${path.resolve(
         __dirname
-      )}/node_modules/create-react-context/node_modules/fbjs/*`
-    ),
-    glob(
-      `${path.resolve(
-        __dirname
-      )}/node_modules/create-react-class/node_modules/fbjs/*`
-    ),
-    glob(
-      `${path.resolve(
-        __dirname
-      )}/node_modules/react-navigation/node_modules/hoist-non-react-statics/*`
-    ),
-    glob(
-      `${path.resolve(
-        __dirname
-      )}/node_modules/react-navigation-tabs/node_modules/hoist-non-react-statics/*`
-    ),
-    glob(
-      `${path.resolve(
-        __dirname
-      )}/node_modules/react-native-safe-area-view/node_modules/hoist-non-react-statics/*`
+      )}/node_modules/*/node_modules/hoist-non-react-statics/*`
     ),
   ];
   return blacklist(nodeModuleDirs);
@@ -39,14 +20,7 @@ function getBlacklist() {
 module.exports = {
   resolver: {
     blacklistRE: getBlacklist(),
-    providesModuleNodeModules: [
-      'react-native',
-      'react',
-      'invariant',
-      'fbjs',
-      'prop-types',
-      'hoist-non-react-statics',
-    ],
+    providesModuleNodeModules: Object.keys(pkg.dependencies),
   },
   watchFolders: [path.resolve(__dirname, '..')],
 };

Example/multitap/index.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Alert, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import {
   LongPressGestureHandler,
@@ -14,17 +14,17 @@ export class PressBox extends Component {
   doubleTapRef = React.createRef();
   _onHandlerStateChange = event => {
     if (event.nativeEvent.state === State.ACTIVE) {
-      Alert.alert("I'm being pressed for so long");
+      alert("I'm being pressed for so long");
     }
   };
   _onSingleTap = event => {
     if (event.nativeEvent.state === State.ACTIVE) {
-      Alert.alert("I'm touched");
+      alert("I'm touched");
     }
   };
   _onDoubleTap = event => {
     if (event.nativeEvent.state === State.ACTIVE) {
-      Alert.alert('D0able tap, good job!');
+      alert('D0able tap, good job!');
     }
   };
   render() {

Example/package.json

@@ -4,6 +4,9 @@
   "private": true,
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start --config ../../../../metro.config.js",
+    "ios": "react-native run-ios",
+    "android": "react-native run-android",
+    "web": "webpack-dev-server --open",
     "test": "jest"
   },
   "dependencies": {
@@ -12,19 +15,32 @@
     "invariant": "^2.2.4",
     "prop-types": "^15.6.2",
     "react": "16.5.1",
-    "react-native": "0.58.0-rc.2",
+    "react-art": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "react-native": "^0.58.0-rc.2",
     "react-native-vector-icons": "5.0.0",
-    "react-navigation": "2.17.0"
+    "react-native-web": "^0.10.0-alpha.3",
+    "react-navigation": "^3.1"
   },
   "jest": {
     "preset": "react-native"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.3.0",
+    "@babel/polyfill": "^7.2.5",
+    "@babel/preset-env": "^7.3.1",
+    "@babel/runtime": "^7.3.1",
     "babel-jest": "23.6.0",
+    "babel-loader": "^8.0.5",
     "babel-plugin-module-resolver": "^3.1.1",
+    "babel-preset-react-native": "^4.0.1",
     "glob-to-regexp": "^0.4.0",
     "jest": "23.6.0",
     "metro-react-native-babel-preset": "0.45.2",
-    "react-test-renderer": "^16.5.2"
+    "react-test-renderer": "^16.5.2",
+    "url-loader": "^1.1.2",
+    "webpack": "^4.29.0",
+    "webpack-cli": "^3.2.1",
+    "webpack-dev-server": "^3.1.14"
   }
 }

Example/panResponder/index.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Alert, StyleSheet, View, PanResponder } from 'react-native';
+import { StyleSheet, View, PanResponder } from 'react-native';
 
 import { ScrollView } from 'react-native-gesture-handler';
 
@@ -94,7 +94,7 @@ class PanResponderExample extends Component {
 
 export default class Example extends Component {
   _onClick = () => {
-    Alert.alert("I'm so touched");
+    alert("I'm so touched");
   };
   render() {
     return (

Example/rows/index.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Alert, Animated, StyleSheet, Text, View } from 'react-native';
+import { Animated, StyleSheet, Text, View } from 'react-native';
 
 import {
   PanGestureHandler,
@@ -114,7 +114,7 @@ export const InfoButton = props => (
   <BorderlessButton
     {...props}
     style={styles.infoButton}
-    onPress={() => Alert.alert(`${props.name} info button clicked`)}>
+    onPress={() => alert(`${props.name} info button clicked`)}>
     <View style={styles.infoButtonBorders}>
       <Text style={styles.infoButtonText}>i</Text>
     </View>
@@ -132,7 +132,7 @@ export default class Example extends Component {
           <Swipeable>
             <RectButton
               style={styles.rectButton}
-              onPress={() => Alert.alert('First row clicked')}>
+              onPress={() => alert('First row clicked')}>
               <Text style={styles.buttonText}>
                 Swipe this row & observe highlight delay
               </Text>
@@ -147,7 +147,7 @@ export default class Example extends Component {
           <View style={styles.buttonDelimiter} />
           <RectButton
             style={styles.rectButton}
-            onPress={() => Alert.alert('Second row clicked')}>
+            onPress={() => alert('Second row clicked')}>
             <Text style={styles.buttonText}>
               Second info icon will block scrolling
             </Text>
@@ -160,7 +160,7 @@ export default class Example extends Component {
           <RectButton
             rippleColor="red"
             style={styles.rectButton}
-            onPress={() => Alert.alert('Third row clicked')}>
+            onPress={() => alert('Third row clicked')}>
             <Text style={styles.buttonText}>
               This one will cancel when you drag outside
             </Text>
@@ -175,7 +175,7 @@ export default class Example extends Component {
             <RectButton
               enabled={false}
               style={styles.rectButton}
-              onPress={() => Alert.alert('Fourth row clicked')}>
+              onPress={() => alert('Fourth row clicked')}>
               <Text style={styles.buttonText}>
                 This row is "disabled" but you can swipe it
               </Text>
@@ -184,12 +184,12 @@ export default class Example extends Component {
           </Swipeable>
           <LongPressGestureHandler
             onHandlerStateChange={({ nativeEvent }) =>
-              nativeEvent.state === State.ACTIVE && Alert.alert('Long')
+              nativeEvent.state === State.ACTIVE && alert('Long')
             }>
             <RectButton
               rippleColor="red"
               style={styles.rectButton}
-              onPress={() => Alert.alert('Fifth row clicked')}>
+              onPress={() => alert('Fifth row clicked')}>
               <Text style={styles.buttonText}>
                 Clickable row with long press handler
               </Text>