Web Support (software-mansion#555)

# Why

Using hammer.js to emulate the native gesture API. Ideally we'll reuse as much API logic as possible between native and web.

# TODO

## Components

- [x] `ScrollView`
- [ ] `Switch`
- [ ] `TextInput`
- [ ] `ToolbarAndroid`
- [ ] `DrawerLayoutAndroid`
- [ ] `FlatList`
- [x] `Swipeable`

## Gesture Handlers

- [x] `PanGestureHandler`
- [x] `RotationGestureHandler`
- [x] `PinchGestureHandler`
- [x] `TapGestureHandler`
- [x] `NativeViewGestureHandler`
- [x] `LongPressGestureHandler`
- [ ] `ForceTouchGestureHandler`
- [x] `FlingGestureHandler`

### Props 

- [x] `waitFor`
- [x] `shouldCancelWhenOutside`

### Native View Gesture Handler

- [x] Delay content touches
- [x] Disallow Interruptions

## Buttons

- [x] `RawButton`
- [x] `BaseButton`
- [x] `RectButton`
- [x] `BorderlessButton`
- [x] `PureNativeButton`

# Test Plan

TBD. Running in NCL by cloning into the [expo/expo](https://github.com/expo/expo) repo `packages/`. 

![expo hammer-low](https://user-images.githubusercontent.com/9664363/55779912-97fd6280-5a5b-11e9-83a3-010f272256f5.gif)

lol disregard frame-rate, it's smooth IRL.

Author: EvanBacon

Directions.web.js

@@ -1,14 +1,6 @@
 import React from 'react';
-import { TouchableOpacity } from 'react-native';
+import { View } from 'react-native';
 
-// Use TouchableOpacity with the transparency disabled to most closely emulate
-// the native view's ability to wrap children and apply styles.
 export default React.forwardRef((props, ref) => (
-  <TouchableOpacity
-    ref={ref}
-    accessibilityRole="button"
-    {...props}
-    activeOpacity={1.0}
-    focusOpacity={1.0}
-  />
+  <View ref={ref} accessibilityRole="button" {...props} />
 ));

GestureHandlerButton.web.js

@@ -0,0 +1,49 @@
+import { Direction } from './web/constants';
+import FlingGestureHandler from './web/FlingGestureHandler';
+import LongPressGestureHandler from './web/LongPressGestureHandler';
+import NativeViewGestureHandler from './web/NativeViewGestureHandler';
+import * as NodeManager from './web/NodeManager';
+import PanGestureHandler from './web/PanGestureHandler';
+import PinchGestureHandler from './web/PinchGestureHandler';
+import RotationGestureHandler from './web/RotationGestureHandler';
+import TapGestureHandler from './web/TapGestureHandler';
+
+const Gestures = {
+  PanGestureHandler,
+  RotationGestureHandler,
+  PinchGestureHandler,
+  TapGestureHandler,
+  NativeViewGestureHandler,
+  LongPressGestureHandler,
+  FlingGestureHandler,
+  // ForceTouchGestureHandler,
+};
+
+export default {
+  Direction,
+  handleSetJSResponder(tag, blockNativeResponder) {
+    console.warn('handleSetJSResponder: ', tag, blockNativeResponder);
+  },
+  handleClearJSResponder() {
+    console.warn('handleClearJSResponder: ');
+  },
+  createGestureHandler(handlerName, handlerTag, config) {
+    if (!(handlerName in Gestures))
+      throw new Error(`react-native-gesture-handler: ${handlerName} is not supported on web.`);
+    const GestureClass = Gestures[handlerName];
+    NodeManager.createGestureHandler(handlerTag, new GestureClass());
+    this.updateGestureHandler(handlerTag, config);
+  },
+  attachGestureHandler(handlerTag, newView) {
+    NodeManager.getHandler(handlerTag).setView(newView);
+  },
+  updateGestureHandler(handlerTag, newConfig) {
+    NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
+  },
+  getGestureHandlerNode(handlerTag) {
+    return NodeManager.getHandler(handlerTag);
+  },
+  dropGestureHandler(handlerTag) {
+    NodeManager.dropGestureHandler(handlerTag);
+  },
+};

RNGestureHandlerModule.web.js

@@ -315,7 +315,9 @@ export default class Swipeable extends Component<PropType, StateType> {
         minDeltaX={10}
         onGestureEvent={this._onGestureEvent}
         onHandlerStateChange={this._onHandlerStateChange}>
-        <Animated.View onLayout={this._onRowLayout} style={[styles.container, this.props.containerStyle]}>
+        <Animated.View
+          onLayout={this._onRowLayout}
+          style={[styles.container, this.props.containerStyle]}>
           {left}
           {right}
           <TapGestureHandler
@@ -327,7 +329,7 @@ export default class Swipeable extends Component<PropType, StateType> {
                 {
                   transform: [{ translateX: this._transX }],
                 },
-                this.props.childrenContainerStyle
+                this.props.childrenContainerStyle,
               ]}>
               {children}
             </Animated.View>

Swipeable.js

@@ -1,11 +1,20 @@
 import React from 'react';
-import { findNodeHandle, NativeModules, Touchable } from 'react-native';
+import {
+  findNodeHandle as findNodeHandleRN,
+  NativeModules,
+  Touchable,
+  Platform,
+} from 'react-native';
 import deepEqual from 'fbjs/lib/areEqual';
 import RNGestureHandlerModule from './RNGestureHandlerModule';
-
 import State from './State';
 
-const { UIManager } = NativeModules;
+function findNodeHandle(node) {
+  if (Platform.OS === 'web') return node;
+  return findNodeHandleRN(node);
+}
+
+const { UIManager = {} } = NativeModules;
 
 const customGHEventsConfig = {
   onGestureHandlerEvent: { registrationName: 'onGestureHandlerEvent' },
@@ -25,9 +34,9 @@ UIManager.genericDirectEventTypes = {
 
 // Wrap JS responder calls and notify gesture handler manager
 const {
-  setJSResponder: oldSetJSResponder,
-  clearJSResponder: oldClearJSResponder,
-  getConstants: oldGetConstants,
+  setJSResponder: oldSetJSResponder = () => {},
+  clearJSResponder: oldClearJSResponder = () => {},
+  getConstants: oldGetConstants = () => ({}),
 } = UIManager;
 UIManager.setJSResponder = (tag, blockNativeResponder) => {
   RNGestureHandlerModule.handleSetJSResponder(tag, blockNativeResponder);
@@ -88,6 +97,9 @@ function transformIntoHandlerTags(handlerIDs) {
     handlerIDs = [handlerIDs];
   }
 
+  if (Platform.OS === 'web') {
+    return handlerIDs.map(({ current }) => current).filter(handle => handle);
+  }
   // converts handler string IDs into their numeric tags
   return handlerIDs
     .map(

Swipeable.web.js

@@ -16,12 +16,12 @@
     "android/lib/build.gradle",
     "android/lib/src/main/java/",
     "ios/",
+    "web/",
     "__mocks__/",
     "touchables/**/*.js",
     "createHandler.js",
     "createHandler.web.js",
     "Directions.js",
-    "Directions.web.js",
     "DrawerLayout.js",
     "GestureHandler.js",
     "Gestures.js",
@@ -63,6 +63,7 @@
   },
   "homepage": "https://github.com/kmagiera/react-native-gesture-handler#readme",
   "dependencies": {
+    "hammerjs": "^2.0.8",
     "hoist-non-react-statics": "^2.3.1",
     "invariant": "^2.2.2",
     "prop-types": "^15.5.10"

createHandler.js

@@ -256,7 +256,9 @@ export default class GenericTouchable extends Component {
 
     return (
       <BaseButton
-        onHandlerStateChange={this.props.disabled ? null : this.onHandlerStateChange}
+        onHandlerStateChange={
+          this.props.disabled ? null : this.onHandlerStateChange
+        }
         onGestureEvent={this.onGestureEvent}
         hitSlop={this.props.hitSlop}
         {...this.props.extraButtonProps}>