From 99457b0134e4c78bf251c44a0ea2cc09fd0fad02 Mon Sep 17 00:00:00 2001
From: Brent Vatne <brentvatne@gmail.com>
Date: Wed, 31 Oct 2018 15:09:03 -0700
Subject: [PATCH] Use BorderlessButton on iOS and animate the opacity

---
 packages/stack/src/views/BorderlessButton.js | 53 ++++++++++++++++++++
 packages/stack/src/views/TouchableItem.js    | 26 ++++++++--
 2 files changed, 74 insertions(+), 5 deletions(-)
 create mode 100644 packages/stack/src/views/BorderlessButton.js

diff --git a/packages/stack/src/views/BorderlessButton.js b/packages/stack/src/views/BorderlessButton.js
new file mode 100644
index 00000000..bd1578d3
--- /dev/null
+++ b/packages/stack/src/views/BorderlessButton.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Animated, Platform } from 'react-native';
+import { BaseButton } from 'react-native-gesture-handler';
+
+const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton);
+
+export default class BorderlessButton extends React.Component {
+  static propTypes = {
+    ...BaseButton.propTypes,
+    borderless: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    activeOpacity: 0.3,
+    borderless: true,
+  };
+
+  constructor(props) {
+    super(props);
+    this._opacity = new Animated.Value(1);
+  }
+
+  _onActiveStateChange = active => {
+    if (Platform.OS !== 'android') {
+      Animated.spring(this._opacity, {
+        stiffness: 1000,
+        damping: 500,
+        mass: 3,
+        overshootClamping: true,
+        restDisplacementThreshold: 0.01,
+        restSpeedThreshold: 0.01,
+        toValue: active ? this.props.activeOpacity : 1,
+      }).start();
+    }
+
+    this.props.onActiveStateChange && this.props.onActiveStateChange(active);
+  };
+
+  render() {
+    const { children, style, ...rest } = this.props;
+
+    return (
+      <AnimatedBaseButton
+        {...rest}
+        onActiveStateChange={this._onActiveStateChange}
+        style={[style, Platform.OS === 'ios' && { opacity: this._opacity }]}
+      >
+        {children}
+      </AnimatedBaseButton>
+    );
+  }
+}
diff --git a/packages/stack/src/views/TouchableItem.js b/packages/stack/src/views/TouchableItem.js
index c7a19b77..eca8f511 100644
--- a/packages/stack/src/views/TouchableItem.js
+++ b/packages/stack/src/views/TouchableItem.js
@@ -15,6 +15,8 @@ import {
   View,
 } from 'react-native';
 
+import BorderlessButton from './BorderlessButton';
+
 const ANDROID_VERSION_LOLLIPOP = 21;
 
 export default class TouchableItem extends React.Component {
@@ -46,13 +48,27 @@ export default class TouchableItem extends React.Component {
             this.props.borderless
           )}
         >
-          <View style={style}>{React.Children.only(this.props.children)}</View>
+          <View style={[style, { backgroundColor: '#fff' }]}>
+            {React.Children.only(this.props.children)}
+          </View>
         </TouchableNativeFeedback>
       );
+    } else if (Platform.OS === 'ios') {
+      return (
+        <BorderlessButton
+          hitSlop={{ top: 10, bottom: 10, right: 10, left: 10 }}
+          disallowInterruption
+          {...this.props}
+        >
+          {this.props.children}
+        </BorderlessButton>
+      );
+    } else {
+      return (
+        <TouchableOpacity {...this.props}>
+          {this.props.children}
+        </TouchableOpacity>
+      );
     }
-
-    return (
-      <TouchableOpacity {...this.props}>{this.props.children}</TouchableOpacity>
-    );
   }
 }