Merge pull request software-mansion#406 from jaulz/fix/web-compatibility

fix: web compatibility

Author: miracle2k

AnimatedEvent.js

@@ -0,0 +1,3 @@
+import AnimatedEvent from 'react-native/Libraries/Animated/src/AnimatedEvent';
+
+export default AnimatedEvent;

AnimatedEvent.web.js

@@ -0,0 +1,3 @@
+import AnimatedEvent from 'react-native-web/dist/vendor/react-native/Animated/AnimatedEvent';
+
+export default AnimatedEvent;

Directions.js

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

DrawerLayout.js

@@ -18,7 +18,7 @@ import {
   StatusBar,
   I18nManager,
 } from 'react-native';
-import { AnimatedEvent } from 'react-native/Libraries/Animated/src/AnimatedEvent';
+import { AnimatedEvent } from './AnimatedEvent';
 
 import { PanGestureHandler, TapGestureHandler, State } from './GestureHandler';
 
@@ -509,7 +509,7 @@ export default class DrawerLayout extends Component<PropType, StateType> {
 }
 
 const styles = StyleSheet.create({
-  drawer: { flex: 0 },
+  drawer: {},
   drawerContainer: {
     ...StyleSheet.absoluteFillObject,
     zIndex: 1001,

GestureHandler.js

@@ -22,6 +22,8 @@ import deepEqual from 'fbjs/lib/areEqual';
 import PropTypes from 'prop-types';
 
 import gestureHandlerRootHOC from './gestureHandlerRootHOC';
+import Directions from './Directions';
+import State from './State';
 
 const RNGestureHandlerModule = NativeModules.RNGestureHandlerModule;
 
@@ -51,10 +53,6 @@ UIManager.RCTView.directEventTypes = {
   },
 };
 
-const State = RNGestureHandlerModule.State;
-
-const Directions = RNGestureHandlerModule.Direction;
-
 let handlerTag = 1;
 const handlerIDToTag = {};
 

GestureHandler.web.js

@@ -0,0 +1,145 @@
+import React from 'react';
+import {
+  ScrollView,
+  Slider,
+  Switch,
+  TextInput,
+  ToolbarAndroid,
+  ViewPagerAndroid,
+  DrawerLayoutAndroid,
+  WebView,
+  FlatList,
+  TouchableWithoutFeedback,
+  findNodeHandle,
+} from 'react-native';
+import gestureHandlerRootHOC from './gestureHandlerRootHOC';
+import Directions from './Directions';
+import State from './State';
+
+// Factory for Handler components
+function createHandler(name, attachNativeHandler) {
+  return class Handler extends React.Component {
+    static displayName = name;
+
+    container = React.createRef();
+    detachNativeHandler = null;
+
+    componentDidMount() {
+      // Get current DOM node
+      const node = findNodeHandle(this.container.current);
+
+      // Attach handler to DOM node
+      const { enabled } = this.props;
+      if (node && attachNativeHandler && enabled !== false) {
+        this.detachNativeHandler = attachNativeHandler(node, this.props);
+      }
+    }
+
+    componentDidUpdate() {
+      // Get current DOM node
+      const node = findNodeHandle(this.container.current);
+
+      if (node && attachNativeHandler) {
+        // Detach existing handlers
+        if (this.detachNativeHandler) {
+          this.detachNativeHandler(node);
+        }
+
+        // Attach handler to DOM node again
+        const { enabled } = this.props;
+        if (enabled !== false) {
+          attachNativeHandler(node, this.props);
+        }
+      }
+    }
+
+    setNativeProps() {
+      // No implementation so far but is needed to avoid null calls
+    }
+
+    render() {
+      const { children, ...rest } = this.props;
+
+      // We don't want to create another layer, so instead we clone it only but keep the reference
+      const child = React.Children.only(children);
+      return React.cloneElement(child, {
+        ref: this.container,
+        ...rest,
+      });
+    }
+  };
+}
+
+// Create all Handler components with their respective handler functions
+// (at the moment only TapGestureHandler is properly supported)
+const NativeViewGestureHandler = createHandler('NativeViewGestureHandler');
+const TapGestureHandler = createHandler('TapGestureHandler', (node, props) => {
+  const { onHandlerStateChange = () => {} } = props;
+  const clickHandler = ({ x }) =>
+    onHandlerStateChange({
+      nativeEvent: {
+        oldState: State.ACTIVE,
+        state: State.UNDETERMINED,
+        x,
+      },
+    });
+  node.addEventListener('click', clickHandler);
+
+  // Detach event listeners
+  return () => {
+    node.removeEventListener('click', clickHandler);
+  };
+});
+const FlingGestureHandler = createHandler('FlingGestureHandler');
+const ForceTouchGestureHandler = createHandler('ForceTouchGestureHandler');
+const LongPressGestureHandler = createHandler('LongPressGestureHandler');
+const PanGestureHandler = createHandler('PanGestureHandler');
+const PinchGestureHandler = createHandler('PinchGestureHandler');
+const RotationGestureHandler = createHandler('RotationGestureHandler');
+
+// Factory for Button component
+// (at the moment this is a plain TouchableWithoutFeedback)
+function createButton(name) {
+  return class Button extends React.Component {
+    static displayName = name;
+
+    render() {
+      return <TouchableWithoutFeedback {...this.props} />;
+    }
+  };
+}
+
+const RawButton = createButton('RawButton');
+const BaseButton = createButton('BaseButton');
+const RectButton = createButton('RectButton');
+const BorderlessButton = createButton('BorderlessButton');
+
+// Export same components as in GestureHandler.js
+export {
+  ScrollView,
+  Slider,
+  Switch,
+  TextInput,
+  ToolbarAndroid,
+  ViewPagerAndroid,
+  DrawerLayoutAndroid,
+  WebView,
+  NativeViewGestureHandler,
+  TapGestureHandler,
+  FlingGestureHandler,
+  ForceTouchGestureHandler,
+  LongPressGestureHandler,
+  PanGestureHandler,
+  PinchGestureHandler,
+  RotationGestureHandler,
+  State,
+  /* Buttons */
+  RawButton,
+  BaseButton,
+  RectButton,
+  BorderlessButton,
+  /* Other */
+  FlatList,
+  gestureHandlerRootHOC,
+  Directions,
+};

State.js

@@ -0,0 +1,8 @@
+export default {
+  UNDETERMINED: 0,
+  FAILED: 1,
+  BEGAN: 2,
+  CANCELLED: 3,
+  ACTIVE: 4,
+  END: 5,
+};

Swipeable.js

@@ -6,7 +6,7 @@
 
 import React, { Component } from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
-import { AnimatedEvent } from 'react-native/Libraries/Animated/src/AnimatedEvent';
+import { AnimatedEvent } from './AnimatedEvent';
 
 import { PanGestureHandler, TapGestureHandler, State } from './GestureHandler';
 

Swipeable.web.js

@@ -0,0 +1,4 @@
+// At the moment no swipe is supported
+export default function Swipeable({ children }) {
+  return children;
+}