[web] Fixed buttons (software-mansion#644)

The buttons don't style or function as expected in the browser. This fixes the bugs related to them (only tested on web so far).

Author: EvanBacon

GestureHandlerButton.web.js

@@ -1,14 +1,14 @@
 import React from 'react';
-import { TouchableWithoutFeedback, View } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 
-export default class RNGestureHandlerButton extends React.Component {
-  render() {
-    const { children, ...rest } = this.props;
-
-    return (
-      <TouchableWithoutFeedback accessibilityRole="button" {...rest}>
-        <View>{children}</View>
-      </TouchableWithoutFeedback>
-    );
-  }
-}
+// 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}
+  />
+));

PlatformConstants.web.js

@@ -1,3 +1,5 @@
 export default {
-  forceTouchAvailable: false,
+  get forceTouchAvailable() {
+    return false;
+  },
 };

touchables/TouchableOpacity.web.js

@@ -0,0 +1,2 @@
+import { TouchableOpacity } from 'react-native';
+export default TouchableOpacity;

touchables/TouchableWithoutFeedback.js

@@ -1,7 +1,9 @@
-import GenericTouchable from './GenericTouchable';
 import React from 'react';
+import GenericTouchable from './GenericTouchable';
 
-const TouchableWithoutFeedback = props => <GenericTouchable {...props} />;
+const TouchableWithoutFeedback = React.forwardRef((props, ref) => (
+  <GenericTouchable ref={ref} {...props} />
+));
 
 TouchableWithoutFeedback.defaultProps = GenericTouchable.defaultProps;