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.

Author: jaulz

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, '..')],
 };